@extends('layout.layout')

@section('content')
    @php
        $availabilityDays = (int) ($filters['availability_days'] ?? 14);
        $activeAudience = collect($filters['audience'] ?? [])->map(fn($value) => (string) $value)->all();
        $activeTime = $filters['time_preference'] ?? '';
        $activeAvailability = collect($filters['availability'] ?? [])->map(fn($value) => (string) $value)->all();
        $activeGender = collect($filters['gender_id'] ?? [])->map(fn($value) => (string) $value)->all();
        $activeAccent = collect($filters['accent'] ?? [])->map(fn($value) => (string) $value)->all();
        $activeTrack = collect($filters['track_id'] ?? [])->map(fn($value) => (string) $value)->all();

        $chipUrl = function (array $changes = [], array $forget = []) {
            $query = request()->query();

            foreach ($forget as $key) {
                unset($query[$key]);
            }

            foreach ($changes as $key => $value) {
                if ($value === null || $value === '') {
                    unset($query[$key]);
                } else {
                    $query[$key] = $value;
                }
            }

            return route('student.tutors.index', $query);
        };

        $toggleUrl = function (string $key, $value) {
            $query = request()->query();
            $values = collect((array) ($query[$key] ?? []))
                ->map(fn($item) => (string) $item)
                ->filter()
                ->values();
            $value = (string) $value;

            $values = $values->contains($value)
                ? $values->reject(fn($item) => $item === $value)->values()
                : $values->push($value)->unique()->values();

            if ($values->isEmpty()) {
                unset($query[$key]);
            } else {
                $query[$key] = $values->all();
            }

            return route('student.tutors.index', $query);
        };

        $audienceLabels = [
            'Kids' => 'Kids',
            'Teens' => 'Teens',
            'Adults' => 'Adults',
        ];
    @endphp

    <div class="tutors-page" data-tutors-page>
        <div class="tutors-shell">
            <header class="tutors-head">
                <div>Choose Your Tutor</div>
                <p>Start booking by choosing the tutor first. Pick the tutor you prefer, then choose the course and
                    available times from their schedule.</p>
            </header>

            <section class="tutors-filter-card" aria-label="Tutor filters">
                <div class="tutors-filter-group">
                    <span class="tutors-filter-label">Availability</span>
                    <div class="tutors-chip-row">
                        <a href="{{ $chipUrl(['availability' => null]) }}"
                            class="tutors-chip {{ empty($activeAvailability) ? 'is-active' : '' }}">All</a>
                        <a href="{{ $toggleUrl('availability', 'available') }}"
                            class="tutors-chip {{ in_array('available', $activeAvailability, true) ? 'is-active' : '' }}">Available</a>
                        <a href="{{ $toggleUrl('availability', 'unavailable') }}"
                            class="tutors-chip {{ in_array('unavailable', $activeAvailability, true) ? 'is-active' : '' }}">Unavailable</a>
                    </div>
                </div>

                <div class="tutors-filter-group">
                    <span class="tutors-filter-label">Category</span>
                    <div class="tutors-chip-row">
                        <a href="{{ $chipUrl(['audience' => null]) }}"
                            class="tutors-chip {{ empty($activeAudience) ? 'is-active' : '' }}">All</a>
                        <a href="{{ $toggleUrl('audience', 'kids') }}"
                            class="tutors-chip {{ in_array('kids', $activeAudience, true) ? 'is-active' : '' }}">Kids</a>
                        <a href="{{ $toggleUrl('audience', 'teens') }}"
                            class="tutors-chip {{ in_array('teens', $activeAudience, true) ? 'is-active' : '' }}">Teens</a>
                        <a href="{{ $toggleUrl('audience', 'adults') }}"
                            class="tutors-chip {{ in_array('adults', $activeAudience, true) ? 'is-active' : '' }}">Adults</a>
                    </div>
                </div>

                <div class="tutors-filter-group">
                    <span class="tutors-filter-label">Preferred Study Time</span>
                    <div class="tutors-chip-row">
                        <a href="{{ $chipUrl(['time_preference' => null]) }}"
                            class="tutors-chip {{ $activeTime === '' ? 'is-active' : '' }}">Any Time</a>
                        <a href="{{ $chipUrl(['time_preference' => 'morning']) }}"
                            class="tutors-chip {{ $activeTime === 'morning' ? 'is-active' : '' }}">Morning</a>
                        <a href="{{ $chipUrl(['time_preference' => 'night']) }}"
                            class="tutors-chip {{ in_array($activeTime, ['night', 'evening'], true) ? 'is-active' : '' }}">Night</a>
                    </div>
                </div>

                <div class="tutors-filter-group">
                    <span class="tutors-filter-label">Gender</span>
                    <div class="tutors-chip-row">
                        <a href="{{ $chipUrl(['gender_id' => null]) }}"
                            class="tutors-chip {{ empty($activeGender) ? 'is-active' : '' }}">All</a>
                        @foreach($filterOptions['genders'] as $gender)
                            <a href="{{ $toggleUrl('gender_id', $gender['id']) }}"
                                class="tutors-chip {{ in_array((string) $gender['id'], $activeGender, true) ? 'is-active' : '' }}">
                                {{ $gender['name'] }}
                            </a>
                        @endforeach
                    </div>
                </div>

                @if($filterOptions['accents']->isNotEmpty())
                    <div class="tutors-filter-group">
                        <span class="tutors-filter-label">Accent</span>
                        <div class="tutors-chip-row">
                            <a href="{{ $chipUrl(['accent' => null]) }}"
                                class="tutors-chip {{ empty($activeAccent) ? 'is-active' : '' }}">All</a>
                            @foreach($filterOptions['accents'] as $accent)
                                <a href="{{ $toggleUrl('accent', $accent) }}"
                                    class="tutors-chip {{ in_array((string) $accent, $activeAccent, true) ? 'is-active' : '' }}">
                                    {{ $accent }}
                                </a>
                            @endforeach
                        </div>
                    </div>
                @endif
                @if($filterOptions['tracks']->isNotEmpty())
                    <div class="tutors-filter-group tutors-filter-group--wide">
                        <span class="tutors-filter-label">Program</span>
                        <div class="tutors-chip-row">
                            <a href="{{ $chipUrl(['track_id' => null]) }}"
                                class="tutors-chip {{ empty($activeTrack) ? 'is-active' : '' }}">All Programs</a>
                            @foreach($filterOptions['tracks'] as $track)
                                <a href="{{ $toggleUrl('track_id', $track['id']) }}"
                                    class="tutors-chip {{ in_array((string) $track['id'], $activeTrack, true) ? 'is-active' : '' }}">
                                    {{ $track['name'] }}
                                </a>
                            @endforeach
                        </div>
                    </div>
                @endif

            </section>

            <div class="tutors-list-head">
                <span>{{ $tutors->count() }} tutors available now</span>
                @if(request()->query())
                    <a href="{{ route('student.tutors.index') }}">Clear filters</a>
                @endif
            </div>

            <div class="tutors-loading" data-tutors-loading>
                @for($i = 0; $i < 6; $i++)
                    <div class="tutor-skeleton">
                        <span></span>
                        <b></b>
                        <i></i>
                        <em></em>
                    </div>
                @endfor
            </div>

            <div class="tutors-content d-none" data-tutors-content>
                @if($tutors->isEmpty())
                    <section class="tutors-empty">
                        <i class="fa-regular fa-address-card"></i>
                        <strong>No matching tutors found.</strong>
                        <p>Try changing the filters or check again after more tutor slots are added.</p>
                    </section>
                @else
                    <section class="tutors-grid">
                        @foreach($tutors as $tutor)
                            @php
                                $availability = $tutor['availability_summary'];
                                $initial = mb_substr(trim($tutor['name']), 0, 1, 'UTF-8');
                                $tags = collect($tutor['audience'])
                                    ->map(fn($audience) => $audienceLabels[$audience] ?? $audience)
                                    ->values();

                                if (($tutor['accent'] ?? '-') !== '-') {
                                    $tags->push($tutor['accent']);
                                }

                            @endphp

                            <article class="tutor-card">
                                <div class="tutor-card-main">
                                    <div class="tutor-avatar" aria-hidden="{{ !$tutor['has_photo'] ? 'true' : 'false' }}">
                                        @if($tutor['has_photo'])
                                            <img src="{{ $tutor['photo'] }}" alt="{{ $tutor['name'] }}">
                                        @else
                                            {{ $initial }}
                                        @endif
                                    </div>
                                    <div class="tutor-info">
                                        <div>{{ $tutor['name'] }} <span class="badge bg-light text-dark">{{ $tutor['teacher_type_label'] ?? 'Native-like' }}</span></div>
                                        <div class="tutor-rating">
                                            <span>{{ number_format((float) $tutor['rating'], 1) }}</span>
                                            <i class="fa-solid fa-star"></i>
                                            <span class="tutor-review-count">{{ $tutor['current_schedules_count'] }} reviews</span>
                                        </div>
                                    </div>
                                </div>

                                <div class="tutor-tags">
                                    @foreach($tags as $tag)
                                        <span>{{ $tag }}</span>
                                    @endforeach
                                </div>

                                @if(!empty($tutor['tracks']))
                                    <div class="tutor-tracks">
                                        <div class="tutor-tracks__list">
                                            @foreach($tutor['tracks'] as $track)
                                                <span>{{ $track }}</span>
                                            @endforeach
                                        </div>
                                    </div>
                                @endif

                                <div class="tutor-profile-meta">
                                    @if(($tutor['nationality'] ?? '-') !== '-')
                                        <div>
                                            <span>Nationality</span>
                                            <strong>{{ $tutor['nationality'] }}</strong>
                                        </div>
                                    @endif

                                    @if(($tutor['accent'] ?? '-') !== '-')
                                        <div>
                                            <span>Accent</span>
                                            <strong>{{ $tutor['accent'] }}</strong>
                                        </div>
                                    @endif
                                </div>

                                <div class="tutor-details">
                                    <strong>{{ $tutor['experience_years'] }} years teaching experience</strong>
                                </div>

                                <div
                                    class="tutor-availability {{ $availability['has_availability'] ? 'is-available' : 'is-empty' }}">
                                    @if($availability['has_availability'])
                                        <strong>{{ $availability['available_classes'] }} weekly available slots</strong>
                                        <small class="text-danger">
                                            {{ $availability['period_label'] ?? 'This week' }}
                                            @if(!empty($availability['period_range']))
                                                ({{ $availability['period_range'] }})
                                            @endif
                                        </small>
                                        @if(!empty($availability['first_available_date']))

                                            <div class="tutor-class-summary">
                                                <div class="d-flex flex-wrap gap-2 align-items-center">
                                                    <small class="text-success">Weekly Total</small>
                                                    <small class="text-dark">{{ $availability['total_classes'] }},</small>
                                                    <small class="text-primary">Weekly Booked / Active</small>
                                                    <small class="text-dark">{{ $availability['booked_classes'] }},</small>
                                                    <small class="text-secondary">Weekly Available</small>
                                                    <small class="text-dark">{{ $availability['available_classes'] }}</small>
                                                </div>
                                            </div>
                                            <span style="font-size: 14px;">
                                                Nearest available Time: <span
                                                    class="text-success text-bold">{{ $availability['first_available_day'] }}</span>,
                                                {{ $availability['first_available_label'] }}
                                                at {{ $availability['first_available_time'] }}
                                            </span>


                                        @else
                                            <span>Available within {{ $availabilityDays }} days</span>
                                        @endif
                                    @else
                                        <small class="text-danger">No weekly available slots</small>
                                        <small class="text-muted">
                                            {{ $availability['period_label'] ?? 'This week' }}
                                            @if(!empty($availability['period_range']))
                                                ({{ $availability['period_range'] }})
                                            @endif
                                            · Try another tutor or change the filters
                                        </small>
                                    @endif
                                </div>

                                <a href="{{ $tutor['profile_url'] }}" class="tutor-book-button">View Calendar and Book</a>
                            </article>
                        @endforeach
                    </section>
                @endif
            </div>
        </div>
    </div>


    <script>
        document.addEventListener('DOMContentLoaded', () => {
            const page = document.querySelector('[data-tutors-page]');
            const loading = page?.querySelector('[data-tutors-loading]');
            const content = page?.querySelector('[data-tutors-content]');

            window.setTimeout(() => {
                loading?.classList.add('d-none');
                content?.classList.remove('d-none');
            }, 180);
        });
    </script>
