@extends('layout.layout')

@section('content')
    <div class="app-bg placement-page">
        <div class="page-shell">
            @include('components.alert')

            <div class="placement-head">
                <div>
                    <div class="placement-title">Pending Placement Test</div>
                    <p class="placement-subtitle">One free Demo or AI Test is available per student after course payment. Further assessments are paid.</p>
                </div>
                <a href="{{ route('student.payments.index') }}" class="placement-icon-btn" title="Back to payments" aria-label="Back to payments">
                    <i class="fa-solid fa-arrow-left"></i>
                </a>
            </div>

            <div class="placement-layout">
                <section class="placement-panel">
                    <div class="placement-course">
                        <span class="placement-course__icon"><i class="fa-solid fa-graduation-cap"></i></span>
                        <div>
                            <strong>{{ $enrollment->course?->track?->name_en ?? $enrollment->course?->course_name_en ?? 'Course Enrollment' }}</strong>
                            <small>
                                {{ $enrollment->course?->trackLevel?->name_en ?? 'Placement included' }}
                                @if($enrollment->finanaceStudentInvoice?->invoice_number)
                                    - Invoice {{ $enrollment->finanaceStudentInvoice->invoice_number }}
                                @endif
                            </small>
                        </div>
                    </div>

                    @if(($status['can_book'] ?? false) === false)
                        @if(($status['state'] ?? '') === 'paid_assessment_required')
                            <a class="placement-primary-btn" href="{{ route('student.test-language.index') }}">Book a paid Demo or AI Test</a>
                        @endif
                        @php($placementBooking = $enrollment->placementTestBooking)
                        @php($aiAttempt = $placementBooking?->aiPlacementAttempt)
                        <div class="placement-complete">
                            <i class="fa-solid fa-circle-check"></i>
                            <strong>{{ $status['label'] ?? 'Placement Test Booked' }}</strong>
                            @if($placementBooking?->assessment_type === 'ai')
                                @if($aiAttempt?->status === 'completed')
                                    <p>Your AI Placement Test result is ready.</p>
                                    <div class="placement-result">
                                        <div><span>CEFR</span><strong>{{ data_get($aiAttempt?->result, 'cefr', '-') }}</strong></div>
                                        <div><span>Grammar</span><strong>{{ data_get($aiAttempt?->result, 'criteria.grammar', '-') }}</strong></div>
                                        <div><span>Fluency</span><strong>{{ data_get($aiAttempt?->result, 'criteria.fluency', '-') }}</strong></div>
                                        <div><span>Vocabulary</span><strong>{{ data_get($aiAttempt?->result, 'criteria.vocabulary', '-') }}</strong></div>
                                    </div>
                                    @if(data_get($aiAttempt?->result, 'feedback'))
                                        <p>{{ data_get($aiAttempt?->result, 'feedback') }}</p>
                                    @endif
                                    @if(data_get($aiAttempt?->result, 'recommendation'))
                                        <p><strong>Recommendation:</strong> {{ data_get($aiAttempt?->result, 'recommendation') }}</p>
                                    @endif
                                @else
                                    <p>Status: {{ $aiAttempt?->status ?: 'issued' }}. Results are reviewed manually and are usually ready within 24 hours.</p>
                                    <div class="placement-actions">
                                        @if($aiAttempt?->link)
                                            <a class="placement-primary-btn" href="{{ route('student.placement-tests.ai.take', $enrollment) }}">
                                                <i class="fa-solid fa-arrow-up-right-from-square"></i>
                                                <span>Open AI Test</span>
                                            </a>
                                        @endif
                                        <form method="POST" action="{{ route('student.placement-tests.ai-result.sync', $enrollment) }}">
                                            @csrf
                                            <button type="submit" class="placement-secondary-btn">
                                                <i class="fa-solid fa-rotate"></i>
                                                <span class="text-white">Refresh Result</span>
                                            </button>
                                        </form>
                                    </div>
                                @endif
                            @else
                                <p>Your free language assessment has already been used.</p>
                            @endif
                        </div>
                    @else
                        <div class="placement-options" role="radiogroup" aria-label="Placement assessment options">
                            @if($aiAvailable)
                                <label class="placement-option is-selected">
                                    <input type="radio" name="assessment_type" value="ai" checked>
                                    <span><i class="fa-solid fa-wand-magic-sparkles"></i></span>
                                    <strong>AI Placement Test</strong>
                                    <small>Start with the default online assessment.</small>
                                </label>
                            @endif

                            <label class="placement-option {{ $aiAvailable ? '' : 'is-selected' }}">
                                <input type="radio" name="assessment_type" value="demo" {{ $aiAvailable ? '' : 'checked' }}>
                                <span><i class="fa-regular fa-calendar-check"></i></span>
                                <strong>20-Minute Demo Session</strong>
                                <small>Book a live demo slot from the demos calendar.</small>
                            </label>
                        </div>

                        <form method="POST" action="{{ route('student.placement-tests.ai.store', $enrollment) }}" id="aiPlacementForm" class="{{ $aiAvailable ? '' : 'd-none' }}">
                            @csrf
                            <button type="submit" class="placement-primary-btn">
                                <i class="fa-solid fa-check"></i>
                                <span>Confirm AI Placement Test</span>
                            </button>
                        </form>

                        <section id="demoCalendar" class="{{ $aiAvailable ? 'd-none' : '' }}">
                            <div class="placement-calendar-head">
                                <div>
                                    <strong>Demos Calendar</strong>
                                    <small>Choose one available placement demo slot.</small>
                                </div>
                            </div>

                            <form id="demoSlotForm" class="placement-form" data-no-loader="true">
                                <label>
                                    <span>Start Date</span>
                                    <input id="startDate" type="date" value="{{ now()->toDateString() }}">
                                </label>
                                <label>
                                    <span>End Date</span>
                                    <input id="endDate" type="date" value="{{ now()->addWeek()->toDateString() }}">
                                </label>
                                <label>
                                    <span>From</span>
                                    <input id="filterFrom" type="time">
                                </label>
                                <label>
                                    <span>To</span>
                                    <input id="filterTo" type="time">
                                </label>
                                <button type="submit" class="placement-secondary-btn" id="searchSlotsBtn">
                                    <i class="fa-solid fa-magnifying-glass"></i>
                                    <span class="text-white">Show Demo Slots</span>
                                </button>
                            </form>

                            <div id="slotResults" class="placement-slots">
                                <div class="placement-empty">
                                    <i class="fa-regular fa-calendar-plus"></i>
                                    <strong>Select dates to view demo slots</strong>
                                    <p>Only available tester slots will be shown.</p>
                                </div>
                            </div>
                        </section>
                    @endif
                </section>
            </div>
        </div>
    </div>
