@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 border border-gray-200">
        
        <form action="{{ route('shifts.store') }}" method="POST" id="shiftForm">
            @csrf
            
            <!-- Shift Details 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  .5 mb-4">
                <i class="fa-solid fa-file mr-2"></i> Shift Details
            </div>
            
            <!-- Basic Details -->
            <div class="grid grid-cols-1 md:grid-cols-6 gap-4 px-2 mb-6">
                <div>
                    <label class="block text-[11px] font-bold text-gray-800 mb-1">Shift Name*</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">Shift Code *"(3 Char only)":</label>
                    <input type="text" name="shift_code" value="{{ old('shift_code') }}" maxlength="3" class="w-full border border-gray-300 bg-gray-100 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">Start Time</label>
                    <input type="time" name="start_time" id="start_time" value="{{ old('start_time', '10:00') }}" 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">End Time</label>
                    <input type="time" name="end_time" id="end_time" value="{{ old('end_time', '18:00') }}" 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">Shift Duration</label>
                    <input type="text" name="shift_duration" id="shift_duration" value="{{ old('shift_duration', '08: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 bg-gray-50" readonly>
                </div>
                <div>
                    <label class="block text-[11px] font-bold text-gray-800 mb-1">Is Night Shift</label>
                    <select name="is_night_shift" id="is_night_shift" 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="No" {{ old('is_night_shift') == 'No' ? 'selected' : '' }}>No</option>
                        <option value="Yes" {{ old('is_night_shift') == 'Yes' ? 'selected' : '' }}>Yes</option>
                    </select>
                </div>
            </div>

            <!-- Shift Break Detail 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  mb-2">
                    Shift Break Detail
                </div>
                <div class="bg-gray-50 p-3 flex flex-col md:flex-row space-y-4 md:space-y-0 md:space-x-8">
                    <!-- Break Times -->
                    <div class="flex-1 space-y-4">
                        <!-- Break 1 -->
                        <div class="grid grid-cols-5 gap-4 items-end border-b border-gray-200 pb-3">
                            <div class="flex items-center space-x-2 mb-2">
                                <input type="checkbox" name="is_break1" value="1" {{ old('is_break1') ? 'checked' : '' }} class="h-3 w-3">
                                <span class="text-xs font-bold text-gray-800">Break1</span>
                            </div>
                            <div>
                                <label class="block text-[10px] font-bold text-gray-800">Begin Time</label>
                                <input type="time" name="break1_start" value="{{ old('break1_start', '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-800">End Time</label>
                                <input type="time" name="break1_end" value="{{ old('break1_end', '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-800">Break1 Duration</label>
                                <input type="text" name="break1_duration" value="{{ old('break1_duration', '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 class="col-span-5 grid grid-cols-4 gap-4 mt-2">
                                <div class="col-start-2">
                                    <label class="block text-[10px] font-bold text-gray-800">Max.Early Hour For Break out</label>
                                    <input type="time" name="break1_early_out" value="{{ old('break1_early_out', '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-800">Max.Late Hour For Break In</label>
                                    <input type="time" name="break1_late_in" value="{{ old('break1_late_in', '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>

                        <!-- Break 2 -->
                        <div class="grid grid-cols-5 gap-4 items-end">
                            <div class="flex items-center space-x-2 mb-2">
                                <input type="checkbox" name="is_break2" value="1" {{ old('is_break2') ? 'checked' : '' }} class="h-3 w-3">
                                <span class="text-xs font-bold text-gray-800">Break2</span>
                            </div>
                            <div>
                                <label class="block text-[10px] font-bold text-gray-800">Begin Time</label>
                                <input type="time" name="break2_start" value="{{ old('break2_start', '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-800">End Time</label>
                                <input type="time" name="break2_end" value="{{ old('break2_end', '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-800">Break2 Duration</label>
                                <input type="text" name="break2_duration" value="{{ old('break2_duration', '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 class="col-span-5 grid grid-cols-4 gap-4 mt-2">
                                <div class="col-start-2">
                                    <label class="block text-[10px] font-bold text-gray-800">Max.Early Hour For Break out</label>
                                    <input type="time" name="break2_early_out" value="{{ old('break2_early_out', '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-800">Max.Late Hour For Break In</label>
                                    <input type="time" name="break2_late_in" value="{{ old('break2_late_in', '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>
                    </div>
                </div>
            </div>

            <!-- Second Weekly Off Days Condition -->
            <div class="mb-4">
                <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-2">
                    Second Weekly Off Days Condition
                </div>
                <div class="bg-gray-50 p-2 flex space-x-6 px-4">
                    @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 }}" {{ is_array(old('second_wo_days')) && in_array($day, old('second_wo_days')) ? 'checked' : '' }} class="h-3 w-3 bg-white">
                        <span class="text-xs font-bold text-gray-600">{{ $day }}</span>
                    </label>
                    @endforeach
                </div>
            </div>

            <!-- Weekly Off Rules -->
            <div class="grid grid-cols-1 md:grid-cols-4 gap-4 px-2 mb-6 mt-4">
                <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:outline-none focus:border-cyan-500 focus:bg-white focus:ring-2 focus:ring-cyan-500/20">
                        <option value="Sunday" {{ old('first_weekly_off') == 'Sunday' ? 'selected' : '' }}>Sunday</option>
                        <option value="Monday" {{ old('first_weekly_off') == 'Monday' ? 'selected' : '' }}>Monday</option>
                        <option value="Tuesday" {{ old('first_weekly_off') == 'Tuesday' ? 'selected' : '' }}>Tuesday</option>
                        <option value="Wednesday" {{ old('first_weekly_off') == 'Wednesday' ? 'selected' : '' }}>Wednesday</option>
                        <option value="Thursday" {{ old('first_weekly_off') == 'Thursday' ? 'selected' : '' }}>Thursday</option>
                        <option value="Friday" {{ old('first_weekly_off') == 'Friday' ? 'selected' : '' }}>Friday</option>
                        <option value="Saturday" {{ old('first_weekly_off') == 'Saturday' ? 'selected' : '' }}>Saturday</option>
                        <option value="None" {{ old('first_weekly_off') == 'None' ? 'selected' : '' }}>None</option>
                        <option value="All Weeks" {{ old('first_weekly_off') == 'All Weeks' ? 'selected' : '' }}>All Weeks</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:outline-none focus:border-cyan-500 focus:bg-white focus:ring-2 focus:ring-cyan-500/20">
                        <option value="Sunday" {{ old('second_weekly_off') == 'Sunday' ? 'selected' : '' }}>Sunday</option>
                        <option value="Monday" {{ old('second_weekly_off') == 'Monday' ? 'selected' : '' }}>Monday</option>
                        <option value="Tuesday" {{ old('second_weekly_off') == 'Tuesday' ? 'selected' : '' }}>Tuesday</option>
                        <option value="Wednesday" {{ old('second_weekly_off') == 'Wednesday' ? 'selected' : '' }}>Wednesday</option>
                        <option value="Thursday" {{ old('second_weekly_off') == 'Thursday' ? 'selected' : '' }}>Thursday</option>
                        <option value="Friday" {{ old('second_weekly_off') == 'Friday' ? 'selected' : '' }}>Friday</option>
                        <option value="Saturday" {{ old('second_weekly_off') == 'Saturday' ? 'selected' : '' }}>Saturday</option>
                        <option value="None" {{ old('second_weekly_off') == 'None' ? 'selected' : '' }}>None</option>
                        <option value="All Weeks" {{ old('second_weekly_off') == 'All Weeks' ? 'selected' : '' }}>All Weeks</option>
                    </select>
                </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:outline-none focus:border-cyan-500 focus:bg-white focus:ring-2 focus:ring-cyan-500/20">
                        <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">Half Day Shift</label>
                    <select name="half_day_shift" 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('half_day_shift') == 'None' ? 'selected' : '' }}>None</option>
                        @foreach($allShifts as $s)
                            <option value="{{ $s->id }}" {{ old('half_day_shift') == $s->id ? 'selected' : '' }}>{{ $s->name }} ({{ $s->shift_code }})</option>
                        @endforeach
                    </select>
                </div>
                <div>
                    <label class="block text-[11px] font-bold text-gray-800 mb-1">Remove Duplicate Punch</label>
                    <input type="text" name="remove_duplicate_punch" value="{{ old('remove_duplicate_punch', '00:01') }}" 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">Max.Early Hour Allow</label>
                    <input type="text" name="max_early_allow" value="{{ old('max_early_allow', '06: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">Max OT Allow</label>
                    <input type="text" name="max_ot_allow" value="{{ old('max_ot_allow', '08: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">No. of Present for Weekly Off</label>
                    <input type="text" name="no_of_present_for_wo" value="{{ old('no_of_present_for_wo', '0') }}" 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>

            <!-- Mark as Absent Section -->
            <div class="mb-4">
                <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-2">
                    Mark as Absent as weekly Off as "";
                </div>
                <div class="bg-gray-50 p-2 flex justify-between items-center px-4">
                    <div class="flex space-x-12">
                        <label class="flex items-center space-x-1 cursor-pointer">
                            <input type="checkbox" name="mark_absent_aaa" value="1" {{ old('mark_absent_aaa') ? 'checked' : '' }} class="h-3 w-3">
                            <span class="text-xs font-bold text-gray-600">AAA</span>
                        </label>
                        <label class="flex items-center space-x-1 cursor-pointer">
                            <input type="checkbox" name="mark_absent_lwol" value="1" {{ old('mark_absent_lwol') ? 'checked' : '' }} class="h-3 w-3">
                            <span class="text-xs font-bold text-gray-600">L-WO-L</span>
                        </label>
                        <label class="flex items-center space-x-1 cursor-pointer">
                            <input type="checkbox" name="mark_absent_hld_abs_hld" value="1" {{ old('mark_absent_hld_abs_hld') ? 'checked' : '' }} class="h-3 w-3">
                            <span class="text-xs font-bold text-gray-600">Hld-Abs-Hld</span>
                        </label>
                    </div>
                    <div class="flex items-center space-x-2">
                        <span class="text-[11px] font-bold text-gray-800">Single Punch Policy</span>
                        <select name="single_punch_policy" class="border border-gray-300 px-2 py-1 text-xs focus:outline-none w-48 focus:border-cyan-500 focus:bg-white focus:ring-2 focus:ring-cyan-500/20">
                            <option value="None" {{ old('single_punch_policy') == 'None' ? 'selected' : '' }}>None</option>
                            <option value="Absent on Single Punch" {{ old('single_punch_policy') == 'Absent on Single Punch' ? 'selected' : '' }}>Absent on Single Punch</option>
                            <option value="Half Day one Single Punch" {{ old('single_punch_policy') == 'Half Day one Single Punch' ? 'selected' : '' }}>Half Day one Single Punch</option>
                        </select>
                    </div>
                </div>
            </div>

            <!-- Remove Duplicate Punch / Calculation 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  mb-2">
                    OverTime and Working Hrs Calculation
                </div>
                <div class="bg-gray-100 p-3 grid grid-cols-1 md:grid-cols-4 gap-4">
                    <div class="font-bold text-xs text-gray-800">OT Calculation</div>
                    <div class="col-span-3 flex space-x-6">
                        <label class="flex items-center space-x-1 cursor-pointer">
                            <input type="radio" name="ot_calculation_rule" value="Out Time-Shift End Time" {{ old('ot_calculation_rule') == 'Out Time-Shift End Time' ? 'checked' : '' }} class="h-3 w-3">
                            <span class="text-[10px] font-bold text-gray-700">OT = Out Time-Shift End Time</span>
                        </label>
                        <label class="flex items-center space-x-1 cursor-pointer">
                            <input type="radio" name="ot_calculation_rule" value="Working Hrs-Shift Hrs" {{ old('ot_calculation_rule', 'Working Hrs-Shift Hrs') == 'Working Hrs-Shift Hrs' ? 'checked' : '' }} class="h-3 w-3">
                            <span class="text-[10px] font-bold text-gray-700">OT = Working Hrs-Shift Hrs</span>
                        </label>
                        <label class="flex items-center space-x-1 cursor-pointer">
                            <input type="radio" name="ot_calculation_rule" value="Early Coming+Late Departure" {{ old('ot_calculation_rule') == 'Early Coming+Late Departure' ? 'checked' : '' }} class="h-3 w-3">
                            <span class="text-[10px] font-bold text-gray-700">OT = Early Coming+Late Departure</span>
                        </label>
                    </div>
                    
                    <div class="font-bold text-xs text-gray-800">Working Calculation</div>
                    <div class="col-span-3 flex space-x-6">
                        <label class="flex items-center space-x-1 cursor-pointer">
                            <input type="radio" name="working_calculation_rule" value="Calculate All In Out" {{ old('working_calculation_rule') == 'Calculate All In Out' ? 'checked' : '' }} class="h-3 w-3">
                            <span class="text-[10px] font-bold text-gray-700">Calculate All In Out</span>
                        </label>
                        <label class="flex items-center space-x-1 cursor-pointer">
                            <input type="radio" name="working_calculation_rule" value="Calculate First In Last Out" {{ old('working_calculation_rule', 'Calculate First In Last Out') == 'Calculate First In Last Out' ? 'checked' : '' }} class="h-3 w-3">
                            <span class="text-[10px] font-bold text-gray-700">Calculate First In Last Out</span>
                        </label>
                        <label class="flex flex-col space-y-1 cursor-pointer">
                            <div class="flex items-center space-x-1">
                                <input type="radio" name="working_calculation_rule" value="Calculate First In Last Out With Lunch" {{ old('working_calculation_rule') == 'Calculate First In Last Out With Lunch' ? 'checked' : '' }} class="h-3 w-3">
                                <span class="text-[10px] font-bold text-gray-700">Calculate First In Last Out (Deduct Lunch)</span>
                            </div>
                            <div class="flex items-center space-x-1 ml-4 mt-1">
                                <input type="checkbox" name="deduct_lunch_punch" class="h-3 w-3">
                                <span class="text-[10px] text-gray-700">Lunch Deduct According to punch</span>
                            </div>
                        </label>
                    </div>
                </div>
            </div>

        </form>

        <!-- Form Action Buttons -->
        <div class="mt-6 text-center space-x-2 pb-4">
            <button type="submit" form="shiftForm" name="action" value="save" class="bg-gradient-to-r from-emerald-500 to-emerald-600 hover:from-emerald-600 hover:to-emerald-700 text-white px-6 py-2 rounded shadow text-sm font-semibold transition">Save</button>
            <button type="submit" form="shiftForm" name="action" value="save_with_master" class="bg-gradient-to-r from-emerald-500 to-emerald-600 hover:from-emerald-600 hover:to-emerald-700 text-white px-6 py-2 rounded shadow text-sm font-semibold transition">Update With Employee Master</button>
            <a href="{{ route('shifts.index') }}" class="bg-[#e91e63] hover:bg-[#d81b60] text-white px-6 py-2 rounded shadow text-sm font-semibold inline-block transition">Cancel</a>
        </div>
    </div>