@endsection

@push('styles')


    <style>
        .tutors-page {
            min-height: 100vh;
            padding: 18px 24px 40px;
            background: #f4f6fb;
            color: #14233c;
        }

        .tutors-shell {
            margin: 0 auto;
        }

        .tutors-head {
            margin-bottom: 18px;
            text-align: left;
        }

        .tutors-head div {
            margin: 0 0 8px;
            color: #17243b;
            line-height: 1.25;
            font-weight: bold;
        }

        .tutors-head p {
            max-width: 620px;
            margin: 0;
            color: #7a8496;
            font-size: 14px;
            line-height: 1.6;
        }

        .tutors-filter-card {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
            gap: 14px 18px;
            align-items: start;
            margin-bottom: 14px;
            padding: 18px;
            border: 1px solid #e1e6ef;
            border-radius: 10px;
            background: #fff;
            box-shadow: 0 10px 32px rgba(20, 35, 60, .04);
        }

        .tutors-filter-group {
            min-width: 0;
            /* text-align: center; */
        }

        .tutors-filter-group--wide {
            grid-column: span 2;
        }

        .tutors-filter-label {
            display: block;
            margin-bottom: 8px;
            color: #7f8898;
            font-size: 13px;
            font-weight: 600;
        }

        .tutors-chip-row,
        .tutors-track-filter {
            display: flex;
            flex-wrap: wrap;
            /* justify-content: center; */
            gap: 7px;
        }

        .tutors-chip,
        .tutors-track-chip {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            min-height: 36px;
            padding: 0 12px;
            border: 1px solid #e2e7ef;
            border-radius: 999px;
            background: #fff;
            color: #536071;
            font-size: 13px;
            font-weight: bold;
            text-decoration: none;
            box-shadow: 0 4px 10px rgba(20, 35, 60, .03);
            transition: background .18s ease, color .18s ease, border-color .18s ease;
            text-align: center;
        }

        .tutors-chip:hover,
        .tutors-track-chip:hover {
            color: #14233c;
            border-color: #cbd4e3;
        }

        .tutors-chip.is-active,
        .tutors-track-chip.is-active {
            border-color: #071936;
            background: #071936;
            color: #fff;
        }

        .tutors-track-filter {
            justify-content: flex-start;
            margin: 0 0 18px;
        }

        .tutors-track-chip {
            min-height: 38px;
            padding: 0 14px;
        }

        .tutors-list-head {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 12px;
            margin: 14px 2px;
            font-size: 13px;
            color: #677386;
            font-weight: 600;
        }

        .tutors-list-head a {
            color: #235ee8;
            text-decoration: none;
        }

        .tutors-grid,
        .tutors-loading {
            display: grid;
            grid-template-columns: repeat(3, minmax(0, 1fr));
            gap: 14px;
        }

        .tutor-card,
        .tutor-skeleton,
        .tutors-empty {
            border: 1px solid #e0e6f0;
            border-radius: 10px;
            background: #fff;
            box-shadow: 0 10px 26px rgba(20, 35, 60, .045);
        }

        .tutor-card {
            min-height: 270px;
            padding: 16px;
        }

        .tutor-card-main {
            display: flex;
            align-items: flex-start;
            gap: 12px;
        }

        .tutor-avatar {
            flex: 0 0 auto;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 50px;
            height: 50px;
            border-radius: 50%;
            background: #071936;
            color: #fff;
            font-weight: bold;
            overflow: hidden;
        }

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

        .tutor-info {
            min-width: 0;
            text-align: left;
        }

        .tutor-info div {
            margin: 2px 0 8px;
            /* color: #15223a; */
            line-height: 1.35;
            font-weight: bold;
            overflow-wrap: anywhere;
        }

        .tutor-rating {
            display: inline-flex;
            align-items: center;
            gap: 5px;
            color: #f5a617;
            font-weight: bold;
        }

        .tutor-review-count {
            color: #7b8494;
            text-decoration: underline;
            text-underline-offset: 2px;
            font-weight: 600;
        }

        .tutor-tags {
            display: flex;
            flex-wrap: wrap;
            justify-content: flex-start;
            gap: 8px;
            margin: 12px 0;
        }

        .tutor-tags span {
            display: inline-flex;
            align-items: center;
            min-height: 26px;
            padding: 0 10px;
            border-radius: 999px;
            background: #eef4ff;
            color: #2460df;
            font-weight: bold;
        }

        .tutor-tracks {
            margin: -2px 0 10px;
            text-align: left;
        }

        .tutor-tracks__label {
            display: block;
            margin-bottom: 7px;
            color: #7b8494;
            font-weight: bold;
            text-transform: uppercase;
        }

        .tutor-tracks__list {
            display: flex;
            flex-wrap: wrap;
            gap: 7px;
        }

        .tutor-tracks__list span {
            display: inline-flex;
            align-items: center;
            min-height: 24px;
            padding: 0 9px;
            border-radius: 999px;
            background: #f4f6fb;
            color: #334053;
            font-weight: 600;
        }

        .tutor-profile-meta {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
            gap: 8px;
            margin: -2px 0 10px;
            text-align: left;
        }

        .tutor-profile-meta div,
        .tutor-nationality {
            display: grid;
            gap: 3px;
            min-width: 0;
            padding: 7px 9px;
            border: 1px solid #e8edf5;
            border-radius: 10px;
            background: #fbfcff;
            color: #697589;
            font-weight: 600;
        }

        .tutor-profile-meta span,
        .tutor-nationality span {
            color: #7b8494;
            font-size: 11px;
            font-weight: bold;
            text-transform: uppercase;
        }

        .tutor-profile-meta strong,
        .tutor-nationality strong {
            color: #334053;
            font-weight: bold;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        .tutor-details {
            min-height: 50px;
            color: #697589;

            line-height: 1.8;
            text-align: left;
            font-weight: 700;
        }

        .tutor-details strong {
            display: block;
            color: #334053;
            font-weight: bold;
        }

        .tutor-availability {
            min-height: 64px;
            margin: 10px 0 14px;
            padding: 11px 12px;
            border-radius: 10px;
            background: #f3f5fa;
            color: #536071;

            line-height: 1.7;
            text-align: left;
        }

        .tutor-availability strong {
            color: #1aa277;
        }

        .tutor-availability.is-empty strong {
            color: #7a8496;
        }

        .tutor-book-button {
            display: flex;
            align-items: center;
            justify-content: center;
            min-height: 44px;
            border-radius: 9px;
            background: #071936;
            color: #fff;

            font-weight: bold;
            text-decoration: none;
            transition: background .18s ease, transform .18s ease;
        }

        .tutor-book-button:hover {
            color: #fff;
            background: #1f4fd1;
            transform: translateY(-1px);
        }

        .tutors-empty {
            min-height: 260px;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            text-align: center;
            padding: 28px;
        }

        .tutors-empty i {
            color: #071936;

            margin-bottom: 12px;
        }

        .tutors-empty strong {
            color: #17243b;

        }

        .tutors-empty p {
            margin: 8px 0 0;
            color: #7a8496;

        }

        .tutor-skeleton {
            min-height: 270px;
            padding: 16px;
        }

        .tutor-skeleton span,
        .tutor-skeleton b,
        .tutor-skeleton i,
        .tutor-skeleton em {
            display: block;
            border-radius: 10px;
            background: linear-gradient(90deg, #edf1f8, #f8faff, #edf1f8);
            background-size: 220% 100%;
            animation: tutorPulse 1.2s ease-in-out infinite;
        }

        .tutor-skeleton span {
            width: 50px;
            height: 50px;
            border-radius: 50%;
        }

        .tutor-skeleton b {
            width: 60%;
            height: 18px;
            margin-top: 16px;
        }

        .tutor-skeleton i {
            width: 88%;
            height: 72px;
            margin-top: 20px;
        }

        .tutor-skeleton em {
            width: 100%;
            height: 56px;
            margin-top: 22px;
        }

        @keyframes tutorPulse {
            0% {
                background-position: 0 50%;
            }

            100% {
                background-position: 220% 50%;
            }
        }

        @media (max-width: 1100px) {
            .tutors-filter-card {
                grid-template-columns: 1fr;
            }

            .tutors-grid,
            .tutors-loading {
                grid-template-columns: repeat(2, minmax(0, 1fr));
            }
        }

        @media (max-width: 700px) {
            .tutors-page {
                padding: 16px 12px 32px;
            }

            .tutors-head div {}

            .tutors-filter-card {
                padding: 14px 12px;
                border-radius: 10px;
            }

            .tutors-filter-group--wide {
                grid-column: auto;
            }

            .tutors-chip {
                min-height: 36px;
                padding: 0 12px;

            }

            .tutors-track-filter {
                justify-content: flex-start;
                overflow-x: auto;
                flex-wrap: nowrap;
                padding-bottom: 4px;
            }

            .tutors-track-chip {
                flex: 0 0 auto;
            }

            .tutors-grid,
            .tutors-loading {
                grid-template-columns: 1fr;
            }
        }
    </style>

@endpush