@extends('layouts.master')

@section('styles')
<link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet">
@endsection

@section('content')
<div class="d-flex justify-content-between align-items-center mb-3 mt-3">
    <h6>Edit Roles - {{ $admin->name }}</h6>
    <a href="{{ route('admin.admins.index') }}" class="btn btn-outline-secondary btn-sm">Back</a>
</div>

@if($errors->any())
<div class="alert alert-danger">
    <ul class="mb-0">@foreach($errors->all() as $e) <li>{{ $e }}</li> @endforeach</ul>
</div>
@endif
<div class="card">
    <div class="card-body">
<form method="POST" action="{{ route('admin.admins.updateRoles', $admin->id) }}">
    @csrf
    @method('PUT')

    <div class="mb-3">
        <label class="form-label">Roles</label>
        <select name="roles[]" class="form-control roles-select" multiple>
            @foreach($roles as $role)
                <option value="{{ $role->name }}" {{ in_array($role->name, old('roles', $assigned)) ? 'selected' : '' }}>
                    {{ $role->name }}
                </option>
            @endforeach
        </select>
        <small class="form-text text-muted">Select one or more roles for this admin.</small>
    </div>

    <button class="btn btn-primary">Save Roles</button>
</form>
</div>
</div>
@endsection

@section('scripts')
<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
<script>
document.addEventListener('DOMContentLoaded', function () {
    $('.roles-select').select2({ width: '100%' });
});
</script>
@endsection