@extends('admin.layouts.app')

@section('title', 'Hospital Staff Shifts')

@section('content')
<div class="space-y-6" 
     x-data="{ 
         modalOpen: false, 
         isEditing: false, 
         formAction: '{{ route('admin.shifts.store') }}',
         formMethod: 'POST',
         searchQuery: '',
         statusFilter: '',
         shiftsList: {{ json_encode($shifts) }},
         shiftData: {
             id: '',
             name: '',
             start_time: '08:00',
             end_time: '16:00',
             color: '#0284c7',
             description: '',
             is_active: true
         },
         openCreateModal() {
             this.isEditing = false;
             this.formAction = '{{ route('admin.shifts.store') }}';
             this.formMethod = 'POST';
             this.shiftData = {
                 id: '',
                 name: '',
                 start_time: '08:00',
                 end_time: '16:00',
                 color: '#0284c7',
                 description: '',
                 is_active: true
             };
             this.modalOpen = true;
         },
         openEditModal(shift) {
             this.isEditing = true;
             this.formAction = '/admin/shifts/' + shift.id;
             this.formMethod = 'PUT';
             this.shiftData = {
                 id: shift.id,
                 name: shift.name,
                 start_time: shift.start_time.substring(0, 5),
                 end_time: shift.end_time.substring(0, 5),
                 color: shift.color || '#0284c7',
                 description: shift.description || '',
                 is_active: Boolean(shift.is_active)
             };
             this.modalOpen = true;
         },
         matches(shift) {
             const matchesSearch = !this.searchQuery || 
                 (shift.name + ' ' + (shift.description || '') + ' ' + shift.start_time + ' ' + shift.end_time).toLowerCase().includes(this.searchQuery.toLowerCase());
             const matchesStatus = !this.statusFilter || 
                 (this.statusFilter === '1' ? shift.is_active : !shift.is_active);
             return matchesSearch && matchesStatus;
         },
         get filteredCount() {
             return this.shiftsList.filter(s => this.matches(s)).length;
         },
         resetFilters() {
             this.searchQuery = '';
             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-amber-50 text-amber-700 border border-amber-200">
                    <i class="fa-solid fa-business-time mr-1"></i> Shift Rostering
                </span>
            </div>
            <h1 class="text-2xl font-extrabold text-slate-800 tracking-tight">Staff Work Shifts</h1>
            <p class="text-xs text-slate-500 mt-1">Configure duty schedules, shift name, start and end hours for hospital staff.</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>Create New Shift</span>
            </button>
        </div>
    </div>

    <!-- Quick 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 Shifts</p>
                <p class="text-2xl font-extrabold text-slate-800 mt-1">{{ $stats['total_shifts'] }}</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-clock"></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 Rosters</p>
                <p class="text-2xl font-extrabold text-emerald-600 mt-1">{{ $stats['active_shifts'] }}</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">Inactive Shifts</p>
                <p class="text-2xl font-extrabold text-slate-400 mt-1">{{ $stats['inactive_shifts'] }}</p>
            </div>
            <div class="w-11 h-11 rounded-2xl bg-slate-100 text-slate-500 flex items-center justify-center text-lg">
                <i class="fa-solid fa-pause"></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="Search shifts by name, timing, description..." 
                       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 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>

    <!-- Shifts 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-list-check text-sky-600"></i>
                <span>Configured Shifts</span>
            </h2>
            <span class="text-xs text-slate-400 font-medium" x-text="'Showing ' + filteredCount + ' of {{ $shifts->count() }} records'"></span>
        </div>

        @if($shifts->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-business-time"></i>
                </div>
                <h3 class="text-sm font-bold text-slate-700">No shifts created yet</h3>
                <p class="text-xs text-slate-400 mt-1 mb-4">Get started by creating your hospital's first duty shift.</p>
                <button @click="openCreateModal()" class="px-4 py-2 bg-sky-600 text-white rounded-xl text-xs font-bold shadow-xs">
                    + Add Shift
                </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">Shift Name</th>
                            <th class="py-4 px-4">Start Time</th>
                            <th class="py-4 px-4">End Time</th>
                            <th class="py-4 px-4">Duration</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($shifts as $shift)
                        <tr x-show="matches({{ json_encode($shift) }})" 
                            x-transition
                            class="hover:bg-slate-50/70 transition-colors">
                            <td class="py-4 px-6">
                                <div class="flex items-center gap-3">
                                    <span class="w-3.5 h-3.5 rounded-full shrink-0 shadow-xs" style="background-color: {{ $shift->color ?? '#0284c7' }}"></span>
                                    <div>
                                        <p class="font-bold text-slate-800 text-sm">{{ $shift->name }}</p>
                                        @if($shift->description)
                                            <p class="text-xs text-slate-400 line-clamp-1 max-w-sm mt-0.5">{{ $shift->description }}</p>
                                        @endif
                                    </div>
                                </div>
                            </td>
                            <td class="py-4 px-4">
                                <span class="inline-flex items-center gap-1.5 px-3 py-1 bg-slate-100 rounded-xl text-xs font-bold text-slate-700">
                                    <i class="fa-regular fa-clock text-slate-400 text-[11px]"></i>
                                    <span>{{ $shift->formatted_start_time }}</span>
                                </span>
                            </td>
                            <td class="py-4 px-4">
                                <span class="inline-flex items-center gap-1.5 px-3 py-1 bg-slate-100 rounded-xl text-xs font-bold text-slate-700">
                                    <i class="fa-regular fa-clock text-slate-400 text-[11px]"></i>
                                    <span>{{ $shift->formatted_end_time }}</span>
                                </span>
                            </td>
                            <td class="py-4 px-4">
                                <span class="text-xs font-semibold text-sky-600 bg-sky-50 px-2.5 py-1 rounded-xl border border-sky-100">
                                    {{ $shift->duration }}
                                </span>
                            </td>
                            <td class="py-4 px-4">
                                <form method="POST" action="{{ route('admin.shifts.toggle', $shift) }}" class="inline">
                                    @csrf
                                    @method('PATCH')
                                    <button type="submit" title="Click to toggle status" class="cursor-pointer">
                                        @if($shift->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>
                            <td class="py-4 px-6 text-right">
                                <div class="flex items-center justify-end gap-2">
                                    <!-- Edit Button -->
                                    <button type="button" 
                                            @click="openEditModal({{ json_encode($shift) }})" 
                                            title="Edit Shift" 
                                            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.shifts.destroy', $shift) }}" onsubmit="return confirm('Are you sure you want to delete shift: {{ $shift->name }}?')" class="inline">
                                        @csrf
                                        @method('DELETE')
                                        <button type="submit" 
                                                title="Delete Shift" 
                                                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>

    <!-- Create / Edit Shift 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"
         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">
            
            <!-- Close Modal Button -->
            <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-sky-50 text-sky-600 flex items-center justify-center text-xl">
                    <i class="fa-solid fa-business-time"></i>
                </div>
                <div>
                    <h3 class="text-lg font-bold text-slate-800" x-text="isEditing ? 'Edit Work Shift' : 'Create New Shift'"></h3>
                    <p class="text-xs text-slate-500">Set shift name, start time, and end time</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>

                <!-- Shift Name -->
                <div>
                    <label for="shift_name" class="block text-xs font-bold text-slate-700 mb-1.5 uppercase tracking-wider">
                        Shift Name <span class="text-red-500">*</span>
                    </label>
                    <input id="shift_name" 
                           name="name" 
                           type="text" 
                           x-model="shiftData.name"
                           required 
                           placeholder="e.g. Morning Clinical Shift" 
                           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>

                <!-- Start & End Time -->
                <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
                    <div>
                        <label for="start_time" class="block text-xs font-bold text-slate-700 mb-1.5 uppercase tracking-wider">
                            Start Time <span class="text-red-500">*</span>
                        </label>
                        <div class="relative">
                            <input id="start_time" 
                                   name="start_time" 
                                   type="time" 
                                   x-model="shiftData.start_time"
                                   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 transition-all">
                        </div>
                    </div>

                    <div>
                        <label for="end_time" class="block text-xs font-bold text-slate-700 mb-1.5 uppercase tracking-wider">
                            End Time <span class="text-red-500">*</span>
                        </label>
                        <div class="relative">
                            <input id="end_time" 
                                   name="end_time" 
                                   type="time" 
                                   x-model="shiftData.end_time"
                                   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 transition-all">
                        </div>
                    </div>
                </div>

                <!-- Color Tag & Active Status -->
                <div class="grid grid-cols-1 sm:grid-cols-2 gap-4 items-center">
                    <div>
                        <label for="color" class="block text-xs font-bold text-slate-700 mb-1.5 uppercase tracking-wider">
                            Badge Color
                        </label>
                        <div class="flex items-center gap-3">
                            <input id="color" 
                                   name="color" 
                                   type="color" 
                                   x-model="shiftData.color"
                                   class="w-10 h-10 rounded-xl border border-slate-200 cursor-pointer p-0.5 bg-slate-50">
                            <span class="text-xs font-mono text-slate-600 font-bold" x-text="shiftData.color"></span>
                        </div>
                    </div>

                    <div class="sm:pt-4">
                        <label class="flex items-center gap-2.5 cursor-pointer">
                            <input type="checkbox" 
                                   name="is_active" 
                                   value="1" 
                                   x-model="shiftData.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 for Duty Scheduling</span>
                        </label>
                    </div>
                </div>

                <!-- Description -->
                <div>
                    <label for="description" class="block text-xs font-bold text-slate-700 mb-1.5 uppercase tracking-wider">
                        Description / Notes
                    </label>
                    <textarea id="description" 
                              name="description" 
                              x-model="shiftData.description"
                              rows="2" 
                              placeholder="e.g. Regular inpatient clinical ward rounds and consultations" 
                              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>

                <!-- Submit and Cancel Buttons -->
                <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 hover:shadow-lg transition-all cursor-pointer">
                        <span x-text="isEditing ? 'Save Changes' : 'Create Shift'"></span>
                    </button>
                </div>
            </form>
        </div>
    </div>

</div>
@endsection