@extends('admin.admin_dashboard')

@section('customcss')
<link href="https://cdn.jsdelivr.net/npm/select2@4.1.0/dist/css/select2.min.css" rel="stylesheet" />

<style>
    .card-rule-form {
        border-radius: 12px;
        box-shadow: 0 4px 20px rgba(0,0,0,0.05);
        border: 1px solid #edf2f7;
    }
    .day-row-card {
        border: 1px solid #e2e8f0;
        border-radius: 10px;
        padding: 9px 12px;
        margin-bottom: 8px;
        background: #ffffff;
        transition: all 0.2s ease;
    }
    .day-row-card:hover {
        border-color: #cbd5e1;
        box-shadow: 0 2px 8px rgba(0,0,0,0.04);
    }
    .day-row-card.is-off-day {
        background: #fdf2f2;
        border-color: #fecaca;
    }
    .quick-toolbar {
        background: #f8fafc;
        border: 1px solid #e2e8f0;
        border-radius: 10px;
        padding: 10px 14px;
        margin-bottom: 14px;
    }
    .shift-nav-tabs .nav-link {
        font-weight: 600;
        font-size: 13.5px;
        border-radius: 8px 8px 0 0;
        padding: 10px 18px;
        color: #475569;
        border: 1px solid transparent;
    }
    .shift-nav-tabs .nav-link.active {
        color: #0f172a;
        background-color: #ffffff;
        border-color: #e2e8f0 #e2e8f0 #ffffff;
    }
    .shift-disabled-overlay {
        background: #f8fafc;
        border: 2px dashed #cbd5e1;
        border-radius: 10px;
        padding: 40px 20px;
        text-align: center;
    }
</style>
@endsection