</div>

<script>
    document.addEventListener('DOMContentLoaded', function() {
        const startTimeInput = document.getElementById('start_time');
        const endTimeInput = document.getElementById('end_time');
        const durationInput = document.getElementById('shift_duration');
        const isNightShiftInput = document.getElementById('is_night_shift');

        function calculateDuration() {
            const start = startTimeInput.value;
            const end = endTimeInput.value;

            if (start && end) {
                const [startHours, startMinutes] = start.split(':').map(Number);
                const [endHours, endMinutes] = end.split(':').map(Number);

                let startTotalMinutes = (startHours * 60) + startMinutes;
                let endTotalMinutes = (endHours * 60) + endMinutes;

                // Handle Night Shift logic
                if (isNightShiftInput.value === 'Yes') {
                    // If it's night shift and end time is less than start time, add 24 hours to end time
                    if (endTotalMinutes <= startTotalMinutes) {
                        endTotalMinutes += 24 * 60;
                    }
                } else {
                    // For day shifts, if end time is less than start, something is wrong, we just don't calculate or clamp
                    if (endTotalMinutes < startTotalMinutes) {
                        // User might have entered invalid day shift times. We'll still calculate as if it's negative or clamped
                        endTotalMinutes += 24 * 60; // Auto-assume night shift logic for calculation correctness? Let's just do it
                        // Better yet, update the night shift dropdown automatically
                        isNightShiftInput.value = 'Yes';
                    }
                }

                let diffMinutes = endTotalMinutes - startTotalMinutes;

                // Recalculate just in case it was a valid day shift
                if (isNightShiftInput.value === 'No' && endTotalMinutes >= startTotalMinutes) {
                     diffMinutes = endTotalMinutes - startTotalMinutes;
                }
                
                if (diffMinutes < 0) diffMinutes = 0;

                const durHours = Math.floor(diffMinutes / 60);
                const durMins = diffMinutes % 60;

                durationInput.value = String(durHours).padStart(2, '0') + ':' + String(durMins).padStart(2, '0');
            }
        }

        startTimeInput.addEventListener('change', calculateDuration);
        endTimeInput.addEventListener('change', calculateDuration);
        isNightShiftInput.addEventListener('change', calculateDuration);
    });
</script>
@endsection