@extends('layout.layout')

@section('content')
    <div class="container-fluid">
        @if (isset($products) && $products)
            <section class="mb-4">
                <div class="card">
                    <div class="card-body">
                        <form id="scheduleForm">
                            <div class="row g-3">
                                <div class="col-md-12 d-none">
                                    <label for="schedule_type" class="form-label">Schedule Type<span
                                            class="text-danger">*</span></label>
                                    <select class="form-select" id="schedule_type" name="schedule_type" required>
                                        <option value="demo" selected>
                                            {{ app()->getLocale() == 'en' ? 'Demo' : 'دمو' }}
                                        </option>
                                    </select>
                                    @error('schedule_type')
                                        <div class="text-danger">{{ $message }}</div>
                                    @enderror
                                </div>
                                <div class="" id="other-section">
                                    <div class="row align-items-end g-3">
                                        <input type="hidden" name="product_id" id="product_id" value="{{ $products->id }}">
                                        <input type="hidden" id="start_product_date" name="start_product_date">
                                        <input type="hidden" id="end_product_date" name="end_product_date">
                                        <div class="col-md-1">
                                            <select class="form-select" id="date_filter">
                                                <option value="today" selected>Today</option>
                                                <option value="week">Week</option>
                                                <option value="month">Month</option>
                                            </select>
                                        </div>
                                        <div class="col-md-8">
                                            <div class="input-group">

                                                <span class="input-group-text px-3">
                                                    <iconify-icon icon="mdi:calendar"
                                                        style="color: #007bff;"></iconify-icon>
                                                    <input type="text" class="" id="date_range" name="date_range"
                                                        required placeholder="Select date range">
                                                </span>
                                                <button type="button" class="btn btn-outline-secondary" id="prev_date">
                                                    <iconify-icon icon="mdi:chevron-left"
                                                        style="color: #007bff;"></iconify-icon>
                                                </button>
                                                <button type="button" class="btn btn-outline-secondary" id="next_date">
                                                    <iconify-icon icon="mdi:chevron-right"
                                                        style="color: #007bff;"></iconify-icon>
                                                </button>
                                            </div>
                                            @error('start_product_date')
                                                <div class="text-danger">{{ $message }}</div>
                                            @enderror
                                            @error('end_product_date')
                                                <div class="text-danger">{{ $message }}</div>
                                            @enderror
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </section>

            <div class="card mb-4" id="product_slots_card">
                <div class="card-body">

                    
                    <div id="product_teachers_table" style="overflow: auto;" class="mt-3 table-container"></div>
                </div>
            </div>
        @else
            <div class="alert alert-danger">No product data available. Please contact support.</div>
        @endif
    </div>
@endsection

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css">
<style>
    .table tbody td div {
        font-size: 12px;
    }

    .selected-slot {
        border: 2px solid #28a745 !important;
        background-color: #e6f4ea !important;
        box-shadow: 0 0 5px rgba(40, 167, 69, 0.5);
    }

    .btn-primary {
        background-color: #007bff;
        border-color: #007bff;
        padding: 10px 20px;
        font-size: 16px;
        border-radius: 5px;
    }

    .btn-primary:hover {
        background-color: #0056b3;
        border-color: #0056b3;
    }

    .input-group {
        position: relative;
    }

    .date-range-input {
        border-radius: 0 !important;
        /* Adjusted to fit between buttons */
        padding: 10px 15px;
        font-size: 14px;
        background-color: #fff;
        border: 1px solid #ced4da;
        border-left: none;
        border-right: none;
        transition: border-color 0.2s ease;
    }

    .date-range-input:focus {
        border-color: #007bff;
        box-shadow: 0 0 5px rgba(0, 123, 255, 0.3);
        outline: none;
    }

    .input-group-text {
        background-color: #f8f9fa;
        border: 1px solid #ced4da;
        border-right: none;
        border-radius: 5px 0 0 5px;
    }

    .btn-outline-secondary {
        border: 1px solid #ced4da;
        padding: 0 10px;
    }

    #prev_date {
        border-right: none;
        border-radius: 0;
    }

    #next_date {
        border-left: none;
        border-radius: 0 5px 5px 0;
    }

    .btn-outline-secondary:disabled {
        opacity: 0.5;
        cursor: not-allowed;
    }

    .flatpickr-calendar {
        font-family: Arial, sans-serif;
        border-radius: 5px;
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    }

    .flatpickr-day.selected,
    .flatpickr-day.startRange,
    .flatpickr-day.endRange {
        background-color: #007bff !important;
        border-color: #007bff !important;
        color: #fff !important;
    }

    .flatpickr-day.inRange {
        background-color: #e6f4ff !important;
        border-color: #e6f4ff !important;
        color: #000 !important;
    }

    .form-select {
        font-size: 14px;
        padding: 10px;
    }
