{{-- resources/views/permission/manager.blade.php --}}

<div class="row">
    <div class="col-12">
        <div class="card mb-4">

            {{-- Header --}}
            <div class="card-header d-flex justify-content-between align-items-center pb-0">
                <h6 class="mb-0">{{ $title }}</h6>

                @if ($mode === 'index')
                    <div class="d-flex align-items-center">

                        {{-- 1. Dropdown --}}
                        <div class="me-2">
                            <select wire:model="perPage" wire:change="resetPage" class="form-select form-select-sm"
                                style="width: 70px; display:inline-block;">
                                @foreach ($perPageOptions as $opt)
                                    <option value="{{ $opt }}">{{ $opt }}</option>
                                @endforeach
                            </select>
                        </div>

                        {{-- 2. Search box --}}
                        <div class="input-group input-group-outline me-2">
                            <input type="text" wire:model.debounce.500ms="search" wire:keydown.enter="resetPage"
                                class="form-control" placeholder="Search...">
                        </div>
                        <button wire:click="resetPage" class="btn btn-sm btn-outline-success me-2 m-0">
                            <i class="fas fa-search me-1" style="font-size: 1.2rem;"></i>
                        </button>

                        {{-- 3. Create button --}}
                        <button wire:click="showForm" class="btn btn-sm btn-info m-0">
                            Create
                        </button>
                    </div>
                @else
                    <button wire:click="showIndex" class="btn btn-sm btn-secondary">
                        ← Back to list
                    </button>
                @endif
            </div>

            {{-- Body --}}
            <div class="card-body p-3">
                @if (session()->has('message'))
                    <div class="alert alert-success">{{ session('message') }}</div>
                @endif

                @if ($mode === 'index')
                    {{-- SKELETON TABLE --}}
                    <x-skeleton-table :columns="3" :rows="5" height="3.5rem" />

                    {{-- ACTUAL TABLE --}}
                    <div wire:loading.remove class="table-responsive w-100">
                        <table class="table align-items-center mb-0 w-100">
                            <thead>
                                <tr style="height:3.5rem">
                                    <th class="text-center">ID</th>
                                    <th>Name</th>
                                    <th class="text-center">Actions</th>
                                </tr>
                            </thead>
                            <tbody>
                                @forelse($permissions as $p)
                                    <tr style="height:3.5rem">
                                        <td class="text-center align-middle">{{ $p->id }}</td>
                                        <td class="align-middle">{{ $p->name }}</td>
                                        <td class="text-center align-middle">
                                            <button wire:click="showForm({{ $p->id }})"
                                                class="btn btn-sm btn-outline-info me-1">
                                                Edit
                                            </button>
                                            <button x-data
                                                @click.prevent="
                                                    if (confirm('Are you sure you want to delete this permission?')) {
                                                        $wire.delete({{ $p->id }})
                                                    }
                                                "
                                                class="btn btn-sm btn-danger">
                                                Delete
                                            </button>
                                        </td>
                                    </tr>
                                @empty
                                    <tr>
                                        <td colspan="3" class="text-center">No permissions found.</td>
                                    </tr>
                                @endforelse
                            </tbody>
                        </table>
                    </div>

                    {{-- Pagination --}}
                    <div wire:loading.remove class="mt-3">
                        @if ($permissions->lastPage() > 1)
                            {{ $permissions->links() }}
                        @endif
                    </div>
                @else
                    {{-- SKELETON FORM --}}
                    <x-skeleton-form :fields="1" :button-count="2" />

                    {{-- ACTUAL FORM --}}
                    <div wire:loading.remove x-data>
                        <form>
                            <div class="mb-3">
                                <label class="form-label">Name</label>
                                <input type="text" wire:model.defer="name" class="form-control"
                                    placeholder="Enter permission name">
                                @error('name')
                                    <div class="text-danger text-xs mt-1">{{ $message }}</div>
                                @enderror
                            </div>
                            <div class="d-flex justify-content-end">
                                <button wire:click="showIndex" type="button" class="btn btn-secondary btn-sm me-2">
                                    Cancel
                                </button>
                                <button type="button"
                                    @click.prevent="
                                        if (confirm('Are you sure you want to {{ $editingId ? 'update' : 'create' }} this permission?')) {
                                            $wire.save()
                                        }
                                    "
                                    class="btn btn-info btn-sm">
                                    {{ $editingId ? 'Update' : 'Create' }}
                                </button>
                            </div>
                        </form>
                    </div>
                @endif

            </div>
        </div>
    </div>

    @script
        <script>
            document.title = @json($title);
        </script>
    @endscript
</div>