@extends('layout.layout')

@section('content')
    <div class="container-fluid app-bg recorded-sessions-page">
        <div class="page-shell">
            <div class="space-y-4">

                <x-page-title
                    title="Recorded Sessions"
                    description="Browse recorded sessions, search by name or teacher, and manage access to previous learning recordings.">
                    <button type="button" class="asset-btn asset-btn--secondary" onclick="history.back()">
                        <iconify-icon icon="mdi:arrow-left"></iconify-icon>
                        Back
                    </button>
                </x-page-title>

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

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

                            <div>
                                <div class="recorded-hero-card__eyebrow">Learning Library</div>
                                <h3 class="recorded-hero-card__title mb-0">Your recorded sessions archive</h3>
                                <p class="recorded-hero-card__sub mb-0">
                                    Access previous session recordings, review lesson history, and subscribe when a recording requires access.
                                </p>
                            </div>
                        </div>

                        <div class="recorded-hero-card__stats">
                            <div class="recorded-stat-mini">
                                <span class="recorded-stat-mini__label">Records</span>
                                <span class="recorded-stat-mini__value">3</span>
                            </div>

                            <div class="recorded-stat-mini">
                                <span class="recorded-stat-mini__label">Access</span>
                                <span class="recorded-stat-mini__value">Locked</span>
                            </div>

                            <div class="recorded-stat-mini">
                                <span class="recorded-stat-mini__label">View</span>
                                <span class="recorded-stat-mini__value">Table</span>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="ui-card recorded-toolbar-card" style="margin-top: 10px; margin-bottom: 10px;">
                    <div class="recorded-toolbar">
                        <div class="recorded-toolbar__main">
                            <div class="recorded-toolbar__icon">
                                <iconify-icon icon="ri:search-line"></iconify-icon>
                            </div>

                            <div>
                                <h5 class="recorded-toolbar__title mb-0">Search & Sort</h5>
                                <p class="recorded-toolbar__sub mb-0">
                                    Quickly find recordings or sort the list by your preferred field.
                                </p>
                            </div>
                        </div>

                        <div class="recorded-toolbar__actions">
                            <div class="recorded-search">
                                <input type="text"
                                       class="recorded-search__input"
                                       id="recordedSearchInput"
                                       placeholder="Search recordings..."
                                       aria-label="Search recordings">
                                <span class="recorded-search__icon">
                                    <i class="fas fa-search"></i>
                                </span>
                            </div>

                            <div class="dropdown">
                                <button class="asset-btn asset-btn--secondary dropdown-toggle"
                                        type="button"
                                        id="sortDropdown"
                                        data-bs-toggle="dropdown"
                                        aria-expanded="false">
                                    <iconify-icon icon="ri:sort-asc"></iconify-icon>
                                    Sort by: Teacher Name
                                </button>

                                <ul class="dropdown-menu dropdown-menu-end recorded-dropdown" aria-labelledby="sortDropdown">
                                    <li>
                                        <button type="button" class="dropdown-item recorded-sort-option" data-sort="teacher">
                                            Teacher Name
                                        </button>
                                    </li>
                                    <li>
                                        <button type="button" class="dropdown-item recorded-sort-option" data-sort="date">
                                            Created Date
                                        </button>
                                    </li>
                                    <li>
                                        <button type="button" class="dropdown-item recorded-sort-option" data-sort="type">
                                            Type
                                        </button>
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="ui-card recorded-table-card">
                    <div class="recorded-table-head">
                        <div>
                            <h5 class="recorded-table-title mb-0">Recorded Sessions List</h5>
                            <p class="recorded-table-sub mb-0">
                                Session names, teacher/category information, creation dates, and access status.
                            </p>
                        </div>

                        <span class="ui-pill ui-pill--info">
                            <iconify-icon icon="ri:lock-line"></iconify-icon>
                            Subscription Required
                        </span>
                    </div>

                    <div class="recorded-table-wrap">
                        <table class="table recorded-table mb-0" id="recordedSessionsTable">
                            <thead>
                                <tr>
                                    <th scope="col">ID</th>
                                    <th scope="col">Session Name</th>
                                    <th scope="col">Teacher Name</th>
                                    <th scope="col">Type</th>
                                    <th scope="col">Created Date</th>
                                    <th scope="col">View</th>
                                </tr>
                            </thead>

                            <tbody>
                                <tr>
                                    <td>
                                        <span class="recorded-id">#5</span>
                                    </td>

                                    <td class="recorded-name-cell">
                                        <div class="recorded-session-title">ST00186_Level1_Group_20Jan2024_202033</div>
                                        <div class="recorded-session-sub">Level 1 • Group session</div>
                                    </td>

                                    <td>
                                        <span class="ui-pill ui-pill--neutral">Private</span>
                                    </td>

                                    <td>
                                        <span class="ui-pill ui-pill--primary">Private</span>
                                    </td>

                                    <td data-date="2024-01-20">20 Jan, 2024</td>

                                    <td>
                                        <button type="button" class="recorded-subscribe-btn">
                                            <iconify-icon icon="ri:lock-unlock-line"></iconify-icon>
                                            Subscribe to View
                                        </button>
                                    </td>
                                </tr>

                                <tr>
                                    <td>
                                        <span class="recorded-id">#4</span>
                                    </td>

                                    <td class="recorded-name-cell">
                                        <div class="recorded-session-title">ST00155_Level5_Private_20Feb2024_203033</div>
                                        <div class="recorded-session-sub">Level 5 • Private session</div>
                                    </td>

                                    <td>
                                        <span class="ui-pill ui-pill--warn">Extra Session</span>
                                    </td>

                                    <td>
                                        <span class="ui-pill ui-pill--warn">Extra Session</span>
                                    </td>

                                    <td data-date="2024-02-22">22 Feb, 2024</td>

                                    <td>
                                        <button type="button" class="recorded-subscribe-btn">
                                            <iconify-icon icon="ri:lock-unlock-line"></iconify-icon>
                                            Subscribe to View
                                        </button>
                                    </td>
                                </tr>

                                <tr>
                                    <td>
                                        <span class="recorded-id">#3</span>
                                    </td>

                                    <td class="recorded-name-cell">
                                        <div class="recorded-session-title">ST00144_Level3_Group_20Jan2024_223033</div>
                                        <div class="recorded-session-sub">Level 3 • Group session</div>
                                    </td>

                                    <td>
                                        <span class="ui-pill ui-pill--success">English Club</span>
                                    </td>

                                    <td>
                                        <span class="ui-pill ui-pill--success">English Club</span>
                                    </td>

                                    <td data-date="2024-02-22">22 Feb, 2024</td>

                                    <td>
                                        <button type="button" class="recorded-subscribe-btn">
                                            <iconify-icon icon="ri:lock-unlock-line"></iconify-icon>
                                            Subscribe to View
                                        </button>
                                    </td>
                                </tr>
                            </tbody>
                        </table>

                        <div class="recorded-empty d-none" id="recordedEmptyState">
                            <iconify-icon icon="ri:video-off-line"></iconify-icon>
                            <h6>No recorded sessions found</h6>
                            <p>Try changing your search keyword.</p>
                        </div>
                    </div>
                </div>

                <div class="recorded-footer-actions">
                    <button type="button" class="asset-btn asset-btn--primary" style="margin-left: auto">
                        <iconify-icon icon="ri:archive-line"></iconify-icon>
                        Show All Previous Sessions
                    </button>
                </div>

            </div>
        </div>
    </div>
