@extends('layout.layout')

@section('content')
    <div class="tutor-profile-page">
        <div class="tutor-profile-shell">
            <a href="{{ route('student.tutors.index') }}" class="tutor-back">
                <i class="fa-solid fa-arrow-left"></i>
                <span>Back to tutors</span>
            </a>

            <section class="tutor-hero">
                <div class="tutor-hero__identity">
                    <img src="{{ $tutor['photo'] }}" alt="{{ $tutor['name'] }}">
                    <div>
                        <span class="tutor-eyebrow">Tutor Profile</span>
                        <div class="tutor-name">{{ $tutor['name'] }} <span class="badge bg-light text-dark">{{ $tutor['teacher_type_label'] ?? 'Native-like' }}</span></div>
                        <div class="tutor-rating">
                            <i class="fa-solid fa-star"></i>
                            <span>{{ number_format((float) $tutor['rating'], 1) }}</span>
                        </div>
                        <div class="tutor-profile-tags">
                            @foreach($tutor['audience'] as $audience)
                                <span>{{ $audience }}</span>
                            @endforeach
                        </div>
                    </div>
                </div>

                <div class="tutor-hero__cta">
                    <a href="#tutorPrograms" class="tutor-primary-btn">
                        <i class="fa-regular fa-calendar-check"></i>
                        <span>Select Program</span>
                    </a>
                </div>
            </section>

            <section class="tutor-profile-stats">
                <div>
                    <span>Total Working Hours</span>
                    <strong>{{ number_format((float) $tutor['working_hours'], 1) }}</strong>
                </div>
                <div>
                    <span>Nationality</span>
                    <strong>{{ $tutor['nationality'] }}</strong>
                </div>
                <div>
                    <span>Accent</span>
                    <strong>{{ $tutor['accent'] }}</strong>
                </div>
                <div>
                    <span>Gender</span>
                    <strong>{{ $tutor['gender'] }}</strong>
                </div>
            </section>

            <div class="tutor-profile-grid">
                <section class="tutor-profile-section tutor-profile-section--wide">
                    <div class="tutor-section-head">
                        <div>Biography</div>
                    </div>
                    <p class="tutor-bio">{{ $tutor['biography'] }}</p>
                </section>

                <section class="tutor-profile-section">
                    <div class="tutor-section-head">
                        <div>Introductory Video</div>
                    </div>
                    @if($tutor['intro_video_url'])
                        <video controls class="tutor-video">
                            <source src="{{ $tutor['intro_video_url'] }}">
                            Your browser does not support the video tag.
                        </video>
                    @else
                        <div class="tutor-empty">
                            <i class="fa-regular fa-circle-play"></i>
                            <span>Intro video will appear here once added by admin.</span>
                        </div>
                    @endif
                </section>
            </div>

            
            <section class="tutor-profile-section">
                <div class="tutor-section-head">
                    <div>Reviews</div>
                    <span>Admin shared</span>
                </div>
                <div class="tutor-review-grid">
                    @forelse($tutor['reviews'] as $review)
                        <article class="tutor-review-card">
                            <div class="tutor-review-card__top">
                                <strong>{{ number_format((float) $review['rating'], 1) }}/5</strong>
                                <span>{{ $review['date'] ?: '' }}</span>
                            </div>
                            <p>{{ $review['comment'] }}</p>
                            <small>{{ $review['program'] }}</small>
                        </article>
                    @empty
                        <div class="tutor-empty">
                            <i class="fa-regular fa-message"></i>
                            <span>No admin-shared reviews yet.</span>
                        </div>
                    @endforelse
                </div>
            </section>

            @php
                $availabilityDays = (int) ($filters['availability_days'] ?? 14);
                $availabilityItems = collect($tutor['availability'] ?? []);
                $availabilitySlotsTotal = $availabilityItems->sum('available_slots');
                $nextAvailability = $availabilityItems->first();
            @endphp

            {{-- <section class="tutor-profile-section tutor-availability-section">
                <div class="tutor-section-head">
                    <div>Track Availability</div>
                    <span>Next {{ $availabilityDays }} days</span>
                </div>

                <div class="tutor-availability-overview">
                    <div class="tutor-availability-summary">
                        <span>Available slots</span>
                        <strong>{{ $availabilitySlotsTotal }}</strong>
                        <small>{{ $availabilityItems->count() }} available {{ \Illuminate\Support\Str::plural('day', $availabilityItems->count()) }}</small>
                    </div>
                    <div class="tutor-availability-summary">
                        <span>Next available</span>
                        <strong>{{ $nextAvailability ? $nextAvailability['day'] : '-' }}</strong>
                        <small>{{ $nextAvailability ? $nextAvailability['label'] : 'No available day found' }}</small>
                    </div>
                    <form method="GET" action="{{ route('student.tutors.show', $tutor['id']) }}" class="tutor-availability-filter">
                        <label>
                            <span>Search days</span>
                            <input
                                type="number"
                                name="availability_days"
                                min="1"
                                value="{{ $availabilityDays }}"
                                placeholder="Days"
                            >
                        </label>
                        <button type="submit" title="Apply availability period" aria-label="Apply availability period">
                            <i class="fa-solid fa-filter"></i>
                        </button>
                    </form>
                </div>

                <div class="tutor-availability-grid">
                    @forelse($availabilityItems as $day)
                        <div class="tutor-availability-card is-available">
                            @php
                                $firstSlot = collect($day['slots'] ?? [])->first();
                            @endphp
                            <button
                                type="button"
                                class="tutor-availability-date-btn"
                                data-availability-date="{{ $day['date'] }}"
                                data-availability-start="{{ $firstSlot['start_time'] ?? '' }}"
                                data-availability-end="{{ $firstSlot['end_time'] ?? '' }}"
                            >
                                <span>
                                    <strong>{{ $day['day'] }}</strong>
                                    <small>{{ $day['label'] }}</small>
                                </span>
                                <b>{{ $day['available_slots'] }}</b>
                            </button>
                            <div class="tutor-availability-times">
                                @foreach(collect($day['slots'] ?? [])->take(6) as $slot)
                                    <button
                                        type="button"
                                        class="tutor-availability-time-btn"
                                        data-availability-date="{{ $day['date'] }}"
                                        data-availability-start="{{ $slot['start_time'] }}"
                                        data-availability-end="{{ $slot['end_time'] }}"
                                    >
                                        {{ $slot['start_time'] }}-{{ $slot['end_time'] }}
                                    </button>
                                @endforeach
                            </div>
                            <small>{{ \Illuminate\Support\Str::plural('slot', (int) $day['available_slots']) }}</small>
                        </div>
                    @empty
                        <div class="tutor-empty tutor-empty--availability">
                            <i class="fa-regular fa-calendar-xmark"></i>
                            <span>No available slots in the next {{ $availabilityDays }} days.</span>
                        </div>
                    @endforelse
                </div>
            </section> --}}

            <section class="tutor-profile-section" id="tutorPrograms">
                <div class="tutor-section-head">
                    <div>Programs</div>
                    <span>Select a program to enroll</span>
                </div>
                <div class="tutor-program-grid">
                    @forelse($tutor['programs'] as $program)
                        <article class="course-card tutor-program-card" data-program-card data-track-id="{{ $program['id'] }}">
                            <div class="course-card__image tutor-program-card__image">
                                <img src="{{ $program['image'] }}" alt="{{ $program['name'] }}">
                                <span class="course-card__category">Program</span>
                            </div>
                            <div class="course-card__body">
                                <div class="course-card__title" title="{{ $program['name'] }}">{{ $program['name'] }}</div>
                                <div class="course-card__meta">
                                    @if($program['levels_count'] !== null)
                                        <div class="course-meta">
                                            <small>Total levels</small>
                                            <strong>{{ $program['levels_count'] ?: '-' }}</strong>
                                        </div>
                                    @endif
                                    @if($program['sessions_count'] !== null)
                                        <div class="course-meta">
                                            <small>Sessions</small>
                                            <strong>{{ $program['sessions_count'] ?: '-' }}</strong>
                                        </div>
                                    @endif
                                </div>
                                <div class="course-card__chips">
                                    @foreach($tutor['audience'] as $audience)
                                        <span class="course-chip">{{ $audience }}</span>
                                    @endforeach
                                </div>
                                @if($program['description'])
                                    <p class="course-card__description">{{ $program['description'] }}</p>
                                @else
                                    <p class="course-card__description">Choose this program to view available enrollment times with {{ $tutor['name'] }}.</p>
                                @endif
                                <div class="course-card__footer">
                                    <button type="button" class="course-subscribe tutor-program-enroll" data-program-select data-track-id="{{ $program['id'] }}">
                                        <i class="fa-solid fa-arrow-right"></i>
                                        <span>Enroll</span>
                                    </button>
                                </div>
                            </div>
                        </article>
                    @empty
                        <div class="tutor-empty">
                            <i class="fa-regular fa-folder-open"></i>
                            <span>No programs found for this tutor.</span>
                        </div>
                    @endforelse
                </div>
            </section>

            <section class="tutor-profile-section tutor-schedule-section schedule-page is-hidden-until-program" id="teacherSchedule" data-require-program-selection>
                <div class="tutor-section-head">
                    <div>Choose Schedule With {{ $tutor['name'] }}</div>
                    <span id="selectedProgramLabel">Program selected</span>
                </div>

                @include('student.schedule.partials._content', [
                    'inlineCatalogSchedule' => true,
                    'catalogTrackId' => null,
                    'hideTeacherTypeField' => true,
                    'presetTeacherType' => $tutor['teacher_type'] ?? null,
                ])
            </section>

        </div>
    </div>

    <style>
        .tutor-profile-page {
            min-height: 100vh;
            padding: 24px 16px 48px;
            background: #f6f8fb;
            color: #111827;
        }

        .tutor-profile-shell {
            margin: 0 auto;
        }

        .tutor-back,
        .tutor-primary-btn,
        .tutor-secondary-btn {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            text-decoration: none;
            font-weight: 850;
        }

        .tutor-back {
            color: #071b3d;
            font-size: 12px;
            margin-bottom: 14px;
        }

        .tutor-hero,
        .tutor-profile-section,
        .tutor-profile-stats div {
            border: 1px solid #e2e8f0;
            border-radius: 14px;
            background: #fff;
            box-shadow: 0 14px 34px rgba(15, 23, 42, .055);
        }

        .tutor-hero {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 16px;
            padding: 22px;
            margin-bottom: 16px;
            border-color: #dfe7f1;
        }

        .tutor-hero__identity {
            display: flex;
            align-items: center;
            gap: 16px;
            min-width: 0;
        }

        .tutor-hero__identity img {
            width: 94px;
            height: 94px;
            border-radius: 50%;
            object-fit: cover;
            border: 4px solid #eaf3ff;
            background: #eaf3ff;
            flex: 0 0 auto;
        }

        .tutor-eyebrow {
            display: block;
            color: #071b3d;
            font-size: 10px;
            font-weight: 900;
            text-transform: uppercase;
        }

        .tutor-name {
            margin: 4px 0 6px;
            color: #0f172a;
            font-size: 1.55rem;
            font-weight: 900;
            line-height: 1.2;
            overflow-wrap: anywhere;
        }

        .tutor-rating {
            display: inline-flex;
            align-items: center;
            gap: 5px;
            color: #f59e0b;
            font-size: 12px;
            font-weight: 900;
        }

        .tutor-profile-tags {
            display: flex;
            flex-wrap: wrap;
            gap: 8px;
            margin-top: 10px;
        }

        .tutor-profile-tags span {
            border-radius: 999px;
            background: #eff6ff;
            color: #0f1724;
            padding: 6px 9px;
            font-size: 10px;
            font-weight: 900;
        }

        .tutor-primary-btn {
            min-height: 44px;
            border-radius: 8px;
            background: #071b3d;
            color: #fff;
            padding: 10px 14px;
            font-size: 12px;
            box-shadow: 0 12px 22px rgba(37, 99, 235, .2);
        }

        .tutor-primary-btn:hover {
            color: #fff;
            background: #0f1724;
        }

        .tutor-profile-stats {
            display: grid;
            grid-template-columns: repeat(4, minmax(0, 1fr));
            gap: 10px;
            margin-bottom: 16px;
        }

        .tutor-profile-stats div {
            min-height: 82px;
            padding: 14px;
            border-color: #dfe7f1;
            box-shadow: none;
        }

        .tutor-profile-stats span {
            display: block;
            color: #64748b;
            font-size: 0.72rem;
            font-weight: 850;
            margin-bottom: 7px;
        }

        .tutor-profile-stats strong {
            color: #0f172a;
            font-size: 0.92rem;
            font-weight: 900;
            overflow-wrap: anywhere;
        }

        .tutor-profile-grid {
            display: grid;
            grid-template-columns: minmax(0, 1.25fr) minmax(320px, .75fr);
            gap: 16px;
            margin-bottom: 16px;
        }

        .tutor-profile-section {
            padding: 20px;
            margin-bottom: 16px;
            border-color: #dfe7f1;
        }

        .tutor-profile-grid .tutor-profile-section {
            margin-bottom: 0;
        }

        .tutor-section-head {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 10px;
            margin-bottom: 12px;
        }

        .tutor-section-head div {
            margin: 0;
            color: #0f172a;
            font-size: 1rem;
            font-weight: 900;
        }

        .tutor-section-head span {
            color: #64748b;
            font-size: 0.74rem;
            font-weight: 800;
        }

        .tutor-bio {
            margin: 0;
            color: #334155;
            font-size: 13px;
            line-height: 1.8;
            white-space: pre-line;
        }

        .tutor-video {
            width: 100%;
            aspect-ratio: 16 / 9;
            border-radius: 8px;
            background: #0f172a;
            display: block;
        }

        .tutor-empty {
            min-height: 150px;
            border: 1px dashed #cbd5e1;
            border-radius: 8px;
            background: #f8fafc;
            color: #64748b;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            gap: 8px;
            padding: 18px;
            text-align: center;
            font-size: 12px;
            font-weight: 800;
        }

        .tutor-empty i {
            color: #071b3d;
            font-size: 24px;
        }

        .tutor-availability-section {
            background: #fff;
        }

        .tutor-availability-overview {
            display: grid;
            grid-template-columns: repeat(2, minmax(0, 1fr)) minmax(220px, .7fr);
            gap: 10px;
            margin-bottom: 14px;
        }

        .tutor-availability-summary {
            min-width: 0;
            border: 1px solid #dfe7f1;
            border-radius: 12px;
            background: #fbfcff;
            padding: 13px 14px;
        }

        .tutor-availability-summary span,
        .tutor-availability-card small,
        .tutor-availability-filter label span {
            display: block;
            color: #64748b;
            font-size: 0.72rem;
            font-weight: 850;
        }

        .tutor-availability-summary strong {
            display: block;
            margin-top: 5px;
            color: #071b3d;
            font-size: 1.35rem;
            font-weight: 900;
            line-height: 1.15;
        }

        .tutor-availability-summary small {
            display: block;
            margin-top: 3px;
            color: #475569;
            font-size: 0.76rem;
            font-weight: 800;
        }

        .tutor-availability-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(128px, 1fr));
            gap: 10px;
        }

        .tutor-availability-filter {
            display: grid;
            grid-template-columns: minmax(0, 1fr) 42px;
            gap: 10px;
            align-items: end;
            margin: 0;
            border: 1px solid #dfe7f1;
            border-radius: 12px;
            background: #fbfcff;
            padding: 12px;
        }

        .tutor-availability-filter label {
            display: grid;
            gap: 5px;
            margin: 0;
        }

        .tutor-availability-filter input {
            width: 100%;
            min-height: 42px;
            border: 1px solid #dbe3ef;
            border-radius: 10px;
            background: #fff;
            color: #111827;
            padding: 0 10px;
            font-size: 0.84rem;
            font-weight: 800;
            outline: none;
        }

        .tutor-availability-filter input:focus {
            border-color: #071b3d;
            box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
        }

        .tutor-availability-filter button {
            width: 42px;
            min-height: 42px;
            border: 0;
            border-radius: 10px;
            background: #071b3d;
            color: #fff;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 7px;
            padding: 0;
            font-size: 0.9rem;
            font-weight: 900;
        }

        .tutor-empty--availability {
            grid-column: 1 / -1;
        }

        .tutor-availability-card {
            min-height: 92px;
            border: 1px solid #e2e8f0;
            border-radius: 12px;
            display: grid;
            gap: 9px;
            background: #fbfcff;
            color: #475569;
            padding: 13px;
        }

        .tutor-availability-card.is-available {
            border-color: #b9e6ca;
            background: #f3fbf6;
            color: #166534;
        }

        .tutor-availability-date-btn {
            width: 100%;
            border: 0;
            border-radius: 10px;
            background: transparent;
            color: inherit;
            display: grid;
            grid-template-columns: minmax(0, 1fr) auto;
            gap: 10px;
            align-items: center;
            padding: 0;
            text-align: left;
        }

        .tutor-availability-date-btn:hover strong,
        .tutor-availability-time-btn:hover {
            color: #071b3d;
        }

        .tutor-availability-date-btn strong,
        .tutor-availability-date-btn small {
            display: block;
            min-width: 0;
        }

        .tutor-availability-date-btn strong {
            color: #071b3d;
            font-size: 0.86rem;
            font-weight: 900;
        }

        .tutor-availability-date-btn small {
            margin-top: 2px;
            color: #64748b;
            font-size: 0.72rem;
            font-weight: 800;
        }

        .tutor-availability-date-btn b {
            min-width: 42px;
            min-height: 42px;
            border-radius: 10px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            background: #fff;
            color: #166534;
            font-size: 1.3rem;
            font-weight: 900;
        }

        .tutor-availability-times {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(94px, 1fr));
            gap: 7px;
        }

        .tutor-availability-time-btn {
            min-height: 36px;
            border: 1px solid #cfe6d8;
            border-radius: 10px;
            background: #fff;
            color: #166534;
            padding: 0.45rem 0.55rem;
            font-size: 0.76rem;
            font-weight: 900;
            white-space: nowrap;
        }

        .tutor-availability-time-btn.is-selected,
        .tutor-availability-date-btn.is-selected b {
            background: #071b3d;
            color: #fff;
            border-color: #071b3d;
        }

        .tutor-availability-card small {
            color: #166534;
        }

        .tutor-program-grid,
        .tutor-review-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
            gap: 14px;
        }

        .tutor-review-card {
            border: 1px solid #e2e8f0;
            border-radius: 8px;
            background: #fff;
            padding: 14px;
            min-width: 0;
        }

        .course-card.tutor-program-card {
            min-height: 0;
            border: 1px solid #dbe7f6;
            border-radius: 14px;
            background: #fff;
            display: flex;
            flex-direction: column;
            overflow: hidden;
            box-shadow: 0 12px 26px rgba(7, 27, 61, .055);
            transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
        }

        .course-card.tutor-program-card:hover,
        .course-card.tutor-program-card.is-selected {
            border-color: #93b9f4;
            box-shadow: 0 18px 38px rgba(7, 27, 61, .11);
            transform: translateY(-2px);
        }

        .course-card.tutor-program-card.is-selected {
            outline: 3px solid rgba(11, 79, 197, .14);
        }

        .tutor-program-card__image {
            position: relative;
            height: 150px;
            background: #eaf2ff;
            overflow: hidden;
        }

        .tutor-program-card__image::after {
            content: "";
            position: absolute;
            inset: 0;
            background: linear-gradient(180deg, rgba(7, 27, 61, 0) 42%, rgba(7, 27, 61, .34));
            pointer-events: none;
        }

        .tutor-program-card__image img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            display: block;
        }

        .course-card__category {
            position: absolute;
            left: .75rem;
            top: .75rem;
            max-width: calc(100% - 1.5rem);
            padding: .3rem .6rem;
            border-radius: 999px;
            background: rgba(255, 255, 255, .92);
            color: #071b3d;
            font-size: .7rem;
            font-weight: 850;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            z-index: 1;
        }

        .course-card__body {
            display: flex;
            flex: 1;
            flex-direction: column;
            gap: .75rem;
            padding: 1rem;
        }

        .course-card__title {
            min-height: 2.7rem;
            color: #071b3d;
            font-size: 1rem;
            font-weight: 850;
            line-height: 1.35;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
        }

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

        .course-meta {
            min-height: 58px;
            border: 1px solid #e7eef8;
            border-radius: 10px;
            background: #f8fbff;
            display: grid;
            gap: .15rem;
            padding: .65rem;
        }

        .course-meta small {
            color: #64748b;
            font-size: .68rem;
            font-weight: 750;
        }

        .course-meta strong {
            color: #0f1724;
            font-size: .85rem;
            font-weight: 850;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        .course-card__chips {
            display: flex;
            flex-wrap: wrap;
            gap: .35rem;
            min-height: 30px;
        }

        .course-chip {
            min-height: 26px;
            padding: .25rem .55rem;
            border-radius: 999px;
            background: #eaf2ff;
            color: #0f1724;
            font-size: .72rem;
            font-weight: 850;
        }

        .course-card__description {
            color: #475569;
            font-size: .84rem;
            line-height: 1.55;
            display: -webkit-box;
            -webkit-line-clamp: 4;
            -webkit-box-orient: vertical;
            overflow: hidden;
        }

        .course-card__footer {
            margin-top: auto;
            padding-top: .35rem;
        }

        .course-subscribe {
            width: 100%;
            min-height: 42px;
            border: 0;
            border-radius: 10px;
            background: #0f1724;
            color: #fff;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: .5rem;
            text-decoration: none;
            font-size: .88rem;
            font-weight: 850;
            box-shadow: 0 12px 22px rgba(11, 79, 197, .2);
        }

        .course-subscribe:hover {
            color: #fff;
            background: #071b3d;
        }

        .tutor-review-card__top {
            display: flex;
            justify-content: space-between;
            gap: 10px;
            margin-bottom: 8px;
        }

        .tutor-review-card__top strong {
            color: #f59e0b;
            font-size: 13px;
            font-weight: 900;
        }

        .tutor-review-card__top span,
        .tutor-review-card small {
            color: #64748b;
            font-size: 10px;
            font-weight: 800;
        }

        .is-hidden-until-program {
            display: none;
        }

        @media (max-width: 960px) {
            .tutor-profile-grid,
            .tutor-program-grid,
            .tutor-review-grid,
            .tutor-availability-overview {
                grid-template-columns: 1fr;
            }

            .tutor-profile-stats {
                grid-template-columns: repeat(2, minmax(0, 1fr));
            }
        }

        @media (max-width: 640px) {
            .tutor-hero,
            .tutor-hero__identity {
                align-items: flex-start;
                flex-direction: column;
            }

            .tutor-profile-stats {
                grid-template-columns: 1fr;
            }

            .tutor-availability-grid {
                grid-template-columns: 1fr;
            }
        }
    </style>
@endsection

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

    <style>
        .tutor-schedule-section {
            padding: 0;
            overflow: hidden;
            border-radius: 14px;
        }

        .tutor-schedule-section > .tutor-section-head {
            padding: 18px;
            margin: 0;
            border-bottom: 1px solid #e2e8f0;
            background: #fff;
        }

        .tutor-schedule-section .catalog-inline-schedule {
            padding: 18px;
            background: #f6f8fb;
        }

        .tutor-schedule-section .schedule-stats,
        .tutor-schedule-section .mode-switch {
            display: none;
        }

        .tutor-schedule-section .schedule-layout {
            display: block;
        }

        .tutor-schedule-section .schedule-panel {
            border: 0;
            background: transparent;
            box-shadow: none;
        }

        .tutor-schedule-section .schedule-layout-grid {
            grid-template-columns: minmax(0, 1.35fr) minmax(290px, .75fr);
            gap: 16px;
        }

        .tutor-schedule-section .schedule-panel__head {
            padding: 14px 16px;
            margin-bottom: 14px;
            border: 1px solid #dfe7f1;
            border-radius: 12px;
            background: #fff;
            box-shadow: none;
        }

        .tutor-schedule-section .schedule-form-stack {
            gap: 12px;
        }

        .tutor-schedule-section .schedule-form-stack > .schedule-field,
        .tutor-schedule-section .schedule-form-stack > .schedule-date-row,
        .tutor-schedule-section .schedule-form-stack > .schedule-days-row {
            border: 1px solid #dfe7f1;
            border-radius: 12px;
            background: #fff;
            padding: 14px;
            box-shadow: none;
        }

        .tutor-schedule-section .schedule-control {
            min-width: 0;
        }

        .tutor-schedule-section select.schedule-control {
            appearance: none;
            background-color: #f8fbff;
            background-image:
                linear-gradient(45deg, transparent 50%, #0f1724 50%),
                linear-gradient(135deg, #0f1724 50%, transparent 50%);
            background-position:
                calc(100% - 19px) 50%,
                calc(100% - 13px) 50%;
            background-size: 6px 6px, 6px 6px;
            background-repeat: no-repeat;
            padding-right: 2.4rem;
        }

        .tutor-schedule-section select.schedule-control:disabled {
            background-image:
                linear-gradient(45deg, transparent 50%, #94a3b8 50%),
                linear-gradient(135deg, #94a3b8 50%, transparent 50%);
        }

        .tutor-schedule-section .package-price-card {
            display: grid;
            grid-template-columns: minmax(220px, .65fr) minmax(0, 1fr);
            gap: 1rem;
            margin-top: 12px;
            border: 0;
            border-radius: 12px;
            background: #071b3d;
            color: #fff;
            padding: 16px;
        }

        .tutor-schedule-section .package-price-card > div span,
        .tutor-schedule-section .package-price-card dt {
            color: #bfdbfe;
        }

        .tutor-schedule-section .package-price-card > div strong {
            color: #d9f99d;
            font-size: 24px;
        }

        .tutor-schedule-section .package-price-card dd {
            color: #fff;
        }

        .tutor-schedule-section .package-price-card dl > div {
            border: 1px solid rgba(255, 255, 255, .14);
            border-radius: 8px;
            background: rgba(255, 255, 255, .08);
            padding: 10px;
        }

        .tutor-schedule-section .slot-toolbar {
            margin-top: 12px;
            border: 0;
            border-bottom: 1px solid #edf2f7;
            border-radius: 0;
            background: #fff;
        }

        .tutor-schedule-section .slot-list {
            border: 0;
            border-radius: 0;
            background: #fff;
        }

        .tutor-schedule-section .schedule-slots-section,
        .tutor-schedule-section .schedule-payment-fields-section,
        .tutor-schedule-section .schedule-summary-card {
            border-radius: 12px;
            box-shadow: none;
        }

        .tutor-schedule-section .slot-day-list {
            grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
        }

        .tutor-schedule-section .slot-day-card {
            box-shadow: none;
        }

        .tutor-schedule-section .summary-footer {
            background: #fbfcff;
        }

        @media (max-width: 960px) {
            .tutor-schedule-section .schedule-layout-grid {
                grid-template-columns: 1fr;
            }
        }

        @media (max-width: 640px) {
            .tutor-availability-filter,
            .tutor-schedule-section .package-price-card,
            .tutor-schedule-section .package-price-card dl {
                grid-template-columns: 1fr;
            }

            .tutor-availability-filter button {
                width: 100%;
            }
        }
    </style>
@endpush

@push('scripts')
    @include('student.schedule.partials._scripts', [
        'schedulePresetQuery' => 'mode=track&tutor_id='.$tutor['id'],
        'presetTeacherType' => $tutor['teacher_type'] ?? null,
        'hideTeacherTypeField' => true,
    ])

    <script>
        document.addEventListener('DOMContentLoaded', () => {
            const scheduleSection = document.getElementById('teacherSchedule');
            const selectedLabel = document.getElementById('selectedProgramLabel');
            const cards = document.querySelectorAll('[data-program-card]');
            const buttons = document.querySelectorAll('[data-program-select]');
            let pendingAvailabilitySelection = null;

            document.querySelectorAll('[data-availability-date]').forEach(button => {
                button.addEventListener('click', () => {
                    pendingAvailabilitySelection = {
                        date: button.dataset.availabilityDate || '',
                        start: button.dataset.availabilityStart || '',
                        end: button.dataset.availabilityEnd || '',
                    };

                    document.querySelectorAll('[data-availability-date]').forEach(item => {
                        item.classList.toggle('is-selected', item === button);
                    });

                    if (scheduleSection && !scheduleSection.classList.contains('is-hidden-until-program')) {
                        applyPendingAvailabilitySelectionWhenReady();
                        scheduleSection.scrollIntoView({ behavior: 'smooth', block: 'start' });
                        return;
                    }

                    document.getElementById('tutorPrograms')?.scrollIntoView({ behavior: 'smooth', block: 'start' });
                });
            });

            buttons.forEach(button => {
                button.addEventListener('click', () => {
                    const card = button.closest('[data-program-card]');
                    const trackId = button.dataset.trackId || card?.dataset.trackId || '';
                    const title = card?.querySelector('.course-card__title')?.textContent?.trim() || 'Program selected';

                    cards.forEach(item => item.classList.toggle('is-selected', item === card));
                    if (selectedLabel) {
                        selectedLabel.textContent = title;
                    }

                    scheduleSection?.classList.remove('is-hidden-until-program');
                    selectTutorProgram(trackId);
                    window.setTimeout(() => {
                        applyPendingAvailabilitySelectionWhenReady();
                        scheduleSection?.scrollIntoView({ behavior: 'smooth', block: 'start' });
                    }, 250);
                });
            });

            function selectTutorProgram(trackId, attempts = 0) {
                const select = document.getElementById('trackId');

                if (!select || !trackId) {
                    return;
                }

                if (![...select.options].some(option => String(option.value) === String(trackId))) {
                    if (attempts < 20) {
                        window.setTimeout(() => selectTutorProgram(trackId, attempts + 1), 150);
                    }
                    return;
                }

                select.value = String(trackId);
                select.dispatchEvent(new Event('change', { bubbles: true }));
            }

            function applyPendingAvailabilitySelectionWhenReady(attempts = 0) {
                if (!pendingAvailabilitySelection?.date) {
                    return;
                }

                chooseFirstProgramTypeOptions();

                if (!document.getElementById('track_type_id')?.value) {
                    if (attempts < 20) {
                        window.setTimeout(() => applyPendingAvailabilitySelectionWhenReady(attempts + 1), 150);
                    }
                    return;
                }

                applyPendingAvailabilitySelection();
            }

            function chooseFirstProgramTypeOptions() {
                const modeSelect = document.getElementById('program_mode');
                const audienceSelect = document.getElementById('program_audience');

                if (modeSelect && !modeSelect.value) {
                    const firstMode = document.querySelector('#programModeToggle .schedule-toggle__btn');
                    if (firstMode) {
                        modeSelect.value = firstMode.dataset.value || '';
                        modeSelect.dispatchEvent(new Event('change', { bubbles: true }));
                    }
                }

                if (audienceSelect && !audienceSelect.value) {
                    const firstAudience = document.querySelector('#programAudienceToggle .schedule-toggle__btn');
                    if (firstAudience) {
                        audienceSelect.value = firstAudience.dataset.value || '';
                        audienceSelect.dispatchEvent(new Event('change', { bubbles: true }));
                    }
                }

                if (typeof renderProgramToggles === 'function') {
                    renderProgramToggles();
                }

                if (typeof resolveTrackTypeId === 'function') {
                    resolveTrackTypeId();
                }
            }

            function applyPendingAvailabilitySelection() {
                if (!pendingAvailabilitySelection?.date) {
                    return;
                }

                const startDate = document.getElementById('startDate');
                const filterFrom = document.getElementById('filterFrom');

                if (startDate) {
                    startDate.value = pendingAvailabilitySelection.date;
                    startDate.dispatchEvent(new Event('change', { bubbles: true }));
                }

                if (filterFrom && pendingAvailabilitySelection.start) {
                    filterFrom.value = pendingAvailabilitySelection.start;
                    filterFrom.dispatchEvent(new Event('change', { bubbles: true }));
                }

                window.setTimeout(() => {
                    if (typeof searchSlots === 'function') {
                        searchSlots();
                    }
                }, 150);
            }

            window.addEventListener('schedule:slots-rendered', () => {
                selectPendingRenderedSlot();
            });

            function selectPendingRenderedSlot(attempts = 0) {
                if (!pendingAvailabilitySelection?.date || !pendingAvailabilitySelection.start) {
                    return;
                }

                const selectedStart = normalizeScheduleTime(pendingAvailabilitySelection.start);
                const matchingButton = Array.from(document.querySelectorAll('#slotResults .slot-time-btn'))
                    .find(button => button.dataset.startDate === pendingAvailabilitySelection.date
                        && normalizeScheduleTime(button.dataset.startTime) === selectedStart
                        && !button.disabled);

                if (matchingButton && typeof selectSlotFromButton === 'function') {
                    selectSlotFromButton(matchingButton);
                    matchingButton.scrollIntoView({ behavior: 'smooth', block: 'center' });
                    return;
                }

                if (attempts < 10) {
                    window.setTimeout(() => selectPendingRenderedSlot(attempts + 1), 150);
                }
            }

            function normalizeScheduleTime(value) {
                return String(value || '').slice(0, 5);
            }
        });
    </script>
@endpush