@extends('admin.layouts.app')

@section('title', $employee->name . ' - Employee Profile Details')

@section('content')
<div class="space-y-6" 
     x-data="{ 
         editModalOpen: false,
         scheduleModalOpen: false,
         photoPreview: '{{ $employee->profile_photo_url }}',
         empData: {
             id: '{{ $employee->id }}',
             employee_id: '{{ $employee->employee_id }}',
             name: '{{ addslashes($employee->name) }}',
             email: '{{ $employee->email }}',
             phone: '{{ $employee->phone }}',
             gender: '{{ $employee->gender }}',
             date_of_birth: '{{ $employee->date_of_birth ? $employee->date_of_birth->format('Y-m-d') : '' }}',
             joining_date: '{{ $employee->joining_date ? $employee->joining_date->format('Y-m-d') : '' }}',
             department_id: '{{ $employee->department_id }}',
             designation_id: '{{ $employee->designation_id }}',
             qualification: '{{ addslashes($employee->qualification) }}',
             experience_years: '{{ $employee->experience_years }}',
             shift_id: '{{ $employee->shift_id }}',
             shift_rotation_type: '{{ $employee->shift_rotation_type ?? 'Weekly Auto' }}',
             employment_type: '{{ $employee->employment_type }}',
             salary: '{{ $employee->salary }}',
             address: '{{ addslashes($employee->address) }}',
             emergency_contact: '{{ addslashes($employee->emergency_contact) }}',
             is_active: {{ $employee->is_active ? 'true' : 'false' }}
         },
         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);
             }
         }
     }">

    <!-- Breadcrumb & Top Bar -->
    <div class="flex flex-col sm:flex-row sm:items-center justify-between gap-4">
        <div class="flex items-center gap-2 text-xs text-slate-500 font-medium">
            <a href="{{ route('admin.dashboard') }}" class="hover:text-slate-800 transition-colors">Dashboard</a>
            <i class="fa-solid fa-chevron-right text-[10px] text-slate-400"></i>
            <a href="{{ route('admin.employees.index') }}" class="hover:text-slate-800 transition-colors">Employees</a>
            <i class="fa-solid fa-chevron-right text-[10px] text-slate-400"></i>
            <span class="text-slate-800 font-bold">{{ $employee->name }}</span>
        </div>

        <div class="flex items-center gap-2.5">
            <a href="{{ route('admin.employees.index') }}" 
               class="px-4 py-2.5 bg-slate-100 hover:bg-slate-200 text-slate-700 rounded-2xl text-xs font-bold transition-all flex items-center gap-2 border border-slate-200 cursor-pointer">
                <i class="fa-solid fa-arrow-left text-xs"></i>
                <span>Back to Directory</span>
            </a>

            <button type="button" 
                    @click="editModalOpen = true" 
                    class="px-4 py-2.5 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 transition-all flex items-center gap-2 cursor-pointer">
                <i class="fa-solid fa-pen-to-square text-xs"></i>
                <span>Edit Details</span>
            </button>
        </div>
    </div>

    <!-- Staff Profile Hero Card -->
    <div class="bg-white rounded-3xl p-6 sm:p-8 border border-slate-200/80 shadow-xs">
        <div class="flex flex-col md:flex-row items-center md:items-start gap-6">
            
            <!-- Big Profile Avatar -->
            <div class="relative w-32 h-32 rounded-3xl bg-white p-1 shadow-md ring-4 ring-sky-500/20 overflow-hidden shrink-0">
                <img src="{{ $employee->profile_photo_url }}" 
                     alt="{{ $employee->name }}" 
                     class="w-full h-full object-cover rounded-2xl">
            </div>

            <!-- Profile Overview Header -->
            <div class="flex-1 text-center md:text-left">
                <div class="flex flex-col sm:flex-row sm:items-center justify-between gap-3">
                    <div>
                        <div class="flex flex-wrap items-center justify-center md:justify-start gap-2.5">
                            <h1 class="text-2xl sm:text-3xl font-extrabold text-slate-800 tracking-tight">{{ $employee->name }}</h1>
                            <span class="px-3 py-1 rounded-xl bg-sky-50 text-sky-700 border border-sky-200 font-mono font-extrabold text-xs">
                                {{ $employee->employee_id }}
                            </span>
                        </div>
                        <p class="text-sm font-bold text-sky-600 mt-1">
                            {{ $employee->designationRelation?->name ?? $employee->designation }}
                        </p>
                    </div>

                    <!-- Status Pill -->
                    <div>
                        <form method="POST" action="{{ route('admin.employees.toggle', $employee) }}">
                            @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.5 text-xs font-bold text-emerald-700 bg-emerald-50 px-3.5 py-1.5 rounded-full border border-emerald-200 hover:bg-emerald-100 transition-colors">
                                        <span class="w-2 h-2 rounded-full bg-emerald-500 animate-pulse"></span> Active Staff Member
                                    </span>
                                @else
                                    <span class="inline-flex items-center gap-1.5 text-xs font-bold text-slate-500 bg-slate-100 px-3.5 py-1.5 rounded-full border border-slate-200 hover:bg-slate-200 transition-colors">
                                        <span class="w-2 h-2 rounded-full bg-slate-400"></span> Inactive Account
                                    </span>
                                @endif
                            </button>
                        </form>
                    </div>
                </div>

                <!-- Badges Row -->
                <div class="flex flex-wrap items-center justify-center md:justify-start gap-2.5 mt-4 text-xs">
                    <span class="inline-flex items-center gap-1.5 px-3 py-1 rounded-xl bg-indigo-50 text-indigo-700 border border-indigo-100 font-bold">
                        <i class="fa-solid fa-sitemap text-[11px]"></i>
                        <span>{{ $employee->departmentRelation?->name ?? $employee->department }}</span>
                    </span>

                    <span class="inline-flex items-center gap-1.5 px-3 py-1 rounded-xl bg-amber-50 text-amber-800 border border-amber-200 font-bold">
                        <i class="fa-solid fa-briefcase text-[11px] text-amber-600"></i>
                        <span>{{ $employee->formatted_experience }}</span>
                    </span>

                    <span class="inline-flex items-center gap-1.5 px-3 py-1 rounded-xl bg-teal-50 text-teal-800 border border-teal-200 font-bold">
                        <i class="fa-solid fa-user-tag text-[11px] text-teal-600"></i>
                        <span>{{ $employee->employment_type }}</span>
                    </span>

                    <span class="inline-flex items-center gap-1.5 px-3 py-1 rounded-xl bg-slate-100 text-slate-700 border border-slate-200 font-bold">
                        <i class="fa-solid fa-calendar-day text-[11px] text-slate-500"></i>
                        <span>Joined {{ $employee->formatted_joining_date }}</span>
                    </span>
                </div>
            </div>

        </div>
    </div>

    <!-- Main Grid Sections -->
    <div class="grid grid-cols-1 lg:grid-cols-12 gap-6">
        
        <!-- Left: Professional & Personal Details -->
        <div class="lg:col-span-6 space-y-6">
            
            <!-- Personal & Medical Details Card -->
            <div class="bg-white rounded-3xl p-6 sm:p-8 border border-slate-200/80 shadow-xs">
                <h2 class="text-base font-bold text-slate-800 mb-4 flex items-center gap-2">
                    <i class="fa-solid fa-user-doctor text-sky-600"></i>
                    <span>Professional & Personal Information</span>
                </h2>

                <div class="divide-y divide-slate-100 text-xs">
                    <div class="py-3 flex justify-between items-center">
                        <span class="text-slate-400 font-medium">Full Name</span>
                        <span class="font-bold text-slate-800">{{ $employee->name }}</span>
                    </div>

                    <div class="py-3 flex justify-between items-center">
                        <span class="text-slate-400 font-medium">Employee System ID</span>
                        <span class="font-mono font-bold text-sky-600">{{ $employee->employee_id }}</span>
                    </div>

                    <div class="py-3 flex justify-between items-center">
                        <span class="text-slate-400 font-medium">Department</span>
                        <span class="font-bold text-indigo-700">{{ $employee->departmentRelation?->name ?? $employee->department }}</span>
                    </div>

                    <div class="py-3 flex justify-between items-center">
                        <span class="text-slate-400 font-medium">Designation / Role</span>
                        <span class="font-bold text-slate-800">{{ $employee->designationRelation?->name ?? $employee->designation }}</span>
                    </div>

                    <div class="py-3 flex justify-between items-center">
                        <span class="text-slate-400 font-medium">Medical Qualifications</span>
                        <span class="font-bold text-slate-800">{{ $employee->qualification ?? 'Not Specified' }}</span>
                    </div>

                    <div class="py-3 flex justify-between items-center">
                        <span class="text-slate-400 font-medium">Total Experience</span>
                        <span class="font-bold text-amber-600">{{ $employee->formatted_experience }} ({{ $employee->experience_years }} Years)</span>
                    </div>

                    <div class="py-3 flex justify-between items-center">
                        <span class="text-slate-400 font-medium">Gender</span>
                        <span class="font-bold text-slate-800">{{ $employee->gender }}</span>
                    </div>

                    <div class="py-3 flex justify-between items-center">
                        <span class="text-slate-400 font-medium">Age & Date of Birth</span>
                        <span class="font-bold text-slate-800">
                            @if($employee->date_of_birth)
                                <span class="px-2 py-0.5 rounded-lg bg-sky-50 text-sky-700 font-extrabold mr-1">{{ $employee->age }}</span>
                                <span class="text-slate-500 font-medium">({{ $employee->date_of_birth->format('M d, Y') }})</span>
                            @else
                                N/A
                            @endif
                        </span>
                    </div>

                    <div class="py-3 flex justify-between items-center">
                        <span class="text-slate-400 font-medium">Monthly Salary</span>
                        <span class="font-mono font-bold text-emerald-600">{{ $employee->formatted_salary }}</span>
                    </div>
                </div>
            </div>

            <!-- Contact & Emergency Details Card -->
            <div class="bg-white rounded-3xl p-6 sm:p-8 border border-slate-200/80 shadow-xs">
                <h2 class="text-base font-bold text-slate-800 mb-4 flex items-center gap-2">
                    <i class="fa-solid fa-address-book text-teal-600"></i>
                    <span>Contact & Emergency Details</span>
                </h2>

                <div class="divide-y divide-slate-100 text-xs">
                    <div class="py-3 flex justify-between items-center">
                        <span class="text-slate-400 font-medium">Official Email</span>
                        <a href="mailto:{{ $employee->email }}" class="font-bold text-sky-600 hover:underline">{{ $employee->email }}</a>
                    </div>

                    <div class="py-3 flex justify-between items-center">
                        <span class="text-slate-400 font-medium">Phone Number</span>
                        <a href="tel:{{ $employee->phone }}" class="font-mono font-bold text-slate-700 hover:text-sky-600">{{ $employee->phone ?? 'N/A' }}</a>
                    </div>

                    <div class="py-3 flex justify-between items-center">
                        <span class="text-slate-400 font-medium">Emergency Contact</span>
                        <span class="font-bold text-red-600">{{ $employee->emergency_contact ?? 'N/A' }}</span>
                    </div>

                    <div class="py-3 flex justify-between items-start">
                        <span class="text-slate-400 font-medium">Residential Address</span>
                        <span class="font-medium text-slate-700 text-right max-w-xs">{{ $employee->address ?? 'N/A' }}</span>
                    </div>
                </div>
            </div>

        </div>

        <!-- Right: Duty Shifts & Weekly Roster Schedule -->
        <div class="lg:col-span-6 space-y-6">
            
            <!-- Shift & Schedule Card -->
            <div class="bg-white rounded-3xl p-6 sm:p-8 border border-slate-200/80 shadow-xs">
                <div class="flex items-center justify-between mb-4">
                    <h2 class="text-base font-bold text-slate-800 flex items-center gap-2">
                        <i class="fa-solid fa-business-time text-amber-500"></i>
                        <span>Work Shift & Duty Schedule</span>
                    </h2>

                    <button type="button" 
                            @click="scheduleModalOpen = true" 
                            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> Edit Weekly Roster
                    </button>
                </div>

                <!-- Primary Assigned Shift -->
                <div class="p-4 rounded-2xl bg-slate-50 border border-slate-200/80 mb-6">
                    <p class="text-[11px] font-bold text-slate-400 uppercase tracking-wider mb-2">Primary Assigned Shift</p>
                    <div class="flex items-center justify-between">
                        <div class="flex items-center gap-3">
                            <span class="w-3.5 h-3.5 rounded-full shrink-0" style="background-color: {{ $employee->shift->color ?? '#0284c7' }}"></span>
                            <div>
                                <h3 class="text-sm font-bold text-slate-800">{{ $employee->shift?->name ?? 'No Primary Shift' }}</h3>
                                <p class="text-xs text-slate-500 font-mono">{{ $employee->shift?->time_range ?? '08:00 AM - 04:00 PM' }}</p>
                            </div>
                        </div>

                        <span class="px-3 py-1 rounded-xl bg-sky-50 text-sky-700 border border-sky-200 text-xs font-bold">
                            {{ $employee->shift_rotation_type ?? 'Weekly Auto' }}
                        </span>
                    </div>
                </div>

                <!-- 7-Day Day-by-Day Roster Grid -->
                <p class="text-xs font-bold text-slate-700 uppercase tracking-wider mb-3">7-Day Weekly Shift Assignment</p>
                
                @php
                    $schedule = $employee->weekly_shift_schedule ?? [];
                    $days = [
                        'monday' => 'Monday',
                        'tuesday' => 'Tuesday',
                        'wednesday' => 'Wednesday',
                        'thursday' => 'Thursday',
                        'friday' => 'Friday',
                        'saturday' => 'Saturday',
                        'sunday' => 'Sunday'
                    ];
                @endphp

                <div class="space-y-2">
                    @foreach($days as $key => $dayLabel)
                        @php
                            $assignedShiftId = $schedule[$key] ?? ($key === 'saturday' || $key === 'sunday' ? 'off' : $employee->shift_id);
                            $matchedShift = $shifts->firstWhere('id', $assignedShiftId);
                            $isOff = $assignedShiftId === 'off' || empty($assignedShiftId);
                        @endphp

                        <div class="flex items-center justify-between p-2.5 rounded-xl border {{ $isOff ? 'bg-slate-50 border-slate-200/60 text-slate-400' : 'bg-white border-slate-200 text-slate-700' }} text-xs">
                            <span class="font-bold w-28">{{ $dayLabel }}</span>
                            
                            @if($isOff)
                                <span class="px-2.5 py-0.5 rounded-lg bg-slate-100 text-slate-500 font-semibold text-[11px]">
                                    Day Off / Rest
                                </span>
                            @elseif($matchedShift)
                                <span class="inline-flex items-center gap-1.5 px-2.5 py-0.5 rounded-lg bg-sky-50 text-sky-800 border border-sky-100 font-semibold text-[11px]">
                                    <span class="w-1.5 h-1.5 rounded-full" style="background-color: {{ $matchedShift->color ?? '#0284c7' }}"></span>
                                    <span>{{ $matchedShift->name }} ({{ $matchedShift->time_range }})</span>
                                </span>
                            @else
                                <span class="px-2.5 py-0.5 rounded-lg bg-slate-100 text-slate-600 font-semibold text-[11px]">
                                    Assigned (ID: {{ $assignedShiftId }})
                                </span>
                            @endif
                        </div>
                    @endforeach
                </div>
            </div>

            <!-- Danger Zone / Delete -->
            <div class="p-6 rounded-3xl bg-red-50/50 border border-red-200/80 flex items-center justify-between">
                <div>
                    <h3 class="text-xs font-bold text-red-800 uppercase tracking-wider">Employee Record Management</h3>
                    <p class="text-xs text-red-600 mt-0.5">Permanently remove staff record and photos from the database.</p>
                </div>

                <form method="POST" action="{{ route('admin.employees.destroy', $employee) }}" onsubmit="return confirm('Permanently delete employee {{ $employee->name }}?')">
                    @csrf
                    @method('DELETE')
                    <button type="submit" class="px-4 py-2 bg-red-600 hover:bg-red-700 text-white rounded-xl text-xs font-bold transition-all cursor-pointer shadow-xs">
                        Delete Staff
                    </button>
                </form>
            </div>

        </div>
    </div>

    <!-- Recent Attendance Logs Table -->
    <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-fingerprint text-emerald-600"></i>
                <span>Recent Biometric Attendance Logs ({{ $employee->name }})</span>
            </h2>
            <a href="{{ route('admin.attendance.index', ['search' => $employee->employee_id]) }}" class="text-xs font-bold text-sky-600 hover:text-sky-700">
                View All Records &rarr;
            </a>
        </div>

        @if($employee->attendances->isEmpty())
            <div class="p-8 text-center text-xs text-slate-400">
                <i class="fa-solid fa-calendar-xmark text-xl text-slate-300 mb-2 block"></i>
                No biometric check-in logs recorded yet for this staff member.
            </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-3.5 px-6">Date</th>
                            <th class="py-3.5 px-4">Check-In</th>
                            <th class="py-3.5 px-4">Check-Out</th>
                            <th class="py-3.5 px-4">Face Match</th>
                            <th class="py-3.5 px-4">GPS Location</th>
                            <th class="py-3.5 px-4">Duration</th>
                            <th class="py-3.5 px-6 text-right">Status</th>
                        </tr>
                    </thead>
                    <tbody class="divide-y divide-slate-100 text-xs">
                        @foreach($employee->attendances as $att)
                        <tr class="hover:bg-slate-50/70 transition-colors">
                            <td class="py-3.5 px-6 font-bold text-slate-800">
                                {{ $att->date?->format('M d, Y') }}
                            </td>
                            <td class="py-3.5 px-4 font-mono font-bold text-emerald-600">
                                {{ $att->formatted_check_in_time ?? 'N/A' }}
                            </td>
                            <td class="py-3.5 px-4 font-mono font-bold text-sky-600">
                                {{ $att->formatted_check_out_time ?? 'On Duty' }}
                            </td>
                            <td class="py-3.5 px-4">
                                <span class="text-emerald-700 font-bold bg-emerald-50 px-2 py-0.5 rounded-md border border-emerald-200">
                                    {{ $att->check_in_face_match_score ?? '98.0' }}%
                                </span>
                            </td>
                            <td class="py-3.5 px-4 font-mono">
                                @if($att->check_in_latitude)
                                    <a href="https://maps.google.com/?q={{ $att->check_in_latitude }},{{ $att->check_in_longitude }}" target="_blank" class="text-sky-600 hover:underline flex items-center gap-1">
                                        <i class="fa-solid fa-location-dot"></i>
                                        <span>{{ number_format($att->check_in_latitude, 4) }}, {{ number_format($att->check_in_longitude, 4) }}</span>
                                    </a>
                                @else
                                    <span class="text-slate-400">N/A</span>
                                @endif
                            </td>
                            <td class="py-3.5 px-4 font-mono font-bold text-slate-700">
                                {{ $att->worked_hours ?? 'In Progress' }}
                            </td>
                            <td class="py-3.5 px-6 text-right">
                                @if($att->check_out_time)
                                    <span class="text-[10px] font-bold text-indigo-700 bg-indigo-50 px-2.5 py-0.5 rounded-full border border-indigo-200">
                                        Completed
                                    </span>
                                @else
                                    <span class="text-[10px] font-bold text-emerald-700 bg-emerald-50 px-2.5 py-0.5 rounded-full border border-emerald-200">
                                        On Duty
                                    </span>
                                @endif
                            </td>
                        </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>
        @endif
    </div>

    <!-- Edit Employee Modal -->
    <div x-show="editModalOpen" 
         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="editModalOpen = 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 -->
            <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-pen"></i>
                    </div>
                    <div>
                        <h3 class="text-base sm:text-lg font-extrabold text-slate-800">Edit Employee Details</h3>
                        <p class="text-xs text-slate-500">Update medical credentials, role, department and details</p>
                    </div>
                </div>

                <button type="button" @click="editModalOpen = 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="{{ route('admin.employees.update', $employee) }}" method="POST" enctype="multipart/form-data" class="flex flex-col flex-1 overflow-hidden">
                @csrf
                @method('PUT')

                <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 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" 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>
                    <div class="px-3 py-1.5 bg-white rounded-xl border border-slate-200 text-center shrink-0">
                        <span class="text-[10px] font-bold text-slate-400 block">ID</span>
                        <input type="text" name="employee_id" x-model="empData.employee_id" required class="text-xs font-mono font-bold text-sky-600 text-center w-20 outline-none">
                    </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">Full Name *</label>
                        <input type="text" name="name" x-model="empData.name" required class="w-full px-4 py-2.5 bg-slate-50 border border-slate-200 rounded-xl text-sm outline-none">
                    </div>
                    <div>
                        <label class="block text-xs font-bold text-slate-700 mb-1">Email Address *</label>
                        <input type="email" name="email" x-model="empData.email" required class="w-full px-4 py-2.5 bg-slate-50 border border-slate-200 rounded-xl text-sm outline-none">
                    </div>
                </div>

                <!-- Department & 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">Department *</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 outline-none cursor-pointer">
                            @foreach($departments as $dept)
                                <option value="{{ $dept->id }}">{{ $dept->name }}</option>
                            @endforeach
                        </select>
                    </div>
                    <div>
                        <label class="block text-xs font-bold text-slate-700 mb-1">Designation *</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 outline-none cursor-pointer">
                            @foreach($designations as $desig)
                                <option value="{{ $desig->id }}">{{ $desig->name }}</option>
                            @endforeach
                        </select>
                    </div>
                </div>

                <!-- Experience & 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">Experience in Years *</label>
                        <input type="number" step="0.5" name="experience_years" x-model="empData.experience_years" required class="w-full px-4 py-2.5 bg-slate-50 border border-slate-200 rounded-xl text-sm outline-none">
                    </div>
                    <div>
                        <label class="block text-xs font-bold text-slate-700 mb-1">Qualifications</label>
                        <input type="text" name="qualification" x-model="empData.qualification" class="w-full px-4 py-2.5 bg-slate-50 border border-slate-200 rounded-xl text-sm outline-none">
                    </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">Phone</label>
                        <input type="tel" name="phone" x-model="empData.phone" class="w-full px-4 py-2.5 bg-slate-50 border border-slate-200 rounded-xl text-sm outline-none">
                    </div>
                    <div>
                        <label class="block text-xs font-bold text-slate-700 mb-1">Gender *</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 outline-none cursor-pointer">
                            <option value="Male">Male</option>
                            <option value="Female">Female</option>
                            <option value="Other">Other</option>
                        </select>
                    </div>
                </div>

                <!-- Employment Type & Primary Shift -->
                <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">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 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">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 outline-none cursor-pointer">
                            @foreach($shifts as $shift)
                                <option value="{{ $shift->id }}">{{ $shift->name }}</option>
                            @endforeach
                        </select>
                    </div>
                </div>

                <!-- Active checkbox -->
                <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 text-sky-600">
                        <span class="text-xs font-bold text-slate-700">Active Staff Member</span>
                    </label>
                </div>

                </div>

                <div class="pt-4 mt-2 border-t border-slate-100 flex items-center justify-end gap-3 shrink-0">
                    <button type="button" @click="editModalOpen = false" class="px-4 py-2 text-xs font-bold text-slate-600 hover:bg-slate-100 rounded-xl cursor-pointer">Cancel</button>
                    <button type="submit" class="px-5 py-2.5 text-xs font-bold text-white bg-sky-600 hover:bg-sky-700 rounded-xl shadow-md cursor-pointer">Save Changes</button>
                </div>
            </form>
        </div>
    </div>

    <!-- Edit Weekly Shift Schedule Modal -->
    <div x-show="scheduleModalOpen" 
         x-transition 
         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">
            
            <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: {{ $employee->name }} ({{ $employee->employee_id }})</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 action="{{ route('admin.employees.weekly-schedule', $employee) }}" 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>
                    <label class="block text-xs font-bold text-slate-700 mb-1 uppercase tracking-wider">Weekly Rotation Rule</label>
                    <select name="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" {{ $employee->shift_rotation_type === 'Weekly Auto' ? 'selected' : '' }}>Weekly Auto</option>
                        <option value="Fixed" {{ $employee->shift_rotation_type === 'Fixed' ? 'selected' : '' }}>Fixed Shifts</option>
                        <option value="Custom" {{ $employee->shift_rotation_type === 'Custom' ? 'selected' : '' }}>Custom Shift Roster</option>
                    </select>
                </div>

                <div class="space-y-2.5 pt-2">
                    @foreach($days as $key => $dayLabel)
                        @php
                            $currentAssigned = $schedule[$key] ?? ($key === 'saturday' || $key === 'sunday' ? 'off' : $employee->shift_id);
                        @endphp
                        <div class="grid grid-cols-12 items-center gap-2 p-2 rounded-xl bg-slate-50 border border-slate-200/80 text-xs">
                            <span class="col-span-4 font-bold text-slate-700">{{ $dayLabel }}</span>
                            <div class="col-span-8">
                                <select name="schedule[{{ $key }}]" class="w-full px-3 py-1.5 bg-white border border-slate-200 rounded-lg text-xs outline-none cursor-pointer">
                                    <option value="off" {{ $currentAssigned === 'off' ? 'selected' : '' }}>-- Day Off / Rest Day --</option>
                                    @foreach($shifts as $shift)
                                        <option value="{{ $shift->id }}" {{ (string)$currentAssigned === (string)$shift->id ? 'selected' : '' }}>
                                            {{ $shift->name }} ({{ $shift->time_range }})
                                        </option>
                                    @endforeach
                                </select>
                            </div>
                        </div>
                    @endforeach
                </div>

                <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 text-xs font-bold text-slate-600 hover:bg-slate-100 rounded-xl">Cancel</button>
                    <button type="submit" class="px-5 py-2.5 text-xs font-bold text-white bg-sky-600 hover:bg-sky-700 rounded-xl shadow-md">Save Weekly Schedule</button>
                </div>
            </form>
        </div>
    </div>

</div>
@endsection