@extends('backend.layouts.app')

@section('title', 'Edit Role')

@push('styles')
    <link href="{{ asset('vendor/select2/dist/css/select2.min.css') }}" rel="stylesheet" />
@endpush

@section('content')
    @php
        $pageTitle = 'Edit Role';
        $indexRoute = 'roles.index';
        $indexLabel = 'Roles';
    @endphp
    @include('backend.layouts.partials._page_header')

    <div class="space-y-5 sm:space-y-6">
        <div class="rounded-2xl border border-gray-200 bg-white dark:border-gray-800 dark:bg-white/[0.03]">
            <div class="px-5 py-4 sm:px-6 sm:py-5">
                <h3 class="text-base font-medium text-gray-800 dark:text-white/90">
                    Edit Role: {{ $role->name }}
                </h3>
                <p class="mt-1 text-sm text-gray-500 dark:text-gray-400">
                    Update the role information and permissions below.
                </p>
            </div>

            <form action="{{ route('roles.update', $role->id) }}" method="POST">
                @csrf
                @method('PUT')

                <div class="space-y-6 border-t border-gray-100 p-5 sm:p-6 dark:border-gray-800">
                    <!-- Role Name Field -->
                    <div>
                        <label class="mb-1.5 block text-sm font-medium text-gray-700 dark:text-gray-400">
                            Role Name <span class="text-error-500">*</span>
                        </label>
                        <input type="text" name="name" value="{{ old('name', $role->name) }}"
                            placeholder="Enter role name"
                            class="dark:bg-dark-900 shadow-theme-xs focus:border-brand-300 focus:ring-brand-500/10 dark:focus:border-brand-800 h-11 w-full rounded-lg border bg-transparent px-4 py-2.5 pr-10 text-sm text-gray-800 placeholder:text-gray-400 focus:ring-3 focus:outline-hidden dark:border-gray-700 dark:bg-gray-900 dark:text-white/90 dark:placeholder:text-white/30 @error('name') border-error-300 focus:border-error-300 focus:ring-error-500/10 dark:border-error-700 @else border-gray-300 dark:border-gray-700 @enderror">
                        @error('name')
                            <p class="text-theme-xs text-error-500 mt-1.5">{{ $message }}</p>
                        @enderror
                    </div>

                    <!-- Permissions Field -->
                    <div>
                        @php
                            $selectedPermissions = old('permissions', $role->permissions->pluck('name')->toArray());
                        @endphp
                        <label class="mb-1.5 block text-sm font-medium text-gray-700 dark:text-gray-400">
                            Permissions
                        </label>
                        <select name="permissions[]" multiple
                            class="js-permission-select dark:bg-dark-900 shadow-theme-xs focus:border-brand-300 focus:ring-brand-500/10 dark:focus:border-brand-800 min-h-24 w-full rounded-lg border border-gray-300 bg-transparent px-4 py-2.5 text-sm text-gray-800 focus:ring-3 focus:outline-hidden dark:border-gray-700 dark:bg-gray-900 dark:text-white/90 @error('permissions') border-error-300 @enderror @error('permissions.*') border-error-300 @enderror">
                            @foreach ($permissions as $permission)
                                <option value="{{ $permission->name }}" @selected(in_array($permission->name, $selectedPermissions, true))>
                                    {{ $permission->name }}
                                </option>
                            @endforeach
                        </select>
                        <p class="text-theme-xs text-gray-500 dark:text-gray-400 mt-1.5">
                            Hold Ctrl (Windows) / Command (Mac) to choose multiple permissions.
                        </p>
                        @error('permissions')
                            <p class="text-theme-xs text-error-500 mt-1.5">{{ $message }}</p>
                        @enderror
                        @error('permissions.*')
                            <p class="text-theme-xs text-error-500 mt-1.5">{{ $message }}</p>
                        @enderror
                    </div>

                    <!-- Guard Field -->
                    <div>
                        @php
                            $guardNames = $guards ?? array_keys(config('auth.guards'));
                        @endphp
                        <label class="mb-1.5 block text-sm font-medium text-gray-700 dark:text-gray-400">
                            Guard Name
                        </label>
                        <div x-data="{ isOptionSelected: false }" class="relative z-20 bg-transparent">
                            <select name="guard_name"
                                class="dark:bg-dark-900 shadow-theme-xs focus:border-brand-300 focus:ring-brand-500/10 dark:focus:border-brand-800 h-11 w-full appearance-none rounded-lg border bg-transparent bg-none px-4 py-2.5 pr-11 text-sm text-gray-800 placeholder:text-gray-400 focus:ring-3 focus:outline-hidden dark:border-gray-700 dark:bg-gray-900 dark:text-white/90 dark:placeholder:text-white/30 @error('guard_name') border-error-300 focus:border-error-300 focus:ring-error-500/10 dark:border-error-700 @else border-gray-300 dark:border-gray-700 @enderror"
                                :class="isOptionSelected && 'text-gray-800 dark:text-white/90'"
                                @change="isOptionSelected = true">
                                <option value="" class="text-gray-700 dark:bg-gray-900 dark:text-gray-400">-- Select Guard --</option>
                                @foreach ($guardNames as $guard)
                                    <option value="{{ $guard }}" @selected(old('guard_name', $role->guard_name) == $guard)>
                                        {{ $guard }}
                                    </option>
                                @endforeach
                            </select>
                            <span class="pointer-events-none absolute top-1/2 right-4 z-30 -translate-y-1/2 text-gray-500 dark:text-gray-400">
                                <svg class="stroke-current" width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                                    <path d="M4.79175 7.396L10.0001 12.6043L15.2084 7.396" stroke="" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
                                </svg>
                            </span>
                        </div>
                        @error('guard_name')
                            <p class="text-theme-xs text-error-500 mt-1.5">{{ $message }}</p>
                        @enderror
                    </div>
                </div>

                <!-- Form Actions -->
                <div
                    class="flex items-center justify-end gap-3 border-t border-gray-100 px-5 py-4 sm:px-6 dark:border-gray-800">
                    <a href="{{ route('roles.index') }}"
                        class="inline-flex items-center gap-2 rounded-lg border border-gray-300 bg-white px-4 py-2.5 text-sm font-medium text-gray-700 shadow-theme-xs hover:bg-gray-50 dark:border-gray-700 dark:bg-gray-800 dark:text-gray-400 dark:hover:bg-gray-700">
                        Cancel
                    </a>
                    <button type="submit"
                        class="inline-flex items-center gap-2 rounded-lg bg-brand-500 px-4 py-2.5 text-sm font-medium text-white shadow-theme-xs hover:bg-brand-600">
                        Update
                    </button>
                </div>
            </form>
        </div>
    </div>
@endsection

@push('scripts')
    <script src="{{ asset('vendor/jquery.min.js') }}"></script>
    <script src="{{ asset('vendor/select2/dist/js/select2.min.js') }}"></script>
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const $permissionSelect = $('.js-permission-select');

            if ($permissionSelect.length) {
                $permissionSelect.select2({
                    searchable: true,
                    width: '100%',
                    placeholder: '-- Select permissions --',
                    closeOnSelect: false
                });
            }
        });
    </script>
@endpush