@extends('admin.layouts.app')

@section('title', 'Hospital Staff & Employees')

@section('content')
<div class="space-y-6" 
     x-data="{ 
         modalOpen: false, 
         detailModalOpen: false,
         scheduleModalOpen: false,
         isEditing: false, 
         formAction: '{{ route('admin.employees.store') }}',
         scheduleAction: '',
         photoPreview: null,
         defaultAvatar: '{{ asset('images/default-avatar.svg') }}',
         selectedEmployee: {},
         searchQuery: '',
         departmentFilter: '',
         designationFilter: '',
         shiftFilter: '',
         statusFilter: '',
         employeesList: {{ json_encode($employees) }},
         empData: {
             id: '',
             employee_id: '{{ $nextEmployeeId }}',
             name: '',
             email: '',
             phone: '',
             gender: 'Male',
             date_of_birth: '',
             joining_date: '{{ date('Y-m-d') }}',
             department_id: '{{ $departments->first()?->id ?? '' }}',
             designation_id: '{{ $designations->first()?->id ?? '' }}',
             qualification: 'MBBS, MD',
             experience_years: '5.0',
             shift_id: '{{ $shifts->first()?->id ?? '' }}',
             shift_rotation_type: 'Weekly Auto',
             employment_type: 'Full-Time',
             salary: '',
             address: '',
             emergency_contact: '',
             is_active: true
         },
         weeklySchedule: {
             monday: '{{ $shifts->first()?->id ?? '' }}',
             tuesday: '{{ $shifts->first()?->id ?? '' }}',
             wednesday: '{{ $shifts->first()?->id ?? '' }}',
             thursday: '{{ $shifts->first()?->id ?? '' }}',
             friday: '{{ $shifts->first()?->id ?? '' }}',
             saturday: 'off',
             sunday: 'off'
         },
         handlePhotoSelect(event) {
             const file = event.target.files[0];
             if (file) {
                 const reader = new FileReader();
                 reader.onload = (e) => {
                     this.photoPreview = e.target.result;
                 };
                 reader.readAsDataURL(file);
             }
         },
         openCreateModal() {
             this.isEditing = false;
             this.formAction = '{{ route('admin.employees.store') }}';
             this.photoPreview = null;
             this.empData = {
                 id: '',
                 employee_id: '{{ $nextEmployeeId }}',
                 name: '',
                 email: '',
                 phone: '',
                 gender: 'Male',
                 date_of_birth: '',
                 joining_date: '{{ date('Y-m-d') }}',
                 department_id: '{{ $departments->first()?->id ?? '' }}',
                 designation_id: '{{ $designations->first()?->id ?? '' }}',
                 qualification: 'MBBS, MD',
                 experience_years: '5.0',
                 shift_id: '{{ $shifts->first()?->id ?? '' }}',
                 shift_rotation_type: 'Weekly Auto',
                 employment_type: 'Full-Time',
                 salary: '',
                 address: '',
                 emergency_contact: '',
                 is_active: true
             };
             this.modalOpen = true;
         },
         openEditModal(emp) {
             this.isEditing = true;
             this.formAction = '/admin/employees/' + emp.id;
             this.photoPreview = emp.profile_photo_url;
             this.empData = {
                 id: emp.id,
                 employee_id: emp.employee_id,
                 name: emp.name,
                 email: emp.email,
                 phone: emp.phone || '',
                 gender: emp.gender || 'Male',
                 date_of_birth: emp.date_of_birth ? emp.date_of_birth.substring(0, 10) : '',
                 joining_date: emp.joining_date ? emp.joining_date.substring(0, 10) : '',
                 department_id: emp.department_id || (emp.department_relation ? emp.department_relation.id : '{{ $departments->first()?->id ?? '' }}'),
                 designation_id: emp.designation_id || (emp.designation_relation ? emp.designation_relation.id : '{{ $designations->first()?->id ?? '' }}'),
                 qualification: emp.qualification || '',
                 experience_years: emp.experience_years !== undefined ? emp.experience_years : '0',
                 shift_id: emp.shift_id || '',
                 shift_rotation_type: emp.shift_rotation_type || 'Weekly Auto',
                 employment_type: emp.employment_type || 'Full-Time',
                 salary: emp.salary || '',
                 address: emp.address || '',
                 emergency_contact: emp.emergency_contact || '',
                 is_active: Boolean(emp.is_active)
             };
             this.modalOpen = true;
         },
         openScheduleModal(emp) {
             this.selectedEmployee = emp;
             this.scheduleAction = '/admin/employees/' + emp.id + '/weekly-schedule';
             const sched = emp.weekly_shift_schedule || {};
             const defaultShift = emp.shift_id || '{{ $shifts->first()?->id ?? '' }}';
             
             this.weeklySchedule = {
                 monday: sched.monday !== undefined ? sched.monday : defaultShift,
                 tuesday: sched.tuesday !== undefined ? sched.tuesday : defaultShift,
                 wednesday: sched.wednesday !== undefined ? sched.wednesday : defaultShift,
                 thursday: sched.thursday !== undefined ? sched.thursday : defaultShift,
                 friday: sched.friday !== undefined ? sched.friday : defaultShift,
                 saturday: sched.saturday !== undefined ? sched.saturday : 'off',
                 sunday: sched.sunday !== undefined ? sched.sunday : 'off'
             };
             this.scheduleModalOpen = true;
         },
         openViewModal(emp) {
             this.selectedEmployee = emp;
             this.detailModalOpen = true;
         },
         applyPrimaryShiftToWeek() {
             const s = this.selectedEmployee.shift_id || '{{ $shifts->first()?->id ?? '' }}';
             this.weeklySchedule.monday = s;
             this.weeklySchedule.tuesday = s;
             this.weeklySchedule.wednesday = s;
             this.weeklySchedule.thursday = s;
             this.weeklySchedule.friday = s;
         },
         matches(emp) {
             const search = this.searchQuery.toLowerCase();
             const empDept = (emp.department_relation ? emp.department_relation.name : emp.department) || '';
             const empDesig = (emp.designation_relation ? emp.designation_relation.name : emp.designation) || '';
             const empShift = emp.shift ? emp.shift.name : '';

             const matchesSearch = !this.searchQuery || 
                 (emp.name + ' ' + emp.employee_id + ' ' + emp.email + ' ' + (emp.phone || '') + ' ' + empDept + ' ' + empDesig + ' ' + (emp.qualification || '') + ' ' + empShift).toLowerCase().includes(search);
             
             const matchesDept = !this.departmentFilter || 
                 (String(emp.department_id) === String(this.departmentFilter) || emp.department === this.departmentFilter);

             const matchesDesig = !this.designationFilter || 
                 (String(emp.designation_id) === String(this.designationFilter) || emp.designation === this.designationFilter);

             const matchesShift = !this.shiftFilter || 
                 (String(emp.shift_id) === String(this.shiftFilter));

             const matchesStatus = !this.statusFilter || 
                 (this.statusFilter === '1' ? emp.is_active : !emp.is_active);

             return matchesSearch && matchesDept && matchesDesig && matchesShift && matchesStatus;
         },
         get filteredCount() {
             return this.employeesList.filter(e => this.matches(e)).length;
         },
         resetFilters() {
             this.searchQuery = '';
             this.departmentFilter = '';
             this.designationFilter = '';
             this.shiftFilter = '';
             this.statusFilter = '';
         }
     }">

    <!-- Page Header & Action -->
    <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-teal-50 text-teal-700 border border-teal-200">
                    <i class="fa-solid fa-users mr-1"></i> Workforce & HR
                </span>
            </div>
            <h1 class="text-2xl font-extrabold text-slate-800 tracking-tight">Hospital Employees & Staff</h1>
            <p class="text-xs text-slate-500 mt-1">Manage hospital staff with dynamic designations, departments, experience in years, and instant search.</p>
        </div>

        <div class="flex flex-wrap items-center gap-3">
            <a href="{{ route('admin.designations.index') }}" 
               class="px-4 py-3 bg-slate-100 hover:bg-slate-200/80 text-slate-700 rounded-2xl text-xs font-bold transition-all flex items-center justify-center gap-2 border border-slate-200">
                <i class="fa-solid fa-award text-xs text-amber-600"></i>
                <span>Designations</span>
            </a>

            <a href="{{ route('admin.departments.index') }}" 
               class="px-4 py-3 bg-slate-100 hover:bg-slate-200/80 text-slate-700 rounded-2xl text-xs font-bold transition-all flex items-center justify-center gap-2 border border-slate-200">
                <i class="fa-solid fa-sitemap text-xs text-indigo-600"></i>
                <span>Departments</span>
            </a>

            <button @click="openCreateModal()" 
                    class="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-user-plus text-xs"></i>
                <span>Add Employee</span>
            </button>
        </div>
    </div>

    <!-- Summary Stats Cards -->
    <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 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 Staff</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-teal-50 text-teal-600 flex items-center justify-center text-lg">
                <i class="fa-solid fa-users"></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 On Duty</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-user-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">Doctors / Specialists</p>
                <p class="text-2xl font-extrabold text-sky-600 mt-1">{{ $stats['doctors'] }}</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-user-doctor"></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">Nursing Team</p>
                <p class="text-2xl font-extrabold text-indigo-600 mt-1">{{ $stats['nurses'] }}</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-user-nurse"></i>
            </div>
        </div>
    </div>

    <!-- Live DataTable Search & Multi-Filter Bar with Reset Button -->
    <div class="bg-white rounded-3xl p-5 border border-slate-200/80 shadow-xs">
        <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-12 gap-3 items-center">
            
            <!-- Live Instant Search -->
            <div class="lg:col-span-4 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 name, ID, email, role, phone..." 
                       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>

            <!-- Dynamic Department Filter -->
            <div class="lg:col-span-2">
                <select x-model="departmentFilter" class="w-full px-3 py-2.5 bg-slate-50 border border-slate-200 rounded-2xl text-xs 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>

            <!-- Dynamic Designation Filter -->
            <div class="lg:col-span-2">
                <select x-model="designationFilter" class="w-full px-3 py-2.5 bg-slate-50 border border-slate-200 rounded-2xl text-xs 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 Designations</option>
                    @foreach($designations as $desig)
                        <option value="{{ $desig->id }}">{{ $desig->name }}</option>
                    @endforeach
                </select>
            </div>

            <!-- Shift Filter -->
            <div class="lg:col-span-2">
                <select x-model="shiftFilter" class="w-full px-3 py-2.5 bg-slate-50 border border-slate-200 rounded-2xl text-xs 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 Shifts</option>
                    @foreach($shifts as $shift)
                        <option value="{{ $shift->id }}">{{ $shift->name }}</option>
                    @endforeach
                </select>
            </div>

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

            <!-- Reset Filters Button -->
            <div class="lg:col-span-1 flex justify-end">
                <button type="button" 
                        @click="resetFilters()" 
                        title="Reset Search & All 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="lg:hidden">Reset</span>
                </button>
            </div>

        </div>
    </div>

    <!-- Employees List 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-id-card text-sky-600"></i>
                <span>Hospital Staff Directory</span>
            </h2>
            <span class="text-xs text-slate-400 font-medium" x-text="'Showing ' + filteredCount + ' of ' + employeesList.length + ' staff members'"></span>
        </div>

        @if($employees->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-user-slash"></i>
                </div>
                <h3 class="text-sm font-bold text-slate-700">No employee records found</h3>
                <p class="text-xs text-slate-400 mt-1 mb-4">Add your first employee or adjust your search filters.</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 Employee
                </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">Employee ID & Profile</th>
                            <th class="py-4 px-4">Designation & Department</th>
                            <th class="py-4 px-4">Contact Info</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($employees as $employee)
                        <tr x-show="matches({{ json_encode($employee) }})" 
                            x-transition 
                            class="hover:bg-slate-50/70 transition-colors">
                            
                            <!-- Profile & ID -->
                            <td class="py-4 px-6">
                                <div class="flex items-center gap-3.5">
                                    <img src="{{ $employee->profile_photo_url }}" 
                                         alt="{{ $employee->name }}" 
                                         class="w-11 h-11 rounded-2xl object-cover ring-2 ring-slate-100 shrink-0">
                                    <div>
                                        <div class="flex items-center gap-2">
                                            <p class="font-bold text-slate-800 text-sm">{{ $employee->name }}</p>
                                            <span class="text-[10px] font-mono font-bold px-2 py-0.5 rounded-lg bg-sky-50 text-sky-700 border border-sky-200 shrink-0">
                                                {{ $employee->employee_id }}
                                            </span>
                                        </div>
                                        <p class="text-xs text-slate-400 mt-0.5">{{ $employee->gender }} • Joined {{ $employee->formatted_joining_date }}</p>
                                    </div>
                                </div>
                            </td>

                            <!-- Designation & Department -->
                            <td class="py-4 px-4">
                                <p class="text-xs font-bold text-slate-800">
                                    {{ $employee->designationRelation?->name ?? $employee->designation }}
                                </p>
                                <p class="text-[11px] text-slate-500 flex items-center gap-1.5 mt-0.5">
                                    <span class="inline-flex items-center gap-1 font-semibold text-indigo-700 bg-indigo-50 px-2 py-0.5 rounded-md text-[10px]">
                                        <i class="fa-solid fa-sitemap text-[9px]"></i>
                                        {{ $employee->departmentRelation?->name ?? $employee->department }}
                                    </span>
                                    @if($employee->qualification)
                                        <span class="text-slate-400">• {{ $employee->qualification }}</span>
                                    @endif
                                </p>
                            </td>

                            

                            <!-- Contact -->
                            <td class="py-4 px-4">
                                <p class="text-xs text-slate-700 font-medium">{{ $employee->email }}</p>
                                @if($employee->phone)
                                    <p class="text-[11px] text-slate-400 font-mono mt-0.5">{{ $employee->phone }}</p>
                                @endif
                            </td>

                            <!-- Status -->
                            <td class="py-4 px-4">
                                <form method="POST" action="{{ route('admin.employees.toggle', $employee) }}" class="inline">
                                    @csrf
                                    @method('PATCH')
                                    <button type="submit" title="Click to toggle status" class="cursor-pointer">
                                        @if($employee->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">
                                    <!-- Schedule Modal -->
                                    <button type="button" 
                                            @click="openScheduleModal({{ json_encode($employee) }})" 
                                            title="Edit Weekly Shift Schedule" 
                                            class="w-8 h-8 rounded-xl bg-slate-100 hover:bg-amber-50 text-slate-500 hover:text-amber-600 flex items-center justify-center transition-colors cursor-pointer">
                                        <i class="fa-solid fa-calendar-days text-xs"></i>
                                    </button>

                                    <!-- View Profile Details Page -->
                                    <a href="{{ route('admin.employees.show', $employee) }}" 
                                       title="View Full Details Page" 
                                       class="w-8 h-8 rounded-xl bg-slate-100 hover:bg-teal-50 text-slate-500 hover:text-teal-600 flex items-center justify-center transition-colors">
                                        <i class="fa-solid fa-eye text-xs"></i>
                                    </a>

                                    <!-- Edit Button -->
                                    <button type="button" 
                                            @click="openEditModal({{ json_encode($employee) }})" 
                                            title="Edit Employee" 
                                            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.employees.destroy', $employee) }}" onsubmit="return confirm('Delete employee: {{ $employee->name }} ({{ $employee->employee_id }})?')" class="inline">
                                        @csrf
                                        @method('DELETE')
                                        <button type="submit" 
                                                title="Delete Employee" 
                                                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>

            
        @endif
    </div>

    <!-- Add / Edit Employee 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-start sm:items-center justify-center p-3 sm:p-6 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-2xl rounded-3xl shadow-2xl border border-slate-100 p-6 sm:p-8 relative my-auto max-h-[90vh] flex flex-col overflow-hidden">
            
            <!-- Modal Header with Prominent Close Button -->
            <div class="flex items-center justify-between gap-3 mb-4 pb-4 border-b border-slate-100 shrink-0">
                <div class="flex items-center gap-3">
                    <div class="w-10 h-10 rounded-2xl bg-sky-50 text-sky-600 flex items-center justify-center text-lg shrink-0">
                        <i class="fa-solid fa-user-doctor"></i>
                    </div>
                    <div>
                        <h3 class="text-base sm:text-lg font-extrabold text-slate-800" x-text="isEditing ? 'Edit Employee Details' : 'Add New Hospital Employee'"></h3>
                        <p class="text-xs text-slate-500">Auto ID, dynamic backend department & designation tracking</p>
                    </div>
                </div>

                <button type="button" @click="modalOpen = false" title="Close Modal" class="w-9 h-9 rounded-2xl bg-slate-100 hover:bg-slate-200 text-slate-500 hover:text-slate-800 flex items-center justify-center transition-colors cursor-pointer shrink-0">
                    <i class="fa-solid fa-xmark text-lg"></i>
                </button>
            </div>

            <!-- Form -->
            <form :action="formAction" method="POST" enctype="multipart/form-data" class="flex flex-col flex-1 overflow-hidden">
                @csrf
                <template x-if="isEditing">
                    <input type="hidden" name="_method" value="PUT">
                </template>

                <div class="overflow-y-auto pr-1 flex-1 space-y-4">

                <!-- Profile Avatar Preview & ID -->
                <div class="p-4 bg-slate-50 rounded-2xl border border-slate-200 flex flex-col sm:flex-row items-center justify-between gap-4">
                    <div class="flex items-center gap-3.5">
                        <div class="relative w-16 h-16 rounded-2xl bg-white p-1 shadow-sm ring-2 ring-sky-500/30 overflow-hidden shrink-0">
                            <img :src="photoPreview || defaultAvatar" alt="Profile Preview" class="w-full h-full object-cover rounded-xl">
                        </div>
                        <div>
                            <span class="text-xs font-bold text-slate-700 block">Default Employee Profile Avatar</span>
                            <span class="text-[11px] text-slate-400">System standard profile avatar enabled</span>
                        </div>
                    </div>

                    <!-- Auto-Generated ID Indicator -->
                    <div class="px-3.5 py-2 bg-white rounded-xl border border-slate-200 text-center shrink-0">
                        <span class="text-[10px] font-bold text-slate-400 uppercase tracking-wider block">Employee ID</span>
                        <input type="text" 
                               name="employee_id" 
                               x-model="empData.employee_id" 
                               class="text-xs font-mono font-extrabold text-sky-600 bg-transparent text-center outline-none w-24">
                    </div>
                </div>

                <!-- Name & Email -->
                <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">
                            Full Name <span class="text-red-500">*</span>
                        </label>
                        <input type="text" 
                               name="name" 
                               x-model="empData.name" 
                               required 
                               placeholder="e.g. Dr. Robert Mitchell" 
                               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">
                            Email Address <span class="text-red-500">*</span>
                        </label>
                        <input type="email" 
                               name="email" 
                               x-model="empData.email" 
                               required 
                               placeholder="employee@hospital.com" 
                               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>

                <!-- Phone & Gender -->
                <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">
                            Contact Phone
                        </label>
                        <input type="tel" 
                               name="phone" 
                               x-model="empData.phone" 
                               placeholder="+1 (555) 000-0000" 
                               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">
                            Gender <span class="text-red-500">*</span>
                        </label>
                        <select name="gender" 
                                x-model="empData.gender" 
                                required 
                                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="Male">Male</option>
                            <option value="Female">Female</option>
                            <option value="Other">Other</option>
                        </select>
                    </div>
                </div>

                <!-- Backend Dynamic Department & Backend Dynamic Designation -->
                <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">
                            Department <span class="text-red-500">*</span>
                        </label>
                        <select name="department_id" 
                                x-model="empData.department_id" 
                                required 
                                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">
                            @foreach($departments as $dept)
                                <option value="{{ $dept->id }}">{{ $dept->name }} ({{ $dept->code }})</option>
                            @endforeach
                        </select>
                    </div>

                    <div>
                        <label class="block text-xs font-bold text-slate-700 mb-1.5 uppercase tracking-wider">
                            Designation / Role <span class="text-red-500">*</span>
                        </label>
                        <select name="designation_id" 
                                x-model="empData.designation_id" 
                                required 
                                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">
                            @foreach($designations as $desig)
                                <option value="{{ $desig->id }}">{{ $desig->name }}</option>
                            @endforeach
                        </select>
                    </div>
                </div>

                <!-- Experience in Years & Qualification -->
                <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 flex items-center justify-between">
                            <span>Experience (in Years) <span class="text-red-500">*</span></span>
                            <span class="text-[10px] text-amber-600 font-bold" x-text="(empData.experience_years || '0') + ' Years'"></span>
                        </label>
                        <input type="number" 
                               step="0.5" 
                               min="0" 
                               max="60" 
                               name="experience_years" 
                               x-model="empData.experience_years" 
                               required 
                               placeholder="e.g. 5.0, 8.5" 
                               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">
                            Qualification / Degrees
                        </label>
                        <input type="text" 
                               name="qualification" 
                               x-model="empData.qualification" 
                               placeholder="e.g. MBBS, MD, B.Sc Nursing" 
                               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>

                <!-- Shift Assignment & Rotation Type -->
                <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">
                            Primary Assigned Shift
                        </label>
                        <select name="shift_id" 
                                x-model="empData.shift_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="">-- No Shift Assigned --</option>
                            @foreach($shifts as $shift)
                                <option value="{{ $shift->id }}">{{ $shift->name }} ({{ $shift->time_range }})</option>
                            @endforeach
                        </select>
                    </div>

                    <div>
                        <label class="block text-xs font-bold text-slate-700 mb-1.5 uppercase tracking-wider">
                            Shift Auto-Update Mode
                        </label>
                        <select name="shift_rotation_type" 
                                x-model="empData.shift_rotation_type" 
                                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="Weekly Auto">Weekly Auto (Editable Schedule)</option>
                            <option value="Fixed">Fixed Schedule</option>
                            <option value="Custom">Custom Shift Roster</option>
                        </select>
                    </div>
                </div>

                <!-- Employment Type & Joining Date -->
                <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">
                            Employment Type
                        </label>
                        <select name="employment_type" 
                                x-model="empData.employment_type" 
                                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="Full-Time">Full-Time</option>
                            <option value="Part-Time">Part-Time</option>
                            <option value="Contract">Contract</option>
                            <option value="On-Call">On-Call</option>
                        </select>
                    </div>

                    <div>
                        <label class="block text-xs font-bold text-slate-700 mb-1.5 uppercase tracking-wider">
                            Joining Date
                        </label>
                        <input type="date" 
                               name="joining_date" 
                               x-model="empData.joining_date" 
                               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>

                <!-- Salary -->
                <div>
                    <label class="block text-xs font-bold text-slate-700 mb-1.5 uppercase tracking-wider">
                        Monthly Salary ($)
                    </label>
                    <input type="number" 
                           step="0.01" 
                           name="salary" 
                           x-model="empData.salary" 
                           placeholder="e.g. 15000.00" 
                           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>

                <!-- Active Status -->
                <div class="pt-2">
                    <label class="flex items-center gap-2.5 cursor-pointer">
                        <input type="checkbox" 
                               name="is_active" 
                               value="1" 
                               x-model="empData.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 Employee (Available for duty roster & shifts)</span>
                    </label>
                </div>

                </div>

                <!-- Modal Actions -->
                <div class="pt-4 mt-2 border-t border-slate-100 flex items-center justify-end gap-3 shrink-0">
                    <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 Employee Record'"></span>
                    </button>
                </div>
            </form>
        </div>
    </div>

    <!-- Weekly Shift Schedule Modal (Editable Day-by-Day Roster) -->
    <div x-show="scheduleModalOpen" 
         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-start sm:items-center justify-center p-3 sm:p-6 bg-slate-900/60 backdrop-blur-sm overflow-y-auto"
         style="display: none;">
        
        <div @click.outside="scheduleModalOpen = false" 
             class="bg-white w-full max-w-xl rounded-3xl shadow-2xl border border-slate-100 p-6 sm:p-8 relative my-auto max-h-[90vh] flex flex-col overflow-hidden">
            
            <!-- Modal Header -->
            <div class="flex items-center justify-between gap-3 mb-4 pb-4 border-b border-slate-100 shrink-0">
                <div class="flex items-center gap-3">
                    <div class="w-10 h-10 rounded-2xl bg-amber-50 text-amber-600 flex items-center justify-center text-lg shrink-0">
                        <i class="fa-solid fa-calendar-week"></i>
                    </div>
                    <div>
                        <h3 class="text-base sm:text-lg font-bold text-slate-800">Weekly Shift Schedule</h3>
                        <p class="text-xs text-slate-500">
                            Staff: <strong class="text-slate-800" x-text="selectedEmployee.name"></strong> (<span class="font-mono text-sky-600" x-text="selectedEmployee.employee_id"></span>)
                        </p>
                    </div>
                </div>

                <button type="button" @click="scheduleModalOpen = false" title="Close Modal" class="w-9 h-9 rounded-2xl bg-slate-100 hover:bg-slate-200 text-slate-500 hover:text-slate-800 flex items-center justify-center transition-colors cursor-pointer shrink-0">
                    <i class="fa-solid fa-xmark text-lg"></i>
                </button>
            </div>

            <!-- Form -->
            <form :action="scheduleAction" method="POST" class="flex flex-col flex-1 overflow-hidden">
                @csrf
                @method('PUT')

                <div class="overflow-y-auto pr-1 flex-1 space-y-4">
                @method('PUT')

                <div class="flex items-center justify-between p-3 bg-slate-50 rounded-2xl border border-slate-200 text-xs">
                    <span class="text-slate-600 font-medium">Quick Preset:</span>
                    <button type="button" @click="applyPrimaryShiftToWeek()" class="px-3 py-1 bg-sky-50 text-sky-700 hover:bg-sky-100 rounded-xl font-bold border border-sky-200 cursor-pointer transition-colors">
                        Auto-Fill Mon-Fri with Primary Shift
                    </button>
                </div>

                <!-- Rotation Mode -->
                <div>
                    <label class="block text-xs font-bold text-slate-700 mb-1 uppercase tracking-wider">
                        Weekly Rotation Rule
                    </label>
                    <select name="shift_rotation_type" 
                            x-model="selectedEmployee.shift_rotation_type" 
                            class="w-full px-3.5 py-2 bg-slate-50 border border-slate-200 rounded-xl text-xs text-slate-800 font-semibold outline-none cursor-pointer">
                        <option value="Weekly Auto">Weekly Auto (Automatic 7-day schedule)</option>
                        <option value="Fixed">Fixed Shifts</option>
                        <option value="Custom">Custom Shift Roster</option>
                    </select>
                </div>

                <!-- 7-Day Day-by-Day Shift Selectors -->
                <div class="space-y-2.5 pt-2">
                    @php
                        $dayList = [
                            'monday' => 'Monday',
                            'tuesday' => 'Tuesday',
                            'wednesday' => 'Wednesday',
                            'thursday' => 'Thursday',
                            'friday' => 'Friday',
                            'saturday' => 'Saturday',
                            'sunday' => 'Sunday'
                        ];
                    @endphp

                    @foreach($dayList as $key => $dayLabel)
                    <div class="grid grid-cols-12 items-center gap-2 p-2 rounded-xl bg-slate-50 border border-slate-200/80">
                        <div class="col-span-4 sm:col-span-3">
                            <span class="text-xs font-bold text-slate-700">{{ $dayLabel }}</span>
                        </div>
                        <div class="col-span-8 sm:col-span-9">
                            <select name="schedule[{{ $key }}]" 
                                    x-model="weeklySchedule.{{ $key }}" 
                                    class="w-full px-3 py-1.5 bg-white border border-slate-200 rounded-lg text-xs text-slate-800 font-medium outline-none cursor-pointer">
                                <option value="off">-- Day Off / Rest Day --</option>
                                @foreach($shifts as $shift)
                                    <option value="{{ $shift->id }}">{{ $shift->name }} ({{ $shift->time_range }})</option>
                                @endforeach
                            </select>
                        </div>
                    </div>
                    @endforeach
                </div>

                </div>

                <!-- Modal Actions -->
                <div class="pt-4 mt-2 border-t border-slate-100 flex items-center justify-end gap-3 shrink-0">
                    <button type="button" 
                            @click="scheduleModalOpen = 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">
                        Save Weekly Shift Schedule
                    </button>
                </div>
            </form>
        </div>
    </div>

    <!-- View Employee Details Modal -->
    <div x-show="detailModalOpen" 
         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-start sm:items-center justify-center p-3 sm:p-6 bg-slate-900/60 backdrop-blur-sm overflow-y-auto"
         style="display: none;">
        
        <div @click.outside="detailModalOpen = false" 
             class="bg-white w-full max-w-lg rounded-3xl shadow-2xl border border-slate-100 p-6 sm:p-8 relative my-auto max-h-[90vh] flex flex-col overflow-hidden">
            
            <div class="flex items-center justify-between gap-3 mb-4 pb-2 border-b border-slate-100 shrink-0">
                <span class="text-xs font-extrabold text-slate-400 uppercase tracking-wider">Employee Overview</span>
                <button type="button" @click="detailModalOpen = false" title="Close Modal" class="w-9 h-9 rounded-2xl bg-slate-100 hover:bg-slate-200 text-slate-500 hover:text-slate-800 flex items-center justify-center transition-colors cursor-pointer shrink-0">
                    <i class="fa-solid fa-xmark text-lg"></i>
                </button>
            </div>

            <div class="overflow-y-auto pr-1 flex-1 space-y-4">

            <div class="text-center pb-6 border-b border-slate-100">
                <div class="w-20 h-20 rounded-2xl bg-white p-1 shadow-md ring-4 ring-sky-500/20 mx-auto mb-3 overflow-hidden">
                    <img :src="selectedEmployee.profile_photo_url || defaultAvatar" alt="Profile" class="w-full h-full object-cover rounded-xl">
                </div>
                <h3 class="text-lg font-bold text-slate-800" x-text="selectedEmployee.name"></h3>
                <p class="text-xs font-semibold text-sky-600" x-text="selectedEmployee.designation_relation ? selectedEmployee.designation_relation.name : selectedEmployee.designation"></p>
                <span class="inline-block mt-2 text-xs font-mono font-bold px-3 py-1 rounded-full bg-slate-100 text-slate-700" x-text="selectedEmployee.employee_id"></span>
            </div>

            <div class="py-4 space-y-3 text-xs">
                <div class="flex justify-between py-1 border-b border-slate-100">
                    <span class="text-slate-400 font-medium">Department</span>
                    <span class="font-bold text-slate-700" x-text="selectedEmployee.department_relation ? selectedEmployee.department_relation.name : selectedEmployee.department"></span>
                </div>
                <div class="flex justify-between py-1 border-b border-slate-100">
                    <span class="text-slate-400 font-medium">Total Experience</span>
                    <span class="font-bold text-amber-600" x-text="(selectedEmployee.experience_years || '0') + ' Years in Medical Practice'"></span>
                </div>
                <div class="flex justify-between py-1 border-b border-slate-100">
                    <span class="text-slate-400 font-medium">Email</span>
                    <span class="font-bold text-slate-700" x-text="selectedEmployee.email"></span>
                </div>
                <div class="flex justify-between py-1 border-b border-slate-100">
                    <span class="text-slate-400 font-medium">Phone</span>
                    <span class="font-bold text-slate-700" x-text="selectedEmployee.phone || 'N/A'"></span>
                </div>
                <div class="flex justify-between py-1 border-b border-slate-100">
                    <span class="text-slate-400 font-medium">Qualification</span>
                    <span class="font-bold text-slate-700" x-text="selectedEmployee.qualification || 'N/A'"></span>
                </div>
                <div class="flex justify-between py-1 border-b border-slate-100">
                    <span class="text-slate-400 font-medium">Shift Rotation Mode</span>
                    <span class="font-bold text-indigo-600" x-text="selectedEmployee.shift_rotation_type || 'Weekly Auto'"></span>
                </div>
                <div class="flex justify-between py-1">
                    <span class="text-slate-400 font-medium">Status</span>
                    <span class="font-bold" :class="selectedEmployee.is_active ? 'text-emerald-600' : 'text-slate-400'" x-text="selectedEmployee.is_active ? 'Active' : 'Inactive'"></span>
                </div>
            </div>

            <div class="pt-4 flex justify-between items-center shrink-0">
                <button type="button" @click="detailModalOpen = false; openScheduleModal(selectedEmployee)" class="text-xs font-bold text-sky-600 hover:text-sky-700 flex items-center gap-1 cursor-pointer">
                    <i class="fa-solid fa-calendar-week"></i> View / Edit Weekly Schedule
                </button>
                <button type="button" @click="detailModalOpen = false" class="px-5 py-2 bg-slate-800 text-white rounded-xl text-xs font-bold cursor-pointer">
                    Close
                </button>
            </div>
        </div>
    </div>

</div>
@endsection