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

    @php
        $types = collect([['label' => 'All', 'value' => null]])
            ->merge($tracks->unique('name_en')->filter(fn($track) => filled($track->name_en))->map(fn($track) => ['label' => $track->name_en, 'value' => $track->name_en]))
            ->merge($products->unique('name_en')->filter(fn($product) => filled($product->name_en))->map(fn($product) => ['label' => $product->name_en, 'value' => $product->name_en]));
    @endphp

    <div class="container-fluid app-bg">
        <div class="page-shell">
            <div class="d-flex flex-column gap-4">
                <x-page-title
                    title="Live Sessions"
                    description="Track today's sessions, review the next upcoming ones, and send urgent actions quickly."
                >
                    <a href="{{ route('sessions') }}" class="asset-btn asset-btn--secondary">Show All Sessions</a>
                </x-page-title>

                <div class="ui-card">
                    <div class="ui-card__header">
                        <div class="d-flex align-items-center gap-3 flex-wrap">
                            <div style="margin-right: auto;">
                                <div class="mb-0 ui-title">Filters</div>
                                <p class="mb-0 ui-muted">Filter by program or product.</p>
                            </div>


                        </div>
                    </div>

                    @if ($types->count() > 1)
                        <div class="px-3 pb-3">
                            <div class="d-flex flex-wrap gap-2">
                                @foreach ($types as $filterType)
                                    @php
                                        $isActive = request('type') === $filterType['value'] || (blank(request('type')) && is_null($filterType['value']));
                                        $query = array_filter([
                                            'type' => $filterType['value'],
                                            'search' => request('search'),
                                        ], fn($value) => filled($value));
                                    @endphp

                                    <a href="{{ route('live_sessions', $query) }}"
                                        class="btn btn-sm {{ $isActive ? 'btn-outline-primary' : 'btn-outline-secondary' }}">
                                        {{ $filterType['label'] }}
                                    </a>
                                @endforeach
                            </div>
                        </div>
                    @endif
                </div>

                <div class="ui-card ui-card--table">
                    <div class="ui-card__header">
                        <div>
                            <div class="mb-0 ui-title">Today's Sessions</div>
                            <p class="mb-0 ui-muted">Sessions happening today.</p>
                        </div>
                    </div>

                    <x-table
                        :headers="['ID', 'Student', 'Teacher', 'Teacher Media', 'Program/Product', 'Level', 'Time', 'Group/Private', 'Actions']"
                        :paginator="$todayCourses"
                        emptyMessage="No sessions scheduled for today."
                    >
                        @foreach ($todayCourses as $course)
                            @php
                                $scheduled = $course->staffScheduled;
                                $teacher = sessionTeacher($course, $scheduled);
                                $teacherName = staffDisplayName($teacher, '');
                                $trackOrProduct = $scheduled->schedule_type === 'track' ? ($scheduled->track->name_en ?? 'N/A') : ($scheduled->academyProduct->name_en ?? 'N/A');
                                $levelLabel = $scheduled->schedule_type === 'track' ? ($scheduled->trackLevel->name_en ?? 'N/A') : ($scheduled->academyProduct->name_en ?? 'N/A');
                                $groupLabel = $scheduled->trackType->name ?? ($scheduled->academyProduct->name_en ?? 'N/A');
                                $groupPill = $scheduled->trackType?->name === 'Group' ? 'success' : 'warn';
                                $joinUrl = $scheduled->hasPaidStudentInvoice()
                                    ? route('courses.sessions.bbb.join', ['course' => $scheduled->id, 'session' => $course->id])
                                    : null;
                            @endphp
                            <tr>
                                <td class="ui-id text-center">{{ $course->id }}</td>
                                <td class="text-center ui-muted">
                                    @foreach ($scheduled->courseStudent as $student)
                                        <a href="{{ route('students.show', $student->student_id) }}" target="_blank">
                                            {{ $student->student->first_name }} {{ $student->student->last_name }}
                                        </a>@if (!$loop->last), @endif
                                    @endforeach
                                </td>
                                <td class="text-center">
                                    <div class="d-inline-flex align-items-center justify-content-center gap-2 flex-wrap">
                                        <img src="https://ui-avatars.com/api/?name={{ urlencode($teacherName) }}&size=64" class="live-avatar" alt="Teacher">
                                        <a href="{{ config('app.HR_URL') . 'staffs/' . ($teacher?->id ?? '#') }}">
                                            {{ $teacherName ?: 'N/A' }}
                                        </a>
                                    </div>
                                </td>
                                <td class="text-center">
                                    <x-bbb-teacher-media-status :session="$course" :teacher="$teacher" />
                                </td>
                                <td class="text-center"><span class="ui-pill ui-pill--info">{{ $trackOrProduct }}</span></td>
                                <td class="text-center ui-muted">{{ $levelLabel }}</td>
                                <td class="text-center"><span class="ui-pill ui-pill--neutral">{{ \Carbon\Carbon::parse($course->start_time)->format('h:i A') }}</span></td>
                                <td class="text-center"><span class="ui-pill ui-pill--{{ $groupPill }}">{{ $groupLabel }}</span></td>
                                <td class="text-center" onclick="event.stopPropagation()">
                                    <div class="d-flex justify-content-center align-items-center gap-2 flex-wrap">
                                        <button class="btn btn-light btn-sm" title="Attachments" disabled>
                                            <iconify-icon icon="mdi:attachment" class="fs-5"></iconify-icon>
                                        </button>

                                        @if (filled($joinUrl))
                                            <a href="{{ $joinUrl }}" target="_blank" class="btn btn-outline-success btn-sm" title="Join">
                                                <iconify-icon icon="ri:video-add-line" class="fs-5"></iconify-icon>
                                            </a>
                                        @else
                                            <button class="btn btn-outline-secondary btn-sm" style="cursor: not-allowed;" title="Join (Not Paid)" disabled>
                                                <iconify-icon icon="ri:video-off-line" class="fs-5"></iconify-icon>
                                            </button>
                                        @endif
                                        <button
                                            type="button"
                                            class="btn btn-outline-warning btn-sm live-penalty-btn"
                                            data-bs-toggle="modal"
                                            data-bs-target="#livePenaltyModal"
                                            data-course-id="{{ $course->staff_scheduled_id }}"
                                            data-session-id="{{ $course->id }}"
                                            data-session-label="Session {{ $course->session_number }}"
                                            title="Penalty Types"
                                        >
                                            <iconify-icon icon="mdi:alert-decagram-outline" class="fs-5"></iconify-icon>
                                        </button>

                                        @include('dashboard.academics.schedule_demo.send_urgent', ['course' => $course])
                                    </div>
                                </td>
                            </tr>
                        @endforeach
                    </x-table>
                </div>

                <div class="ui-card ui-card--table">
                    <div class="ui-card__header d-flex align-items-center justify-content-between gap-3 flex-wrap">
                        <div>
                            <div class="mb-0 ui-title">Upcoming Sessions</div>
                            <p class="mb-0 ui-muted">A quick look at the next sessions in queue.</p>
                        </div>

                        <a href="{{ route('sessions') }}" class="btn btn-outline-primary btn-sm">Show All Sessions</a>
                    </div>

                    <x-table
                        :headers="['ID', 'Student', 'Teacher', 'Teacher Media', 'Program/Product', 'Level', 'Date', 'Time', 'Group/Private', 'Session Link']"
                        :paginator="$upcomingCourses"
                        emptyMessage="No upcoming sessions scheduled."
                    >
                        @foreach ($upcomingCourses as $course)
                            @php
                                $scheduled = $course->staffScheduled;
                                $teacher = sessionTeacher($course, $scheduled);
                                $teacherName = staffDisplayName($teacher, '');
                                $trackOrProduct = $scheduled->schedule_type === 'track' ? ($scheduled->track->name_en ?? 'N/A') : ($scheduled->academyProduct->name_en ?? 'N/A');
                                $levelLabel = $scheduled->schedule_type === 'track' ? ($scheduled->trackLevel->name_en ?? 'N/A') : ($scheduled->academyProduct->name_en ?? 'N/A');
                                $groupLabel = $scheduled->trackType->name ?? ($scheduled->academyProduct->name_en ?? 'N/A');
                                $groupPill = $scheduled->trackType?->name === 'Group' ? 'success' : 'warn';
                                $joinUrl = $scheduled->hasPaidStudentInvoice()
                                    ? route('courses.sessions.bbb.join', ['course' => $scheduled->id, 'session' => $course->id])
                                    : null;
                            @endphp
                            <tr>
                                <td class="ui-id text-center">{{ $course->id }}</td>
                                <td class="text-center ui-muted">
                                    @foreach ($scheduled->courseStudent as $student)
                                        <a href="{{ route('students.show', $student->student_id) }}" target="_blank">
                                            {{ $student->student->first_name }} {{ $student->student->last_name }}
                                        </a>@if (!$loop->last), @endif
                                    @endforeach
                                </td>
                                <td class="text-center">
                                    <div class="d-inline-flex align-items-center justify-content-center gap-2 flex-wrap">
                                        <img src="https://ui-avatars.com/api/?name={{ urlencode($teacherName) }}&size=64" class="live-avatar" alt="Teacher">
                                        <a href="{{ config('app.HR_URL') . 'staffs/' . ($teacher?->id ?? '#') }}">
                                            {{ $teacherName ?: 'N/A' }}
                                        </a>
                                    </div>
                                </td>
                                <td class="text-center">
                                    <x-bbb-teacher-media-status :session="$course" :teacher="$teacher" />
                                </td>
                                <td class="text-center"><span class="ui-pill ui-pill--info">{{ $trackOrProduct }}</span></td>
                                <td class="text-center ui-muted">{{ $levelLabel }}</td>
                                <td class="text-center"><span class="ui-pill ui-pill--neutral">{{ $course->session_date }}</span></td>
                                <td class="text-center"><span class="ui-pill ui-pill--neutral">{{ \Carbon\Carbon::parse($course->start_time)->format('h:i A') }}</span></td>
                                <td class="text-center"><span class="ui-pill ui-pill--{{ $groupPill }}">{{ $groupLabel }}</span></td>
                                <td class="text-center">
                                    @if (filled($joinUrl))
                                        <a href="{{ $joinUrl }}" target="_blank" class="btn btn-outline-success btn-sm" title="Join">
                                            <iconify-icon icon="ri:video-add-line" class="fs-5"></iconify-icon>
                                        </a>
                                    @else
                                        <button class="btn btn-outline-secondary btn-sm" title="Join" disabled>
                                            <iconify-icon icon="ri:video-off-line" class="fs-5"></iconify-icon>
                                        </button>
                                    @endif
                                </td>
                            </tr>
                        @endforeach
                    </x-table>
                </div>
            </div>
        </div>
    </div>

    <div class="modal fade" id="livePenaltyModal" tabindex="-1" aria-labelledby="livePenaltyModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <form action="{{ route('storeUrgent') }}" method="POST" id="livePenaltyForm">
                    @csrf
                    <div class="modal-header">
                        <div class="modal-title fw-semibold" id="livePenaltyModalLabel">Penalty Types</div>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                    </div>
                    <div class="modal-body">
                        <p class="mb-2">Select the penalty for <strong id="livePenaltySessionLabel">this session</strong>.</p>
                        <p class="mb-3 text-muted small">This will create an urgent item for the selected issue.</p>

                        <input type="hidden" name="course_id" id="livePenaltyCourseId">
                        <input type="hidden" name="session_id" id="livePenaltySessionId">
                        <input type="hidden" name="message" id="livePenaltyMessage">

                        <div class="d-flex flex-column gap-2">
                            <button type="button" class="btn btn-outline-secondary text-start penalty-option-btn" data-message="Camera Off">Camera off</button>
                            <button type="button" class="btn btn-outline-secondary text-start penalty-option-btn" data-message="On-Spot Absence">On-spot absence</button>
                            <button type="button" class="btn btn-outline-secondary text-start penalty-option-btn" data-message="Late">Late</button>
                            <button type="button" class="btn btn-outline-secondary text-start penalty-option-btn" data-message="Internet Issue">Internet issue</button>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">Cancel</button>
                        <button type="submit" class="btn btn-warning text-white" id="confirmLivePenaltyBtn" disabled>Confirm</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