@endsection

@push('styles')
    <style>
        .placement-page {
            background: #f6f8fb;
            color: #0f172a;
        }

        .placement-page .page-shell {
            max-width: none;
            margin-right: 0;
            padding-right: 0;
        }

        .placement-head {
            display: flex;
            justify-content: space-between;
            gap: 1rem;
            margin-bottom: 1rem;
        }

        .placement-title {
            color: #071b3d;
            font-size: 1.15rem;
            font-weight: 850;
        }

        .placement-subtitle {
            max-width: 720px;
            margin: 0.3rem 0 0;
            color: #64748b;
            font-size: 0.9rem;
        }

        .placement-icon-btn {
            width: 44px;
            height: 44px;
            border: 1px solid #dbe7f6;
            border-radius: 8px;
            background: #fff;
            color: #0f1724;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            text-decoration: none;
        }

        .placement-layout {
            width: 100%;
        }

        .placement-panel {
            border: 1px solid #dbe7f6;
            border-radius: 8px;
            background: #fff;
            box-shadow: 0 14px 30px rgba(7, 27, 61, 0.06);
            padding: 1rem;
        }

        .placement-course {
            display: flex;
            align-items: center;
            gap: 0.8rem;
            min-width: 0;
            border: 1px solid #e7eef8;
            border-radius: 8px;
            background: #f8fbff;
            padding: 0.85rem;
            margin-bottom: 1rem;
        }

        .placement-course__icon {
            width: 42px;
            height: 42px;
            border-radius: 8px;
            background: #eaf2ff;
            color: #0f1724;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            flex: 0 0 auto;
        }

        .placement-course strong,
        .placement-course small {
            display: block;
            min-width: 0;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        .placement-course strong {
            color: #071b3d;
            font-weight: 850;
        }

        .placement-course small {
            color: #64748b;
            font-size: 0.8rem;
            margin-top: 0.15rem;
        }

        .placement-options {
            display: grid;
            grid-template-columns: repeat(2, minmax(0, 1fr));
            gap: 0.85rem;
            margin-bottom: 1rem;
        }

        .placement-option {
            min-height: 138px;
            border: 1px solid #dbe7f6;
            border-radius: 8px;
            background: #fff;
            display: grid;
            gap: 0.35rem;
            padding: 0.9rem;
            cursor: pointer;
        }

        .placement-option.is-selected {
            border-color: #0f1724;
            background: #f3f8ff;
            box-shadow: 0 0 0 3px rgba(11, 79, 197, 0.08);
        }

        .placement-option input {
            position: absolute;
            opacity: 0;
            pointer-events: none;
        }

        .placement-option span {
            width: 38px;
            height: 38px;
            border-radius: 8px;
            background: #eaf2ff;
            color: #0f1724;
            display: inline-flex;
            align-items: center;
            justify-content: center;
        }

        .placement-option strong {
            color: #071b3d;
            font-size: 0.95rem;
            font-weight: 850;
        }

        .placement-option small {
            color: #64748b;
            line-height: 1.45;
        }

        .placement-primary-btn,
        .placement-secondary-btn,
        .placement-slot-btn {
            min-height: 44px;
            border-radius: 8px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 0.5rem;
            font-size: 0.86rem;
            font-weight: 850;
        }

        .placement-primary-btn {
            width: 100%;
            border: 0;
            background: #0f1724;
            color: #fff;
        }

        .placement-secondary-btn {
            border: 1px solid #0f1724;
            background: #0f1724;
            color: #fff;
            padding: 0 1rem;
        }

        .placement-secondary-btn:hover,
        .placement-secondary-btn:focus,
        .placement-secondary-btn:disabled {
            border-color: #083f9e;
            background: #083f9e;
            color: #fff;
            opacity: 1;
        }

        .placement-calendar-head {
            display: flex;
            justify-content: space-between;
            gap: 1rem;
            padding-top: 1rem;
            margin-top: 1rem;
            border-top: 1px solid #e7eef8;
        }

        .placement-calendar-head strong,
        .placement-calendar-head small {
            display: block;
        }

        .placement-calendar-head strong {
            color: #071b3d;
            font-weight: 850;
        }

        .placement-calendar-head small {
            color: #64748b;
            margin-top: 0.15rem;
        }

        .placement-form {
            display: grid;
            grid-template-columns: repeat(4, minmax(150px, 1fr)) minmax(170px, auto);
            gap: 0.75rem;
            align-items: end;
            margin: 1rem 0;
        }

        .placement-form label {
            display: grid;
            gap: 0.35rem;
        }

        .placement-form span {
            color: #475569;
            font-size: 0.78rem;
            font-weight: 850;
        }

        .placement-form input {
            width: 100%;
            min-height: 44px;
            border: 1px solid #dbe7f6;
            border-radius: 8px;
            padding: 0 0.75rem;
        }

        .placement-slots {
            min-height: 180px;
        }

        .placement-table-wrap {
            overflow-x: auto;
            border: 1px solid #dbe7f6;
            border-radius: 8px;
        }

        .placement-table {
            width: 100%;
            min-width: 960px;
            border-collapse: separate;
            border-spacing: 0;
        }

        .placement-table th,
        .placement-table td {
            border-bottom: 1px solid #e7eef8;
            border-right: 1px solid #e7eef8;
            padding: 0.75rem;
            vertical-align: top;
        }

        .placement-table th:last-child,
        .placement-table td:last-child {
            border-right: 0;
        }

        .placement-table tr:last-child td {
            border-bottom: 0;
        }

        .placement-table th {
            background: #f8fbff;
            color: #071b3d;
            text-align: center;
            font-size: 0.82rem;
            font-weight: 850;
        }

        .placement-slot-list {
            display: flex;
            flex-wrap: wrap;
            gap: 0.45rem;
        }

        .placement-slot-btn {
            border: 1px solid #bcd4fa;
            background: #eaf2ff;
            color: #0f1724;
            padding: 0 0.8rem;
            white-space: nowrap;
        }

        .placement-confirm-details {
            display: grid;
            gap: 0.65rem;
            margin: 0.75rem auto 0;
            max-width: 420px;
            text-align: left;
        }

        .placement-confirm-details div {
            display: flex;
            justify-content: space-between;
            gap: 1rem;
            border-bottom: 1px solid #e7eef8;
            padding-bottom: 0.55rem;
        }

        .placement-confirm-details div:last-child {
            border-bottom: 0;
            padding-bottom: 0;
        }

        .placement-confirm-details span {
            color: #64748b;
            font-size: 0.84rem;
            font-weight: 700;
        }

        .placement-confirm-details strong {
            color: #071b3d;
            font-size: 0.9rem;
            text-align: right;
        }

        .placement-result {
            display: grid;
            grid-template-columns: repeat(4, minmax(0, 1fr));
            gap: 0.65rem;
            width: min(720px, 100%);
            margin: 0.85rem auto;
        }

        .placement-result div {
            border: 1px solid #dbe7f6;
            border-radius: 8px;
            background: #f8fbff;
            padding: 0.75rem;
        }

        .placement-result span,
        .placement-result strong {
            display: block;
        }

        .placement-result span {
            color: #64748b;
            font-size: 0.76rem;
            font-weight: 800;
        }

        .placement-result strong {
            color: #071b3d;
            font-size: 1rem;
            margin-top: 0.2rem;
        }

        .placement-actions {
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            gap: 0.65rem;
            margin-top: 1rem;
        }

        .placement-actions .placement-primary-btn {
            width: auto;
            padding: 0 1rem;
            text-decoration: none;
        }

        .placement-empty,
        .placement-complete {
            min-height: 180px;
            border: 1px solid #dbe7f6;
            border-radius: 8px;
            display: grid;
            place-items: center;
            text-align: center;
            padding: 1.5rem;
        }

        .placement-empty i,
        .placement-complete i {
            color: #0f1724;
            font-size: 1.8rem;
            margin-bottom: 0.5rem;
        }

        .placement-empty strong,
        .placement-complete strong {
            display: block;
            color: #071b3d;
            font-weight: 850;
        }

        .placement-empty p,
        .placement-complete p {
            margin: 0.25rem 0 0;
            color: #64748b;
        }

        @media (max-width: 980px) {
            .placement-options,
            .placement-form,
            .placement-result {
                grid-template-columns: 1fr;
            }
        }
    </style>
@endpush

@push('scripts')
    <script>
        (function () {
            const endpoints = {
                slots: @json(route('student.placement-tests.demo-slots', $enrollment)),
                bookDemo: @json(route('student.placement-tests.demo-bookings.store', $enrollment)),
            };
            const csrfToken = @json(csrf_token());
            const aiForm = document.getElementById('aiPlacementForm');
            const demoCalendar = document.getElementById('demoCalendar');
            const slotForm = document.getElementById('demoSlotForm');
            const results = document.getElementById('slotResults');
            const searchButton = document.getElementById('searchSlotsBtn');

            document.querySelectorAll('input[name="assessment_type"]').forEach(input => {
                input.addEventListener('change', () => {
                    document.querySelectorAll('.placement-option').forEach(label => {
                        label.classList.toggle('is-selected', label.querySelector('input').checked);
                    });
                    aiForm?.classList.toggle('d-none', input.value !== 'ai' || !input.checked);
                    demoCalendar?.classList.toggle('d-none', input.value !== 'demo' || !input.checked);
                });
            });

            slotForm?.addEventListener('submit', async event => {
                event.preventDefault();
                await loadSlots();
            });

            async function loadSlots() {
                const params = new URLSearchParams({
                    start_date: document.getElementById('startDate').value,
                    end_date: document.getElementById('endDate').value,
                });
                const from = document.getElementById('filterFrom').value;
                const to = document.getElementById('filterTo').value;

                if (from) params.set('filter_from', from);
                if (to) params.set('filter_to', to);

                searchButton.disabled = true;
                searchButton.querySelector('span').textContent = 'Loading';
                results.innerHTML = emptyState('fa-solid fa-spinner fa-spin', 'Loading demo slots', 'Please wait.');

                try {
                    const response = await fetch(`${endpoints.slots}?${params.toString()}`, {
                        headers: { 'Accept': 'application/json' },
                    });
                    const data = await response.json();

                    if (!response.ok) {
                        throw new Error(data.message || 'Could not load demo slots.');
                    }

                    renderSlots(data.slots || []);
                } catch (error) {
                    results.innerHTML = emptyState('fa-solid fa-triangle-exclamation', 'Could not load slots', error.message || 'Try again.');
                } finally {
                    searchButton.disabled = false;
                    searchButton.querySelector('span').textContent = 'Show Demo Slots';
                }
            }

            function renderSlots(days) {
                const staffMap = new Map();
                days.forEach(day => {
                    (day.staffs || []).forEach(staff => {
                        if (!staffMap.has(Number(staff.staff_id))) {
                            staffMap.set(Number(staff.staff_id), staff);
                        }
                    });
                });
                const staffs = Array.from(staffMap.values());

                if (!days.length || !staffs.length) {
                    results.innerHTML = emptyState('fa-regular fa-calendar-xmark', 'No available demo slots', 'Try another date range or time filter.');
                    return;
                }

                results.innerHTML = `
                    <div class="placement-table-wrap">
                        <table class="placement-table">
                            <thead>
                                <tr>
                                    ${days.map(day => `<th>${escapeHtml(day.day_name)}<br><small>${escapeHtml(day.date)}</small></th>`).join('')}
                                </tr>
                            </thead>
                            <tbody>
                                ${staffs.map(staff => `
                                    <tr>
                                        ${days.map(day => renderCell(staff, day)).join('')}
                                    </tr>
                                `).join('')}
                            </tbody>
                        </table>
                    </div>
                `;
            }

            function renderCell(staff, day) {
                const dayStaff = (day.staffs || []).find(item => Number(item.staff_id) === Number(staff.staff_id));

                if (!dayStaff || !(dayStaff.times || []).length) {
                    return '<td><div class="text-muted small">No slots</div></td>';
                }

                return `
                    <td>
                        <div class="placement-slot-list">
                            ${dayStaff.times.map(slot => `
                                <button type="button" class="placement-slot-btn"
                                    data-date="${escapeHtml(day.date)}"
                                    data-day-name="${escapeHtml(day.day_name)}"
                                    data-staff-id="${escapeHtml(staff.staff_id)}"
                                    data-staff-name="${escapeHtml(staff.staff_name || '-')}"
                                    data-staff-slot-id="${escapeHtml(slot.staff_slot_id)}"
                                    data-start-time="${escapeHtml(formatTime(slot.start_time))}"
                                    data-end-time="${escapeHtml(formatTime(slot.end_time))}">
                                    ${escapeHtml(formatTime(slot.start_time))} - ${escapeHtml(formatTime(slot.end_time))}
                                </button>
                            `).join('')}
                        </div>
                    </td>
                `;
            }

            results?.addEventListener('click', async event => {
                const button = event.target.closest('.placement-slot-btn');

                if (!button) {
                    return;
                }

                await bookDemo(button);
            });

            async function bookDemo(button) {
                const demoDetailsHtml = `
                    <div class="placement-confirm-details">
                        <div>
                            <span>Tester</span>
                            <strong>${escapeHtml(button.dataset.staffName || '-')}</strong>
                        </div>
                        <div>
                            <span>Date</span>
                            <strong>${escapeHtml(button.dataset.dayName || '')} ${escapeHtml(button.dataset.date || '')}</strong>
                        </div>
                        <div>
                            <span>Time</span>
                            <strong>${escapeHtml(button.dataset.startTime || '')} - ${escapeHtml(button.dataset.endTime || '')}</strong>
                        </div>
                        <div>
                            <span>Payment</span>
                            <strong>Included with enrollment</strong>
                        </div>
                    </div>
                `;
                const confirmed = window.Swal
                    ? await Swal.fire({
                        title: 'Book this placement demo?',
                        html: demoDetailsHtml,
                        showCancelButton: true,
                        confirmButtonText: 'Book Demo',
                        confirmButtonColor: '#0f1724',
                    }).then(result => result.isConfirmed)
                    : confirm('Book this placement demo?');

                if (!confirmed) {
                    return;
                }

                button.disabled = true;

                try {
                    const response = await fetch(endpoints.bookDemo, {
                        method: 'POST',
                        headers: {
                            'Accept': 'application/json',
                            'Content-Type': 'application/json',
                            'X-CSRF-TOKEN': csrfToken,
                        },
                        body: JSON.stringify({
                            start_date: button.dataset.date,
                            staff_id: button.dataset.staffId,
                            staff_slot_id: button.dataset.staffSlotId,
                        }),
                    });
                    const data = await response.json();

                    if (!response.ok) {
                        throw new Error(data.message || 'Could not book demo slot.');
                    }

                    window.location.href = data.redirect_url || window.location.href;
                } catch (error) {
                    button.disabled = false;
                    if (window.toastr) {
                        toastr.error(error.message || 'Could not book demo slot.');
                    } else {
                        alert(error.message || 'Could not book demo slot.');
                    }
                }
            }

            function emptyState(icon, title, message) {
                return `
                    <div class="placement-empty">
                        <div>
                            <i class="${icon}"></i>
                            <strong>${escapeHtml(title)}</strong>
                            <p>${escapeHtml(message)}</p>
                        </div>
                    </div>
                `;
            }

            function formatTime(value) {
                return String(value || '').slice(0, 5);
            }

            function escapeHtml(value) {
                return String(value ?? '')
                    .replace(/&/g, '&amp;')
                    .replace(/</g, '&lt;')
                    .replace(/>/g, '&gt;')
                    .replace(/"/g, '&quot;')
                    .replace(/'/g, '&#039;');
            }
        })();
    </script>
@endpush