@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="Schedule Demo"
                    description="Browse available tester demo slots by date and assign students in a few clicks."
                />

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

@push('styles')
    <style>
        .table_btn {
            padding: 10px;
            margin: 5px;
            border-radius: 10px;
            background-color: #eee21f;
            color: #000;
            cursor: pointer;
            width: 120px;
        }

        .table_btn:hover {
            background-color: #d3b600 !important;
        }


        .disbled_btn {
            padding: 10px;
            margin: 5px;
            border-radius: 10px;
            background-color: #ff0000ff;
            color: #ffffffff;
            cursor: not-allowed !important;
            width: 120px;
        }

        .disbled_btn:hover {
            background-color: #921111ff !important;
        }

        .reserved_btn {
            padding: 10px;
            margin: 5px;
            border-radius: 10px;
            background-color: #198754;
            color: #fff;
            cursor: not-allowed !important;
            width: 120px;
        }

        .reserved_btn:hover {
            background-color: #157347 !important;
        }

        .selected-student-badge {
            background: #eff6ff;
            color: #1d4ed8;
            border: 1px solid #bfdbfe;
            padding: 4px 12px;
            border-radius: 8px;
            font-size: 0.85rem;
            font-weight: 600;
            display: flex;
            align-items: center;
            gap: 6px;
        }


    </style>
@endpush

@push('scripts')
    <script>
        window.teacherUrl = "{{ env('TEACHER_URL_IN_HR_SYSTEM') }}";
        window.action = @json($action ?? null);
        window.students = @json($students ?? null);
        window.crmPath = "{{ env('CRM_PATH') }}";



        $(function () {
            $(document).on('change', '.time-filter-demo', function () {
                buildLoadSLots();
            });
            $(document).on('change', '.booking-status-filter-demo', function () {
                buildLoadSLots();
            });

            $('#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('getAvailableProductSlots') }}',
                    type: 'GET',

                    data: {
                        start_date: $('#start_date').val() ?? null,
                        end_date: $('#end_date').val() ?? null,
                        staff_type: 'tester',
                        days: selectedDays,
                        filter_from: $('#filter_from_time_demo').val() ?? null,
                        filter_to: $('#filter_to_time_demo').val() ?? null,
                        booking_status: $('#booking_status_demo').val() ?? null,
                    },
                    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 hasSlots = data.some(day => {
                        const staffData = day.staffs.find(s => s.staff_id === staff.staff_id);
                        return staffData && staffData.times.length;
                    });

                    if (!hasSlots) 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.forEach(time => {
                                let tooltip = "";
                                if (time.status === 'reserved') {
                                    if (time.scheduledSession) {
                                        tooltip = `Reserved By : ${time.scheduledSession.full_name}`;
                                    }
                                    if (time.student) {
                                        tooltip += ` | Reserved To : ${time.student.first_name} ${time.student.last_name}`;
                                    }

                                    timesHtml += `<button type="button" class="reserved_btn" title="${tooltip}">${time.start_time}</button>`;
                                } else if (time.status === 'booked') {
                                    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 += `<button type="button" class="disbled_btn" title="${tooltip}">${time.start_time}</button>
                                                `;
                                } else {
                                    timesHtml += `
                                                    <button type="button" class="table_btn save-slot"
                                                        data-scheduled="${scheduled}"
                                                        data-staff_slot_id="${time.staff_slot_id}"
                                                        data-staff_id="${staff.staff_id}"
                                                        data-start_date="${day.date}"
                                                        data-start_time="${time.start_time}"
                                                        data-end_time="${time.end_time}"
                                                        data-session="${$('#session').val() ?? ''}">
                                                        ${time.start_time}
                                                    </button>
                                                `;
                                }
                            });

                            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);
        }


        $(document).on('click', '.save-slot', function () {
            let btn = $(this);

            const studentIdFromUrl = new URLSearchParams(window.location.search).get('student_id');
            const leadIdFromQuery = new URLSearchParams(window.location.search).get('lead_id');
            const hardCopyRequestId = new URLSearchParams(window.location.search).get('hard_copy_request_id');


            const path = window.location.pathname; // e.g. /products/view
            const query = window.location.search; // e.g. ?id=123
            const hash = window.location.hash;
            const newAction = action.find(a => a.action.toLowerCase() == 'demo');

            const actionId = newAction.id;
            const actionPath = `action_id=${actionId}`;

            const fullUrlWithoutBase = `${crmPath}/leads/${leadIdFromQuery}/edit?${actionPath}`;


            let selectedOption = $('#start_time_1 option:selected');
            let selectedOption2 = $('#start_time_2 option:selected');

            let selectedStudents = $('#student_id').val();

            let data = {
                _token: "{{ csrf_token() }}",
                staff_slot_id: btn.data('staff_slot_id'),
                staff_id: btn.data('staff_id'),
                start_date: btn.data('start_date'),
                start_time: selectedOption.val() || btn.data('start_time'),
                end_time: selectedOption.data('slot-end') || btn.data('end_time'),
                session: btn.data('session'),
                staff_type: 'tester',
                studentId: studentIdFromUrl,
                student_ids: selectedStudents,
                hard_copy_request_id: hardCopyRequestId

            };


            data.redirect = document.referrer + fullUrlWithoutBase;


            $.ajax({
                url: "{{ route('storeProduct') }}",
                type: "post",
                data: data,
                success: function (res) {
                    if (res.success) {
                        toastr.success('Slot saved successfully!');

                        if (studentIdFromUrl && leadIdFromQuery) {
                            // window.location.href = fullUrlWithoutBase;
                            window.location.replace(fullUrlWithoutBase);
                        } else if (hardCopyRequestId) {
                            window.location.href = "{{ route('requestHardCopy') }}";
                        } else {
                            buildLoadSLots();
                        }
                    } else {
                        toastr.error('Something went wrong!');
                    }
                },
                error: function (err) {
                    toastr.error('Failed to save slot.', err.responseJSON.message);
                }
            });
        });
    </script>
@endpush