@php

    $days = ['MONDAY', 'TUESDAY', 'WEDNESDAY', 'THURSDAY', 'FRIDAY', 'SATURDAY', 'SUNDAY'];

@endphp

<!-- Start Add Modal -->
<div id="scheduleModel" class="modal fade">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="text-dark modal-title fw-bold">{{ $singluar }} Schedule</h4>
                <button type="button" class="btn-close btn-close-modal custom-btn-close" data-bs-dismiss="modal"
                    aria-label="Close"><i class="ti ti-x"></i></button>
            </div>
            <form method="POST" action="{{ route('doctor.add.schedule') }}">
                @csrf
                <input type="hidden" name="doctor_id" value="{{ $data->id }}" hidden>
                <div class="modal-body">
                    <div class="mb-3">
                        <table id="scheduleTable" class="table table-bordered">
                            <thead>
                                <tr>
                                    <th width="20%">Day</th>
                                    <th>From</th>
                                    <th>To</th>
                                    <th width="15%"></th>
                                </tr>
                            </thead>
                            <tbody>
                                @for ($i = 0; $i <= 6; $i++)
                                    <tr>
                                        <td><span>{{ $days[$i] }}</span></td>
                                        <td>{!! getScheduleRow($data->id, $i, 'from') !!}</td>
                                        <td>{!! getScheduleRow($data->id, $i, 'to') !!}</td>
                                        <td><a href="javascript:void(0)" class="btn btn-light add-row">
                                                <i class="ti ti-plus fs-16"></i>
                                            </a>
                                            <a href="javascript:void(0)" class="btn btn-light copy-row">
                                                <i class="ti ti-copy fs-16"></i>
                                            </a>
                                        </td>
                                    </tr>
                                @endfor
                            </tbody>
                        </table>
                    </div>

                </div>
                <div class="modal-footer d-flex align-items-center gap-1">
                    <button type="button" class="btn btn-white border" data-bs-dismiss="modal">Cancel</button>
                    <button type="submit" class="btn btn-primary">Update</button>
                </div>
            </form>
        </div>
    </div>
</div>
<!-- End Add Modal -->


<script>
    // setTimeout(function() {
    //     $('#scheduleModel').modal('show');
    // }, 500);


    $(document).on('click', '.add-row', function() {
        let row = $(this).closest('tr');

        let dayIndex = row.index(); // 0..6

        let fromTd = row.find('td').eq(1);
        let toTd = row.find('td').eq(2);

        let fromInput = `
        <div class="slot d-flex mt-2 align-items-center">
            <input type="time" name="schedule[${dayIndex}][from][]" class="form-control" required>
        </div>
    `;

        let toInput = `
        <div class="slot d-flex mt-2 align-items-center">
            <input type="time" name="schedule[${dayIndex}][to][]" class="form-control me-2" required>
            <a href="javascript:void(0)" class="btn btn-light remove-slot">
                <i class="ti ti-minus fs-16"></i>
            </a>
        </div>
    `;

        fromTd.append(fromInput);
        toTd.append(toInput);
    });

    // Remove that specific slot
    $(document).on('click', '.remove-slot', function() {
        let slotIndex = $(this).closest('.slot').index();
        let row = $(this).closest('tr');

        row.find('td').eq(1).find('.slot').eq(slotIndex).remove();
        row.find('td').eq(2).find('.slot').eq(slotIndex).remove();
    });


    $(document).on('click', '.copy-row', function() {
        let currentRow = $(this).closest('tr');
        let nextRow = currentRow.next('tr');

        if (nextRow.length === 0) {
            alert('No next day to copy into.');
            return;
        }

        let fromSlots = currentRow.find('td').eq(1).find('.slot');
        let toSlots = currentRow.find('td').eq(2).find('.slot');

        let nextFromTd = nextRow.find('td').eq(1);
        let nextToTd = nextRow.find('td').eq(2);

        // Clear next day first (optional)
        nextFromTd.empty();
        nextToTd.empty();

        let nextDayIndex = nextRow.index();

        fromSlots.each(function(i) {
            let fromVal = $(this).find('input').val();
            let toVal = toSlots.eq(i).find('input').val();

            let fromInput = `
            <div class="slot d-flex mt-2 align-items-center">
                <input type="time" name="schedule[${nextDayIndex}][from][]" 
                       class="form-control" value="${fromVal}" required>
            </div>
        `;

            let toInput = `
            <div class="slot d-flex mt-2 align-items-center">
                <input type="time" name="schedule[${nextDayIndex}][to][]" 
                       class="form-control me-2" value="${toVal}" required>
                <a href="javascript:void(0)" class="btn btn-light remove-slot">
                    <i class="ti ti-minus fs-16"></i>
                </a>
            </div>
        `;

            nextFromTd.append(fromInput);
            nextToTd.append(toInput);
        });
    });
</script>