@extends('layout.layout')

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

    <div class="container-fluid app-bg sessions-page">
        <div class="page-shell">
            <div class="space-y-4">

                <x-page-title
                    title="All Sessions"
                    description="Browse today, upcoming, and previous sessions with smart filters and quick access to session actions.">
                    <a href="{{ route('AllSessions') }}" class="asset-btn asset-btn--secondary">
                        <iconify-icon icon="ri:refresh-line"></iconify-icon>
                        Reset View
                    </a>
                </x-page-title>

                <div class="sessions-hero-card">
                    <div class="sessions-hero-card__bg"></div>

                    <div class="sessions-hero-card__content">
                        <div class="sessions-hero-card__main">
                            <div class="sessions-hero-card__icon">
                                <iconify-icon icon="ri:video-chat-line"></iconify-icon>
                            </div>

                            <div>
                                <div class="sessions-hero-card__eyebrow">Learning Sessions</div>
                                <h3 class="sessions-hero-card__title mb-0">Your sessions center</h3>
                                <p class="sessions-hero-card__sub mb-0">
                                    Track today’s classes, prepare for upcoming sessions, review previous sessions, add feedback, and open secure materials from one workspace.
                                </p>
                            </div>
                        </div>

                        <div class="sessions-hero-card__stats">
                            <div class="sessions-stat-mini">
                                <span class="sessions-stat-mini__label">Today</span>
                                <span class="sessions-stat-mini__value">{{ collect($todaySessions)->count() }}</span>
                            </div>

                            <div class="sessions-stat-mini">
                                <span class="sessions-stat-mini__label">Upcoming</span>
                                <span class="sessions-stat-mini__value">{{ collect($upcomingSessions)->count() }}</span>
                            </div>

                            <div class="sessions-stat-mini">
                                <span class="sessions-stat-mini__label">Previous</span>
                                <span class="sessions-stat-mini__value">{{ collect($previousSessions)->count() }}</span>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="ui-card sessions-filter-card">
                    <div class="sessions-filter-head">
                        <div class="sessions-filter-head__main">
                            <div class="sessions-filter-head__icon">
                                <iconify-icon icon="ri:filter-3-line"></iconify-icon>
                            </div>

                            <div>
                                <h5 class="sessions-filter-head__title mb-0">Filter Sessions</h5>
                                <p class="sessions-filter-head__sub mb-0">
                                    Narrow results by type, level, time, or date.
                                </p>
                            </div>
                        </div>

                        @if (request('track_type_id') || request('track_level_id') || request('time') || request('date'))
                            <span class="ui-pill ui-pill--info">
                                <iconify-icon icon="ri:filter-2-line"></iconify-icon>
                                Filter Applied
                            </span>
                        @else
                            <span class="ui-pill ui-pill--neutral">
                                <iconify-icon icon="ri:apps-2-line"></iconify-icon>
                                All Sessions
                            </span>
                        @endif

                        @if(!empty($selectedCourseId) && $selectedCourse)
                            <span class="ui-pill ui-pill--info">
                                <iconify-icon icon="ri:book-open-line"></iconify-icon>
                                Course: {{ $selectedCourse->course_name_en }}
                            </span>
                        @endif
                    </div>

                    <form method="GET" action="{{ route('AllSessions') }}" class="sessions-filter-form">
                        @if(!empty($selectedCourseId))
                            <input type="hidden" name="course_id" value="{{ $selectedCourseId }}">
                        @endif

                        <div class="asset-form-grid">
                            <div class="asset-col-3">
                                <label for="track_type_id" class="asset-label">Filter by Type</label>
                                <select name="track_type_id" id="track_type_id" class="asset-select">
                                    <option value="">All Types</option>
                                    @foreach ($types as $type)
                                        <option value="{{ $type->id }}" {{ request('track_type_id') == $type->id ? 'selected' : '' }}>
                                            {{ ucfirst($type->name) }}
                                        </option>
                                    @endforeach
                                </select>
                            </div>

                            <div class="asset-col-3">
                                <label for="track_level_id" class="asset-label">Filter by Level</label>
                                <select name="track_level_id" id="track_level_id" class="asset-select">
                                    <option value="">All Levels</option>
                                    @foreach ($levels as $level)
                                        <option value="{{ $level->id }}" {{ request('track_level_id') == $level->id ? 'selected' : '' }}>
                                            {{ ucfirst($level->track_name) }} - {{ ucfirst($level->name) }}
                                        </option>
                                    @endforeach
                                </select>
                            </div>

                            <div class="asset-col-3">
                                <label for="time" class="asset-label">Filter by Time</label>
                                <input type="time"
                                       name="time"
                                       id="time"
                                       class="asset-input"
                                       value="{{ request('time') }}">
                            </div>

                            <div class="asset-col-3">
                                <label for="date" class="asset-label">Filter by Date</label>
                                <input type="date"
                                       name="date"
                                       id="date"
                                       class="asset-input"
                                       value="{{ request('date') }}">
                            </div>
                        </div>

                        <div class="asset-actions sessions-filter-actions">
                            <a href="{{ route('AllSessions') }}" class="asset-btn asset-btn--secondary">
                                <iconify-icon icon="ri:restart-line"></iconify-icon>
                                Reset
                            </a>

                            <button type="submit" class="asset-btn asset-btn--primary">
                                <iconify-icon icon="ri:search-line"></iconify-icon>
                                Apply Filters
                            </button>
                        </div>
                    </form>
                </div>

                <div class="sessions-grid">
                    <div class="session-section-card session-section-card--today">
                        <div class="session-section-card__head">
                            <div class="session-section-card__main">
                                <div class="session-section-card__icon">
                                    <iconify-icon icon="ri:sun-line"></iconify-icon>
                                </div>

                                <div>
                                    <h5 class="session-section-card__title mb-0">Today's Sessions</h5>
                                    <p class="session-section-card__sub mb-0">
                                        Sessions scheduled for the current day.
                                    </p>
                                </div>
                            </div>

                            <span class="ui-pill ui-pill--danger">
                                {{ collect($todaySessions)->count() }} Session(s)
                            </span>
                        </div>

                        <div class="session-section-card__body">
                            @if (collect($todaySessions)->isEmpty())
                                <div class="sessions-empty">
                                    <iconify-icon icon="ri:calendar-check-line"></iconify-icon>
                                    <h6>No sessions scheduled for today.</h6>
                                    <p>You are all clear for today.</p>
                                </div>
                            @else
                                @include('dashboard.course.partials.session_accordion', [
                                    'sessions' => collect($todaySessions),
                                    'id_prefix' => 'today',
                                    'showDate' => false,
                                    'isUpcoming' => true,
                                    'isToday' => true,
                                ])
                            @endif
                        </div>
                    </div>

                    <div class="session-section-card session-section-card--upcoming">
                        <div class="session-section-card__head">
                            <div class="session-section-card__main">
                                <div class="session-section-card__icon">
                                    <iconify-icon icon="ri:calendar-schedule-line"></iconify-icon>
                                </div>

                                <div>
                                    <h5 class="session-section-card__title mb-0">Upcoming Sessions</h5>
                                    <p class="session-section-card__sub mb-0">
                                        Future sessions that require preparation.
                                    </p>
                                </div>
                            </div>

                            <span class="ui-pill ui-pill--primary">
                                {{ collect($upcomingSessions)->count() }} Session(s)
                            </span>
                        </div>

                        <div class="session-section-card__body">
                            @if (collect($upcomingSessions)->isEmpty())
                                <div class="sessions-empty">
                                    <iconify-icon icon="ri:calendar-todo-line"></iconify-icon>
                                    <h6>No upcoming sessions found.</h6>
                                    <p>There are no future sessions matching the current filters.</p>
                                </div>
                            @else
                                @include('dashboard.course.partials.session_accordion', [
                                    'sessions' => collect($upcomingSessions),
                                    'id_prefix' => 'upcoming',
                                    'showDate' => true,
                                    'isUpcoming' => true,
                                    'isToday' => false,
                                ])
                            @endif
                        </div>
                    </div>

                    <div class="session-section-card session-section-card--previous">
                        <div class="session-section-card__head">
                            <div class="session-section-card__main">
                                <div class="session-section-card__icon">
                                    <iconify-icon icon="ri:history-line"></iconify-icon>
                                </div>

                                <div>
                                    <h5 class="session-section-card__title mb-0">Previous Sessions</h5>
                                    <p class="session-section-card__sub mb-0">
                                        Completed or past sessions available for review.
                                    </p>
                                </div>
                            </div>

                            <span class="ui-pill ui-pill--neutral">
                                {{ collect($previousSessions)->count() }} Session(s)
                            </span>
                        </div>

                        <div class="session-section-card__body">
                            @if (collect($previousSessions)->isEmpty())
                                <div class="sessions-empty">
                                    <iconify-icon icon="ri:archive-line"></iconify-icon>
                                    <h6>No previous sessions found.</h6>
                                    <p>No past sessions match the current filters.</p>
                                </div>
                            @else
                                @include('dashboard.course.partials.session_accordion', [
                                    'sessions' => collect($previousSessions),
                                    'id_prefix' => 'previous',
                                    'showDate' => true,
                                    'isUpcoming' => false,
                                    'isToday' => false,
                                ])
                            @endif
                        </div>
                    </div>
                </div>

            </div>
        </div>
    </div>

    {{-- Feedback Modal --}}
    <div class="modal fade sessions-feedback-modal" id="feedbackModal" tabindex="-1" aria-labelledby="feedbackModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-lg modal-dialog-centered">
            <div class="modal-content">
                <form action="{{ route('feedback.store') }}" method="POST">
                    @csrf

                    <div class="modal-header">
                        <div class="sessions-modal-head">
                            <div class="sessions-modal-icon">
                                <iconify-icon icon="ri:feedback-line"></iconify-icon>
                            </div>

                            <div>
                                <h5 class="sessions-modal-title mb-0" id="feedbackModalLabel">Add Feedback</h5>
                                <p class="sessions-modal-sub mb-0">
                                    Rate the session quality and add your comments.
                                </p>
                            </div>
                        </div>

                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                    </div>

                    <div class="modal-body">
                        <input type="hidden" name="session_id" id="feedback_session_id">

                        <div class="feedback-grid">
                            <div class="feedback-rating-card">
                                <label class="feedback-label">Admin's Response</label>
                                <div class="star-rating">
                                    <input type="radio" id="admin_response5" name="admin_response_rating" value="5" required><label for="admin_response5" title="5 stars"></label>
                                    <input type="radio" id="admin_response4" name="admin_response_rating" value="4"><label for="admin_response4" title="4 stars"></label>
                                    <input type="radio" id="admin_response3" name="admin_response_rating" value="3"><label for="admin_response3" title="3 stars"></label>
                                    <input type="radio" id="admin_response2" name="admin_response_rating" value="2"><label for="admin_response2" title="2 stars"></label>
                                    <input type="radio" id="admin_response1" name="admin_response_rating" value="1"><label for="admin_response1" title="1 star"></label>
                                </div>
                                <textarea name="admin_response_comment" class="asset-input mt-3" placeholder="Comment (optional)"></textarea>
                            </div>

                            <div class="feedback-rating-card">
                                <label class="feedback-label">Quality of the Session</label>
                                <div class="star-rating">
                                    <input type="radio" id="quality5" name="quality_rating" value="5" required><label for="quality5" title="5 stars"></label>
                                    <input type="radio" id="quality4" name="quality_rating" value="4"><label for="quality4" title="4 stars"></label>
                                    <input type="radio" id="quality3" name="quality_rating" value="3"><label for="quality3" title="3 stars"></label>
                                    <input type="radio" id="quality2" name="quality_rating" value="2"><label for="quality2" title="2 stars"></label>
                                    <input type="radio" id="quality1" name="quality_rating" value="1"><label for="quality1" title="1 star"></label>
                                </div>
                                <textarea name="quality_comment" class="asset-input mt-3" placeholder="Comment (optional)"></textarea>
                            </div>

                            <div class="feedback-rating-card">
                                <label class="feedback-label">Benefit of the Session</label>
                                <div class="star-rating">
                                    <input type="radio" id="benefit5" name="benefit_rating" value="5" required><label for="benefit5" title="5 stars"></label>
                                    <input type="radio" id="benefit4" name="benefit_rating" value="4"><label for="benefit4" title="4 stars"></label>
                                    <input type="radio" id="benefit3" name="benefit_rating" value="3"><label for="benefit3" title="3 stars"></label>
                                    <input type="radio" id="benefit2" name="benefit_rating" value="2"><label for="benefit2" title="2 stars"></label>
                                    <input type="radio" id="benefit1" name="benefit_rating" value="1"><label for="benefit1" title="1 star"></label>
                                </div>
                                <textarea name="benefit_comment" class="asset-input mt-3" placeholder="Comment (optional)"></textarea>
                            </div>

                            <div class="feedback-rating-card">
                                <label class="feedback-label">Error Correction</label>
                                <div class="star-rating">
                                    <input type="radio" id="error_correction5" name="error_correction_rating" value="5" required><label for="error_correction5" title="5 stars"></label>
                                    <input type="radio" id="error_correction4" name="error_correction_rating" value="4"><label for="error_correction4" title="4 stars"></label>
                                    <input type="radio" id="error_correction3" name="error_correction_rating" value="3"><label for="error_correction3" title="3 stars"></label>
                                    <input type="radio" id="error_correction2" name="error_correction_rating" value="2"><label for="error_correction2" title="2 stars"></label>
                                    <input type="radio" id="error_correction1" name="error_correction_rating" value="1"><label for="error_correction1" title="1 star"></label>
                                </div>
                                <textarea name="error_correction_comment" class="asset-input mt-3" placeholder="Comment (optional)"></textarea>
                            </div>

                            <div class="feedback-rating-card feedback-rating-card--full">
                                <label class="feedback-label">Recommendation for Yourself</label>
                                <textarea name="recommendation"
                                          placeholder="What can you do to improve your performance in future sessions?"
                                          class="asset-input"
                                          required></textarea>
                            </div>

                        </div>
                    </div>

                    <div class="modal-footer">
                        <button type="button" class="asset-btn asset-btn--secondary" data-bs-dismiss="modal">
                            Close
                        </button>

                        <button type="submit" class="asset-btn asset-btn--primary">
                            <iconify-icon icon="ri:send-plane-line"></iconify-icon>
                            Submit Feedback
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    {{-- Secure File Viewer Modal --}}
    <div class="modal fade secure-file-modal" id="secureFileModal" tabindex="-1" aria-hidden="true" data-bs-backdrop="static">
        <div class="modal-dialog modal-xl modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header secure-file-modal__header">
                    <div class="sessions-modal-head">
                        <div class="sessions-modal-icon sessions-modal-icon--dark">
                            <i class="fas fa-user-shield"></i>
                        </div>

                        <div>
                            <h5 class="sessions-modal-title mb-0">Secure File Viewer</h5>
                            <p class="sessions-modal-sub mb-0">
                                Protected document preview. Downloading and printing are disabled.
                            </p>
                        </div>
                    </div>

                    <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>

                <div class="modal-body secure-container" oncontextmenu="return false;">
                    <div class="pdf-viewer-container">
                        <canvas id="pdf-canvas" class="pdf-canvas"></canvas>

                        <div id="pdf-loader" class="pdf-loader">
                            <i class="fas fa-circle-notch fa-spin fa-3x mb-3"></i>
                            <p>Loading Secure Document...</p>
                        </div>
                    </div>
                </div>

                <div class="modal-footer secure-file-modal__footer">
                    <div class="pdf-controls d-none">
                        <button id="prev-page" class="asset-btn asset-btn--secondary btn-sm">
                            <i class="fas fa-chevron-left"></i>
                            Previous
                        </button>

                        <span class="pdf-page-count">
                            Page: <span id="page-num">0</span> / <span id="page-count">0</span>
                        </span>

                        <button id="next-page" class="asset-btn asset-btn--secondary btn-sm">
                            Next
                            <i class="fas fa-chevron-right"></i>
                        </button>

                        <button id="zoom-out" class="asset-btn asset-btn--secondary btn-sm">
                            <i class="fas fa-search-minus"></i>
                        </button>

                        <button id="zoom-in" class="asset-btn asset-btn--secondary btn-sm">
                            <i class="fas fa-search-plus"></i>
                        </button>
                    </div>

                    <div class="secure-file-modal__footer-right">
                        <span class="secure-note d-none d-md-inline">
                            <i class="fas fa-info-circle me-1"></i>
                            Downloading and printing are disabled.
                        </span>

                        <button type="button" class="asset-btn asset-btn--secondary" data-bs-dismiss="modal">
                            Close Viewer
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@push('styles')
    <style>
        .sessions-page .ui-card {
            border: 1px solid #e5e7eb !important;
            border-radius: 22px;
            background: #fff;
            box-shadow: 0 14px 38px rgba(15, 23, 42, 0.07);
            padding: 1.25rem;
            overflow: hidden;
            margin-bottom: 10px !important;
        }

        .sessions-hero-card {
            position: relative;
            border-radius: 26px;
            overflow: hidden;
            border: 1px solid #e5e7eb;
            background: #111827;
            box-shadow: 0 20px 48px rgba(15, 23, 42, 0.16);
            min-width: 0;
        }

        .sessions-hero-card__bg {
            position: absolute;
            inset: 0;
            background:
                radial-gradient(circle at 15% 15%, rgba(59, 130, 246, 0.45), transparent 28%),
                radial-gradient(circle at 85% 20%, rgba(16, 185, 129, 0.28), transparent 30%),
                linear-gradient(135deg, #111827 0%, #1f2937 48%, #0f172a 100%);
        }

        .sessions-hero-card__content {
            position: relative;
            z-index: 1;
            display: grid;
            grid-template-columns: minmax(0, 1fr) 360px;
            gap: 1.25rem;
            align-items: center;
            padding: 1.5rem;
        }

        .sessions-hero-card__main {
            display: flex;
            align-items: center;
            gap: 1rem;
            min-width: 0;
        }

        .sessions-hero-card__icon {
            width: 62px;
            height: 62px;
            border-radius: 20px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            background: rgba(255, 255, 255, 0.12);
            color: #fff;
            border: 1px solid rgba(255, 255, 255, 0.18);
            font-size: 1.8rem !important;;
            flex-shrink: 0;
            backdrop-filter: blur(8px);
        }

        .sessions-hero-card__eyebrow {
            color: #93c5fd;
            font-size: 0.78rem !important;;
            font-weight: 850;
            letter-spacing: 0.12em;
            text-transform: uppercase;
            margin-bottom: 0.25rem;
        }

        .sessions-hero-card__title {
            color: #fff;
            font-size: 1.55rem !important;
            font-weight: 900;
            letter-spacing: -0.02em;
        }

        .sessions-hero-card__sub {
            color: rgba(255, 255, 255, 0.74);
            font-size: 0.94rem;
            line-height: 1.65;
            margin-top: 0.45rem;
            max-width: 760px;
        }

        .sessions-hero-card__stats {
            display: grid;
            grid-template-columns: repeat(3, minmax(0, 1fr));
            gap: 0.65rem;
        }

        .sessions-stat-mini {
            border-radius: 18px;
            padding: 1rem;
            background: rgba(255, 255, 255, 0.12);
            border: 1px solid rgba(255, 255, 255, 0.16);
            backdrop-filter: blur(8px);
            text-align: center;
        }

        .sessions-stat-mini__label {
            display: block;
            color: rgba(255, 255, 255, 0.7);
            font-size: 0.74rem;
            font-weight: 850;
            text-transform: uppercase;
            letter-spacing: 0.08em;
            margin-bottom: 0.35rem;
        }

        .sessions-stat-mini__value {
            display: block;
            color: #fff;
            font-size: 1.45rem;
            font-weight: 950;
            line-height: 1;
        }

        .sessions-filter-card {
            min-width: 0;
        }

        .sessions-filter-head {
            display: flex;
            align-items: flex-start;
            justify-content: space-between;
            gap: 1rem;
            padding-bottom: 1rem;
            margin-bottom: 1rem;
            border-bottom: 1px solid #eef2f7;
            flex-wrap: wrap;
        }

        .sessions-filter-head__main {
            display: flex;
            align-items: center;
            gap: 0.85rem;
        }

        .sessions-filter-head__icon {
            width: 48px;
            height: 48px;
            border-radius: 16px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            background: linear-gradient(135deg, #eff6ff, #eef2ff);
            color: #071b3d;
            font-size: 1.45rem;
            flex-shrink: 0;
        }

        .sessions-filter-head__title {
            font-size: 1.05rem !important;;
            font-weight: 900;
            color: #111827;
        }

        .sessions-filter-head__sub {
            color: #64748b;
            font-size: 0.9rem;
            line-height: 1.55;
            margin-top: 0.2rem;
        }

        .asset-form-grid {
            display: grid;
            grid-template-columns: repeat(12, minmax(0, 1fr));
            gap: 1rem;
        }

        .asset-col-3 {
            grid-column: span 3 / span 3;
        }

        .asset-label {
            display: inline-block;
            margin-bottom: 0.45rem;
            font-weight: 750;
            color: #374151;
            font-size: 0.9rem;
        }

        .asset-input,
        .asset-select,
        .form-control,
        .form-select {
            width: 100% !important;
            min-height: 44px;
            border: 1px solid #dbe2ea !important;
            border-radius: 14px !important;
            padding: 0.68rem 0.9rem;
            background: #fff;
            color: #111827;
            transition: 0.2s ease;
            box-shadow: none !important;
        }

        textarea.asset-input,
        textarea.form-control {
            min-height: 105px;
            resize: vertical;
        }

        .asset-input:focus,
        .asset-select:focus,
        .form-control:focus,
        .form-select:focus {
            outline: none;
            border-color: #b8c4d6 !important;
            box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.08) !important;
        }

        .asset-actions {
            display: flex;
            justify-content: flex-end;
            gap: 0.75rem;
            flex-wrap: wrap;
        }

        .sessions-filter-actions {
            margin-top: 1rem;
        }

        .asset-btn {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 0.4rem;
        }

        .ui-pill {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 0.35rem;
            border-radius: 999px;
            padding: 0.38rem 0.78rem;
            font-size: 0.76rem;
            font-weight: 850;
            line-height: 1.2;
            white-space: nowrap;
        }

        .ui-pill--primary { background: #eff6ff; color: #0f1724; }
        .ui-pill--info { background: #eef2ff; color: #4338ca; }
        .ui-pill--danger { background: #fef2f2; color: #b91c1c; }
        .ui-pill--neutral { background: #f3f4f6; color: #374151; }

        .sessions-grid {
            display: grid;
            grid-template-columns: 1fr;
            gap: 1.25rem;
        }

        .session-section-card {
            border: 1px solid #e5e7eb;
            border-radius: 22px;
            background: #fff;
            box-shadow: 0 12px 34px rgba(15, 23, 42, 0.06);
            overflow: hidden;
            min-width: 0;
        }

        .session-section-card__head {
            display: flex;
            align-items: flex-start;
            justify-content: space-between;
            gap: 1rem;
            flex-wrap: wrap;
            padding: 1.25rem;
            border-bottom: 1px solid #eef2f7;
            background: #f8fafc;
        }

        .session-section-card__main {
            display: flex;
            align-items: center;
            gap: 0.85rem;
        }

        .session-section-card__icon {
            width: 46px;
            height: 46px;
            border-radius: 16px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            font-size: 1.35rem;
            flex-shrink: 0;
            background: #eff6ff;
            color: #071b3d;
        }

        .session-section-card--today .session-section-card__icon {
            background: #fef2f2;
            color: #b91c1c;
        }

        .session-section-card--upcoming .session-section-card__icon {
            background: #eff6ff;
            color: #0f1724;
        }

        .session-section-card--previous .session-section-card__icon {
            background: #f3f4f6;
            color: #374151;
        }

        .session-section-card__title {
            font-size: 1rem !important;;
            font-weight: 900;
            color: #111827;
        }

        .session-section-card__sub {
            color: #64748b;
            font-size: 0.88rem;
            line-height: 1.5;
            margin-top: 0.2rem;
        }

        .session-section-card__body {
            padding: 1rem;
            min-width: 0;
        }

        .sessions-empty {
            padding: 2.5rem 1rem;
            text-align: center;
            color: #94a3b8;
            border: 1px dashed #dbe2ea;
            border-radius: 18px;
            background: #f8fafc;
        }

        .sessions-empty iconify-icon {
            display: block;
            font-size: 2.2rem;
            margin-bottom: 0.7rem;
            color: #cbd5e1;
        }

        .sessions-empty h6 {
            margin: 0;
            font-size: 0.98rem !important;;
            font-weight: 850;
            color: #475569;
        }

        .sessions-empty p {
            margin: 0.3rem 0 0;
            font-size: 0.88rem;
            color: #94a3b8;
        }

        .sessions-feedback-modal .modal-content,
        .secure-file-modal .modal-content {
            border: 0;
            border-radius: 26px;
            box-shadow: 0 28px 70px rgba(15, 23, 42, 0.2);
            overflow: hidden;
        }

        .sessions-feedback-modal .modal-header,
        .secure-file-modal .modal-header {
            border-bottom: 1px solid #eef2f7;
            padding: 1.35rem 1.5rem;
            align-items: flex-start;
            gap: 1rem;
            background: #f8fafc;
        }

        .sessions-feedback-modal .modal-body,
        .secure-file-modal .modal-body {
            padding: 1.5rem;
        }

        .sessions-feedback-modal .modal-footer,
        .secure-file-modal .modal-footer {
            border-top: 1px solid #eef2f7;
            padding: 1rem 1.5rem;
            background: #fff;
        }

        .sessions-modal-head {
            display: flex;
            align-items: center;
            gap: 0.85rem;
            min-width: 0;
        }

        .sessions-modal-icon {
            width: 48px;
            height: 48px;
            border-radius: 16px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            background: linear-gradient(135deg, #eff6ff, #eef2ff);
            color: #071b3d;
            font-size: 1.45rem;
            flex-shrink: 0;
        }

        .sessions-modal-icon--dark {
            background: rgba(255, 255, 255, 0.12);
            color: #fff;
        }

        .sessions-modal-title {
            font-size: 1.08rem !important;;
            font-weight: 900;
            color: #111827;
        }

        .sessions-modal-sub {
            margin-top: 0.2rem;
            color: #64748b;
            font-size: 0.86rem;
            line-height: 1.5;
        }

        .feedback-grid {
            display: grid;
            grid-template-columns: repeat(2, minmax(0, 1fr));
            gap: 1rem;
        }

        .feedback-rating-card {
            border: 1px solid #e5e7eb;
            border-radius: 18px;
            background: #f8fafc;
            padding: 1rem;
            min-width: 0;
        }

        .feedback-rating-card--full {
            grid-column: span 2 / span 2;
        }

        .feedback-label {
            display: block;
            font-size: 0.88rem;
            font-weight: 850;
            color: #111827;
            margin-bottom: 0.7rem;
        }

        .feedback-google-review {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 1rem;
            background: #fff;
        }

        .star-rating {
            display: flex;
            flex-direction: row-reverse;
            justify-content: flex-end;
            gap: 0.2rem;
            font-size: 2rem;
        }

        .star-rating input {
            display: none;
        }

        .star-rating label {
            color: #d1d5db;
            cursor: pointer;
            transition: color 0.2s, transform 0.2s;
            line-height: 1;
        }

        .star-rating label:before {
            content: "\2605";
        }

        .star-rating input:checked ~ label {
            color: #f59e0b;
        }

        .star-rating label:hover,
        .star-rating label:hover ~ label {
            color: #f59e0b;
            transform: translateY(-1px);
        }

        .secure-file-modal__header {
            background: #111827 !important;
            color: #fff;
        }

        .secure-file-modal__header .sessions-modal-title {
            color: #fff;
        }

        .secure-file-modal__header .sessions-modal-sub {
            color: rgba(255, 255, 255, 0.7);
        }

        .secure-container {
            position: relative;
            user-select: none;
            -webkit-user-select: none;
            padding: 0 !important;
            background: #030712;
        }

        .pdf-viewer-container {
            height: 75vh;
            overflow: auto;
            background:
                radial-gradient(circle at top, rgba(37, 99, 235, 0.18), transparent 35%),
                #030712;
            display: flex;
            align-items: flex-start;
            justify-content: center;
            padding: 2rem;
            position: relative;
        }

        .pdf-canvas {
            display: none;
            max-width: 100%;
            background: #fff;
            box-shadow: 0 18px 42px rgba(0, 0, 0, 0.35);
            border-radius: 8px;
        }

        .pdf-loader {
            color: #fff;
            text-align: center;
            margin-top: 3rem;
        }

        .secure-file-modal__footer {
            display: flex;
            justify-content: space-between;
            gap: 1rem;
            flex-wrap: wrap;
        }

        .pdf-controls {
            display: flex;
            align-items: center;
            gap: 0.5rem;
            flex-wrap: wrap;
        }

        .pdf-page-count {
            color: #374151;
            font-size: 0.85rem;
            font-weight: 750;
        }

        .secure-file-modal__footer-right {
            margin-left: auto;
            display: flex;
            align-items: center;
            gap: 1rem;
            flex-wrap: wrap;
        }

        .secure-note {
            color: #6b7280;
            font-size: 0.86rem;
        }

        @media (max-width: 1199.98px) {
            .sessions-hero-card__content {
                grid-template-columns: 1fr;
            }
        }

        @media (max-width: 991.98px) {
            .asset-col-3 {
                grid-column: span 6 / span 6;
            }

            .feedback-grid {
                grid-template-columns: 1fr;
            }

            .feedback-rating-card--full {
                grid-column: span 1 / span 1;
            }

            .feedback-google-review {
                align-items: stretch;
                flex-direction: column;
            }
        }

        @media (max-width: 767.98px) {
            .sessions-hero-card__main {
                align-items: flex-start;
            }

            .sessions-hero-card__stats {
                grid-template-columns: 1fr;
            }

            .asset-col-3 {
                grid-column: span 12 / span 12;
            }

            .sessions-filter-head__main,
            .session-section-card__main,
            .sessions-modal-head {
                align-items: flex-start;
            }

            .secure-file-modal__footer-right,
            .asset-actions {
                width: 100%;
            }
        }

        @media (max-width: 575.98px) {
            .sessions-page .ui-card,
            .session-section-card__body {
                padding: 1rem;
            }

            .sessions-hero-card__content {
                padding: 1.1rem;
            }

            .sessions-hero-card__title {
                font-size: 1.25rem !important;;
            }

            .pdf-viewer-container {
                padding: 1rem;
            }
        }
    </style>
@endpush

@push('scripts')
    <script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.6.347/pdf.min.js" integrity="sha512-Z8CqofpIcnJN80feS2uccz+pXWgZzeKxDsDNMD/dJ6997/LSRY+W4NmEt9acwR+Gt9OHN0kkI1CTianCwoqcjQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.6.347/pdf.worker.entry.min.js" integrity="sha512-NJEHr6hlBM4MkVxJu+7FBk+pn7r+KD8rh+50DPglV/8T8I9ETqHJH0bO7NRPHaPszzYTxBWQztDfL6iJV6CQTw==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

    <script>
        if (window.pdfjsLib) {
            pdfjsLib.GlobalWorkerOptions.workerSrc = 'https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.6.347/pdf.worker.min.js';
        }

        let pdfDoc = null;
        let pageNum = 1;
        let pageRendering = false;
        let pageNumPending = null;
        let scale = 1.5;

        const canvas = document.getElementById('pdf-canvas');
        const ctx = canvas ? canvas.getContext('2d') : null;

        function renderPage(num) {
            if (!pdfDoc || !canvas || !ctx) {
                return;
            }

            pageRendering = true;

            pdfDoc.getPage(num).then(function (page) {
                const viewport = page.getViewport({ scale: scale });

                canvas.height = viewport.height;
                canvas.width = viewport.width;

                const renderContext = {
                    canvasContext: ctx,
                    viewport: viewport
                };

                const renderTask = page.render(renderContext);

                renderTask.promise.then(function () {
                    ctx.save();
                    ctx.font = `${Math.round(canvas.width / 20)}px Arial`;
                    ctx.fillStyle = 'rgba(150, 150, 150, 0.15)';
                    ctx.textAlign = 'center';
                    ctx.textBaseline = 'middle';

                    ctx.translate(canvas.width / 2, canvas.height / 2);
                    ctx.rotate(-45 * Math.PI / 180);

                    const line1 = 'PROPERTY OF UPEDIA';
                    const line2 = 'USER ID: {{ Auth::id() }}';
                    const line3 = '{{ now()->format('Y-m-d H:i') }}';

                    ctx.fillText(line1, 0, -canvas.width / 20);
                    ctx.fillText(line2, 0, 0);
                    ctx.fillText(line3, 0, canvas.width / 20);

                    ctx.restore();

                    pageRendering = false;

                    if (pageNumPending !== null) {
                        renderPage(pageNumPending);
                        pageNumPending = null;
                    }
                });
            });

            const pageNumEl = document.getElementById('page-num');
            if (pageNumEl) {
                pageNumEl.textContent = num;
            }
        }

        function queueRenderPage(num) {
            if (pageRendering) {
                pageNumPending = num;
            } else {
                renderPage(num);
            }
        }

        function onPrevPage() {
            if (pageNum <= 1) {
                return;
            }

            pageNum--;
            queueRenderPage(pageNum);
        }

        function onNextPage() {
            if (!pdfDoc || pageNum >= pdfDoc.numPages) {
                return;
            }

            pageNum++;
            queueRenderPage(pageNum);
        }

        document.addEventListener('DOMContentLoaded', function () {
            const googleReviewUrl = @json(session('google_review_url'));
            const prevBtn = document.getElementById('prev-page');
            const nextBtn = document.getElementById('next-page');
            const zoomInBtn = document.getElementById('zoom-in');
            const zoomOutBtn = document.getElementById('zoom-out');
            const secureModal = document.getElementById('secureFileModal');

            if (googleReviewUrl && window.Swal) {
                Swal.fire({
                    icon: 'success',
                    title: 'Thank you for your feedback',
                    text: 'Your rating was high. Would you like to share your experience on Google?',
                    showCancelButton: true,
                    confirmButtonText: 'Open Google Review',
                    cancelButtonText: 'Not now',
                    reverseButtons: true,
                }).then(function (result) {
                    if (result.isConfirmed) {
                        window.open(googleReviewUrl, '_blank', 'noopener,noreferrer');
                    }
                });
            }

            if (prevBtn) {
                prevBtn.addEventListener('click', onPrevPage);
            }

            if (nextBtn) {
                nextBtn.addEventListener('click', onNextPage);
            }

            if (zoomInBtn) {
                zoomInBtn.addEventListener('click', function (e) {
                    e.preventDefault();
                    scale += 0.25;
                    if (pdfDoc) {
                        queueRenderPage(pageNum);
                    }
                });
            }

            if (zoomOutBtn) {
                zoomOutBtn.addEventListener('click', function (e) {
                    e.preventDefault();

                    if (scale > 0.5) {
                        scale -= 0.25;

                        if (pdfDoc) {
                            queueRenderPage(pageNum);
                        }
                    }
                });
            }

            document.addEventListener('show.bs.modal', function (event) {
                const button = event.relatedTarget;

                if (!button) {
                    return;
                }

                if (button.hasAttribute('data-session-id')) {
                    const sessionId = button.getAttribute('data-session-id');
                    const input = document.getElementById('feedback_session_id');

                    if (input) {
                        input.value = sessionId;
                    }
                }

                if (button.classList.contains('view-secure')) {
                    const url = button.getAttribute('data-url');

                    if (!url || !window.pdfjsLib || !canvas) {
                        return;
                    }

                    const loader = document.getElementById('pdf-loader');

                    if (loader) {
                        loader.classList.remove('d-none');
                        loader.innerHTML = `
                            <i class="fas fa-circle-notch fa-spin fa-3x mb-3"></i>
                            <p>Loading Secure Document...</p>
                        `;
                    }

                    canvas.style.display = 'none';

                    pdfjsLib.getDocument(url).promise.then(function (pdfDoc_) {
                        pdfDoc = pdfDoc_;

                        const pageCount = document.getElementById('page-count');
                        if (pageCount) {
                            pageCount.textContent = pdfDoc.numPages;
                        }

                        if (loader) {
                            loader.classList.add('d-none');
                        }

                        canvas.style.display = 'block';

                        pageNum = 1;
                        renderPage(pageNum);
                    }).catch(function (error) {
                        console.error('Error loading PDF:', error);

                        if (loader) {
                            loader.innerHTML = `
                                <i class="fas fa-exclamation-triangle text-danger fa-3x"></i>
                                <p class="mt-3">Failed to load secure document.</p>
                            `;
                        }
                    });
                }
            });

            if (secureModal) {
                secureModal.addEventListener('hidden.bs.modal', function () {
                    pdfDoc = null;
                    pageNum = 1;

                    if (ctx && canvas) {
                        ctx.clearRect(0, 0, canvas.width, canvas.height);
                        canvas.style.display = 'none';
                    }
                });
            }

            @if(!Auth::user()->isParent())
                const feedbackPromptSessions = @json($feedbackPromptSessions);
                const feedbackModalEl = document.getElementById('feedbackModal');
                const feedbackSessionInput = document.getElementById('feedback_session_id');
                let feedbackPromptTimer = null;

                function openFeedbackPrompt(sessionId) {
                    if (!feedbackModalEl || !feedbackSessionInput || !window.bootstrap) {
                        return;
                    }

                    feedbackSessionInput.value = sessionId;
                    bootstrap.Modal.getOrCreateInstance(feedbackModalEl).show();
                }

                function scheduleFeedbackPrompt() {
                    if (!Array.isArray(feedbackPromptSessions) || feedbackPromptSessions.length === 0) {
                        return;
                    }

                    const now = Date.now();
                    const nextSession = feedbackPromptSessions.find(function (session) {
                        return session.ends_at && !session.prompted;
                    });

                    if (!nextSession) {
                        return;
                    }

                    const endsAt = new Date(nextSession.ends_at).getTime();

                    if (!Number.isFinite(endsAt) || endsAt <= now) {
                        nextSession.prompted = true;
                        openFeedbackPrompt(nextSession.id);
                        return;
                    }

                    feedbackPromptTimer = window.setTimeout(function () {
                        nextSession.prompted = true;
                        openFeedbackPrompt(nextSession.id);
                        scheduleFeedbackPrompt();
                    }, Math.min(endsAt - now, 2147483647));
                }

                scheduleFeedbackPrompt();

                if (feedbackModalEl) {
                    feedbackModalEl.addEventListener('hidden.bs.modal', function () {
                        const feedbackForm = feedbackModalEl.querySelector('form');

                        if (feedbackForm) {
                            feedbackForm.reset();
                        }
                    });
                }
            @endif

            document.addEventListener('contextmenu', function (e) {
                const secureFileModal = document.getElementById('secureFileModal');

                if (secureFileModal && secureFileModal.classList.contains('show')) {
                    e.preventDefault();
                }
            });

            document.addEventListener('keydown', function (e) {
                const secureFileModal = document.getElementById('secureFileModal');

                if (!secureFileModal || !secureFileModal.classList.contains('show')) {
                    return;
                }

                if ((e.ctrlKey || e.metaKey) && ['s', 'p', 'u', 'S', 'P', 'U'].includes(e.key)) {
                    e.preventDefault();
                    return false;
                }

                if (e.key === 'F12') {
                    e.preventDefault();
                    return false;
                }
            });
        });
    </script>
@endpush