@endsection

@push('styles')
    <style>
        .live-avatar {
            width: 32px;
            height: 32px;
            border-radius: 50%;
            object-fit: cover;
        }
    </style>
@endpush

@push('scripts')
    <script>
        $(document).ready(function () {
            const penaltyModal = document.getElementById('livePenaltyModal');
            const messageInput = $('#livePenaltyMessage');
            const confirmBtn = $('#confirmLivePenaltyBtn');

            if (penaltyModal) {
                penaltyModal.addEventListener('show.bs.modal', function (event) {
                    const triggerButton = event.relatedTarget;

                    if (!triggerButton) {
                        return;
                    }

                    const button = $(triggerButton);
                    $('#livePenaltyCourseId').val(button.data('course-id') || '');
                    $('#livePenaltySessionId').val(button.data('session-id') || '');
                    $('#livePenaltySessionLabel').text(button.data('session-label') || 'this session');

                    messageInput.val('');
                    confirmBtn.prop('disabled', true);
                    $('.penalty-option-btn').removeClass('btn-warning text-white').addClass('btn-outline-secondary');
                });

                penaltyModal.addEventListener('hidden.bs.modal', function () {
                    $('#livePenaltyCourseId').val('');
                    $('#livePenaltySessionId').val('');
                    $('#livePenaltySessionLabel').text('this session');
                    messageInput.val('');
                    confirmBtn.prop('disabled', true);
                });
            }

            $(document).on('click', '.penalty-option-btn', function () {
                const selectedMessage = $(this).data('message');
                messageInput.val(selectedMessage);
                confirmBtn.prop('disabled', !selectedMessage);

                $('.penalty-option-btn').removeClass('btn-warning text-white').addClass('btn-outline-secondary');
                $(this).removeClass('btn-outline-secondary').addClass('btn-warning text-white');
            });
        });
    </script>
@endpush