@extends('admin.layouts.app')

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

    <!-- Main Container -->
    <div class="bg-white p-4 shadow-sm min-h-[500px] border border-gray-200">
        
        <form action="{{ route('policies.store') }}" method="POST" id="policyForm">
            @csrf
            
            <!-- Employee's Policy Details Section -->
            <div class="mb-6">
                <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  .5 mb-4">
                    <i class="fa-solid fa-file mr-2"></i> Employee's Policy Details
                </div>
                <div class="grid grid-cols-1 md:grid-cols-5 gap-4 px-2">
                    <div>
                        <label class="block text-[11px] font-bold text-gray-800 mb-1">Policy 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:outline-none focus:border-cyan-500 focus:bg-white focus:ring-2 focus:ring-cyan-500/20">
                    </div>
                    <div>
                        <label class="block text-[11px] font-bold text-gray-800 mb-1">Permitted Late Arrival</label>
                        <input type="time" name="permitted_late_arrival" value="{{ old('permitted_late_arrival', '00:10') }}" class="w-full border border-gray-300 px-2 py-1 text-xs focus:outline-none focus:border-cyan-500 focus:bg-white focus:ring-2 focus:ring-cyan-500/20">
                    </div>
                    <div>
                        <label class="block text-[11px] font-bold text-gray-800 mb-1">Permitted Early Departure</label>
                        <input type="time" name="permitted_early_departure" value="{{ old('permitted_early_departure', '00:10') }}" class="w-full border border-gray-300 px-2 py-1 text-xs focus:outline-none focus:border-cyan-500 focus:bg-white focus:ring-2 focus:ring-cyan-500/20">
                    </div>
                    <div>
                        <label class="block text-[11px] font-bold text-gray-800 mb-1">Mark as Half Day if working hour Less Than</label>
                        <input type="time" name="half_day_less_than" value="{{ old('half_day_less_than', '00:00') }}" class="w-full border border-gray-300 px-2 py-1 text-xs focus:outline-none focus:border-cyan-500 focus:bg-white focus:ring-2 focus:ring-cyan-500/20">
                    </div>
                    <div>
                        <label class="block text-[11px] font-bold text-gray-800 mb-1">Mark as Absent if working hour Less Than</label>
                        <input type="time" name="absent_less_than" value="{{ old('absent_less_than', '00:00') }}" class="w-full border border-gray-300 px-2 py-1 text-xs focus:outline-none focus:border-cyan-500 focus:bg-white focus:ring-2 focus:ring-cyan-500/20">
                    </div>
                </div>
            </div>

            <!-- Late Comming Rule Section -->
            <div class="mb-6">
                <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  .5 mb-4">
                    <span>Late Comming Rule</span>
                    <label class="ml-6 flex items-center space-x-1 cursor-pointer text-xs font-normal">
                        <input type="checkbox" name="is_late_active_weekoff" value="1" {{ old('is_late_active_weekoff') ? 'checked' : '' }} class="form-checkbox h-3 w-3">
                        <span>Active For Week OFF also</span>
                    </label>
                </div>
                
                <div class="grid grid-cols-1 md:grid-cols-4 gap-6 px-2">
                    @for ($i = 1; $i <= 4; $i++)
                    <div class="flex space-x-2">
                        <span class="text-xs font-bold text-gray-800 mt-1">Late {{ $i }}:</span>
                        <div class="flex-1 space-y-2">
                            <div>
                                <label class="block text-[10px] font-bold text-gray-700 mb-0.5">Late Arrival[HH:MM]</label>
                                <input type="time" name="late_{{ $i }}_time" value="{{ old('late_'.$i.'_time', '00:00') }}" class="w-full border border-gray-300 px-2 py-1 text-xs focus:outline-none focus:border-cyan-500 focus:bg-white focus:ring-2 focus:ring-cyan-500/20">
                            </div>
                            <div>
                                <label class="block text-[10px] font-bold text-gray-700 mb-0.5">Deduct Day(%)</label>
                                <select name="late_{{ $i }}_deduct" class="w-full border border-gray-300 px-2 py-1 text-xs focus:outline-none focus:border-cyan-500 focus:bg-white focus:ring-2 focus:ring-cyan-500/20">
                                    <option value="None" {{ old('late_'.$i.'_deduct') == 'None' ? 'selected' : '' }}>None</option>
                                    @for($d=10; $d<=100; $d+=10)
                                        <option value="{{ $d }}" {{ old('late_'.$i.'_deduct') == $d ? 'selected' : '' }}>{{ $d }}%</option>
                                    @endfor
                                </select>
                            </div>
                        </div>
                    </div>
                    @endfor
                </div>
            </div>

            <!-- Early Going Rule Section -->
            <div class="mb-6">
                <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  .5 mb-4">
                    <span>Early Going Rule</span>
                    <label class="ml-6 flex items-center space-x-1 cursor-pointer text-xs font-normal">
                        <input type="checkbox" name="is_early_active_weekoff" value="1" {{ old('is_early_active_weekoff') ? 'checked' : '' }} class="form-checkbox h-3 w-3">
                        <span>Active For Week OFF also</span>
                    </label>
                </div>
                
                <div class="grid grid-cols-1 md:grid-cols-4 gap-6 px-2">
                    @for ($i = 1; $i <= 4; $i++)
                    <div class="flex space-x-2">
                        <span class="text-xs font-bold text-gray-800 mt-1">Early {{ $i }}:</span>
                        <div class="flex-1 space-y-2">
                            <div>
                                <label class="block text-[10px] font-bold text-gray-700 mb-0.5">Early Departure[HH:MM]</label>
                                <input type="time" name="early_{{ $i }}_time" value="{{ old('early_'.$i.'_time', '00:00') }}" class="w-full border border-gray-300 px-2 py-1 text-xs focus:outline-none focus:border-cyan-500 focus:bg-white focus:ring-2 focus:ring-cyan-500/20">
                            </div>
                            <div>
                                <label class="block text-[10px] font-bold text-gray-700 mb-0.5">Deduct Day(%)</label>
                                <select name="early_{{ $i }}_deduct" class="w-full border border-gray-300 px-2 py-1 text-xs focus:outline-none focus:border-cyan-500 focus:bg-white focus:ring-2 focus:ring-cyan-500/20">
                                    <option value="None" {{ old('early_'.$i.'_deduct') == 'None' ? 'selected' : '' }}>None</option>
                                    @for($d=10; $d<=100; $d+=10)
                                        <option value="{{ $d }}" {{ old('early_'.$i.'_deduct') == $d ? 'selected' : '' }}>{{ $d }}%</option>
                                    @endfor
                                </select>
                            </div>
                        </div>
                    </div>
                    @endfor
                </div>
            </div>

            <!-- Punches Section -->
            <div class="grid grid-cols-1 md:grid-cols-2 gap-6 px-2 mb-6">
                <div>
                    <label class="block text-xs font-bold text-gray-800 mb-1">Required Punches In Day</label>
                    <select name="required_punches" class="w-1/2 border border-gray-300 px-2 py-1 text-xs focus:outline-none focus:border-cyan-500 focus:bg-white focus:ring-2 focus:ring-cyan-500/20">
                        <option value="Multipunch" {{ old('required_punches') == 'Multipunch' ? 'selected' : '' }}>Multipunch</option>
                        <option value="No punch" {{ old('required_punches') == 'No punch' ? 'selected' : '' }}>No punch</option>
                    </select>
                </div>
                <div>
                    <label class="block text-xs font-bold text-gray-800 mb-1">Single Punch Only*</label>
                    <select name="single_punch_action" class="w-1/2 border border-gray-300 px-2 py-1 text-xs focus:outline-none focus:border-cyan-500 focus:bg-white focus:ring-2 focus:ring-cyan-500/20">
                        <option value="Overwrite" {{ old('single_punch_action') == 'Overwrite' ? 'selected' : '' }}>Overwrite</option>
                        <option value="Fix time out" {{ old('single_punch_action') == 'Fix time out' ? 'selected' : '' }}>Fix time out</option>
                    </select>
                </div>
            </div>

            <!-- Late Comming & Overtime Settings Grid -->
            <div class="grid grid-cols-1 md:grid-cols-2 gap-4 px-2 mb-6">
                
                <!-- Late Comming Monthly -->
                <div class="bg-gray-100 p-3 rounded">
                    <div class="bg-[#3f51b5] text-white px-2 py-1 text-xs font-bold flex items-center mb-3">
                        <input type="checkbox" name="enable_late_coming_monthly" value="1" {{ old('enable_late_coming_monthly') ? 'checked' : '' }} class="mr-2 h-3 w-3">
                        Enable Late Comming Setting
                    </div>
                    <div class="grid grid-cols-4 gap-2 items-center">
                        <div class="col-span-1">
                            <label class="flex items-start space-x-1 cursor-pointer text-[10px] font-bold">
                                <input type="radio" name="late_deduction_type" value="attendance" {{ old('late_deduction_type', 'attendance') == 'attendance' ? 'checked' : '' }} class="mt-0.5">
                                <span>Deduct From Attendance</span>
                            </label>
                        </div>
                        <div class="col-span-1">
                            <label class="flex items-start space-x-1 cursor-pointer text-[10px] font-bold">
                                <input type="radio" name="late_deduction_type" value="leave" {{ old('late_deduction_type') == 'leave' ? 'checked' : '' }} class="mt-0.5">
                                <span>Detect Leave Balance</span>
                            </label>
                        </div>
                        <div class="col-span-1">
                            <label class="block text-[10px] font-bold text-gray-700 mb-0.5">No Of Late In a Month</label>
                            <select name="no_of_late_in_month" class="w-full border border-gray-300 px-1 py-1 text-xs focus:outline-none focus:border-[#3f51b5]">
                                @for($i=1; $i<=11; $i++)
                                    <option value="{{ $i }}" {{ old('no_of_late_in_month') == $i ? 'selected' : '' }}>{{ $i }}</option>
                                @endfor
                            </select>
                        </div>
                        <div class="col-span-1">
                            <label class="block text-[10px] font-bold text-gray-700 mb-0.5">Cut Days</label>
                            <select name="cut_days" class="w-full border border-gray-300 px-1 py-1 text-xs focus:outline-none focus:border-[#3f51b5]">
                                <option value="0" {{ old('cut_days') == '0' ? 'selected' : '' }}>0%</option>
                                <option value="25" {{ old('cut_days') == '25' ? 'selected' : '' }}>25%</option>
                                <option value="50" {{ old('cut_days') == '50' ? 'selected' : '' }}>50%</option>
                                <option value="75" {{ old('cut_days') == '75' ? 'selected' : '' }}>75%</option>
                                <option value="100" {{ old('cut_days') == '100' ? 'selected' : '' }}>100%</option>
                            </select>
                        </div>
                    </div>
                </div>

                <!-- Overtime -->
                <div class="bg-gray-100 p-3 rounded">
                    <div class="bg-[#3f51b5] text-white px-2 py-1 text-xs font-bold flex items-center mb-3">
                        <input type="checkbox" name="overtime_allow_ignore" value="1" {{ old('overtime_allow_ignore') ? 'checked' : '' }} class="mr-2 h-3 w-3">
                        Overtime Allow Ignore Overtime
                    </div>
                    <div>
                        <label class="block text-[10px] font-bold text-gray-700 mb-1">Ignore Overtime Less then[HH:MM]</label>
                        <input type="time" name="ignore_overtime_less_than" value="{{ old('ignore_overtime_less_than', '00:00') }}" class="w-1/2 border border-gray-300 px-2 py-1 text-xs focus:outline-none focus:border-[#3f51b5]">
                    </div>
                </div>

            </div>

        </form>

        <!-- Form Action Buttons -->
        <div class="mt-6 text-center space-x-2 pb-4">
            <button type="submit" form="policyForm" class="bg-gradient-to-r from-emerald-500 to-emerald-600 hover:from-emerald-600 hover:to-emerald-700 text-white px-6 py-1.5 rounded shadow text-sm font-semibold">Save</button>
            <a href="{{ route('policies.index') }}" class="bg-gradient-to-r from-rose-500 to-rose-600 hover:from-rose-600 hover:to-rose-700 text-white px-6 py-1.5 rounded shadow text-sm font-semibold inline-block">Cancel</a>
        </div>
    </div>
</div>
@endsection