@extends('admin.layouts.app')

@section('content')
<div class="bg-gray-100 min-h-full p-4">
    <form action="{{ route('employees.update', $employee->id) }}" method="POST" enctype="multipart/form-data" id="empForm">
        @csrf
        @method('PUT')
        <!-- 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" {{ old('allow_notifications', $employee->allow_notifications) ? 'checked' : '' }} 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" {{ old('auto_approved_gps_punch', $employee->auto_approved_gps_punch) ? 'checked' : '' }} 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">
                        @if($employee->photo)
                            <img src="{{ asset('storage/' . $employee->photo) }}" class="w-full h-full object-cover">
                        @else
                            <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>
                        @endif
                        <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" {{ old('mobile_attendance_mode', $employee->mobile_attendance_mode) == 'GPS Attendance' ? 'selected' : '' }}>GPS Attendance</option>
                        <option value="Manual" {{ old('mobile_attendance_mode', $employee->mobile_attendance_mode) == 'Manual' ? 'selected' : '' }}>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', $employee->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', $employee->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', $employee->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="{{ old('employee_code', $employee->employee_code) }}" 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', $employee->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', $employee->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', $employee->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', $employee->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 (Leave blank to keep current)</label>
                            <input type="password" name="password" placeholder="New 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', $employee->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 @if($employee->attachment_1) <a href="{{ asset('storage/' . $employee->attachment_1) }}" target="_blank" class="text-blue-500 ml-1">View</a> @endif</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 @if($employee->attachment_2) <a href="{{ asset('storage/' . $employee->attachment_2) }}" target="_blank" class="text-blue-500 ml-1">View</a> @endif</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', $employee->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', $employee->gender) == 'Male' ? 'selected' : '' }}>Male</option>
                                <option value="Female" {{ old('gender', $employee->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', $employee->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', $employee->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', $employee->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', $employee->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', $employee->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', $employee->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 }}" {{ old('branch_id', $employee->branch_id) == $branch->id ? 'selected' : '' }}>{{ $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 }}" {{ old('department_id', $employee->department_id) == $dept->id ? 'selected' : '' }}>{{ $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 }}" {{ old('designation_id', $employee->designation_id) == $desig->id ? 'selected' : '' }}>{{ $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 }}" {{ old('policy_id', $employee->policy_id) == $policy->id ? 'selected' : '' }}>{{ $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', $employee->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', $employee->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', $employee->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">
                            @php
                                $geoAccess = is_array($employee->branch_access_for_geo_fencing) ? $employee->branch_access_for_geo_fencing : [];
                            @endphp
                            @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 }}" {{ in_array($branch->id, $geoAccess) ? 'checked' : '' }} 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', $employee->shift_type) == 'Fixed' ? 'selected' : '' }}>Fixed</option>
                                    <option value="Rotational" {{ old('shift_type', $employee->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', $employee->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">
                                    @php
                                        $empWoDays = is_array(old('second_wo_days', $employee->second_wo_days)) ? old('second_wo_days', $employee->second_wo_days) : [];
                                    @endphp
                                    @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 }}" {{ in_array($day, $empWoDays) ? 'checked' : '' }} 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', $employee->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', $employee->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', $employee->second_wo_type) == 'None' ? 'selected' : '' }}>None</option>
                                    <option value="Half" {{ old('second_wo_type', $employee->second_wo_type) == 'Half' ? 'selected' : '' }}>Half</option>
                                    <option value="Full" {{ old('second_wo_type', $employee->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', $employee->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', $employee->half_day_shift) == 'None' ? 'selected' : '' }}>None</option>
                                    @foreach($shifts as $shift)
                                        <option value="{{ $shift->id }}" {{ old('half_day_shift', $employee->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">
                            @php
                                $autoShifts = is_array($employee->is_auto_shift) ? $employee->is_auto_shift : [];
                            @endphp
                            @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 }}" {{ in_array($shift->id, $autoShifts) ? 'checked' : '' }} 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, $employee->{'week_time_zone_'.$i}) == $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', $employee->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', $employee->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