@extends('admin.layouts.app')

@section('title', 'Hospital Designations & Roles')

@section('content')
<div class="space-y-6" 
     x-data="{ 
         modalOpen: false, 
         isEditing: false, 
         formAction: '{{ route('admin.designations.store') }}',
         searchQuery: '',
         departmentFilter: '',
         statusFilter: '',
         designationsList: {{ json_encode($designations->items()) }},
         desigData: {
             id: '',
             name: '',
             code: '',
             department_id: '',
             description: '',
             is_active: true
         },
         openCreateModal() {
             this.isEditing = false;
             this.formAction = '{{ route('admin.designations.store') }}';
             this.desigData = {
                 id: '',
                 name: '',
                 code: '',
                 department_id: '{{ $departments->first()?->id ?? '' }}',
                 description: '',
                 is_active: true
             };
             this.modalOpen = true;
         },
         openEditModal(desig) {
             this.isEditing = true;
             this.formAction = '/admin/designations/' + desig.id;
             this.desigData = {
                 id: desig.id,
                 name: desig.name,
                 code: desig.code,
                 department_id: desig.department_id || '',
                 description: desig.description || '',
                 is_active: Boolean(desig.is_active)
             };
             this.modalOpen = true;
         },
         matches(desig) {
             const search = this.searchQuery.toLowerCase();
             const matchesSearch = !this.searchQuery || 
                 (desig.name + ' ' + desig.code + ' ' + (desig.description || '')).toLowerCase().includes(search);
             const matchesDept = !this.departmentFilter || 
                 (String(desig.department_id) === String(this.departmentFilter));
             const matchesStatus = !this.statusFilter || 
                 (this.statusFilter === '1' ? desig.is_active : !desig.is_active);
             return matchesSearch && matchesDept && matchesStatus;
         },
         get filteredCount() {
             return this.designationsList.filter(d => this.matches(d)).length;
         },
         resetFilters() {
             this.searchQuery = '';
             this.departmentFilter = '';
             this.statusFilter = '';
         }
     }">

    <!-- Page Header -->
    <div class="bg-white rounded-3xl p-6 sm:p-8 border border-slate-200/80 shadow-xs flex flex-col sm:flex-row sm:items-center justify-between gap-4">
        <div>
            <div class="flex items-center gap-2 mb-1.5">
                <span class="px-2.5 py-0.5 rounded-full text-[11px] font-bold bg-amber-50 text-amber-700 border border-amber-200">
                    <i class="fa-solid fa-award mr-1"></i> Professional Hierarchy
                </span>
            </div>
            <h1 class="text-2xl font-extrabold text-slate-800 tracking-tight">Hospital Designations & Clinical Roles</h1>
            <p class="text-xs text-slate-500 mt-1">Configure clinical titles, specialist designations, nursing hierarchy, and executive roles for staff assignment.</p>
        </div>

        <div>
            <button @click="openCreateModal()" 
                    class="w-full sm:w-auto px-5 py-3 bg-gradient-to-r from-sky-600 to-cyan-600 hover:from-sky-700 hover:to-cyan-700 text-white rounded-2xl text-xs font-bold shadow-md shadow-sky-600/20 hover:shadow-lg transition-all flex items-center justify-center gap-2 cursor-pointer">
                <i class="fa-solid fa-plus text-xs"></i>
                <span>Add New Designation</span>
            </button>
        </div>
    </div>

    <!-- Summary Stats Cards -->
    <div class="grid grid-cols-1 sm:grid-cols-3 gap-5">
        <div class="bg-white rounded-3xl p-5 border border-slate-200/80 shadow-xs flex items-center justify-between">
            <div>
                <p class="text-xs font-bold text-slate-400 uppercase tracking-wider">Total Roles</p>
                <p class="text-2xl font-extrabold text-slate-800 mt-1">{{ $stats['total'] }}</p>
            </div>
            <div class="w-11 h-11 rounded-2xl bg-amber-50 text-amber-600 flex items-center justify-center text-lg">
                <i class="fa-solid fa-award"></i>
            </div>
        </div>

        <div class="bg-white rounded-3xl p-5 border border-slate-200/80 shadow-xs flex items-center justify-between">
            <div>
                <p class="text-xs font-bold text-slate-400 uppercase tracking-wider">Active Designations</p>
                <p class="text-2xl font-extrabold text-emerald-600 mt-1">{{ $stats['active'] }}</p>
            </div>
            <div class="w-11 h-11 rounded-2xl bg-emerald-50 text-emerald-600 flex items-center justify-center text-lg">
                <i class="fa-solid fa-circle-check"></i>
            </div>
        </div>

        <div class="bg-white rounded-3xl p-5 border border-slate-200/80 shadow-xs flex items-center justify-between">
            <div>
                <p class="text-xs font-bold text-slate-400 uppercase tracking-wider">Total Assigned Workforce</p>
                <p class="text-2xl font-extrabold text-sky-600 mt-1">{{ $stats['total_staff'] }}</p>
            </div>
            <div class="w-11 h-11 rounded-2xl bg-sky-50 text-sky-600 flex items-center justify-center text-lg">
                <i class="fa-solid fa-users"></i>
            </div>
        </div>
    </div>

    <!-- Live DataTable Search & Filter Bar with Reset -->
    <div class="bg-white rounded-3xl p-5 border border-slate-200/80 shadow-xs">
        <div class="grid grid-cols-1 sm:grid-cols-12 gap-3 items-center">
            
            <!-- Live Instant Search -->
            <div class="sm:col-span-6 relative">
                <i class="fa-solid fa-magnifying-glass absolute left-3.5 top-1/2 -translate-y-1/2 text-slate-400 text-sm"></i>
                <input type="text" 
                       x-model="searchQuery" 
                       placeholder="Live search by designation title, code (e.g. SR-CARD)..." 
                       class="w-full pl-10 pr-4 py-2.5 bg-slate-50 border border-slate-200 rounded-2xl text-xs sm:text-sm text-slate-800 focus:bg-white focus:border-sky-500 focus:ring-2 focus:ring-sky-500/20 outline-none transition-all">
                <button type="button" 
                        x-show="searchQuery" 
                        @click="searchQuery = ''" 
                        class="absolute right-3 top-1/2 -translate-y-1/2 text-slate-400 hover:text-slate-600 text-xs">
                    <i class="fa-solid fa-circle-xmark"></i>
                </button>
            </div>

            <!-- Department Filter -->
            <div class="sm:col-span-3">
                <select x-model="departmentFilter" class="w-full px-3.5 py-2.5 bg-slate-50 border border-slate-200 rounded-2xl text-xs sm:text-sm text-slate-800 focus:bg-white focus:border-sky-500 focus:ring-2 focus:ring-sky-500/20 outline-none cursor-pointer">
                    <option value="">All Departments</option>
                    @foreach($departments as $dept)
                        <option value="{{ $dept->id }}">{{ $dept->name }}</option>
                    @endforeach
                </select>
            </div>

            <!-- Status Filter -->
            <div class="sm:col-span-2">
                <select x-model="statusFilter" class="w-full px-3.5 py-2.5 bg-slate-50 border border-slate-200 rounded-2xl text-xs sm:text-sm text-slate-800 focus:bg-white focus:border-sky-500 focus:ring-2 focus:ring-sky-500/20 outline-none cursor-pointer">
                    <option value="">All Statuses</option>
                    <option value="1">Active Only</option>
                    <option value="0">Inactive Only</option>
                </select>
            </div>

            <!-- Reset Filters Button -->
            <div class="sm:col-span-1 flex justify-end">
                <button type="button" 
                        @click="resetFilters()" 
                        title="Reset Search & Filters" 
                        class="w-full py-2.5 px-3 bg-slate-100 hover:bg-slate-200 text-slate-700 rounded-2xl text-xs font-bold transition-all flex items-center justify-center gap-1 cursor-pointer border border-slate-200">
                    <i class="fa-solid fa-rotate-left"></i>
                    <span class="sm:hidden">Reset</span>
                </button>
            </div>

        </div>
    </div>

    <!-- Designations Table (DataTable) -->
    <div class="bg-white rounded-3xl border border-slate-200/80 shadow-xs overflow-hidden">
        <div class="p-6 border-b border-slate-100 flex items-center justify-between">
            <h2 class="text-base font-bold text-slate-800 flex items-center gap-2">
                <i class="fa-solid fa-award text-amber-500"></i>
                <span>Registered Designations</span>
            </h2>
            <span class="text-xs text-slate-400 font-medium" x-text="'Showing ' + filteredCount + ' of {{ $designations->total() }} roles'"></span>
        </div>

        @if($designations->isEmpty())
            <div class="p-12 text-center">
                <div class="w-16 h-16 rounded-3xl bg-slate-100 text-slate-400 flex items-center justify-center text-2xl mx-auto mb-4">
                    <i class="fa-solid fa-award"></i>
                </div>
                <h3 class="text-sm font-bold text-slate-700">No designations found</h3>
                <p class="text-xs text-slate-400 mt-1 mb-4">Add your first professional clinical designation.</p>
                <button @click="openCreateModal()" class="px-4 py-2 bg-sky-600 text-white rounded-xl text-xs font-bold shadow-xs cursor-pointer">
                    + Add Designation
                </button>
            </div>
        @else
            <div class="overflow-x-auto">
                <table class="w-full text-left text-sm text-slate-600">
                    <thead class="bg-slate-50/80 text-[11px] font-bold text-slate-400 uppercase tracking-wider border-b border-slate-100">
                        <tr>
                            <th class="py-4 px-6">Code & Designation Title</th>
                            <th class="py-4 px-4">Associated Department</th>
                            <th class="py-4 px-4">Staff Count</th>
                            <th class="py-4 px-4">Status</th>
                            <th class="py-4 px-6 text-right">Actions</th>
                        </tr>
                    </thead>
                    <tbody class="divide-y divide-slate-100">
                        @foreach($designations as $designation)
                        <tr x-show="matches({{ json_encode($designation) }})" 
                            x-transition 
                            class="hover:bg-slate-50/70 transition-colors">
                            
                            <!-- Name & Code -->
                            <td class="py-4 px-6">
                                <div class="flex items-center gap-3">
                                    <span class="w-10 h-10 rounded-xl bg-amber-50 text-amber-700 border border-amber-200 flex items-center justify-center font-mono font-bold text-xs shrink-0">
                                        {{ substr($designation->code, 0, 4) }}
                                    </span>
                                    <div>
                                        <p class="font-bold text-slate-800 text-sm">{{ $designation->name }}</p>
                                        <span class="text-[10px] font-mono text-slate-400 font-bold">{{ $designation->code }}</span>
                                    </div>
                                </div>
                            </td>

                            <!-- Associated Department -->
                            <td class="py-4 px-4">
                                @if($designation->department)
                                    <span class="inline-flex items-center gap-1 font-semibold text-indigo-700 bg-indigo-50 px-2.5 py-1 rounded-xl text-xs border border-indigo-100">
                                        <i class="fa-solid fa-sitemap text-[10px]"></i>
                                        <span>{{ $designation->department->name }}</span>
                                    </span>
                                @else
                                    <span class="text-xs text-slate-400 italic">Hospital-Wide (All Depts)</span>
                                @endif
                            </td>

                            <!-- Staff Count -->
                            <td class="py-4 px-4">
                                <span class="inline-flex items-center gap-1.5 px-3 py-1 bg-slate-100 text-slate-700 border border-slate-200 rounded-full text-xs font-bold">
                                    <i class="fa-solid fa-user-doctor text-[10px] text-sky-600"></i>
                                    <span>{{ $designation->staff_count }} Assigned</span>
                                </span>
                            </td>

                            <!-- Status -->
                            <td class="py-4 px-4">
                                <form method="POST" action="{{ route('admin.designations.toggle', $designation) }}" class="inline">
                                    @csrf
                                    @method('PATCH')
                                    <button type="submit" title="Click to toggle status" class="cursor-pointer">
                                        @if($designation->is_active)
                                            <span class="inline-flex items-center gap-1 text-[11px] font-bold text-emerald-700 bg-emerald-50 px-2.5 py-0.5 rounded-full border border-emerald-200 hover:bg-emerald-100 transition-colors">
                                                <span class="w-1.5 h-1.5 rounded-full bg-emerald-500"></span> Active
                                            </span>
                                        @else
                                            <span class="inline-flex items-center gap-1 text-[11px] font-bold text-slate-500 bg-slate-100 px-2.5 py-0.5 rounded-full border border-slate-200 hover:bg-slate-200 transition-colors">
                                                <span class="w-1.5 h-1.5 rounded-full bg-slate-400"></span> Inactive
                                            </span>
                                        @endif
                                    </button>
                                </form>
                            </td>

                            <!-- Actions -->
                            <td class="py-4 px-6 text-right">
                                <div class="flex items-center justify-end gap-1.5">
                                    <button type="button" 
                                            @click="openEditModal({{ json_encode($designation) }})" 
                                            title="Edit Designation" 
                                            class="w-8 h-8 rounded-xl bg-slate-100 hover:bg-sky-50 text-slate-500 hover:text-sky-600 flex items-center justify-center transition-colors cursor-pointer">
                                        <i class="fa-solid fa-pen-to-square text-xs"></i>
                                    </button>

                                    <form method="POST" action="{{ route('admin.designations.destroy', $designation) }}" onsubmit="return confirm('Delete designation: {{ $designation->name }}?')" class="inline">
                                        @csrf
                                        @method('DELETE')
                                        <button type="submit" 
                                                title="Delete Designation" 
                                                class="w-8 h-8 rounded-xl bg-slate-100 hover:bg-red-50 text-slate-500 hover:text-red-600 flex items-center justify-center transition-colors cursor-pointer">
                                            <i class="fa-solid fa-trash-can text-xs"></i>
                                        </button>
                                    </form>
                                </div>
                            </td>
                        </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>

            @if($designations->hasPages())
                <div class="p-4 border-t border-slate-100">
                    {{ $designations->links() }}
                </div>
            @endif
        @endif
    </div>

    <!-- Create / Edit Designation Modal -->
    <div x-show="modalOpen" 
         x-transition:enter="transition ease-out duration-200"
         x-transition:enter-start="opacity-0"
         x-transition:enter-end="opacity-100"
         x-transition:leave="transition ease-in duration-150"
         x-transition:leave-start="opacity-100"
         x-transition:leave-end="opacity-0"
         class="fixed inset-0 z-50 flex items-center justify-center p-4 bg-slate-900/60 backdrop-blur-sm overflow-y-auto"
         style="display: none;">
        
        <div @click.outside="modalOpen = false" 
             class="bg-white w-full max-w-lg rounded-3xl shadow-2xl border border-slate-100 p-6 sm:p-8 relative my-8">
            
            <button @click="modalOpen = false" class="absolute top-5 right-5 text-slate-400 hover:text-slate-700 w-8 h-8 rounded-full flex items-center justify-center hover:bg-slate-100 cursor-pointer">
                <i class="fa-solid fa-xmark text-base"></i>
            </button>

            <!-- Modal Header -->
            <div class="flex items-center gap-3 mb-6">
                <div class="w-12 h-12 rounded-2xl bg-amber-50 text-amber-600 flex items-center justify-center text-xl">
                    <i class="fa-solid fa-award"></i>
                </div>
                <div>
                    <h3 class="text-lg font-bold text-slate-800" x-text="isEditing ? 'Edit Designation' : 'Add New Designation'"></h3>
                    <p class="text-xs text-slate-500">Configure medical title & departmental alignment</p>
                </div>
            </div>

            <!-- Form -->
            <form :action="formAction" method="POST" class="space-y-4">
                @csrf
                <template x-if="isEditing">
                    <input type="hidden" name="_method" value="PUT">
                </template>

                <!-- Name & Code -->
                <div class="grid grid-cols-1 sm:grid-cols-3 gap-4">
                    <div class="sm:col-span-2">
                        <label class="block text-xs font-bold text-slate-700 mb-1.5 uppercase tracking-wider">
                            Designation Title <span class="text-red-500">*</span>
                        </label>
                        <input type="text" 
                               name="name" 
                               x-model="desigData.name" 
                               required 
                               placeholder="e.g. Senior Consultant Cardiologist" 
                               class="w-full px-4 py-2.5 bg-slate-50 border border-slate-200 rounded-xl text-sm text-slate-800 focus:bg-white focus:border-sky-500 focus:ring-2 focus:ring-sky-500/20 outline-none transition-all">
                    </div>

                    <div>
                        <label class="block text-xs font-bold text-slate-700 mb-1.5 uppercase tracking-wider">
                            Code <span class="text-red-500">*</span>
                        </label>
                        <input type="text" 
                               name="code" 
                               x-model="desigData.code" 
                               required 
                               placeholder="e.g. SR-CARD" 
                               class="w-full px-4 py-2.5 bg-slate-50 border border-slate-200 rounded-xl text-sm text-slate-800 focus:bg-white focus:border-sky-500 focus:ring-2 focus:ring-sky-500/20 outline-none transition-all uppercase font-mono font-bold">
                    </div>
                </div>

                <!-- Department Association -->
                <div>
                    <label class="block text-xs font-bold text-slate-700 mb-1.5 uppercase tracking-wider">
                        Associated Department (Optional)
                    </label>
                    <select name="department_id" 
                            x-model="desigData.department_id" 
                            class="w-full px-4 py-2.5 bg-slate-50 border border-slate-200 rounded-xl text-sm text-slate-800 focus:bg-white focus:border-sky-500 focus:ring-2 focus:ring-sky-500/20 outline-none cursor-pointer">
                        <option value="">-- Hospital-Wide / All Departments --</option>
                        @foreach($departments as $dept)
                            <option value="{{ $dept->id }}">{{ $dept->name }} ({{ $dept->code }})</option>
                        @endforeach
                    </select>
                </div>

                <!-- Description -->
                <div>
                    <label class="block text-xs font-bold text-slate-700 mb-1.5 uppercase tracking-wider">
                        Role Description / Responsibilities
                    </label>
                    <textarea name="description" 
                              x-model="desigData.description" 
                              rows="2" 
                              placeholder="Brief description of clinical scope & responsibilities..." 
                              class="w-full px-4 py-2.5 bg-slate-50 border border-slate-200 rounded-xl text-sm text-slate-800 focus:bg-white focus:border-sky-500 focus:ring-2 focus:ring-sky-500/20 outline-none transition-all"></textarea>
                </div>

                <!-- Active status -->
                <div>
                    <label class="flex items-center gap-2.5 cursor-pointer">
                        <input type="checkbox" 
                               name="is_active" 
                               value="1" 
                               x-model="desigData.is_active" 
                               class="w-4 h-4 rounded-lg bg-slate-50 border-slate-300 text-sky-600 focus:ring-sky-500/30">
                        <span class="text-xs font-bold text-slate-700 select-none">Active Designation (Available for staff assignments)</span>
                    </label>
                </div>

                <!-- Actions -->
                <div class="pt-4 border-t border-slate-100 flex items-center justify-end gap-3">
                    <button type="button" 
                            @click="modalOpen = false" 
                            class="px-4 py-2.5 text-xs font-bold text-slate-600 hover:bg-slate-100 rounded-xl transition-colors cursor-pointer">
                        Cancel
                    </button>
                    
                    <button type="submit" 
                            class="px-5 py-2.5 text-xs font-bold text-white bg-gradient-to-r from-sky-600 to-cyan-600 hover:from-sky-700 hover:to-cyan-700 rounded-xl shadow-md shadow-sky-600/20 transition-all cursor-pointer">
                        <span x-text="isEditing ? 'Save Changes' : 'Create Designation'"></span>
                    </button>
                </div>
            </form>
        </div>
    </div>

</div>
@endsection