@extends('admin.admin_dashboard')

@section('customcss')
<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)">Edit Employee Shift Rules</a></li>
            </ol>
        </div>

        <form method="POST" action="{{ route('admin.attendance.work_rules.update', $employee->id) }}" id="editMultiWorkRuleForm">
            @csrf
            @method('PUT')

            <div class="row align-items-start">
                
                {{-- LEFT PANEL: Employee Details & Master Shift Switches --}}
                <div class="col-xl-4 col-lg-5 mb-4">
                    
                    {{-- Profile Card --}}
                    <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-user-circle me-2"></i> Employee Details
                            </h5>
                        </div>
                        <div class="card-body">
                            @php
                                $primary = (!empty($employee->primary_id) && $employee->primary_id !== '0' && $employee->primary_id !== 0) ? $employee->primary_id : '-';
                                $secondary = (!empty($employee->e_id) && $employee->e_id !== '0' && $employee->e_id !== 0) ? $employee->e_id : '-';
                                $post = $employee->postDetails->name ?? ($employee->post ?? '-');
                                $firstRule = $employeeWorkRules->first();
                                $effectiveFrom = $firstRule?->effective_from ?? date('Y-01-01');
                                $effectiveTo = $firstRule?->effective_to ?? null;
                            @endphp

                            <div class="d-flex align-items-center mb-3">
                                <div class="avatar avatar-lg bg-light text-primary rounded-circle d-flex align-items-center justify-content-center me-3" style="width: 48px; height: 48px; font-size: 20px;">
                                    <i class="fa fa-user"></i>
                                </div>
                                <div>
                                    <h5 class="mb-0 fw-bold text-dark">{{ $employee->name }}</h5>
                                    <span class="text-muted" style="font-size: 13px;">{{ $post }}</span>
                                </div>
                            </div>

                            <table class="table table-sm table-bordered mb-3" style="font-size: 12px;">
                                <tbody>
                                    <tr>
                                        <th class="bg-light text-dark" style="width: 45%;">Primary ID</th>
                                        <td class="fw-bold text-primary">{{ $primary }}</td>
                                    </tr>
                                    <tr>
                                        <th class="bg-light text-dark">Secondary ID</th>
                                        <td class="fw-bold text-secondary">{{ $secondary }}</td>
                                    </tr>
                                    <tr>
                                        <th class="bg-light text-dark">Designation</th>
                                        <td class="text-dark">{{ $post }}</td>
                                    </tr>
                                </tbody>
                            </table>

                            <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="{{ $effectiveFrom }}" 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" value="{{ $effectiveTo }}">
                                </div>
                            </div>

                            <hr class="my-3">

                            {{-- Shifts Included --}}
                            <h6 class="fw-bold text-dark mb-2">Active Shifts for Employee</h6>
                            <p class="text-muted mb-2" style="font-size: 11.5px;">Turn on/off shifts for this employee:</p>
                            
                            <div class="d-flex flex-column gap-2">
                                @foreach($shifts as $shift)
                                    @php
                                        $isMorning = str_contains(strtolower($shift->name), 'morning');
                                        $rule = $employeeWorkRules[$shift->id] ?? null;
                                        $isConfigured = $rule && $rule->is_active;
                                    @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>
                                            <div>
                                                <span class="fw-bold text-dark">{{ $shift->name }}</span>
                                                @if($rule)
                                                    <small class="d-block text-muted" style="font-size: 10.5px;">{{ $rule->is_active ? 'Active' : 'Inactive' }}</small>
                                                @else
                                                    <small class="d-block text-muted" style="font-size: 10.5px;">Not Assigned</small>
                                                @endif
                                            </div>
                                        </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 }}"
                                                   {{ $isConfigured ? '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}";
                                        $rule = $employeeWorkRules[$shift->id] ?? null;
                                        $isConfigured = $rule && $rule->is_active;
                                    @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 {{ $isConfigured ? ($isMorning ? 'bg-info' : 'bg-warning text-dark') : 'bg-secondary' }} ms-1" id="tab_badge_{{ $shift->id }}">
                                                {{ $isConfigured ? 'Enabled' : 'Disabled' }}
                                            </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');
                                        $rule = $employeeWorkRules[$shift->id] ?? null;
                                        $isConfigured = $rule && $rule->is_active;
                                        $defaultStart = $isMorning ? '07:45' : '12:35';
                                        $defaultEnd = $isMorning ? '12:35' : '17:30';
                                        $tabId = "shift_tab_{$shift->id}";
                                        $schedulesMap = $rule ? $rule->weeklySchedules->keyBy('day_of_week') : collect();
                                        
                                        $days = [
                                            6 => 'Saturday',
                                            0 => 'Sunday',
                                            1 => 'Monday',
                                            2 => 'Tuesday',
                                            3 => 'Wednesday',
                                            4 => 'Thursday',
                                            5 => 'Friday'
                                        ];
                                    @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="{{ $isConfigured ? '1' : '0' }}">

                                        {{-- 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 }}" 
                                                           {{ (!$rule || $rule->is_active) ? '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="{{ $rule?->grace_minutes ?? 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 }}">Working Days Summary</span>
                                            </div>
                                        </div>

                                        {{-- Shift Content Container --}}
                                        <div class="shift-schedule-container {{ !$isConfigured ? 'd-none' : '' }}" 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 => $dayName)
                                            @php
                                                $s = $schedulesMap[$day] ?? null;
                                                $isOff = $s ? (bool)$s->is_off : ($day == 5);
                                                $startTime = $s && !$isOff ? $s->start_time : ($isOff ? '' : $defaultStart);
                                                $endTime = $s && !$isOff ? $s->end_time : ($isOff ? '' : $defaultEnd);
                                            @endphp
                                            <div class="day-row-card {{ $isOff ? '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">{{ $dayName }}</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="{{ $startTime }}"
                                                                   {{ $isOff ? '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="{{ $endTime }}"
                                                                   {{ $isOff ? '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;">
                                                            {{ $isOff ? 'Off Day' : '0h 0m' }}
                                                        </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 }}"
                                                                   {{ $isOff ? '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">0h 0m</span>
                                                </div>
                                                <div>
                                                    <small class="text-muted">(<span id="totalMinutes_{{ $shift->id }}">0</span> min total)</small>
                                                </div>
                                            </div>

                                        </div>

                                        {{-- Shift Disabled Overlay Placeholder --}}
                                        <div class="shift-disabled-overlay {{ $isConfigured ? '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 for this Employee</h6>
                                            <p class="text-muted mb-3" style="font-size: 12.5px;">This shift rule is currently not active for {{ $employee->name }}.</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 & Configure {{ $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-primary btn-lg px-5">
                                <i class="fa fa-save me-1"></i> Save All Shift Rules
                            </button>
                        </div>

                    </div>
                </div>

            </div>
        </form>

    </div>
</div>
@endsection

@section('customjs')
<script>
$(document).ready(function() {

    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