@section('admin')
<div class="content-body" style="padding-bottom: 80px;">
    <div class="container-fluid">

        {{-- Page Header --}}
        <div class="row page-titles mb-3">
            <ol class="breadcrumb">
                <li class="breadcrumb-item"><a href="{{ route('admin.attendance.work_rules.index') }}">Work Rules</a></li>
                <li class="breadcrumb-item active"><a href="javascript:void(0)">Multi-Shift Work Rule Setup</a></li>
            </ol>
        </div>

        <form method="POST" action="{{ route('admin.attendance.work_rules.store') }}" id="multiWorkRuleForm">
            @csrf

            <div class="row align-items-start">
                
                {{-- LEFT PANEL: Basic Information & Employee Selection --}}
                <div class="col-xl-4 col-lg-5 mb-4">
                    <div class="card card-rule-form">
                        <div class="card-header bg-primary text-white py-3">
                            <h5 class="card-title text-white mb-0">
                                <i class="fa fa-users-cog me-2"></i> 1. Target Employees
                            </h5>
                        </div>
                        <div class="card-body">

                            {{-- Employee Multi-Select --}}
                            <div class="mb-3">
                                <div class="d-flex justify-content-between align-items-center mb-1">
                                    <label class="form-label fw-bold text-dark mb-0">Select Employees <span class="text-danger">*</span></label>
                                    <div>
                                        <button type="button" class="btn btn-link btn-xs p-0 text-primary fw-semibold me-2" id="btnSelectAll">Select All</button>
                                        <button type="button" class="btn btn-link btn-xs p-0 text-muted" id="btnDeselectAll">Clear</button>
                                    </div>
                                </div>
                                <select name="employee_ids[]" id="employeeSelect" class="form-control employee-select" multiple="multiple" required>
                                    @foreach($employees as $emp)
                                        @php
                                            $primary = (!empty($emp->primary_id) && $emp->primary_id !== '0' && $emp->primary_id !== 0) ? " [PID: {$emp->primary_id}]" : '';
                                            $secondary = (!empty($emp->e_id) && $emp->e_id !== '0' && $emp->e_id !== 0) ? " (ID: {$emp->e_id})" : '';
                                            $post = $emp->postDetails->name ?? ($emp->post ?? '');
                                            $postStr = $post ? " - {$post}" : '';
                                        @endphp
                                        <option value="{{ $emp->id }}">
                                            {{ $emp->name }}{{ $primary }}{{ $secondary }}{{ $postStr }}
                                        </option>
                                    @endforeach
                                </select>
                                <small class="text-muted">Search and select one or multiple employees</small>
                            </div>

                            <hr class="my-3">

                            {{-- Effective Date Range --}}
                            <h6 class="fw-bold text-dark mb-2">Effective Period</h6>
                            <div class="row g-2 mb-3">
                                <div class="col-6">
                                    <label class="form-label fw-semibold text-dark" style="font-size: 12px;">From Date <span class="text-danger">*</span></label>
                                    <input type="date" name="effective_from" class="form-control form-control-sm" value="{{ date('Y-01-01') }}" required>
                                </div>
                                <div class="col-6">
                                    <label class="form-label fw-semibold text-dark" style="font-size: 12px;">To Date</label>
                                    <input type="date" name="effective_to" class="form-control form-control-sm" placeholder="Optional">
                                </div>
                            </div>

                            <hr class="my-3">

                            {{-- Shifts to Configure --}}
                            <h6 class="fw-bold text-dark mb-2">Shifts Included</h6>
                            <p class="text-muted mb-2" style="font-size: 11.5px;">Enable the shifts you want to assign to the selected employees:</p>
                            
                            <div class="d-flex flex-column gap-2">
                                @foreach($shifts as $shift)
                                    @php
                                        $isMorning = str_contains(strtolower($shift->name), 'morning');
                                    @endphp
                                    <div class="p-2 border rounded d-flex align-items-center justify-content-between bg-light">
                                        <div class="d-flex align-items-center">
                                            <i class="fa {{ $isMorning ? 'fa-sun text-info' : 'fa-cloud-sun text-warning' }} fs-5 me-2"></i>
                                            <span class="fw-bold text-dark">{{ $shift->name }}</span>
                                        </div>
                                        <div class="form-check form-switch mb-0">
                                            <input class="form-check-input shift-enable-master" 
                                                   type="checkbox" 
                                                   id="shift_enable_master_{{ $shift->id }}" 
                                                   data-shift-id="{{ $shift->id }}"
                                                   checked>
                                        </div>
                                    </div>
                                @endforeach
                            </div>

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

                {{-- RIGHT PANEL: Multi-Shift Weekly Schedule Builder --}}
                <div class="col-xl-8 col-lg-7 mb-4">
                    <div class="card card-rule-form">
                        
                        {{-- Shift Nav Tabs --}}
                        <div class="card-header bg-light pt-3 pb-0 px-3 border-bottom-0">
                            <ul class="nav nav-tabs shift-nav-tabs border-bottom-0" id="shiftTabs" role="tablist">
                                @foreach($shifts as $idx => $shift)
                                    @php
                                        $isMorning = str_contains(strtolower($shift->name), 'morning');
                                        $tabId = "shift_tab_{$shift->id}";
                                    @endphp
                                    <li class="nav-item" role="presentation">
                                        <button class="nav-link {{ $idx === 0 ? 'active' : '' }}" 
                                                id="tab_btn_{{ $shift->id }}" 
                                                data-bs-toggle="tab" 
                                                data-bs-target="#{{ $tabId }}" 
                                                type="button" 
                                                role="tab">
                                            <i class="fa {{ $isMorning ? 'fa-sun text-info' : 'fa-cloud-sun text-warning' }} me-1"></i>
                                            {{ $shift->name }}
                                            <span class="badge {{ $isMorning ? 'bg-info' : 'bg-warning text-dark' }} ms-1" id="tab_badge_{{ $shift->id }}">Enabled</span>
                                        </button>
                                    </li>
                                @endforeach
                            </ul>
                        </div>

                        <div class="card-body p-3">
                            <div class="tab-content" id="shiftTabsContent">
                                
                                @foreach($shifts as $idx => $shift)
                                    @php
                                        $isMorning = str_contains(strtolower($shift->name), 'morning');
                                        $defaultStart = $isMorning ? '07:45' : '12:35';
                                        $defaultEnd = $isMorning ? '12:35' : '17:30';
                                        $tabId = "shift_tab_{$shift->id}";
                                        $days = [
                                            6 => ['name' => 'Saturday', 'short' => 'Sat', 'default_start' => $defaultStart, 'default_end' => $defaultEnd, 'is_off' => false],
                                            0 => ['name' => 'Sunday', 'short' => 'Sun', 'default_start' => $defaultStart, 'default_end' => $defaultEnd, 'is_off' => false],
                                            1 => ['name' => 'Monday', 'short' => 'Mon', 'default_start' => $defaultStart, 'default_end' => $defaultEnd, 'is_off' => false],
                                            2 => ['name' => 'Tuesday', 'short' => 'Tue', 'default_start' => $defaultStart, 'default_end' => $defaultEnd, 'is_off' => false],
                                            3 => ['name' => 'Wednesday', 'short' => 'Wed', 'default_start' => $defaultStart, 'default_end' => $defaultEnd, 'is_off' => false],
                                            4 => ['name' => 'Thursday', 'short' => 'Thu', 'default_start' => $defaultStart, 'default_end' => $defaultEnd, 'is_off' => false],
                                            5 => ['name' => 'Friday', 'short' => 'Fri', 'default_start' => '', 'default_end' => '', 'is_off' => true],
                                        ];
                                    @endphp

                                    <div class="tab-pane fade {{ $idx === 0 ? 'show active' : '' }}" id="{{ $tabId }}" role="tabpanel">
                                        
                                        {{-- Hidden Shift Enable Form Input --}}
                                        <input type="hidden" name="shifts[{{ $shift->id }}][enabled]" id="shift_enabled_input_{{ $shift->id }}" value="1">

                                        {{-- Shift Controls Header --}}
                                        <div class="d-flex justify-content-between align-items-center flex-wrap gap-2 mb-3 p-2 bg-light rounded border">
                                            <div class="d-flex align-items-center gap-3">
                                                <div class="form-check form-switch mb-0">
                                                    <input class="form-check-input shift-active-switch" 
                                                           type="checkbox" 
                                                           name="shifts[{{ $shift->id }}][is_active]" 
                                                           value="1" 
                                                           id="shift_active_{{ $shift->id }}" 
                                                           checked>
                                                    <label class="form-check-label fw-bold text-dark" for="shift_active_{{ $shift->id }}" style="font-size: 12.5px;">Active Status</label>
                                                </div>
                                                <div class="d-flex align-items-center gap-1">
                                                    <label class="form-label mb-0 fw-semibold text-dark" style="font-size: 12px;">Grace:</label>
                                                    <input type="number" 
                                                           name="shifts[{{ $shift->id }}][grace_minutes]" 
                                                           class="form-control form-control-sm text-center" 
                                                           value="0" 
                                                           min="0" 
                                                           max="120" 
                                                           style="width: 65px;">
                                                    <small class="text-muted">min</small>
                                                </div>
                                            </div>
                                            <div>
                                                <span class="badge bg-secondary text-white" id="working_days_badge_{{ $shift->id }}">6 Working Days, 1 Off Day</span>
                                            </div>
                                        </div>

                                        {{-- Shift Content Container (shown when enabled) --}}
                                        <div class="shift-schedule-container" id="shift_container_{{ $shift->id }}">

                                            {{-- QUICK PRESETS & TOOLBAR --}}
                                            <div class="quick-toolbar">
                                                <div class="row g-2 align-items-center">
                                                    <div class="col-md-3 col-sm-6">
                                                        <label class="form-label mb-1 fw-bold text-secondary" style="font-size: 11px;">QUICK START TIME</label>
                                                        <input type="time" id="quickStartTime_{{ $shift->id }}" class="form-control form-control-sm" value="{{ $defaultStart }}">
                                                    </div>
                                                    <div class="col-md-3 col-sm-6">
                                                        <label class="form-label mb-1 fw-bold text-secondary" style="font-size: 11px;">QUICK END TIME</label>
                                                        <input type="time" id="quickEndTime_{{ $shift->id }}" class="form-control form-control-sm" value="{{ $defaultEnd }}">
                                                    </div>
                                                    <div class="col-md-6 col-sm-12 d-flex align-items-end gap-1 flex-wrap pt-md-3">
                                                        <button type="button" class="btn btn-sm btn-primary btn-apply-working-days" data-shift-id="{{ $shift->id }}" title="Apply to Sat, Sun, Mon, Tue, Wed, Thu">
                                                            <i class="fa fa-bolt me-1"></i> Apply Sat-Thu
                                                        </button>
                                                        <button type="button" class="btn btn-sm btn-outline-primary btn-apply-all-days" data-shift-id="{{ $shift->id }}" title="Apply to all 7 days">
                                                            Apply 7 Days
                                                        </button>
                                                        <button type="button" class="btn btn-sm btn-outline-danger btn-set-fri-off" data-shift-id="{{ $shift->id }}" title="Set Friday as weekly holiday">
                                                            Set Fri Off
                                                        </button>
                                                    </div>
                                                </div>
                                            </div>

                                            {{-- 7-DAY LIST FOR THIS SHIFT --}}
                                            @foreach($days as $day => $d)
                                            <div class="day-row-card {{ $d['is_off'] ? 'is-off-day' : '' }}" id="dayCard_{{ $shift->id }}_{{ $day }}">
                                                <div class="row align-items-center g-2">
                                                    
                                                    {{-- Day Name --}}
                                                    <div class="col-md-2 col-4">
                                                        <span class="fw-bold text-dark fs-6">{{ $d['name'] }}</span>
                                                    </div>

                                                    {{-- Start Time --}}
                                                    <div class="col-md-3 col-4">
                                                        <div class="input-group input-group-sm">
                                                            <span class="input-group-text bg-light text-muted">In</span>
                                                            <input type="time"
                                                                   name="shifts[{{ $shift->id }}][schedules][{{ $day }}][start_time]"
                                                                   class="form-control start-time-input"
                                                                   data-shift-id="{{ $shift->id }}"
                                                                   data-day="{{ $day }}"
                                                                   value="{{ $d['default_start'] }}"
                                                                   {{ $d['is_off'] ? 'disabled' : '' }}>
                                                        </div>
                                                    </div>

                                                    {{-- End Time --}}
                                                    <div class="col-md-3 col-4">
                                                        <div class="input-group input-group-sm">
                                                            <span class="input-group-text bg-light text-muted">Out</span>
                                                            <input type="time"
                                                                   name="shifts[{{ $shift->id }}][schedules][{{ $day }}][end_time]"
                                                                   class="form-control end-time-input"
                                                                   data-shift-id="{{ $shift->id }}"
                                                                   data-day="{{ $day }}"
                                                                   value="{{ $d['default_end'] }}"
                                                                   {{ $d['is_off'] ? 'disabled' : '' }}>
                                                        </div>
                                                    </div>

                                                    {{-- Calculated Duration --}}
                                                    <div class="col-md-2 col-6 text-center">
                                                        <span class="badge bg-light text-dark border px-2 py-1 duration-badge" id="badge_duration_{{ $shift->id }}_{{ $day }}" style="font-size: 11px;">
                                                            {{ $d['is_off'] ? 'Off Day' : '4h 50m' }}
                                                        </span>
                                                    </div>

                                                    {{-- Off Day Toggle & Copy button --}}
                                                    <div class="col-md-2 col-6 d-flex align-items-center justify-content-end gap-2">
                                                        <button type="button" class="btn btn-xs btn-outline-secondary btn-copy-day" data-shift-id="{{ $shift->id }}" data-day="{{ $day }}" title="Copy this day's timing to Sat-Thu">
                                                            <i class="fa fa-clone"></i>
                                                        </button>
                                                        <div class="form-check form-switch mb-0">
                                                            <input class="form-check-input off-toggle"
                                                                   type="checkbox"
                                                                   name="shifts[{{ $shift->id }}][schedules][{{ $day }}][is_off]"
                                                                   value="1"
                                                                   data-shift-id="{{ $shift->id }}"
                                                                   data-day="{{ $day }}"
                                                                   id="offSwitch_{{ $shift->id }}_{{ $day }}"
                                                                   {{ $d['is_off'] ? 'checked' : '' }}>
                                                            <label class="form-check-label fw-bold text-danger" for="offSwitch_{{ $shift->id }}_{{ $day }}" style="font-size: 12px;">Off</label>
                                                        </div>
                                                    </div>

                                                </div>
                                            </div>
                                            @endforeach

                                            {{-- TOTAL SUMMARY BOX FOR THIS SHIFT --}}
                                            <div class="alert alert-primary d-flex justify-content-between align-items-center flex-wrap mt-3 py-2 px-3 mb-0">
                                                <div>
                                                    <i class="fa fa-calculator me-2"></i>
                                                    <strong>{{ $shift->name }} Total Weekly:</strong>
                                                    <span id="totalHoursFormatted_{{ $shift->id }}" class="fw-bold fs-5 text-dark ms-1">29h 0m</span>
                                                </div>
                                                <div>
                                                    <small class="text-muted">(<span id="totalMinutes_{{ $shift->id }}">1740</span> min total)</small>
                                                </div>
                                            </div>

                                        </div>

                                        {{-- Shift Disabled Overlay Placeholder --}}
                                        <div class="shift-disabled-overlay d-none" id="shift_disabled_box_{{ $shift->id }}">
                                            <i class="fa fa-ban fs-1 text-muted mb-2"></i>
                                            <h6 class="text-dark fw-bold">{{ $shift->name }} is Disabled</h6>
                                            <p class="text-muted mb-3" style="font-size: 12.5px;">This shift will not be assigned to the selected employees.</p>
                                            <button type="button" class="btn btn-sm btn-outline-primary btn-enable-shift-tab" data-shift-id="{{ $shift->id }}">
                                                <i class="fa fa-check me-1"></i> Enable {{ $shift->name }}
                                            </button>
                                        </div>

                                    </div>
                                @endforeach

                            </div>
                        </div>

                        {{-- Card Footer with Actions --}}
                        <div class="card-footer bg-white border-top py-3 d-flex justify-content-between align-items-center">
                            <a href="{{ route('admin.attendance.work_rules.index') }}" class="btn btn-outline-secondary px-4">
                                <i class="fa fa-arrow-left me-1"></i> Cancel
                            </a>
                            <button type="submit" class="btn btn-success btn-lg px-5">
                                <i class="fa fa-check-circle me-1"></i> Save All Shift Rules
                            </button>
                        </div>

                    </div>
                </div>

            </div>
        </form>

    </div>
