@extends('admin.layouts.app')

@section('title', 'Hospital Departments & Clinical Units')

@section('content')
<div class="space-y-6" 
     x-data="{ 
         modalOpen: false, 
         isEditing: false, 
         formAction: '{{ route('admin.departments.store') }}',
         searchQuery: '',
         statusFilter: '',
         departmentsList: {{ json_encode($departments->items()) }},
         deptData: {
             id: '',
             name: '',
             code: '',
             head_of_department: '',
             location: '',
             contact_phone: '',
             description: '',
             is_active: true
         },
         openCreateModal() {
             this.isEditing = false;
             this.formAction = '{{ route('admin.departments.store') }}';
             this.deptData = {
                 id: '',
                 name: '',
                 code: '',
                 head_of_department: '',
                 location: '',
                 contact_phone: '',
                 description: '',
                 is_active: true
             };
             this.modalOpen = true;
         },
         openEditModal(dept) {
             this.isEditing = true;
             this.formAction = '/admin/departments/' + dept.id;
             this.deptData = {
                 id: dept.id,
                 name: dept.name,
                 code: dept.code,
                 head_of_department: dept.head_of_department || '',
                 location: dept.location || '',
                 contact_phone: dept.contact_phone || '',
                 description: dept.description || '',
                 is_active: Boolean(dept.is_active)
             };
             this.modalOpen = true;
         },
         matches(dept) {
             const search = this.searchQuery.toLowerCase();
             const matchesSearch = !this.searchQuery || 
                 (dept.name + ' ' + dept.code + ' ' + (dept.head_of_department || '') + ' ' + (dept.location || '') + ' ' + (dept.contact_phone || '')).toLowerCase().includes(search);
             const matchesStatus = !this.statusFilter || 
                 (this.statusFilter === '1' ? dept.is_active : !dept.is_active);
             return matchesSearch && matchesStatus;
         },
         get filteredCount() {
             return this.departmentsList.filter(d => this.matches(d)).length;
         },
         resetFilters() {
             this.searchQuery = '';
             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-indigo-50 text-indigo-700 border border-indigo-200">
                    <i class="fa-solid fa-sitemap mr-1"></i> Clinical Infrastructure
                </span>
            </div>
            <h1 class="text-2xl font-extrabold text-slate-800 tracking-tight">Hospital Departments</h1>
            <p class="text-xs text-slate-500 mt-1">Configure clinical divisions, specialty departments, inpatient wards, and assign medical heads.</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 Department</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 Departments</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-indigo-50 text-indigo-600 flex items-center justify-center text-lg">
                <i class="fa-solid fa-sitemap"></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 Units</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 Staff Assigned</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-8 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 departments by name, code (e.g. CARD), head doctor, floor..." 
                       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>

            <!-- Status Filter -->
            <div class="sm:col-span-3">
                <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 Units 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>

    <!-- Departments 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-hospital text-sky-600"></i>
                <span>Registered Departments</span>
            </h2>
            <span class="text-xs text-slate-400 font-medium" x-text="'Showing ' + filteredCount + ' of {{ $departments->total() }} units'"></span>
        </div>

        @if($departments->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-sitemap"></i>
                </div>
                <h3 class="text-sm font-bold text-slate-700">No departments found</h3>
                <p class="text-xs text-slate-400 mt-1 mb-4">Add your first clinical department to organize staff and services.</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 Department
                </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 & Department Name</th>
                            <th class="py-4 px-4">Head of Department</th>
                            <th class="py-4 px-4">Location / Floor</th>
                            <th class="py-4 px-4">Contact Phone</th>
                            <th class="py-4 px-4">Staff Assigned</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($departments as $department)
                        <tr x-show="matches({{ json_encode($department) }})" 
                            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-sky-50 text-sky-700 border border-sky-200 flex items-center justify-center font-mono font-bold text-xs shrink-0">
                                        {{ $department->code }}
                                    </span>
                                    <div>
                                        <p class="font-bold text-slate-800 text-sm">{{ $department->name }}</p>
                                        @if($department->description)
                                            <p class="text-xs text-slate-400 truncate max-w-xs">{{ $department->description }}</p>
                                        @endif
                                    </div>
                                </div>
                            </td>

                            <!-- Head of Dept -->
                            <td class="py-4 px-4">
                                <p class="text-xs font-bold text-slate-700">{{ $department->head_of_department ?? 'Not Assigned' }}</p>
                            </td>

                            <!-- Location -->
                            <td class="py-4 px-4">
                                <p class="text-xs text-slate-600 flex items-center gap-1.5">
                                    <i class="fa-solid fa-location-dot text-slate-400 text-[11px]"></i>
                                    <span>{{ $department->location ?? 'Main Building' }}</span>
                                </p>
                            </td>

                            <!-- Phone -->
                            <td class="py-4 px-4">
                                <p class="text-xs font-mono text-slate-500">{{ $department->contact_phone ?? 'N/A' }}</p>
                            </td>

                            <!-- Staff Count -->
                            <td class="py-4 px-4">
                                <a href="{{ route('admin.employees.index', ['department_id' => $department->id]) }}" class="inline-flex items-center gap-1.5 px-3 py-1 bg-slate-100 hover:bg-sky-50 text-slate-700 hover:text-sky-700 border border-slate-200 rounded-full text-xs font-bold transition-colors">
                                    <i class="fa-solid fa-users text-[10px]"></i>
                                    <span>{{ $department->staff_count }} Staff</span>
                                </a>
                            </td>

                            <!-- Status -->
                            <td class="py-4 px-4">
                                <form method="POST" action="{{ route('admin.departments.toggle', $department) }}" class="inline">
                                    @csrf
                                    @method('PATCH')
                                    <button type="submit" title="Click to toggle status" class="cursor-pointer">
                                        @if($department->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">
                                    <!-- Edit Button -->
                                    <button type="button" 
                                            @click="openEditModal({{ json_encode($department) }})" 
                                            title="Edit Department" 
                                            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>

                                    <!-- Delete Button -->
                                    <form method="POST" action="{{ route('admin.departments.destroy', $department) }}" onsubmit="return confirm('Delete department: {{ $department->name }}?')" class="inline">
                                        @csrf
                                        @method('DELETE')
                                        <button type="submit" 
                                                title="Delete Department" 
                                                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($departments->hasPages())
                <div class="p-4 border-t border-slate-100">
                    {{ $departments->links() }}
                </div>
            @endif
        @endif
    </div>

    <!-- Create / Edit Department 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-indigo-50 text-indigo-600 flex items-center justify-center text-xl">
                    <i class="fa-solid fa-sitemap"></i>
                </div>
                <div>
                    <h3 class="text-lg font-bold text-slate-800" x-text="isEditing ? 'Edit Department' : 'Add New Department'"></h3>
                    <p class="text-xs text-slate-500">Configure clinical unit and hospital division</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">
                            Department Name <span class="text-red-500">*</span>
                        </label>
                        <input type="text" 
                               name="name" 
                               x-model="deptData.name" 
                               required 
                               placeholder="e.g. Cardiology, Orthopedics" 
                               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="deptData.code" 
                               required 
                               placeholder="e.g. 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>

                <!-- Head of Department & Phone -->
                <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
                    <div>
                        <label class="block text-xs font-bold text-slate-700 mb-1.5 uppercase tracking-wider">
                            Head of Department / Lead Doctor
                        </label>
                        <input type="text" 
                               name="head_of_department" 
                               x-model="deptData.head_of_department" 
                               placeholder="e.g. Dr. Marcus Webb" 
                               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">
                            Contact Phone / Extension
                        </label>
                        <input type="text" 
                               name="contact_phone" 
                               x-model="deptData.contact_phone" 
                               placeholder="+1 (555) 011-2200" 
                               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>

                <!-- Location / Floor -->
                <div>
                    <label class="block text-xs font-bold text-slate-700 mb-1.5 uppercase tracking-wider">
                        Location / Floor
                    </label>
                    <input type="text" 
                           name="location" 
                           x-model="deptData.location" 
                           placeholder="e.g. Building A, 3rd Floor" 
                           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>

                <!-- Description -->
                <div>
                    <label class="block text-xs font-bold text-slate-700 mb-1.5 uppercase tracking-wider">
                        Description / Services
                    </label>
                    <textarea name="description" 
                              x-model="deptData.description" 
                              rows="2" 
                              placeholder="Brief overview of clinical specialties..." 
                              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="deptData.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 Department (Accepts patient admissions & staff)</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 Department'"></span>
                    </button>
                </div>
            </form>
        </div>
    </div>

</div>
@endsection