@extends('layout.layout')

@section('content')
    @include('components.alert')

    <div class="container-fluid app-bg">
        <div class="page-shell">
            <div class="d-flex flex-column gap-4">
                <x-page-title
                    title="Show Demo"
                    description="Review booked tester demo slots by date and inspect assigned students quickly."
                />

                @include('dashboard.academics.schedule_demo.table', ['slotsCardTitle' => 'Booked Demo Slots'])
            </div>
        </div>
    </div>
@endsection



@push('styles')
    <style>
        #assing_student_modal_to_schedule_button {
            display: none !important;
        }

        .table_btn {
            padding: 10px;
            margin: 5px;
            border-radius: 10px;
            background-color: #ee1f1f;
            color: #ffffff;
            cursor: pointer;
            width: 120px;
            cursor: not-allowed;
        }

        .table_btn:hover {
            background-color: #d30000 !important;
        }
    </style>
@endpush


@push('scripts')
    <script>
        $(function () {

            $('#date_range').flatpickr({
                mode: "range",
                dateFormat: "Y-m-d",
                defaultDate: moment().format('YYYY-MM-DD'),
                minDate: "today",
                onChange: function (selectedDates, dateStr, instance) {
                    if (selectedDates.length === 2) {
                        let start = moment(selectedDates[0]).format('YYYY-MM-DD');
                        let end = moment(selectedDates[1]).format('YYYY-MM-DD');

                        $('#start_date').val(start);
                        $('#end_date').val(end);
                        $('#date_range').val(start + " to " + end);

                        buildLoadSLots();
                    }
                }
            });

            const today = moment().format('YYYY-MM-DD');
            $('#start_date').val(today);
            $('#end_date').val(today);
            $('#date_range').val(today);
        });

        let currentDate = moment();
        let currentEnd = moment();

        function updateDateRange(date) {
            $('#start_date').val(date.format('YYYY-MM-DD'));
            $('#end_date').val(date.format('YYYY-MM-DD'));
            $('#date_range').val(date.format('YYYY-MM-DD'));
            buildLoadSLots();
        }

        function togglePrevButton() {
            if (currentDate.isSameOrBefore(moment(), 'day')) {
                $('#prev_date').prop('disabled', true);
            } else {
                $('#prev_date').prop('disabled', false);
            }
        }

        togglePrevButton();

        $('#prev_date').on('click', function () {
            currentDate.subtract(1, 'days');
            currentEnd.subtract(1, 'days');
            updateDateRange(currentDate, currentEnd);
            togglePrevButton();
        });

        $('#next_date').on('click', function () {
            currentDate.add(1, 'days');
            currentEnd.add(1, 'days');
            updateDateRange(currentDate, currentEnd);
            togglePrevButton();
        });




        $(document).ready(function () {

            buildLoadSLots();

        });


        function loadSlots() {
            let selectedDays = [];
            return new Promise((resolve, reject) => {
                $.ajax({
                    url: '{{ route('getBusyProductSlots')}}',
                    type: 'GET',
                    data: {
                        start_date: $('#start_date').val() ?? null,
                        end_date: $('#end_date').val() ?? null,
                        staff_type: 'tester',
                        days: selectedDays,
                    },
                    success: function (res) {
                        console.log('reresresress', res);
                        resolve(res);
                    },
                    error: function (err) {
                        reject(err);
                    }
                });
            });

        }

        async function buildLoadSLots() {
            $('#loader').css('display', 'flex');
            $('#content-wrap').hide();

            try {
                const res = await loadSlots();
                if (res.success) {
                    buildSlotsTable(res.data.result);
                    $('#content-wrap').show();
                } else {
                    toastr.error('Something went wrong!');
                }
            } catch (err) {
                toastr.error('Failed to load slots.');
            } finally {
                $('#loader').hide();
            }
        }
        function buildSlotsTable(data) {
            const selectedDay = $('.select-day').val();
            const $selectedOption = $('.start-time').find(':selected');
            const selectedStartTime = $selectedOption.data('slot-start');
            const selectedEndTime = $selectedOption.data('slot-end');
            const selectedSlotStaffId = $selectedOption.data('staff-slot-id');
            let firstDate = null;
            let firstTime = null;
            let days = [];
            $('.select-day').each(function () {
                days.push($(this).val());
            });
            if (selectedDay) {
                data.forEach(day => {
                    if (day.day_name.toLowerCase() === selectedDay.toLowerCase()) {
                        firstDate = day.date;
                    }
                });
            }
            let headerRow = '<th class="text-center">Tester Name</th>';
            let allStaffs = [];
            // Header
            data.forEach(day => {
                headerRow += `<th class="text-center">${day.day_name}<br><small>${day.date}</small></th>`;
                day.staffs.forEach(staff => {
                    if (!allStaffs.find(s => s.staff_id === staff.staff_id)) {
                        allStaffs.push(staff);
                    }
                });
            });
            $('#slots-header').html(headerRow);

            // Body
            let bodyHtml = '';
            let scheduled = 'once';


            if (allStaffs.length === 0) {
                bodyHtml = `
                                <tr>
                                    <td class="text-center" colspan="${data.length + 1}">
                                        No available Testers
                                    </td>
                                </tr>
                            `;
            } else {

                allStaffs.forEach(staff => {
                    const hasBooked = data.some(day => {
                        const staffData = day.staffs.find(s => s.staff_id === staff.staff_id);
                        return staffData && staffData.times.some(time => time.status === 'booked');
                    });

                    if (!hasBooked) {
                        return;
                    }

                    bodyHtml += `<tr>`;
                    let hrUrl = "{{ config('app.HR_URL') }}staffs/" + staff.staff_id;
                    bodyHtml += `<td class="text-center"><a href="${hrUrl}" target="_blank" style="text-decoration: none; color: #007bff;">${staff.staff_name}</a><br><small>${staff.package}</small></td>`;


                    data.forEach(day => {
                        let staffData = day.staffs.find(s => s.staff_id === staff.staff_id);

                        if (staffData && staffData.times.length) {
                            let timesHtml = '';

                            staffData.times
                                .filter(time => time.status === 'booked')
                                .forEach(time => {
let  tooltip = "";
                                         if (time.scheduledSession) {
                                     tooltip = `Booked By : ${time.scheduledSession.full_name}`;
                                     }
                                    if (time.student) {
                                        tooltip += ` | Booked To: ${time.student.first_name} ${time.student.last_name}`;
                                    }
                                    timesHtml += `<span class="table_btn" title="${tooltip}">${time.start_time}</span>`;
                                });

                            bodyHtml += `<td class="text-center" style="max-width: 450px;">
                                        <div>${timesHtml}</div>
                                    </td>`;
                        } else {
                            bodyHtml += `<td><span class="text-center">—</span></td>`;
                        }
                    });

                    bodyHtml += `</tr>`;
                });
            }

            $('#slots-body').html(bodyHtml);
        }
    </script>
@endpush