@extends('layout.layout')

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

            <a href="{{ route('course-catalog.index') }}" class="catalog-detail-back">
                <i class="fa-solid fa-chevron-left"></i>
                <span>Back to course catalog</span>
            </a>

            <div class="catalog-detail-hero">
                <div>
                    @if(! empty($course['category']))
                        <span class="catalog-detail-pill">{{ $course['category'] }}</span>
                    @endif
                    <h1>{{ $course['name'] }}</h1>
                </div>
                <a href="#courseSchedule" class="catalog-detail-primary">
                    <i class="fa-regular fa-calendar-check"></i>
                    <span>Choose schedule</span>
                </a>
            </div>

            <section class="catalog-description-card">
                <div class="catalog-description-card__media">
                    <img src="{{ $course['image_url'] }}" alt="{{ $course['name'] }}">
                </div>
                <div class="catalog-description-card__body">
                    <h2>Course description</h2>
                    <p>{{ $course['description'] }}</p>
                </div>
            </section>

            <section class="catalog-schedule-panel schedule-page" id="courseSchedule">
                <div class="catalog-schedule-panel__head">
                    <div>
                        <span class="catalog-detail-pill catalog-detail-pill--soft">Selected course schedule</span>
                        <h2>Choose your schedule for {{ $course['name'] }}</h2>
                    </div>
                </div>

                @include('student.schedule.partials._content', [
                    'inlineCatalogSchedule' => true,
                    'catalogTrackId' => $course['id'],
                ])
            </section>
        </div>
    </div>
@endsection

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

        .catalog-detail-back {
            display: inline-flex;
            align-items: center;
            gap: 0.45rem;
            margin-bottom: 1rem;
            color: #0f1724;
            font-size: 0.86rem;
            font-weight: 850;
            text-decoration: none;
        }

        .catalog-detail-hero {
            display: flex;
            align-items: flex-end;
            justify-content: space-between;
            gap: 1rem;
            margin-bottom: 1.2rem;
        }

        .catalog-detail-hero h1 {
            max-width: 980px;
            margin: 0.45rem 0 0;
            color: #071b3d;
            font-family: Georgia, "Times New Roman", serif;
            font-size: clamp(2rem, 4.8vw, 4.25rem);
            font-weight: 900;
            line-height: 1.04;
            letter-spacing: 0;
        }

        .catalog-detail-hero p,
        .catalog-description-card p,
        .catalog-schedule-panel p {
            max-width: 780px;
            margin: 0.65rem 0 0;
            color: #475569;
            font-size: 0.95rem;
            line-height: 1.65;
        }

        .catalog-detail-pill {
            display: inline-flex;
            max-width: 100%;
            min-height: 28px;
            align-items: center;
            border-radius: 999px;
            background: #eaf2ff;
            color: #0f1724;
            padding: 0.35rem 0.75rem;
            font-size: 0.74rem;
            font-weight: 900;
        }

        .catalog-detail-pill--soft {
            background: #fff;
            border: 1px solid #dbe7f6;
        }

        .catalog-detail-primary {
            min-height: 46px;
            border: 0;
            border-radius: 8px;
            background: #0f1724;
            color: #fff;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 0.55rem;
            padding: 0 1.1rem;
            text-decoration: none;
            font-size: 0.9rem;
            font-weight: 900;
            white-space: nowrap;
            box-shadow: 0 14px 26px rgba(11, 79, 197, 0.18);
        }

        .catalog-detail-primary:hover {
            background: #071b3d;
            color: #fff;
        }

        .catalog-description-card,
        .catalog-schedule-panel {
            border: 1px solid #dbe7f6;
            border-radius: 8px;
            background: #fff;
            box-shadow: 0 14px 30px rgba(7, 27, 61, 0.06);
            overflow: hidden;
        }

        .catalog-description-card {
            display: grid;
            grid-template-columns: minmax(260px, 420px) minmax(0, 1fr);
            gap: 0;
            align-items: stretch;
            margin-bottom: 1.25rem;
        }

        .catalog-description-card__media img {
            display: block;
            width: 100%;
            height: 100%;
            min-height: 280px;
            object-fit: cover;
            background: #eaf2ff;
        }

        .catalog-description-card__body {
            padding: 1.25rem;
        }

        .catalog-description-card h2,
        .catalog-schedule-panel h2 {
            margin: 0;
            color: #071b3d;
            font-size: 1.5rem;
            font-weight: 900;
            letter-spacing: 0;
        }

        .catalog-schedule-panel {
            padding: 0;
            scroll-margin-top: 1rem;
        }

        .catalog-schedule-panel__head {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 1rem;
            padding: 1.25rem;
            border-bottom: 1px solid #e7eef8;
        }

        .catalog-schedule-panel__head h2 {
            margin-top: 0.55rem;
        }

        @media (max-width: 991.98px) {
            .catalog-detail-hero,
            .catalog-schedule-panel__head {
                align-items: stretch;
                flex-direction: column;
            }

            .catalog-description-card {
                grid-template-columns: 1fr;
            }

            .catalog-description-card__media img {
                height: auto;
                min-height: 0;
                aspect-ratio: 16 / 9;
            }

            .catalog-detail-primary {
                width: 100%;
            }
        }
    </style>
@endpush