@endsection

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

        .recorded-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;
        }

        .recorded-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(245, 158, 11, 0.22), transparent 30%),
                linear-gradient(135deg, #111827 0%, #1f2937 48%, #0f172a 100%);
        }

        .recorded-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;
        }

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

        .recorded-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;
            flex-shrink: 0;
            backdrop-filter: blur(8px);
        }

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

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

        .recorded-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;
        }

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

        .recorded-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;
        }

        .recorded-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;
        }

        .recorded-stat-mini__value {
            display: block;
            color: #fff;
            font-size: 1.02rem;
            font-weight: 950;
            line-height: 1.2;
        }

        .recorded-toolbar {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 1rem;
            flex-wrap: wrap;
        }

        .recorded-toolbar__main {
            display: flex;
            align-items: center;
            gap: 0.85rem;
        }

        .recorded-toolbar__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;
        }

        .recorded-toolbar__title {
            font-size: 1.05rem !important;;
            font-weight: 900;
            color: #111827;
        }

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

        .recorded-toolbar__actions {
            display: flex;
            align-items: center;
            gap: 0.75rem;
            flex-wrap: wrap;
        }

        .recorded-search {
            position: relative;
            min-width: 300px;
        }

        .recorded-search__input {
            width: 100%;
            min-height: 44px;
            border: 1px solid #dbe2ea;
            border-radius: 14px;
            padding: 0.68rem 2.55rem 0.68rem 0.9rem;
            background: #fff;
            color: #111827;
            transition: 0.2s ease;
            box-shadow: none;
        }

        .recorded-search__input:focus {
            outline: none;
            border-color: #b8c4d6;
            box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.08);
        }

        .recorded-search__icon {
            position: absolute;
            right: 0.9rem;
            top: 50%;
            transform: translateY(-50%);
            color: #94a3b8;
        }

        .recorded-dropdown {
            border: 1px solid #e5e7eb;
            border-radius: 14px;
            box-shadow: 0 18px 40px rgba(15, 23, 42, 0.12);
            padding: 0.4rem;
        }

        .recorded-dropdown .dropdown-item {
            border-radius: 10px;
            font-weight: 700;
            color: #334155;
            padding: 0.55rem 0.75rem;
        }

        .recorded-dropdown .dropdown-item:hover {
            background: #f8fafc;
            color: #111827;
        }

        .recorded-table-card {
            padding: 0 !important;
        }

        .recorded-table-head {
            padding: 1.25rem;
            border-bottom: 1px solid #eef2f7;
            display: flex;
            align-items: flex-start;
            justify-content: space-between;
            gap: 1rem;
            flex-wrap: wrap;
            background: #fff;
        }

        .recorded-table-title {
            font-size: 1.05rem !important;;
            font-weight: 900;
            color: #111827;
        }

        .recorded-table-sub {
            color: #64748b;
            font-size: 0.9rem;
            line-height: 1.55;
            margin-top: 0.2rem;
        }

        .recorded-table-wrap {
            width: 100%;
            overflow-x: auto;
        }

        .recorded-table {
            min-width: 900px;
            width: 100%;
            vertical-align: middle;
        }

        .recorded-table thead th {
            background: #f8fafc;
            color: #475569;
            font-size: 0.78rem;
            font-weight: 900;
            text-transform: uppercase;
            letter-spacing: 0.04em;
            border-bottom: 1px solid #e5e7eb;
            padding: 0.9rem 1rem;
            white-space: nowrap;
        }

        .recorded-table tbody td {
            color: #334155;
            font-size: 0.9rem;
            font-weight: 650;
            border-color: #eef2f7;
            padding: 0.95rem 1rem;
            vertical-align: middle;
            white-space: nowrap;
        }

        .recorded-table tbody tr {
            transition: 0.16s ease;
        }

        .recorded-table tbody tr:hover {
            background: #f8fafc;
        }

        .recorded-id {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            min-width: 38px;
            height: 30px;
            border-radius: 999px;
            background: #f3f4f6;
            color: #374151;
            font-size: 0.78rem;
            font-weight: 900;
        }

        .recorded-name-cell {
            white-space: normal !important;
            min-width: 320px;
        }

        .recorded-session-title {
            color: #111827;
            font-weight: 850;
            line-height: 1.35;
            overflow-wrap: anywhere;
        }

        .recorded-session-sub {
            color: #94a3b8;
            font-size: 0.78rem;
            margin-top: 0.2rem;
        }

        .recorded-subscribe-btn {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 0.35rem;
            border: 1px solid #fed7aa;
            background: #fff7ed;
            color: #c2410c;
            border-radius: 999px;
            padding: 0.45rem 0.8rem;
            font-size: 0.78rem;
            font-weight: 900;
            transition: 0.18s ease;
            white-space: nowrap;
        }

        .recorded-subscribe-btn:hover {
            background: #f97316;
            border-color: #f97316;
            color: #fff;
            transform: translateY(-1px);
            box-shadow: 0 10px 22px rgba(249, 115, 22, 0.18);
        }

        .recorded-footer-actions {
            display: flex;
            justify-content: flex-start;
            align-items: center;
        }

        .recorded-empty {
            padding: 3rem 1rem;
            text-align: center;
            color: #94a3b8;
            background: #fff;
        }

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

        .recorded-empty h6 {
            margin: 0;
            color: #475569;
            font-weight: 850;
        }

        .recorded-empty p {
            margin: 0.25rem 0 0;
            font-size: 0.88rem;
        }

        .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--success { background: #f0fdf4; color: #166534; }
        .ui-pill--warn { background: #fffbeb; color: #92400e; }
        .ui-pill--neutral { background: #f3f4f6; color: #374151; }

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

        @media (max-width: 991.98px) {
            .recorded-toolbar {
                align-items: flex-start;
            }

            .recorded-toolbar__actions {
                width: 100%;
                align-items: stretch;
            }

            .recorded-search {
                width: 100%;
                min-width: 0;
            }

            .recorded-toolbar__actions .dropdown,
            .recorded-toolbar__actions .asset-btn {
                width: 100%;
            }
        }

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

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

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

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

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

            .recorded-table-head {
                padding: 1rem;
            }

            .recorded-footer-actions .asset-btn {
                width: 100%;
            }
        }
    </style>
@endpush

@push('scripts')
    <script>
        document.addEventListener('DOMContentLoaded', function () {
            const searchInput = document.getElementById('recordedSearchInput');
            const table = document.getElementById('recordedSessionsTable');
            const emptyState = document.getElementById('recordedEmptyState');
            const sortButtons = document.querySelectorAll('.recorded-sort-option');
            const sortDropdown = document.getElementById('sortDropdown');

            if (!searchInput || !table) {
                return;
            }

            function getRows() {
                return Array.from(table.querySelectorAll('tbody tr'));
            }

            function updateEmptyState() {
                const visibleRows = getRows().filter(row => row.style.display !== 'none');

                if (emptyState) {
                    emptyState.classList.toggle('d-none', visibleRows.length > 0);
                }

                table.classList.toggle('d-none', visibleRows.length === 0);
            }

            searchInput.addEventListener('input', function () {
                const keyword = this.value.toLowerCase().trim();

                getRows().forEach(function (row) {
                    const text = row.innerText.toLowerCase();
                    row.style.display = text.includes(keyword) ? '' : 'none';
                });

                updateEmptyState();
            });

            sortButtons.forEach(function (button) {
                button.addEventListener('click', function () {
                    const sortType = this.dataset.sort;
                    const tbody = table.querySelector('tbody');
                    const rows = getRows();

                    const columnIndex = {
                        teacher: 2,
                        type: 3,
                        date: 4
                    }[sortType] ?? 2;

                    rows.sort(function (a, b) {
                        if (sortType === 'date') {
                            const dateA = a.children[columnIndex].dataset.date || a.children[columnIndex].innerText.trim();
                            const dateB = b.children[columnIndex].dataset.date || b.children[columnIndex].innerText.trim();

                            return new Date(dateB) - new Date(dateA);
                        }

                        const valueA = a.children[columnIndex].innerText.trim().toLowerCase();
                        const valueB = b.children[columnIndex].innerText.trim().toLowerCase();

                        return valueA.localeCompare(valueB);
                    });

                    rows.forEach(row => tbody.appendChild(row));

                    if (sortDropdown) {
                        sortDropdown.innerHTML = `
                            <iconify-icon icon="ri:sort-asc"></iconify-icon>
                            Sort by: ${this.innerText.trim()}
                        `;
                    }
                });
            });
        });
    </script>
@endpush