</div>
@endsection

@section('customjs')
<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0/dist/js/select2.min.js"></script>

<script>
$(document).ready(function() {
    // Initialize Select2
    $('#employeeSelect').select2({
        placeholder: "Select one or more employees",
        allowClear: true,
        width: '100%'
    });

    // Select All / Deselect All
    $('#btnSelectAll').on('click', function() {
        $('#employeeSelect option').prop('selected', true);
        $('#employeeSelect').trigger('change');
    });

    $('#btnDeselectAll').on('click', function() {
        $('#employeeSelect option').prop('selected', false);
        $('#employeeSelect').trigger('change');
    });

    function toMinutes(timeStr) {
        if (!timeStr) return null;
        let parts = timeStr.split(':');
        return parseInt(parts[0], 10) * 60 + parseInt(parts[1], 10);
    }

    function calculateDay(shiftId, day) {
        let startInput = $(`input[name="shifts[${shiftId}][schedules][${day}][start_time]"]`);
        let endInput = $(`input[name="shifts[${shiftId}][schedules][${day}][end_time]"]`);
        let offCheckbox = $(`#offSwitch_${shiftId}_${day}`);
        let card = $(`#dayCard_${shiftId}_${day}`);
        let badge = $(`#badge_duration_${shiftId}_${day}`);

        if (offCheckbox.is(':checked')) {
            startInput.prop('disabled', true);
            endInput.prop('disabled', true);
            card.addClass('is-off-day');
            badge.text('Off Day').removeClass('bg-light text-dark').addClass('bg-danger text-white');
            return 0;
        } else {
            startInput.prop('disabled', false);
            endInput.prop('disabled', false);
            card.removeClass('is-off-day');
            badge.removeClass('bg-danger text-white').addClass('bg-light text-dark');
        }

        let sVal = startInput.val();
        let eVal = endInput.val();

        let s = toMinutes(sVal);
        let e = toMinutes(eVal);

        if (s === null || e === null) {
            badge.text('0h 0m');
            return 0;
        }

        let diff = e - s;
        if (diff <= 0) diff += 1440;

        let h = Math.floor(diff / 60);
        let m = diff % 60;
        badge.text(`${h}h ${m}m`);

        return diff;
    }

    function updateShift(shiftId) {
        let totalMinutes = 0;
        let workingDays = 0;
        let offDays = 0;

        [6, 0, 1, 2, 3, 4, 5].forEach(day => {
            let isOff = $(`#offSwitch_${shiftId}_${day}`).is(':checked');
            if (isOff) {
                offDays++;
            } else {
                workingDays++;
            }
            totalMinutes += calculateDay(shiftId, day);
        });

        let totalH = Math.floor(totalMinutes / 60);
        let totalM = totalMinutes % 60;

        $(`#totalMinutes_${shiftId}`).text(totalMinutes);
        $(`#totalHoursFormatted_${shiftId}`).text(`${totalH}h ${totalM}m`);
        $(`#working_days_badge_${shiftId}`).text(`${workingDays} Working Days, ${offDays} Off Day(s)`);
    }

    function updateAllShifts() {
        $('.shift-enable-master').each(function() {
            let shiftId = $(this).data('shift-id');
            updateShift(shiftId);
        });
    }

    // Toggle shift enable/disable
    function setShiftEnabled(shiftId, isEnabled) {
        $(`#shift_enable_master_${shiftId}`).prop('checked', isEnabled);
        $(`#shift_enabled_input_${shiftId}`).val(isEnabled ? '1' : '0');

        let badge = $(`#tab_badge_${shiftId}`);
        let container = $(`#shift_container_${shiftId}`);
        let disabledBox = $(`#shift_disabled_box_${shiftId}`);

        if (isEnabled) {
            badge.text('Enabled').removeClass('bg-secondary').addClass(shiftId == 1 ? 'bg-warning text-dark' : 'bg-info');
            container.removeClass('d-none');
            disabledBox.addClass('d-none');
        } else {
            badge.text('Disabled').removeClass('bg-info bg-warning text-dark').addClass('bg-secondary');
            container.addClass('d-none');
            disabledBox.removeClass('d-none');
        }
    }

    $('.shift-enable-master').on('change', function() {
        let shiftId = $(this).data('shift-id');
        setShiftEnabled(shiftId, $(this).is(':checked'));
    });

    $('.btn-enable-shift-tab').on('click', function() {
        let shiftId = $(this).data('shift-id');
        setShiftEnabled(shiftId, true);
    });

    // Quick toolbar button handlers
    $('.btn-apply-working-days').on('click', function() {
        let shiftId = $(this).data('shift-id');
        let s = $(`#quickStartTime_${shiftId}`).val();
        let e = $(`#quickEndTime_${shiftId}`).val();

        [6, 0, 1, 2, 3, 4].forEach(day => {
            $(`#offSwitch_${shiftId}_${day}`).prop('checked', false);
            $(`input[name="shifts[${shiftId}][schedules][${day}][start_time]"]`).val(s);
            $(`input[name="shifts[${shiftId}][schedules][${day}][end_time]"]`).val(e);
        });
        $(`#offSwitch_${shiftId}_5`).prop('checked', true); // Friday off (5)
        updateShift(shiftId);
    });

    $('.btn-apply-all-days').on('click', function() {
        let shiftId = $(this).data('shift-id');
        let s = $(`#quickStartTime_${shiftId}`).val();
        let e = $(`#quickEndTime_${shiftId}`).val();

        [6, 0, 1, 2, 3, 4, 5].forEach(day => {
            $(`#offSwitch_${shiftId}_${day}`).prop('checked', false);
            $(`input[name="shifts[${shiftId}][schedules][${day}][start_time]"]`).val(s);
            $(`input[name="shifts[${shiftId}][schedules][${day}][end_time]"]`).val(e);
        });
        updateShift(shiftId);
    });

    $('.btn-set-fri-off').on('click', function() {
        let shiftId = $(this).data('shift-id');
        $(`#offSwitch_${shiftId}_5`).prop('checked', true); // Friday off (5)
        updateShift(shiftId);
    });

    // Copy single day timing to working days (Sat-Thu)
    $('.btn-copy-day').on('click', function() {
        let shiftId = $(this).data('shift-id');
        let sourceDay = $(this).data('day');
        let s = $(`input[name="shifts[${shiftId}][schedules][${sourceDay}][start_time]"]`).val();
        let e = $(`input[name="shifts[${shiftId}][schedules][${sourceDay}][end_time]"]`).val();
        let isOff = $(`#offSwitch_${shiftId}_${sourceDay}`).is(':checked');

        if (isOff) {
            alert('Cannot copy an Off Day timing. Please specify valid times first.');
            return;
        }

        [6, 0, 1, 2, 3, 4].forEach(day => {
            $(`#offSwitch_${shiftId}_${day}`).prop('checked', false);
            $(`input[name="shifts[${shiftId}][schedules][${day}][start_time]"]`).val(s);
            $(`input[name="shifts[${shiftId}][schedules][${day}][end_time]"]`).val(e);
        });
        updateShift(shiftId);
    });

    // Event listeners
    $(document).on('change', '.start-time-input, .end-time-input, .off-toggle', function() {
        let shiftId = $(this).data('shift-id');
        if (shiftId) {
            updateShift(shiftId);
        }
    });

    // Initial calculation
    updateAllShifts();
});
</script>
@endsection