@push('styles')
    @include('student.schedule.partials._styles')

    <style>
        .catalog-schedule-panel {
            border-color: #d7e3f4;
            background: #fff;
        }

        .catalog-schedule-panel__head {
            background: #f8fbff;
            border-bottom: 1px solid #dbe7f6;
        }

        .catalog-schedule-panel__head h2 {
            color: #071b3d;
            max-width: 820px;
        }

        .catalog-schedule-panel__head .catalog-detail-pill--soft {
            background: #fff;
            border-color: #cbd8ea;
            color: #0f1724;
        }

        .catalog-inline-schedule {
            padding: 1.35rem;
            background: #f3f7fc;
        }

        .catalog-inline-schedule .schedule-stats,
        .catalog-inline-schedule .mode-switch,
        .catalog-inline-schedule .js-track-select-field {
            display: none;
        }

        .catalog-inline-schedule .schedule-layout {
            display: block;
        }

        .catalog-inline-schedule .schedule-panel {
            border: 0;
            background: transparent;
            box-shadow: none;
        }

        .catalog-inline-schedule .schedule-panel__head {
            margin-bottom: 1rem;
            padding: 0;
            border: 0;
            background: transparent;
        }

        .catalog-inline-schedule .schedule-panel__head div {
            color: #071b3d;
            font-size: 1.05rem;
        }

        .catalog-inline-schedule .schedule-panel__head p {
            color: #64748b;
            font-size: 0.82rem;
        }

        .catalog-inline-schedule .schedule-form {
            padding: 0;
        }

        .catalog-inline-schedule .schedule-grid {
            grid-template-columns: repeat(3, minmax(0, 1fr));
            gap: 0.85rem;
        }

        .catalog-inline-schedule .schedule-field {
            min-height: 104px;
            gap: 0.55rem;
            border: 1px solid #dbe7f6;
            border-radius: 8px;
            background: #fff;
            padding: 0.85rem;
            box-shadow: 0 12px 24px rgba(7, 27, 61, 0.05);
        }

        .catalog-inline-schedule .schedule-field span {
            color: #334155;
            font-size: 0.74rem;
            letter-spacing: 0;
            text-transform: uppercase;
        }

        .catalog-inline-schedule .schedule-control {
            min-width: 0;
            min-height: 46px;
            border: 1px solid #cbd8ea;
            border-radius: 8px;
            background: #f8fbff;
            color: #071b3d;
            font-size: 1rem;
            font-weight: 750;
        }

        .catalog-inline-schedule select.schedule-control {
            appearance: auto;
        }

        .catalog-inline-schedule .schedule-control:focus {
            background: #fff;
            border-color: #0f1724;
            box-shadow: 0 0 0 4px rgba(11, 79, 197, 0.11);
        }

        .catalog-inline-schedule .package-price-card {
            position: relative;
            overflow: hidden;
            display: grid;
            grid-template-columns: minmax(220px, 0.65fr) minmax(0, 1fr);
            gap: 1rem;
            margin-top: 1rem;
            border: 0;
            border-radius: 8px;
            background: #071b3d;
            color: #fff;
            padding: 1.1rem;
            box-shadow: 0 18px 34px rgba(7, 27, 61, 0.18);
        }

        .catalog-inline-schedule .package-price-card > div,
        .catalog-inline-schedule .package-price-card dl {
            position: relative;
            z-index: 1;
        }

        .catalog-inline-schedule .package-price-card > div span,
        .catalog-inline-schedule .package-price-card dt {
            color: #bfdbfe;
            font-size: 0.76rem;
        }

        .catalog-inline-schedule .package-price-card > div strong {
            color: #d9f99d;
            font-size: clamp(1.45rem, 2.6vw, 2rem);
        }

        .catalog-inline-schedule .package-price-card dd {
            color: #fff;
            font-size: 0.98rem;
        }

        .catalog-inline-schedule .package-price-card dl > div {
            border: 1px solid rgba(255, 255, 255, 0.14);
            border-radius: 8px;
            background: rgba(255, 255, 255, 0.08);
            padding: 0.75rem;
        }

        .catalog-inline-schedule .schedule-actions {
            margin-top: 1rem;
            border: 1px solid #dbe7f6;
            border-radius: 8px;
            background: #fff;
            padding: 0.8rem;
            box-shadow: 0 12px 24px rgba(7, 27, 61, 0.05);
        }

        .catalog-inline-schedule .schedule-primary-btn {
            min-height: 48px;
            padding-inline: 1.25rem;
            background: #0f1724;
            box-shadow: 0 14px 26px rgba(11, 79, 197, 0.18);
        }

        .catalog-inline-schedule .schedule-hint {
            color: #64748b;
            font-size: 0.82rem;
        }

        .catalog-inline-schedule .slot-toolbar {
            margin-top: 1rem;
            border: 1px solid #dbe7f6;
            border-radius: 8px 8px 0 0;
            background: #fff;
        }

        .catalog-inline-schedule .slots-section-title {
            background: #fff;
        }

        .catalog-inline-schedule .slot-list {
            border: 1px solid #dbe7f6;
            border-top: 0;
            border-radius: 0 0 8px 8px;
            background: #fff;
            padding: 1rem;
        }

        .catalog-inline-schedule .empty-state {
            border: 1px dashed #b8c7dc;
            background: #f8fbff;
        }

        @media (max-width: 1199.98px) {
            .catalog-inline-schedule .schedule-grid {
                grid-template-columns: repeat(2, minmax(0, 1fr));
            }
        }

        @media (max-width: 767.98px) {
            .catalog-inline-schedule {
                padding: 0.9rem;
            }

            .catalog-inline-schedule .schedule-grid,
            .catalog-inline-schedule .package-price-card,
            .catalog-inline-schedule .package-price-card dl {
                grid-template-columns: 1fr;
            }

            .catalog-inline-schedule .schedule-actions,
            .catalog-inline-schedule .slot-toolbar {
                align-items: stretch;
                flex-direction: column;
            }
        }
    </style>
@endpush

@push('scripts')
    @include('student.schedule.partials._scripts', [
        'schedulePresetQuery' => 'mode=track&track_id='.$course['id'],
    ])
@endpush