@extends('admin.layouts.app')

@section('content')
    <div class="bg-gray-100 min-h-full p-4">
        <form action="{{ route('employees.store') }}" method="POST" enctype="multipart/form-data" id="empForm">
            @csrf
            <!-- Header -->
            <div class="bg-[#ff8a65] text-white px-4 py-2 font-bold text-sm shadow-sm mb-4 rounded-t-md">
                <i class="fa-solid fa-pen-to-square mr-2"></i> Add/Edit Employee Details
            </div>

            <div class="flex flex-col lg:flex-row gap-4 mb-4">
                <!-- Left Sidebar Profile -->
                <div class="w-full lg:w-[250px] bg-white p-4 shadow-sm border border-gray-200 flex flex-col h-fit">
                    <label class="flex items-center space-x-2 mb-2 cursor-pointer">
                        <input type="checkbox" name="allow_notifications" value="1" class="h-3 w-3">
                        <span class="text-[11px] font-bold text-gray-800">Allow Notifications</span>
                    </label>
                    <label class="flex items-center space-x-2 mb-6 cursor-pointer">
                        <input type="checkbox" name="auto_approved_gps_punch" value="1" class="h-3 w-3">
                        <span class="text-[11px] font-bold text-gray-800">Auto Approved Gps Punch</span>
                    </label>

                    <div class="flex flex-col items-center mb-6">
                        <div
                            class="w-32 h-32 bg-[#e0e0e0] rounded-b-[40px] flex items-end justify-center overflow-hidden mb-2 relative group cursor-pointer border border-gray-300">
                            <!-- Default avatar shape -->
                            <div class="w-24 h-24 bg-[#42a5f5] rounded-full absolute bottom-[-20px]"></div>
                            <div class="w-12 h-12 bg-[#42a5f5] rounded-full absolute top-4"></div>
                            <input type="file" name="photo" class="absolute inset-0 w-full h-full opacity-0 cursor-pointer"
                                accept="image/*">
                        </div>
                        <div
                            class="flex items-start space-x-2 w-full justify-center text-[9px] text-gray-500 leading-tight">
                            <i
                                class="fa-solid fa-trash text-[#ffb300] text-lg cursor-pointer hover:text-orange-500 transition"></i>
                            <span>(Photo Size 400 X 400)<br>Photo Size less then 40KB</span>
                        </div>
                    </div>

                    <div class="w-full">
                        <label class="block text-[11px] font-bold text-gray-800 mb-1">Mobile Attendance Mode</label>
                        <select name="mobile_attendance_mode"
                            class="w-full border border-gray-300 px-2 py-1.5 text-xs focus:border-cyan-500 focus:bg-white focus:ring-2 focus:ring-cyan-500/20 focus:outline-none bg-white">
                            <option value="GPS Attendance">GPS Attendance</option>
                            <option value="Manual">Manual</option>
                        </select>
                    </div>
                </div>

                <!-- Right Main Area -->
                <div class="flex-1 flex flex-col gap-4">

                    <!-- Personal Details -->
                    <div class="bg-gray-50 p-4 shadow-sm border border-gray-200">
                        <h3 class="text-gray-700 font-normal text-lg mb-4">Personal Details</h3>
                        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-x-4 gap-y-3">

                            {{-- Row 1 --}}
                            <div>
                                <label class="block text-[11px] font-bold text-gray-800 mb-1">Name <span
                                        class="text-red-500">*</span></label>
                                <input type="text" name="name" value="{{ old('name') }}" required
                                    class="w-full border border-gray-300 px-2 py-1 text-xs focus:border-cyan-500 focus:bg-white focus:ring-2 focus:ring-cyan-500/20 focus:outline-none">
                            </div>
                            <div>
                                <label class="block text-[11px] font-bold text-gray-800 mb-1">Father/Husband Name</label>
                                <input type="text" name="father_husband_name" value="{{ old('father_husband_name') }}"
                                    class="w-full border border-gray-300 px-2 py-1 text-xs focus:border-cyan-500 focus:bg-white focus:ring-2 focus:ring-cyan-500/20 focus:outline-none">
                            </div>
                            <div>
                                <label class="block text-[11px] font-bold text-gray-800 mb-1">Enroll No. <span
                                        class="text-red-500">*</span> <span class="text-gray-400 font-normal">(Biometric
                                        ID)</span></label>
                                <input type="text" name="enroll_no" value="{{ old('enroll_no') }}" required
                                    class="w-full border border-gray-300 px-2 py-1 text-xs focus:border-cyan-500 focus:bg-white focus:ring-2 focus:ring-cyan-500/20 focus:outline-none">
                            </div>
                            <div>
                                <label class="block text-[11px] font-bold text-gray-800 mb-1">Employee Code <span
                                        class="text-red-500">*</span></label>
                                <input type="text" name="employee_code" value="{{ $nextEmployeeCode }}" readonly
                                    class="w-full border border-gray-300 px-2 py-1 text-xs bg-gray-100 cursor-not-allowed focus:outline-none">
                            </div>

                            {{-- Row 2 --}}
                            <div>
                                <label class="block text-[11px] font-bold text-gray-800 mb-1">Proximity Card No.</label>
                                <input type="text" name="proximity_card_no" value="{{ old('proximity_card_no') }}"
                                    class="w-full border border-gray-300 px-2 py-1 text-xs focus:border-cyan-500 focus:bg-white focus:ring-2 focus:ring-cyan-500/20 focus:outline-none">
                            </div>
                            <div>
                                <label class="block text-[11px] font-bold text-gray-800 mb-1">Date of Birth</label>
                                <input type="date" name="dob" value="{{ old('dob') }}"
                                    class="w-full border border-gray-300 px-2 py-1 text-xs text-gray-500 focus:border-cyan-500 focus:bg-white focus:ring-2 focus:ring-cyan-500/20 focus:outline-none">
                            </div>
                            <div>
                                <label class="block text-[11px] font-bold text-gray-800 mb-1">Mobile No.</label>
                                <input type="text" name="mobile_no" value="{{ old('mobile_no') }}"
                                    class="w-full border border-gray-300 px-2 py-1 text-xs focus:border-cyan-500 focus:bg-white focus:ring-2 focus:ring-cyan-500/20 focus:outline-none">
                            </div>
                            <div>
                                <label class="block text-[11px] font-bold text-gray-800 mb-1">Email Address</label>
                                <input type="email" name="email" value="{{ old('email') }}"
                                    class="w-full border border-gray-300 px-2 py-1 text-xs focus:border-cyan-500 focus:bg-white focus:ring-2 focus:ring-cyan-500/20 focus:outline-none">
                            </div>

                            <div>
                                <label class="block text-[11px] font-bold text-gray-800 mb-1">Login Password <span class="text-red-500">*</span></label>
                                <input type="password" name="password" required placeholder="Employee Login Password"
                                    class="w-full border border-gray-300 px-2 py-1 text-xs focus:border-cyan-500 focus:bg-white focus:ring-2 focus:ring-cyan-500/20 focus:outline-none">
                            </div>

                            {{-- Row 3 --}}
                            <div>
                                <label class="block text-[11px] font-bold text-gray-800 mb-1">Govt. UID</label>
                                <input type="text" name="govt_uid" value="{{ old('govt_uid') }}"
                                    class="w-full border border-gray-300 px-2 py-1 text-xs focus:border-cyan-500 focus:bg-white focus:ring-2 focus:ring-cyan-500/20 focus:outline-none">
                            </div>
                            <div>
                                <label class="block text-[11px] font-bold text-gray-800 mb-1">Attachment 1 <span
                                        class="text-gray-400 font-normal">(size 100KB)</span></label>
                                <input type="file" name="attachment_1"
                                    class="w-full border border-gray-300 bg-white text-[10px] focus:border-cyan-500 focus:bg-white focus:ring-2 focus:ring-cyan-500/20 focus:outline-none file:mr-2 file:py-1 file:px-2 file:border-0 file:border-r file:border-gray-300 file:bg-gray-100 file:text-gray-700 hover:file:bg-gray-200">
                            </div>
                            <div>
                                <label class="block text-[11px] font-bold text-gray-800 mb-1">Attachment 2 <span
                                        class="text-gray-400 font-normal">(size 100KB)</span></label>
                                <input type="file" name="attachment_2"
                                    class="w-full border border-gray-300 bg-white text-[10px] focus:border-cyan-500 focus:bg-white focus:ring-2 focus:ring-cyan-500/20 focus:outline-none file:mr-2 file:py-1 file:px-2 file:border-0 file:border-r file:border-gray-300 file:bg-gray-100 file:text-gray-700 hover:file:bg-gray-200">
                            </div>
                            <div>
                                <label class="block text-[11px] font-bold text-gray-800 mb-1">Address</label>
                                <textarea name="address" rows="4"
                                    class="w-full border border-gray-300 px-2 py-1 text-xs focus:border-cyan-500 focus:bg-white focus:ring-2 focus:ring-cyan-500/20 focus:outline-none resize-none">{{ old('address') }}</textarea>
                            </div>

                            {{-- Row 4 --}}
                            <div>
                                <label class="block text-[11px] font-bold text-gray-800 mb-1">Gender</label>
                                <select name="gender"
                                    class="w-full border border-gray-300 px-2 py-1 text-xs focus:border-cyan-500 focus:bg-white focus:ring-2 focus:ring-cyan-500/20 focus:outline-none text-gray-500 bg-white">
                                    <option value="">Select Gender</option>
                                    <option value="Male" {{ old('gender') == 'Male' ? 'selected' : '' }}>Male</option>
                                    <option value="Female" {{ old('gender') == 'Female' ? 'selected' : '' }}>Female</option>
                                </select>
                            </div>
                            <div>
                                <label class="block text-[11px] font-bold text-gray-800 mb-1">Bank Name</label>
                                <input type="text" name="bank_name" value="{{ old('bank_name') }}"
                                    class="w-full border border-gray-300 px-2 py-1 text-xs focus:border-cyan-500 focus:bg-white focus:ring-2 focus:ring-cyan-500/20 focus:outline-none">
                            </div>
                            <div>
                                <label class="block text-[11px] font-bold text-gray-800 mb-1">Bank A/C Number</label>
                                <input type="text" name="bank_ac_number" value="{{ old('bank_ac_number') }}"
                                    class="w-full border border-gray-300 px-2 py-1 text-xs focus:border-cyan-500 focus:bg-white focus:ring-2 focus:ring-cyan-500/20 focus:outline-none">
                            </div>
                            <div>
                                <label class="block text-[11px] font-bold text-gray-800 mb-1">Bank IFSC Code</label>
                                <input type="text" name="bank_ifsc_code" value="{{ old('bank_ifsc_code') }}"
                                    class="w-full border border-gray-300 px-2 py-1 text-xs focus:border-cyan-500 focus:bg-white focus:ring-2 focus:ring-cyan-500/20 focus:outline-none">
                            </div>

                            {{-- Row 5 --}}
                            <div>
                                <label class="block text-[11px] font-bold text-gray-800 mb-1">Nationality</label>
                                <input type="text" name="nationality" value="{{ old('nationality') }}"
                                    class="w-full border border-gray-300 px-2 py-1 text-xs focus:border-cyan-500 focus:bg-white focus:ring-2 focus:ring-cyan-500/20 focus:outline-none">
                            </div>
                            <div>
                                <label class="block text-[11px] font-bold text-gray-800 mb-1">Telegram Token</label>
                                <input type="text" name="telegram_token" id="telegram_token"
                                    value="{{ old('telegram_token') }}"
                                    class="w-full border border-gray-300 px-2 py-1 text-xs focus:border-cyan-500 focus:bg-white focus:ring-2 focus:ring-cyan-500/20 focus:outline-none">
                            </div>
                            <div class="flex items-end">
                                <button type="button" id="btnVerifyTelegram"
                                    class="w-full bg-gradient-to-r from-emerald-500 to-emerald-600 hover:from-emerald-600 hover:to-emerald-700 text-white py-1.5 px-2 text-[11px] font-semibold transition rounded-sm">Verify
                                    Token &amp; Get Chat_Id</button>
                            </div>
                            <div>
                                <label class="block text-[11px] font-bold text-gray-800 mb-1">ChatID</label>
                                <input type="text" name="chat_id" id="chat_id" value="{{ old('chat_id') }}" readonly
                                    class="w-full border border-gray-300 px-2 py-1 text-xs bg-gray-50 focus:outline-none">
                            </div>

                        </div>
                    </div>
                </div>
            </div> <!-- End of Top Section (Sidebar + Personal Details) -->

            <div class="flex flex-col gap-4">

                <!-- Three column split for Company, Employee, Branch Access -->
                <div class="grid grid-cols-1 lg:grid-cols-4 gap-4">

                    <!-- Company Details -->
                    <div class="bg-white p-4 shadow-sm border border-gray-200">
                        <h3 class="text-gray-700 font-normal text-[15px] border-b pb-2 mb-3">Company Details</h3>
                        <div class="space-y-4">
                            <div>
                                <label class="block text-[11px] font-bold text-gray-800 mb-1">Company Name <span
                                        class="text-red-500">*</span></label>
                                <select disabled
                                    class="w-full border border-gray-300 px-2 py-1 text-xs bg-gray-50 text-gray-500">
                                    <option>
                                        {{ \App\Models\Company::where('user_id', session('active_company_id'))->first()->company_name ?? 'N/A' }}
                                    </option>
                                </select>
                            </div>
                            <div>
                                <label class="block text-[11px] font-bold text-gray-800 mb-1">Branch Name <span
                                        class="text-red-500">*</span></label>
                                <select name="branch_id"
                                    class="w-full border border-gray-300 px-2 py-1 text-xs focus:border-cyan-500 focus:bg-white focus:ring-2 focus:ring-cyan-500/20 focus:outline-none text-gray-600 bg-white">
                                    <option value="">Select Branch</option>
                                    @foreach($branches as $branch)
                                        <option value="{{ $branch->id }}">{{ $branch->name }}</option>
                                    @endforeach
                                </select>
                            </div>
                        </div>
                    </div>

                    <!-- Employee Details -->
                    <div class="lg:col-span-2 bg-gray-50 p-4 shadow-sm border border-gray-200">
                        <h3 class="text-gray-700 font-normal text-[15px] border-b pb-2 mb-3">Employee Details</h3>
                        <div class="grid grid-cols-1 md:grid-cols-3 gap-x-4 gap-y-4">
                            <div>
                                <label class="block text-[11px] font-bold text-gray-800 mb-1">Dept. Name <span
                                        class="text-red-500">*</span></label>
                                <select name="department_id"
                                    class="w-full border border-gray-300 px-2 py-1 text-xs focus:border-cyan-500 focus:bg-white focus:ring-2 focus:ring-cyan-500/20 focus:outline-none text-gray-600 bg-white">
                                    <option value="">Select Department</option>
                                    @foreach($departments as $dept)
                                        <option value="{{ $dept->id }}">{{ $dept->name }}</option>
                                    @endforeach
                                </select>
                            </div>
                            <div>
                                <label class="block text-[11px] font-bold text-gray-800 mb-1">Designation <span
                                        class="text-red-500">*</span></label>
                                <select name="designation_id"
                                    class="w-full border border-gray-300 px-2 py-1 text-xs focus:border-cyan-500 focus:bg-white focus:ring-2 focus:ring-cyan-500/20 focus:outline-none text-gray-600 bg-white">
                                    <option value="">Select Designation</option>
                                    @foreach($designations as $desig)
                                        <option value="{{ $desig->id }}">{{ $desig->name }}</option>
                                    @endforeach
                                </select>
                            </div>
                            <div>
                                <label class="block text-[11px] font-bold text-gray-800 mb-1">Office Time Policy <span
                                        class="text-red-500">*</span></label>
                                <select name="policy_id"
                                    class="w-full border border-gray-300 px-2 py-1 text-xs focus:border-cyan-500 focus:bg-white focus:ring-2 focus:ring-cyan-500/20 focus:outline-none text-gray-600 bg-white">
                                    <option value="">Select Policy</option>
                                    @foreach($policies as $policy)
                                        <option value="{{ $policy->id }}">{{ $policy->name }}</option>
                                    @endforeach
                                </select>
                            </div>
                            <div>
                                <label class="block text-[11px] font-bold text-gray-800 mb-1">Date Of Joining <span
                                        class="text-red-500">*</span></label>
                                <input type="date" name="date_of_joining" value="{{ old('date_of_joining') }}"
                                    class="w-full border border-gray-300 px-2 py-1 text-xs text-gray-500 focus:border-cyan-500 focus:bg-white focus:ring-2 focus:ring-cyan-500/20 focus:outline-none">
                            </div>
                            <div>
                                <label class="block text-[11px] font-bold text-gray-800 mb-1">Shift Start Date <span
                                        class="text-red-500">*</span></label>
                                <input type="date" name="shift_start_date" value="{{ old('shift_start_date') }}"
                                    class="w-full border border-gray-300 px-2 py-1 text-xs text-gray-500 focus:border-cyan-500 focus:bg-white focus:ring-2 focus:ring-cyan-500/20 focus:outline-none">
                            </div>
                            <div>
                                <label class="block text-[11px] font-bold text-gray-800 mb-1">Resignation Date</label>
                                <input type="date" name="resignation_date" value="{{ old('resignation_date') }}"
                                    class="w-full border border-gray-300 px-2 py-1 text-xs text-gray-500 focus:border-cyan-500 focus:bg-white focus:ring-2 focus:ring-cyan-500/20 focus:outline-none">
                            </div>
                        </div>
                    </div>

                    <!-- Branch Access -->
                    <div class="bg-white p-4 shadow-sm border border-gray-200">
                        <h3 class="text-cyan-600 font-bold text-xs border-b pb-1 mb-2">Branch Access for GEO Fencing</h3>
                        <div class="h-[120px] overflow-y-auto border border-gray-200 p-2">
                            @foreach($branches as $branch)
                                <label class="flex items-center space-x-2 cursor-pointer mb-1">
                                    <input type="checkbox" name="branch_access_for_geo_fencing[]" value="{{ $branch->id }}"
                                        class="h-3 w-3">
                                    <span class="text-[11px] text-gray-700">{{ $branch->name }}</span>
                                </label>
                            @endforeach
                        </div>
                    </div>

                </div>

                <!-- Shift Details & Auto Shift -->
                <div class="grid grid-cols-1 lg:grid-cols-4 gap-4">

                    <div class="lg:col-span-3 bg-white p-4 shadow-sm border border-gray-200">
                        <h3 class="text-gray-700 font-normal text-[15px] border-b pb-2 mb-3">Shift & Policy Details</h3>
                        <div class="grid grid-cols-1 md:grid-cols-3 gap-x-4 gap-y-4">
                            <div>
                                <label class="block text-[11px] font-bold text-gray-800 mb-1">Shift Type <span
                                        class="text-red-500">*</span></label>
                                <select name="shift_type"
                                    class="w-full border border-gray-300 px-2 py-1 text-xs focus:border-cyan-500 focus:bg-white focus:ring-2 focus:ring-cyan-500/20 focus:outline-none text-gray-600 bg-white">
                                    <option value="Fixed" {{ old('shift_type') == 'Fixed' ? 'selected' : '' }}>Fixed</option>
                                    <option value="Rotational" {{ old('shift_type') == 'Rotational' ? 'selected' : '' }}>
                                        Rotational</option>
                                </select>
                            </div>
                            <div>
                                <label class="block text-[11px] font-bold text-gray-800 mb-1">Shift Name <span
                                        class="text-red-500">*</span></label>
                                <select name="shift_id" id="shift_id" required
                                    class="w-full border border-gray-300 px-2 py-1 text-xs focus:border-cyan-500 focus:bg-white focus:ring-2 focus:ring-cyan-500/20 focus:outline-none text-gray-600 bg-white">
                                    <option value="">Select Shift</option>
                                    @foreach($shifts as $shift)
                                        @php
                                            $wo_days_json = is_array($shift->second_wo_days) ? json_encode($shift->second_wo_days) : ($shift->second_wo_days ?? '[]');
                                        @endphp
                                        <option value="{{ $shift->id }}" data-half="{{ $shift->half_day_shift }}"
                                            data-firstwo="{{ $shift->first_weekly_off }}"
                                            data-secondwo="{{ $shift->second_weekly_off }}"
                                            data-secondwotype="{{ $shift->second_wo_type }}" data-wodays="{{ $wo_days_json }}"
                                            {{ old('shift_id') == $shift->id ? 'selected' : '' }}>
                                            {{ $shift->name }} ({{ $shift->shift_code }})
                                        </option>
                                    @endforeach
                                </select>
                            </div>

                            <!-- Second Weekly Off Days Header inside Orange Box -->
                            <div
                                class="bg-[#ff8a65] p-2 flex flex-col xl:flex-row xl:items-center justify-between rounded-sm relative gap-2 mt-4">
                                <span class="text-white text-[11px] font-semibold whitespace-nowrap">Second Weekly Off
                                    Days</span>
                                <div
                                    class="bg-white flex flex-wrap items-center justify-center px-2 py-1 flex-1 gap-2 border border-gray-300 shadow-sm rounded-sm">
                                    @foreach(['I', 'II', 'III', 'IV', 'V'] as $day)
                                        <label class="flex items-center space-x-1 cursor-pointer">
                                            <input type="checkbox" name="second_wo_days[]" value="{{ $day }}"
                                                class="h-3 w-3 accent-[#ff9800]">
                                            <span class="text-[10px] text-gray-700">{{ $day }}</span>
                                        </label>
                                    @endforeach
                                </div>
                            </div>

                            <div>
                                <label class="block text-[11px] font-bold text-gray-800 mb-1">First Weekly Off</label>
                                <select name="first_weekly_off"
                                    class="w-full border border-gray-300 px-2 py-1 text-xs focus:border-cyan-500 focus:bg-white focus:ring-2 focus:ring-cyan-500/20 focus:outline-none text-gray-600 bg-white">
                                    @foreach(['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'None', 'All Weeks'] as $day)
                                        <option value="{{ $day }}" {{ old('first_weekly_off') == $day ? 'selected' : '' }}>
                                            {{ $day }}</option>
                                    @endforeach
                                </select>
                            </div>
                            <div>
                                <label class="block text-[11px] font-bold text-cyan-600 mb-1">Extra Allowances for
                                    Tour</label>
                                <input type="text" name="extra_allowances_for_tour"
                                    value="{{ old('extra_allowances_for_tour', '00.00') }}"
                                    class="w-full border border-gray-300 px-2 py-1 text-xs focus:border-cyan-500 focus:bg-white focus:ring-2 focus:ring-cyan-500/20 focus:outline-none text-gray-500">
                            </div>
                            <div>
                                <label class="block text-[11px] font-bold text-gray-800 mb-1">Second WO Type</label>
                                <select name="second_wo_type"
                                    class="w-full border border-gray-300 px-2 py-1 text-xs focus:border-cyan-500 focus:bg-white focus:ring-2 focus:ring-cyan-500/20 focus:outline-none text-gray-600 bg-white">
                                    <option value="None" {{ old('second_wo_type') == 'None' ? 'selected' : '' }}>None</option>
                                    <option value="Half" {{ old('second_wo_type') == 'Half' ? 'selected' : '' }}>Half</option>
                                    <option value="Full" {{ old('second_wo_type') == 'Full' ? 'selected' : '' }}>Full</option>
                                </select>
                            </div>

                            <div>
                                <label class="block text-[11px] font-bold text-gray-800 mb-1">Second Weekly Off</label>
                                <select name="second_weekly_off"
                                    class="w-full border border-gray-300 px-2 py-1 text-xs focus:border-cyan-500 focus:bg-white focus:ring-2 focus:ring-cyan-500/20 focus:outline-none text-gray-600 bg-white">
                                    @foreach(['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'None', 'All Weeks'] as $day)
                                        <option value="{{ $day }}" {{ old('second_weekly_off') == $day ? 'selected' : '' }}>
                                            {{ $day }}</option>
                                    @endforeach
                                </select>
                            </div>
                            <div>
                                <label class="block text-[11px] font-bold text-gray-800 mb-1">Half Day Shift</label>
                                <select name="half_day_shift"
                                    class="w-full border border-gray-300 px-2 py-1 text-xs focus:border-cyan-500 focus:bg-white focus:ring-2 focus:ring-cyan-500/20 focus:outline-none text-gray-600 bg-white">
                                    <option value="None" {{ old('half_day_shift') == 'None' ? 'selected' : '' }}>None</option>
                                    @foreach($shifts as $shift)
                                        <option value="{{ $shift->id }}" {{ old('half_day_shift') == $shift->id ? 'selected' : '' }}>{{ $shift->name }} ({{ $shift->shift_code }})</option>
                                    @endforeach
                                </select>
                            </div>

                        </div>
                    </div>

                    <!-- Auto Shift Search List -->
                    <div class="bg-white p-4 shadow-sm border border-gray-200 flex flex-col h-full">
                        <div class="flex items-center justify-between mb-2">
                            <label class="flex items-center space-x-1 cursor-pointer">
                                <input type="checkbox" id="selectAllAutoShift" class="h-3 w-3 accent-[#ff9800]">
                                <span class="text-cyan-600 font-bold text-xs">is Auto Shift</span>
                            </label>
                            <input type="text" placeholder="search"
                                class="border border-gray-300 px-2 py-0.5 text-xs w-24 focus:outline-none">
                        </div>
                        <div class="flex-1 overflow-y-auto border border-gray-100 p-2 max-h-40">
                            @foreach($shifts as $shift)
                                <label class="flex items-center space-x-2 cursor-pointer mb-1">
                                    <input type="checkbox" name="is_auto_shift[]" value="{{ $shift->id }}" class="h-3 w-3">
                                    <span class="text-[11px] text-gray-700">{{ $shift->name }} ({{ $shift->shift_code }})</span>
                                </label>
                            @endforeach
                        </div>
                    </div>

                </div>

                <!-- Access Control Setting -->
                <div class="bg-white p-4 shadow-sm border border-gray-200">
                    <h3 class="text-cyan-600 font-bold text-sm border-b pb-1 mb-3">
                        Access Control Setting <span class="text-[10px] font-normal text-cyan-600 ml-2">(Note WeekTime Zone
                            2,3,4 Only For access controller 2 Door And 4 Door)</span>
                    </h3>
                    <div class="grid grid-cols-1 md:grid-cols-6 gap-4">
                        @for($i = 1; $i <= 4; $i++)
                            <div>
                                <label class="block text-[11px] font-bold text-gray-800 mb-1">Week Time Zone {{ $i }}</label>
                                <select name="week_time_zone_{{ $i }}"
                                    class="w-full border border-gray-300 px-2 py-1 text-xs focus:border-cyan-500 focus:bg-white focus:ring-2 focus:ring-cyan-500/20 focus:outline-none bg-white text-gray-600">
                                    @for($z = 0; $z <= 10; $z++)
                                        <option value="{{ $z }}" {{ old('week_time_zone_' . $i, ($i == 1 ? '1' : '0')) == $z ? 'selected' : '' }}>{{ $z }}</option>
                                    @endfor
                                </select>
                            </div>
                        @endfor
                        <div>
                            <label class="block text-[11px] font-bold text-gray-800 mb-1">Validity Start*</label>
                            <input type="date" name="validity_start" value="{{ old('validity_start') }}"
                                class="w-full border border-gray-300 px-2 py-1 text-xs focus:border-cyan-500 focus:bg-white focus:ring-2 focus:ring-cyan-500/20 focus:outline-none text-gray-500">
                        </div>
                        <div>
                            <label class="block text-[11px] font-bold text-gray-800 mb-1">Validity End*</label>
                            <input type="date" name="validity_end" value="{{ old('validity_end') }}"
                                class="w-full border border-gray-300 px-2 py-1 text-xs focus:border-cyan-500 focus:bg-white focus:ring-2 focus:ring-cyan-500/20 focus:outline-none text-gray-500">
                        </div>
                    </div>
                </div>

                <!-- Action Buttons -->
                <div class="flex justify-center space-x-4 mt-2 pb-6">
                    <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-10 py-1.5 shadow text-sm font-semibold transition">Save</button>
                    <a href="{{ route('employees.index') }}"
                        class="bg-[#dc3545] hover:bg-[#c82333] text-white px-10 py-1.5 shadow text-sm font-semibold transition inline-block text-center">Cancel</a>
                </div>

            </div> <!-- End of full-width sections -->
        </form>
    </div>
@endsection

@section('scripts')
    <script>
        $(document).ready(function () {
            // Shift Auto-fill logic
            $('#shift_id').on('change', function () {
                var selectedOption = $(this).find('option:selected');
                if (selectedOption.val() !== '') {
                    var halfDay = selectedOption.data('half');
                    var firstWo = selectedOption.data('firstwo');
                    var secondWo = selectedOption.data('secondwo');
                    var secondWoType = selectedOption.data('secondwotype');
                    var woDays = selectedOption.data('wodays') || [];

                    $('select[name="half_day_shift"]').val(halfDay);
                    $('select[name="first_weekly_off"]').val(firstWo);
                    $('select[name="second_weekly_off"]').val(secondWo);
                    $('select[name="second_wo_type"]').val(secondWoType);

                    $('input[name="second_wo_days[]"]').prop('checked', false);
                    if (Array.isArray(woDays)) {
                        woDays.forEach(function (day) {
                            $('input[name="second_wo_days[]"][value="' + day + '"]').prop('checked', true);
                        });
                    }
                }
            });

            // Telegram Verify Action Placeholder
            $('#btnVerifyTelegram').on('click', function () {
                var token = $('#telegram_token').val();
                if (!token) {
                    alert('Please enter Telegram Token first.');
                    return;
                }

                // Temporary simple alert, backend route will be added in controller later
                $(this).text('Verifying...');
                setTimeout(() => {
                    alert('Please ensure you have sent a message to the bot first.');
                    $(this).text('Verify Token & Get Chat_Id');
                    // You can add AJAX request to a backend route here.
                }, 1000);
            });

            // Select All Auto Shift logic
            $('#selectAllAutoShift').on('change', function () {
                var isChecked = $(this).is(':checked');
                $('input[name="is_auto_shift[]"]').prop('checked', isChecked);
            });
        });
    </script>
@endsection