@extends('admin.layouts.app')

@section('content')
<div class="bg-gray-100 min-h-full p-4">
<div class="bg-white shadow-sm border border-gray-200">

    <!-- Header -->
    <div class=" bg-slate-50 border-b border-slate-200 text-slate-800 px-6 py-4 font-bold flex items-center shadow-sm rounded-t-xl  mb-0">
        <i class="fa-solid fa-pen-to-square mr-2"></i> Add Edit HoliDay
    </div>

    <form action="{{ route('holidays.store') }}" method="POST" class="p-4">
        @csrf

        <!-- Row 1: Name, Date, Type -->
        <div class="flex flex-wrap gap-6 mb-4 items-end">
            <div>
                <label class="block text-xs font-bold text-gray-800 mb-1">Holiday Name <span class="text-red-500">*</span></label>
                <input type="text" name="holiday_name" value="{{ old('holiday_name') }}" required
                    class="border border-gray-400 px-3 py-1.5 text-sm focus:outline-none focus:border-cyan-500 focus:bg-white focus:ring-2 focus:ring-cyan-500/20 w-40">
                @error('holiday_name')<span class="text-red-500 text-xs block">{{ $message }}</span>@enderror
            </div>
            <div>
                <label class="block text-xs font-bold text-gray-800 mb-1">Holiday Date <span class="text-red-500">*</span></label>
                <input type="date" name="holiday_date" value="{{ old('holiday_date') }}" required
                    class="border border-gray-400 px-3 py-1.5 text-sm focus:outline-none focus:border-cyan-500 focus:bg-white focus:ring-2 focus:ring-cyan-500/20 w-40">
                @error('holiday_date')<span class="text-red-500 text-xs block">{{ $message }}</span>@enderror
            </div>
            <div>
                <label class="block text-xs font-bold text-gray-800 mb-1">Holiday Type</label>
                <select name="holiday_type" class="border border-gray-400 px-3 py-1.5 text-sm focus:outline-none focus:border-cyan-500 focus:bg-white focus:ring-2 focus:ring-cyan-500/20 w-36 text-gray-700">
                    <option value="Full Day" {{ old('holiday_type') == 'Full Day' ? 'selected' : '' }}>Full Day</option>
                    <option value="Half Day" {{ old('holiday_type') == 'Half Day' ? 'selected' : '' }}>Half Day</option>
                </select>
            </div>
        </div>

        <!-- Include WeekOff Banner -->
        <div class="bg-cyan-500 px-4 py-2 mb-4 flex items-center">
            <label class="flex items-center space-x-2 cursor-pointer text-white font-bold text-xs">
                <input type="checkbox" name="include_weekly_off" value="1" {{ old('include_weekly_off') ? 'checked' : '' }}
                    class="h-4 w-4 rounded">
                <span>Include WeekOff</span>
            </label>
        </div>

        <!-- Selection By Section -->
        <div class="mb-4">
            <p class="text-xs font-bold text-gray-700 mb-3">Selection By</p>

            <div class="grid grid-cols-2 md:grid-cols-4 gap-4">

                <!-- Removed Company Column -->

                <!-- Branch Column -->
                <div class="border border-gray-200 p-2">
                    <div class="mb-2 space-y-1">
                        <label class="flex items-center space-x-1 text-xs cursor-pointer">
                            <input type="radio" name="selection_by_branch" value="all_branch" {{ old('selection_by_branch','all_branch') == 'all_branch' ? 'checked' : '' }} class="h-3 w-3">
                            <span class="font-bold">All Branch</span>
                        </label>
                        <label class="flex items-center space-x-1 text-xs cursor-pointer">
                            <input type="radio" name="selection_by_branch" value="few_branch" {{ old('selection_by_branch') == 'few_branch' ? 'checked' : '' }} class="h-3 w-3">
                            <span>Few Branch</span>
                        </label>
                        <label class="flex items-center space-x-1 text-xs cursor-pointer">
                            <input type="checkbox" id="selectAllBranch" class="h-3 w-3">
                            <span class="text-[10px] text-gray-500">SelectAll/De-Select All</span>
                        </label>
                    </div>
                    <div class="space-y-1 max-h-40 overflow-y-auto">
                        @foreach($branches as $branch)
                        <label class="flex items-center space-x-1 text-[10px] cursor-pointer">
                            <input type="checkbox" name="branch_ids[]" value="{{ $branch->id }}" class="h-3 w-3 branch-item" {{ in_array($branch->id, old('branch_ids', [])) ? 'checked' : '' }}>
                            <span>{{ $branch->name }}</span>
                        </label>
                        @endforeach
                    </div>
                </div>

                <!-- Department Column -->
                <div class="border border-gray-200 p-2">
                    <div class="mb-2 space-y-1">
                        <label class="flex items-center space-x-1 text-xs cursor-pointer">
                            <input type="radio" name="selection_by_dept" value="all_dept" {{ old('selection_by_dept','all_dept') == 'all_dept' ? 'checked' : '' }} class="h-3 w-3">
                            <span class="font-bold">All Department</span>
                        </label>
                        <label class="flex items-center space-x-1 text-xs cursor-pointer">
                            <input type="radio" name="selection_by_dept" value="few_dept" {{ old('selection_by_dept') == 'few_dept' ? 'checked' : '' }} class="h-3 w-3">
                            <span>Few Department</span>
                        </label>
                        <label class="flex items-center space-x-1 text-xs cursor-pointer">
                            <input type="checkbox" id="selectAllDept" class="h-3 w-3">
                            <span class="text-[10px] text-gray-500">SelectAll/De-Select All</span>
                        </label>
                    </div>
                    <div class="space-y-1 max-h-40 overflow-y-auto">
                        @foreach($departments as $dept)
                        <label class="flex items-center space-x-1 text-[10px] cursor-pointer">
                            <input type="checkbox" name="department_ids[]" value="{{ $dept->id }}" class="h-3 w-3 dept-item" {{ in_array($dept->id, old('department_ids', [])) ? 'checked' : '' }}>
                            <span>{{ $dept->name }}</span>
                        </label>
                        @endforeach
                    </div>
                </div>

                <!-- Designation Column -->
                <div class="border border-gray-200 p-2">
                    <div class="mb-2 space-y-1">
                        <label class="flex items-center space-x-1 text-xs cursor-pointer">
                            <input type="radio" name="selection_by_desig" value="all_desig" {{ old('selection_by_desig','all_desig') == 'all_desig' ? 'checked' : '' }} class="h-3 w-3">
                            <span class="font-bold">All Designation</span>
                        </label>
                        <label class="flex items-center space-x-1 text-xs cursor-pointer">
                            <input type="radio" name="selection_by_desig" value="few_desig" {{ old('selection_by_desig') == 'few_desig' ? 'checked' : '' }} class="h-3 w-3">
                            <span>Few Designation</span>
                        </label>
                        <label class="flex items-center space-x-1 text-xs cursor-pointer">
                            <input type="checkbox" id="selectAllDesig" class="h-3 w-3">
                            <span class="text-[10px] text-gray-500">SelectAll/De-Select All</span>
                        </label>
                    </div>
                    <div class="space-y-1 max-h-40 overflow-y-auto">
                        @foreach($designations as $desig)
                        <label class="flex items-center space-x-1 text-[10px] cursor-pointer">
                            <input type="checkbox" name="designation_ids[]" value="{{ $desig->id }}" class="h-3 w-3 desig-item" {{ in_array($desig->id, old('designation_ids', [])) ? 'checked' : '' }}>
                            <span>{{ $desig->name }}</span>
                        </label>
                        @endforeach
                    </div>
                </div>

                <!-- Employee Column -->
                <div class="border border-gray-200 p-2">
                    <div class="mb-2 space-y-1">
                        <label class="flex items-center space-x-1 text-xs cursor-pointer">
                            <input type="radio" name="selection_by_emp" value="all_emp" {{ old('selection_by_emp','all_emp') == 'all_emp' ? 'checked' : '' }} class="h-3 w-3">
                            <span class="font-bold">All employee</span>
                        </label>
                        <label class="flex items-center space-x-1 text-xs cursor-pointer">
                            <input type="radio" name="selection_by_emp" value="few_emp" {{ old('selection_by_emp') == 'few_emp' ? 'checked' : '' }} class="h-3 w-3">
                            <span>Few Employee</span>
                        </label>
                        <label class="flex items-center space-x-1 text-xs cursor-pointer">
                            <input type="checkbox" id="selectAllEmp" class="h-3 w-3">
                            <span class="text-[10px] text-gray-500">SelectAll/De-Select All</span>
                        </label>
                    </div>
                    <div class="mb-1">
                        <input type="text" id="empSearch" placeholder="Search employee" class="w-full border border-gray-300 px-2 py-1 text-[10px] focus:outline-none focus:border-cyan-500 focus:bg-white focus:ring-2 focus:ring-cyan-500/20">
                    </div>
                    <div class="space-y-1 max-h-36 overflow-y-auto" id="empList">
                        @foreach($employees as $emp)
                        <label class="flex items-center space-x-1 text-[10px] cursor-pointer emp-entry">
                            <input type="checkbox" name="employee_ids[]" value="{{ $emp->id }}" class="h-3 w-3 emp-item" {{ in_array($emp->id, old('employee_ids', [])) ? 'checked' : '' }}>
                            <span class="emp-name">{{ $emp->emp_code ?? $emp->enroll_no }} : {{ $emp->name }}</span>
                        </label>
                        @endforeach
                    </div>
                </div>

            </div>
        </div>

        <!-- Action Buttons -->
        <div class="mt-6 flex justify-center space-x-2">
            <button type="submit" class="bg-gradient-to-r from-emerald-500 to-emerald-600 hover:from-emerald-600 hover:to-emerald-700 text-white px-8 py-1.5 rounded shadow text-sm font-semibold transition">Save</button>
            <a href="{{ route('holidays.index') }}" class="bg-[#dc3545] hover:bg-[#c82333] text-white px-8 py-1.5 rounded shadow text-sm font-semibold transition">Close</a>
        </div>

    </form>