</style>

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/flatpickr"></script>
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
<script src="https://code.iconify.design/iconify-icon/1.0.8/iconify-icon.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.4/moment.min.js"></script>

<link href="{{ asset('assets/css/lib/toaster.css') }}" rel="stylesheet" />
<script src="{{ asset('assets/js/lib/toaster.js') }}"></script>

<script src="{{ asset('assets/scheduleUtils.js') }}"></script>

<script>
    window.products = @json($products ?? null);
    console.log('Products:', window.products);


    function fetchAvailableTeachers(options) {
    const { containerId = 'product_teachers_table', ajaxUrl, startDateField, endDateField, idField, idFieldName } = options;
    const startDate = $(`#${startDateField}`).val();
    const endDate = $(`#${endDateField}`).val();
    const productId = $(`#${idField}`).val();

    if (!startDate || !endDate || !productId) {
        toastr.error('Please select start date, end date, and product.');
        return;
    }

    const days = getDaysInRange(startDate, endDate);
    if (days.length === 0) {
        toastr.error('No days available in the selected date range.');
        return;
    }

    const data = {
        schedule: 'once',
        start_date: startDate,
        end_date: endDate,
        [idFieldName]: productId
    };

    $.ajax({
        url: ajaxUrl,
        method: 'GET',
        data: data,
        beforeSend: () => {
            $(`#${containerId}`).html('<div>Loading testers...</div>');
        },
        success: function(response) {
            // console.log('AJAX Response:', response);
            const allTeachers = {};
            const responseDays = Object.keys(response.teachers_by_day);

            // Process teachers for each dynamic day
            responseDays.forEach(responseDay => {
                const dayMatch = responseDay.match(/^(\w+)/);
                const dayName = dayMatch ? dayMatch[1] : responseDay;
                const dateMatch = responseDay.match(/\((\d{4}-\d{2}-\d{2})\)/);
                const dateStr = dateMatch ? dateMatch[1] : null;

                const teachers = response.teachers_by_day[responseDay] || [];
                teachers.forEach(teacher => {
                    if (!allTeachers[teacher.id]) {
                        allTeachers[teacher.id] = {
                            full_name: teacher.full_name,
                            total_slots: 0,
                            reservedSlot: 0,
                            slots: {}
                        };
                    }

                    const key = dayName;
                    if (!allTeachers[teacher.id].slots[key]) {
                        allTeachers[teacher.id].slots[key] = [];
                    }

                    // Split slots into 30-minute intervals and avoid duplicates
                    const halfHourSlots = splitTimeSlots(teacher.slots);
                    const uniqueSlots = [];
                    const slotKeys = new Set();

                    halfHourSlots.forEach(slot => {
                        const slotKey = `${slot.original_slot_id}-${slot.slot_emp.slot_start}-${slot.date}`;
                        if (!slotKeys.has(slotKey)) {
                            slotKeys.add(slotKey);
                            uniqueSlots.push({ ...slot, date: dateStr });
                        }
                    });

                    allTeachers[teacher.id].slots[key].push(...uniqueSlots);
                    allTeachers[teacher.id].total_slots += teacher.total_slots || 0;
                    allTeachers[teacher.id].reservedSlot += teacher.reservedSlot || 0;
                });
            });

            const filteredTeachers = {};
            for (let teacherId in allTeachers) {
                filteredTeachers[teacherId] = allTeachers[teacherId];
            }

            // Build table HTML
            let tableHtml = `<table class="table table-bordered table-responsive text-center table bordered-table sm-table mb-0">
                <thead>
                    <tr class="bg-dark text-center">
                        <th class="text-center">Tester Name</th>
                        ${days.map(item => `<th class="text-center"><div>${item.day}</div><div>${item.date}</div></th>`).join('')}
                    </tr>
                </thead>
                <tbody>`;

            if (Object.keys(filteredTeachers).length > 0) {
                for (let teacherId in filteredTeachers) {
                    const teacher = filteredTeachers[teacherId];
                    const totalSlots = teacher.total_slots || 0;
                    let percentageClass = '';
                    if (totalSlots <= 25) {
                        percentageClass = 'font-weight: bold; padding: 5px; border-radius: 5px; color: white; background-color: #28a745 !important;';
                    } else if (totalSlots <= 50) {
                        percentageClass = 'font-weight: bold; padding: 5px; border-radius: 5px; color: white; background-color: #ffc107 !important;';
                    } else if (totalSlots <= 75) {
                        percentageClass = 'font-weight: bold; padding: 5px; border-radius: 5px; color: white; background-color: #fd7e14 !important;';
                    } else {
                        percentageClass = 'font-weight: bold; padding: 5px; border-radius: 5px; color: white; background-color: #dc3545 !important;';
                    }
                    const photo = teacher.staff_photo ? `${teacher.staff_photo}` : '/assets/images/logo-icon.png';
                    let teacherUrl = "{{ env('TEACHER_URL_IN_HR_SYSTEM') }}";

                    tableHtml += `<tr data-teacher-id="${teacherId}">
                            <td>
                                <div class="d-flex align-items-center justify-content-center gap-2">
                                    <a href="${teacherUrl}/${teacherId}">
                                        <img src="${photo}" alt="${teacher.full_name}" class="rounded-circle" style="width: 50px; height: 50px; object-fit: cover;">
                                        ${teacher.full_name}
                                    </a>
                                    <span style="${percentageClass}">${totalSlots}%</span>
                                </div>
                            </td>

                       ${days.map(item => {
                            const slotKey = item.day;
                            const teacherSlots = teacher.slots[slotKey] || [];
                            console.log('teacherSlots',teacherSlots);


                            const nonAvailableSlots = teacherSlots.filter(slot => {
                                const status = checkTeacherAvailability(slot, item.date).status;
                                return status !== 'available';
                            });
                            console.log('nonAvailableSlots',nonAvailableSlots);
                            
                            let cellContent = '<div class="row">';
                            if (nonAvailableSlots.length > 0) {
                                const filteredSlots = nonAvailableSlots.filter(slot => !slot.date || slot.date === item.date);
                                for (let i = 0; i < Math.min(filteredSlots.length); i++) {
                                    const slotItem = filteredSlots[i];
                                    const availability = checkTeacherAvailability(slotItem, item.date);
                                    let cellStyle = '';
                                    const slotText = formatTimeSlot(slotItem.slot_emp.slot_start, slotItem.slot_emp.slot_end);
                                    if (availability.status === 'scheduled') {
                                        cellStyle = 'padding:6px; margin:5px; border-radius:10px; background-color: #fc3b3c; color: white; cursor:pointer; ';
                                    } else if (availability.status === 'busy') {
                                        cellStyle = 'padding:6px; margin:5px; border-radius:10px; background-color: #fdc59a; color: white; cursor:pointer; ';
                                    } else if (availability.status === 'available') {
                                        cellStyle = 'padding:6px; margin:5px; border-radius:10px; background-color: #eee21f; color:#000; cursor:pointer;';
                                    }
                                    if (i % 4 === 0 && i > 0) {
                                        cellContent += '</div><div class="row">';
                                    }
                                    cellContent += `<div class="col-auto" style="${cellStyle}" data-slot-id="${slotItem.original_slot_id}" data-date="${item.date}" data-status="${availability.status}" data-slot-start="${slotItem.slot_emp.slot_start}" data-slot-end="${slotItem.slot_emp.slot_end}" data-slot-day="${slotItem.slot_emp.slot_day}" data-teacher-id="${teacherId}">${slotText}</div>`;
                                }
                                cellContent += '</div>';
                            } else {
                                cellContent += 'No slots';
                            }
                            // return `<td>${cellContent}</td>`;
                            return `<td><div>${cellContent}</div></td>`;
                        }).join('')}
                    </tr>`;
                }
            } else {
                tableHtml += `<tr><td colspan="${days.length + 1}">No testers available <br><small> No testers available for the selected date range</small></td></tr>`;
            }

            tableHtml += `</tbody></table>`;
            $(`#${containerId}`).html(tableHtml);
            // $('#product_slots_card').removeClass('d-none');
        },
        error: function(xhr) {
            let errorMessage = 'Error fetching testers';
            if (xhr.status === 422) {
                errorMessage = 'Validation error: ' + (xhr.responseJSON?.messages ? JSON.stringify(xhr.responseJSON.messages) : 'Invalid input');
            } else if (xhr.status === 500 && xhr.responseJSON?.message) {
                errorMessage = xhr.responseJSON.message;
            } else if (xhr.status === 401) {
                errorMessage = 'Unauthorized: Please log in.';
            }
            toastr.error(errorMessage);
        }
    });
}

    $(document).ready(function() {
        // Initialize Flatpickr for date range
        const flatpickrInstance = flatpickr("#date_range", {
            mode: "range",
            dateFormat: "Y-m-d",
            minDate: "today",
            defaultDate: ["today", "today"],
            onReady: function(selectedDates, dateStr, instance) {
                const today = new Date().toISOString().split('T')[0];
                $('#start_product_date').val(today);
                $('#end_product_date').val(today);
                updateNavigationButtons();
                fetchTeacherSlots();
            },
            onChange: function(selectedDates, dateStr, instance) {
                console.log('Flatpickr onChange:', selectedDates);
                if (selectedDates.length >= 1) {
                    const startDate = moment(selectedDates[0]).format('YYYY-MM-DD');
                    $('#start_product_date').val(startDate);
                    console.log('Set start_product_date:', startDate);

                    const endDate = selectedDates[1] ? moment(selectedDates[1]).format(
                        'YYYY-MM-DD') : startDate;
                    $('#end_product_date').val(endDate);
                    console.log('Set end_product_date:', endDate);

                    updateNavigationButtons();
                    fetchTeacherSlots();
                }
            }
        });

        // Function to update the state of navigation buttons
        function updateNavigationButtons() {
            const startDate = moment($('#start_product_date').val());
            const today = moment().startOf('day');
            if (startDate.isSame(today, 'day')) {
                $('#prev_date').prop('disabled', true);
            } else {
                $('#prev_date').prop('disabled', false);
            }
        }

        // Handle dropdown filter change
        $('#date_filter').on('change', function() {
            const filterValue = $(this).val();
            const today = moment();
            let startDate, endDate;

            switch (filterValue) {
                case 'today':
                    startDate = today.clone();
                    endDate = startDate.clone();
                    break;
                case 'week':
                    startDate = today.clone();
                    endDate = today.clone().endOf('week');
                    break;
                case 'month':
                    startDate = today.clone();
                    endDate = today.clone().endOf('month');
                    break;
            }

            const formattedStart = startDate.format('YYYY-MM-DD');
            const formattedEnd = endDate.format('YYYY-MM-DD');
            flatpickrInstance.setDate([formattedStart, formattedEnd]);

            $('#start_product_date').val(formattedStart);
            $('#end_product_date').val(formattedEnd);
            console.log('Filter applied - Start Date:', formattedStart, 'End Date:', formattedEnd);

            updateNavigationButtons();
            fetchTeacherSlots();
        });

        // Handle Previous button click
        $('#prev_date').on('click', function() {
            const filterValue = $('#date_filter').val();
            const currentStart = moment($('#start_product_date').val());
            const currentEnd = moment($('#end_product_date').val());
            let newStart, newEnd;

            switch (filterValue) {
                case 'today':
                    newStart = currentStart.clone().subtract(1, 'day');
                    newEnd = newStart.clone();
                    break;
                case 'week':
                    newStart = currentStart.clone().subtract(1, 'day');
                    newEnd = currentEnd.clone().subtract(1, 'day');
                    break;
                case 'month':
                    newStart = currentStart.clone().subtract(1, 'day');
                    newEnd = currentEnd.clone().subtract(1, 'day');
                    break;
            }

            // Prevent going before today
            const today = moment().startOf('day');
            if (newStart.isBefore(today)) {
                return;
            }

            const formattedStart = newStart.format('YYYY-MM-DD');
            const formattedEnd = newEnd.format('YYYY-MM-DD');
            flatpickrInstance.setDate([formattedStart, formattedEnd]);

            $('#start_product_date').val(formattedStart);
            $('#end_product_date').val(formattedEnd);
            console.log('Previous - Start Date:', formattedStart, 'End Date:', formattedEnd);

            updateNavigationButtons();
            fetchTeacherSlots();
        });

        // Handle Next button click
        $('#next_date').on('click', function() {
            const filterValue = $('#date_filter').val();
            const currentStart = moment($('#start_product_date').val());
            const currentEnd = moment($('#end_product_date').val());
            let newStart, newEnd;

            switch (filterValue) {
                case 'today':
                    newStart = currentStart.clone().add(1, 'day');
                    newEnd = newStart.clone();
                    break;
                case 'week':
                    newStart = currentStart.clone().add(1, 'day');
                    newEnd = currentEnd.clone().add(1, 'day');
                    break;
                case 'month':
                    newStart = currentStart.clone().add(1, 'day');
                    newEnd = currentEnd.clone().add(1, 'day');
                    break;
            }

            const formattedStart = newStart.format('YYYY-MM-DD');
            const formattedEnd = newEnd.format('YYYY-MM-DD');
            flatpickrInstance.setDate([formattedStart, formattedEnd]);

            $('#start_product_date').val(formattedStart);
            $('#end_product_date').val(formattedEnd);
            console.log('Next - Start Date:', formattedStart, 'End Date:', formattedEnd);

            updateNavigationButtons();
            fetchTeacherSlots();
        });

        function fetchTeacherSlots() {
            const startDate = $('#start_product_date').val();
            console.log('Start Date:', startDate);
            const endDate = $('#end_product_date').val();
            console.log('End Date:', endDate);
            const productId = $('#product_id').val();
            console.log('Product ID:', productId);
            const scheduleType = $('#schedule_type').val();
            console.log('Schedule Type:', scheduleType);

            if (!window.products || !productId) {
                toastr.error('Product data is missing.');
                console.error('Product ID missing:', productId);
                return;
            }

            resetSlotsAndTeachers('product');
            fetchAvailableTeachers({
                ajaxUrl: '{{ route('getTeacherProductByTime') }}',
                startDateField: 'start_product_date',
                endDateField: 'end_product_date',
                idField: 'product_id',
                idFieldName: 'product_id'
            });
        }

        // Call resetForm on page load
        if (window.products) {
            // resetForm();
        } else {
            toastr.error('Product data is missing.');
            console.error('Product data missing:', window.products);
        }
    });
</script>