</div>
</div>

<script>
// Select All / Deselect All helpers
function setupSelectAll(checkboxId, itemClass) {
    const master = document.getElementById(checkboxId);
    if (!master) return;
    master.addEventListener('change', function() {
        document.querySelectorAll('.' + itemClass).forEach(cb => cb.checked = master.checked);
    });
    // Sync master if all checked
    document.querySelectorAll('.' + itemClass).forEach(cb => {
        cb.addEventListener('change', function() {
            const all = document.querySelectorAll('.' + itemClass);
            const checked = document.querySelectorAll('.' + itemClass + ':checked');
            master.checked = (all.length === checked.length);
            master.indeterminate = (checked.length > 0 && checked.length < all.length);
        });
    });
}
// setupSelectAll('selectAllCompany', 'company-item');
setupSelectAll('selectAllBranch', 'branch-item');
setupSelectAll('selectAllDept', 'dept-item');
setupSelectAll('selectAllDesig', 'desig-item');
setupSelectAll('selectAllEmp', 'emp-item');

// Employee Search
document.getElementById('empSearch').addEventListener('input', function() {
    const q = this.value.toLowerCase();
    document.querySelectorAll('.emp-entry').forEach(row => {
        const name = row.querySelector('.emp-name').textContent.toLowerCase();
        row.style.display = name.includes(q) ? '' : 'none';
    });
});
</script>
@endsection