@extends('layout.layout')

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

    <div class="container-fluid app-bg teacher-profile-page">
        <div class="page-shell">
            <div class="teacher-profile-shell">
                <section class="teacher-hero">
                    <div>
                        <a href="{{ url()->previous() }}" class="teacher-profile-back">
                            <i class="fa-solid fa-arrow-left"></i>
                            <span>Back</span>
                        </a>
                        <div class="fw-bold " class="teacher-profile-name">{{ $teacher['name'] ?? 'Teacher' }}</div>
                        <p class="teacher-profile-subtitle">Teacher details, your enrolled courses, submitted reviews, and shared sessions.</p>
                    </div>

                    <div class="teacher-meta-grid">
                        <div class="teacher-meta-card">
                            <span class="teacher-meta-card__label">Email</span>
                            <strong>{{ $teacher['email'] ?? '-' }}</strong>
                        </div>
                        <div class="teacher-meta-card">
                            <span class="teacher-meta-card__label">Nationality</span>
                            <strong>{{ $teacher['nationality'] ?? '-' }}</strong>
                        </div>
                        <div class="teacher-meta-card">
                            <span class="teacher-meta-card__label">Courses</span>
                            <strong>{{ count($courses) }}</strong>
                        </div>
                        <div class="teacher-meta-card">
                            <span class="teacher-meta-card__label">Reviews</span>
                            <strong>{{ count($feedbacks) }}</strong>
                        </div>
                        <div class="teacher-meta-card">
                            <span class="teacher-meta-card__label">Sessions</span>
                            <strong>{{ $teacher['bookings_count'] ?? count($schedules) }}</strong>
                        </div>
                    </div>

                    <div class="teacher-hours-card">
                        <div class="teacher-hours-card__icon">
                            <i class="fa-regular fa-clock"></i>
                        </div>
                        <div>
                            <span>Total Work Hours</span>
                            <strong>{{ number_format((float) ($teacher['worked_hours'] ?? 0), 2) }}</strong>
                        </div>
                        <b>Hours</b>
                    </div>
                </section>

                <section class="teacher-section">
                    <div class="teacher-section__head">
                        <div>
                            <div class="fw-bold ">Programs & Levels</div>
                            <p>Programs this teacher is teaching and the related levels.</p>
                        </div>
                    </div>

                    @if (!empty($teacher['teaching_tracks']))
                        <div class="teacher-track-grid">
                            @foreach ($teacher['teaching_tracks'] as $track)
                                <article class="teacher-track-card">
                                    <div class="teacher-track-card__head">
                                        <div>
                                            <span class="teacher-track-card__label">Program</span>
                                            <strong>{{ $track['name'] ?? '-' }}</strong>
                                        </div>
                                        <span class="status-pill status-pill--neutral">{{ $track['sessions_count'] ?? 0 }} levels</span>
                                    </div>

                                    @if (!empty($track['type']))
                                        <div class="teacher-track-type">{{ $track['type'] }}</div>
                                    @endif

                                    <div class="teacher-level-list">
                                        @forelse (($track['levels'] ?? []) as $level)
                                            <div class="teacher-level-pill">
                                                <span>{{ $level['name'] ?? '-' }}</span>
                                                <strong>{{ $level['sessions_count'] ?? 0 }} sessions</strong>
                                            </div>
                                        @empty
                                            <div class="teacher-empty-box">No levels found.</div>
                                        @endforelse
                                    </div>
                                </article>
                            @endforeach
                        </div>
                    @else
                        <div class="teacher-empty-box">No Programs or levels found.</div>
                    @endif
                </section>

                <section class="teacher-section">
                    <div class="teacher-section__head">
                        <div>
                            <div class="fw-bold ">Intro Video</div>
                            <p>Teacher introduction media.</p>
                        </div>
                    </div>

                    <div class="detail-card detail-card--media">
                        @if (!empty($teacher['intro_video_url']))
                            <video controls class="teacher-video">
                                <source src="{{ $teacher['intro_video_url'] }}">
                                Your browser does not support the video tag.
                            </video>
                        @else
                            <div class="teacher-empty-box">Intro video will appear here.</div>
                        @endif
                    </div>
                </section>

                <section class="teacher-section">
                    <div class="teacher-section__head">
                        <div>
                            <div class="fw-bold ">Courses</div>
                            <p>Courses you have with this teacher.</p>
                        </div>
                    </div>

                    @if (count($courses))
                        <div class="teacher-card-grid">
                            @foreach ($courses as $course)
                                <article class="detail-card">
                                    <div class="detail-card__head">
                                        <div>
                                            <div class="fw-bold ">{{ $course['name'] ?? '-' }}</div>
                                            <p>{{ ucfirst($course['type'] ?? '-') }}</p>
                                        </div>
                                        <span class="status-pill status-pill--{{ strtolower($course['status'] ?? 'unknown') }}">
                                            {{ $course['status'] ?: 'unknown' }}
                                        </span>
                                    </div>

                                    <div class="detail-pairs">
                                        <div class="detail-pair">
                                            <span>Category</span>
                                            <strong>{{ $course['category'] ?: '-' }}</strong>
                                        </div>
                                        <div class="detail-pair">
                                            <span>Level</span>
                                            <strong>{{ $course['level'] ?: '-' }}</strong>
                                        </div>
                                        <div class="detail-pair">
                                            <span>Sessions</span>
                                            <strong>{{ $course['sessions_count'] ?? 0 }}</strong>
                                        </div>
                                        <div class="detail-pair">
                                            <span>Start Date</span>
                                            <strong>{{ $course['start_date'] ?: '-' }}</strong>
                                        </div>
                                        <div class="detail-pair">
                                            <span>End Date</span>
                                            <strong>{{ $course['end_date'] ?: '-' }}</strong>
                                        </div>
                                    </div>
                                </article>
                            @endforeach
                        </div>
                    @else
                        <div class="teacher-empty-box">No courses found.</div>
                    @endif
                </section>

                <section class="teacher-section">
                    <div class="teacher-section__head">
                        <div>
                            <div class="fw-bold ">Student Reviews</div>
                            <p>Average ratings for this teacher.</p>
                        </div>
                    </div>

                    @if (count($feedbacks))
                        @php
                            $feedbackCollection = collect($feedbacks);
                            $ratingValues = $feedbackCollection->flatMap(function ($feedback) {
                                return [
                                    (float) ($feedback['admin_response_rating'] ?? 0),
                                    (float) ($feedback['quality_rating'] ?? 0),
                                    (float) ($feedback['benefit_rating'] ?? 0),
                                    (float) ($feedback['error_correction_rating'] ?? 0),
                                ];
                            })->filter(function ($value) {
                                return $value > 0;
                            });

                            $adminAvg = round($feedbackCollection->avg('admin_response_rating'), 1);
                            $qualityAvg = round($feedbackCollection->avg('quality_rating'), 1);
                            $benefitAvg = round($feedbackCollection->avg('benefit_rating'), 1);
                            $errorAvg = round($feedbackCollection->avg('error_correction_rating'), 1);
                            $overallAvg = $ratingValues->isNotEmpty() ? round($ratingValues->avg(), 1) : 0;
                        @endphp

                        <div class="review-summary-card">
                            <div class="review-summary-card__head">
                                <div class="fw-bold ">Average Rating</div>
                                <span class="status-pill status-pill--neutral">{{ count($feedbacks) }} reviews</span>
                            </div>

                            <div class="review-summary-card__body">
                                <div class="review-average-value">
                                    <span>Overall</span>
                                    <strong>{{ number_format((float) $overallAvg, 1) }}/5</strong>
                                </div>

                                <div class="review-average-list">
                                    <div>
                                        <span>Admin Response</span>
                                        <strong>{{ number_format((float) $adminAvg, 1) }}/5</strong>
                                    </div>
                                    <div>
                                        <span>Quality</span>
                                        <strong>{{ number_format((float) $qualityAvg, 1) }}/5</strong>
                                    </div>
                                    <div>
                                        <span>Benefit</span>
                                        <strong>{{ number_format((float) $benefitAvg, 1) }}/5</strong>
                                    </div>
                                    <div>
                                        <span>Error Correction</span>
                                        <strong>{{ number_format((float) $errorAvg, 1) }}/5</strong>
                                    </div>
                                </div>
                            </div>
                        </div>
                    @else
                        <div class="teacher-empty-box">No student reviews found for this teacher.</div>
                    @endif
                </section>

                <section class="teacher-section">
                    <div class="teacher-section__head">
                        <div>
                            <div class="fw-bold ">Schedule</div>
                            <p>Sessions between you and this teacher.</p>
                        </div>
                    </div>

                    @if (count($schedules))
                        <div class="session-table-wrap">
                            <table class="session-table">
                                <thead>
                                    <tr>
                                        <th>Course</th>
                                        <th>Session</th>
                                        <th>Day</th>
                                        <th>Date</th>
                                        <th>Time</th>
                                        <th>Level</th>
                                        <th>Status</th>
                                        <th>Session Link</th>
                                        <th>ID</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @foreach ($schedules as $session)
                                        <tr>
                                            <td>{{ $session['course_name'] ?: '-' }}</td>
                                            <td>{{ $session['session_number'] ? 'Session '.$session['session_number'] : '-' }}</td>
                                            <td>{{ $session['day_name'] ?: '-' }}</td>
                                            <td>{{ $session['date'] ?: '-' }}</td>
                                            <td>{{ $session['start_time'] ?: '-' }} - {{ $session['end_time'] ?: '-' }}</td>
                                            <td>{{ $session['level'] ?: '-' }}</td>
                                            <td>
                                                <span class="status-pill status-pill--{{ strtolower($session['status'] ?: 'neutral') }}">
                                                    {{ $session['status'] ?: 'scheduled' }}
                                                </span>
                                            </td>
                                            <td>
                                                @if(!empty($session['meeting_url']))
                                                    <a href="{{ $session['meeting_url'] }}" target="_blank" rel="noopener" class="btn btn-sm btn-outline-success">Join</a>
                                                @else
                                                    -
                                                @endif
                                            </td>
                                            <td>#{{ $session['session_id'] ?? '-' }}</td>
                                        </tr>
                                    @endforeach
                                </tbody>
                            </table>
                        </div>
                    @else
                        <div class="teacher-empty-box">No shared sessions found.</div>
                    @endif
                </section>

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

@push('styles')
    <style>
        .teacher-profile-page {
            background: #f6f8fb;
            font-size: 0.92rem;
            font-weight: 400;
        }

        .teacher-profile-page div,
        .teacher-profile-page strong,
        .teacher-profile-page th,
        .teacher-profile-page b {
            font-weight: 400;
        }

        .teacher-profile-shell {
            display: grid;
            gap: 1rem;
        }

        .teacher-hero,
        .teacher-section,
        .detail-card {
            border: 1px solid #e5e7eb;
            border-radius: 16px;
            background: #fff;
            box-shadow: 0 10px 30px rgba(15, 23, 42, 0.06);
        }

        .teacher-hero,
        .teacher-section {
            padding: 1.25rem;
        }

        .teacher-profile-back {
            display: inline-flex;
            align-items: center;
            gap: 0.45rem;
            color: #071b3d;
            font-size: 0.78rem;
            font-weight: 400;
            text-decoration: none;
            margin-bottom: 0.65rem;
        }

        .teacher-profile-name {
            margin: 0;
            color: #111827;
            font-size: 1rem;
            font-weight: 400;
        }

        .teacher-profile-subtitle {
            margin: 0.3rem 0 1rem;
            color: #64748b;
        }

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

        .teacher-meta-card,
        .detail-card {
            min-width: 0;
        }

        .teacher-meta-card {
            grid-column: span 3 / span 3;
            border: 1px solid #e5e7eb;
            border-radius: 14px;
            background: #f8fafc;
            padding: 0.9rem 1rem;
        }

        .teacher-meta-card__label {
            display: block;
            color: #64748b;
            font-size: 0.68rem;
            font-weight: 400;
            margin-bottom: 0.25rem;
            text-transform: uppercase;
        }

        .teacher-meta-card strong {
            color: #111827;
            font-size: 0.88rem;
            overflow-wrap: anywhere;
        }

        .teacher-hours-card {
            display: flex;
            align-items: center;
            flex-wrap: wrap;
            gap: 0.9rem;
            margin-top: 1rem;
            border: 1px solid #bfdbfe;
            border-radius: 14px;
            background: #eff6ff;
            padding: 1rem;
        }

        .teacher-hours-card__icon {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 44px;
            height: 44px;
            border-radius: 12px;
            background: #071b3d;
            color: #fff;
            flex: 0 0 auto;
        }

        .teacher-hours-card div:nth-child(2) {
            display: grid;
            gap: 0.15rem;
            min-width: 0;
        }

        .teacher-hours-card span,
        .teacher-hours-card small {
            color: #475569;
            font-size: 0.72rem;
        }

        .teacher-hours-card span {
            text-transform: uppercase;
        }

        .teacher-hours-card strong {
            color: #111827;
            font-size: 1.55rem;
            line-height: 1;
        }

        .teacher-hours-card b {
            margin-inline-start: auto;
            border-radius: 999px;
            background: #dbeafe;
            color: #0f1724;
            padding: 0.35rem 0.8rem;
            font-size: 0.72rem;
            white-space: nowrap;
        }

        .teacher-section__head {
            display: flex;
            align-items: flex-start;
            justify-content: space-between;
            gap: 1rem;
            margin-bottom: 1rem;
        }

        .teacher-section__head div {
            margin: 0;
            color: #111827;
            font-size: 0.9rem;
            font-weight: 400;
        }

        .teacher-section__head p {
            margin: 0.2rem 0 0;
            color: #64748b;
            font-size: 0.8rem;
        }

        .detail-card {
            grid-column: span 6 / span 6;
            padding: 1rem;
        }

        .detail-card--media,
        .review-card--grouped {
            grid-column: span 12 / span 12;
        }

        .detail-card--media {
            max-width: 560px;
            width: 100%;
            margin-inline: auto;
        }

        .detail-card__head {
            display: flex;
            align-items: flex-start;
            justify-content: space-between;
            gap: 1rem;
            margin-bottom: 1rem;
        }

        .detail-card__head div {
            margin: 0;
            color: #111827;
            font-size: 0.92rem;
            font-weight: 400;
        }

        .detail-card__head p {
            margin: 0.2rem 0 0;
            color: #64748b;
            font-size: 0.78rem;
        }

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

        .teacher-track-card {
            border: 1px solid #dbeafe;
            border-radius: 14px;
            background: #f8fbff;
            padding: 1rem;
            display: grid;
            gap: 0.85rem;
            min-width: 0;
        }

        .teacher-track-card__head {
            display: flex;
            align-items: flex-start;
            justify-content: space-between;
            gap: 0.85rem;
        }

        .teacher-track-card__label,
        .teacher-track-type {
            color: #64748b;
            font-size: 0.68rem;
            text-transform: uppercase;
        }

        .teacher-track-card__head strong {
            display: block;
            color: #111827;
            font-size: 0.95rem;
            margin-top: 0.25rem;
            overflow-wrap: anywhere;
        }

        .teacher-track-type {
            width: fit-content;
            border: 1px solid #e5e7eb;
            border-radius: 999px;
            background: #fff;
            padding: 0.28rem 0.65rem;
        }

        .teacher-level-list {
            display: flex;
            flex-wrap: wrap;
            gap: 0.55rem;
        }

        .teacher-level-pill {
            display: inline-flex;
            align-items: center;
            gap: 0.5rem;
            border: 1px solid #bfdbfe;
            border-radius: 999px;
            background: #fff;
            color: #1e3a8a;
            min-height: 32px;
            padding: 0.3rem 0.45rem 0.3rem 0.75rem;
            max-width: 100%;
        }

        .teacher-level-pill span {
            font-size: 0.78rem;
            overflow-wrap: anywhere;
        }

        .teacher-level-pill strong {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            min-width: 64px;
            height: 24px;
            border-radius: 999px;
            background: #dbeafe;
            color: #0f1724;
            font-size: 0.68rem;
            padding: 0 0.5rem;
            white-space: nowrap;
        }

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

        .detail-pair {
            border: 1px solid #e5e7eb;
            border-radius: 12px;
            background: #f8fafc;
            padding: 0.75rem 0.8rem;
        }

        .detail-pair span,
        .review-note span {
            display: block;
            color: #64748b;
            font-size: 0.64rem;
            font-weight: 400;
            text-transform: uppercase;
            margin-bottom: 0.28rem;
        }

        .detail-pair strong {
            color: #111827;
            font-size: 0.82rem;
            font-weight: 400;
            overflow-wrap: anywhere;
        }

        .status-pill {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            min-height: 28px;
            padding: 0.25rem 0.7rem;
            border-radius: 999px;
            font-size: 0.66rem;
            font-weight: 400;
            white-space: nowrap;
            background: #f1f5f9;
            color: #475569;
        }

        .status-pill--active,
        .status-pill--scheduled {
            background: #ecfdf5;
            color: #047857;
        }

        .status-pill--completed {
            background: #eff6ff;
            color: #0f1724;
        }

        .status-pill--cancelled,
        .status-pill--canceled,
        .status-pill--inactive {
            background: #fef2f2;
            color: #b91c1c;
        }

        .status-pill--neutral,
        .status-pill--unknown {
            background: #f3f4f6;
            color: #4b5563;
        }

        .review-group-list {
            display: grid;
            gap: 1rem;
        }

        .review-summary-card {
            border: 1px solid #dbeafe;
            border-radius: 16px;
            background: #f8fbff;
            padding: 1rem;
            display: grid;
            gap: 1rem;
        }

        .review-summary-card__head {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 1rem;
        }

        .review-summary-card__head div {
            margin: 0;
            color: #111827;
            font-size: 0.9rem;
            font-weight: 400;
        }

        .review-summary-card__body {
            display: grid;
            gap: 1rem;
        }

        .review-average-value {
            display: grid;
            gap: 0.3rem;
        }

        .review-average-value span {
            color: #64748b;
            font-size: 0.72rem;
            font-weight: 400;
            text-transform: uppercase;
        }

        .review-average-value strong {
            color: #111827;
            font-size: 1.5rem;
            line-height: 1;
            font-weight: 400;
        }

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

        .review-average-list div {
            border: 1px solid #e5e7eb;
            border-radius: 12px;
            background: #fff;
            padding: 0.75rem 0.85rem;
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 0.75rem;
        }

        .review-average-list span {
            color: #64748b;
            font-size: 0.72rem;
            font-weight: 400;
        }

        .review-average-list strong {
            color: #111827;
            font-size: 0.8rem;
            font-weight: 400;
            white-space: nowrap;
        }

        .review-rating-grid {
            display: grid;
            grid-template-columns: repeat(4, minmax(0, 1fr));
            gap: 0.85rem;
        }

        .review-rating-box {
            border: 1px solid #e5e7eb;
            border-radius: 12px;
            background: #f8fafc;
            padding: 0.75rem 0.8rem;
        }

        .review-rating-box span {
            display: block;
            color: #64748b;
            font-size: 0.7rem;
            font-weight: 400;
            margin-bottom: 0.35rem;
        }

        .review-stars {
            color: #f59e0b;
            display: flex;
            gap: 0.2rem;
            flex-wrap: wrap;
            align-items: center;
        }

        .review-score {
            color: #111827;
            font-size: 0.7rem;
            margin-inline-start: 0.35rem;
            font-weight: 400;
        }

        .review-entries {
            display: grid;
            gap: 0.75rem;
            margin-top: 1rem;
        }

        .review-entry-row {
            border: 1px solid #e5e7eb;
            border-radius: 12px;
            background: #f8fafc;
            padding: 0.85rem;
        }

        .review-entry-row__meta {
            display: flex;
            flex-wrap: wrap;
            gap: 0.75rem;
            align-items: center;
            color: #64748b;
            font-size: 0.76rem;
            margin-bottom: 0.45rem;
        }

        .review-entry-row__meta strong {
            color: #111827;
            font-size: 0.8rem;
            font-weight: 400;
        }

        .review-entry-row__text {
            margin: 0;
            color: #111827;
            line-height: 1.55;
            font-size: 0.82rem;
        }

        .review-entry-row__text--muted {
            color: #6b7280;
        }

        .session-table-wrap {
            width: 100%;
            overflow-x: auto;
            border: 1px solid #e5e7eb;
            border-radius: 14px;
            background: #fff;
        }

        .session-table {
            width: 100%;
            min-width: 860px;
            border-collapse: separate;
            border-spacing: 0;
        }

        .session-table th,
        .session-table td {
            padding: 0.85rem 0.9rem;
            border-bottom: 1px solid #e5e7eb;
            text-align: left;
            vertical-align: middle;
        }

        .session-table th {
            background: #f8fafc;
            color: #475569;
            font-size: 0.76rem;
            font-weight: 400;
            text-transform: uppercase;
        }

        .session-table td {
            color: #111827;
            font-size: 0.88rem;
        }

        .session-table tbody tr:last-child td {
            border-bottom: 0;
        }

        .teacher-video {
            width: 100%;
            max-height: 315px;
            aspect-ratio: 16 / 9;
            object-fit: contain;
            border-radius: 14px;
            background: #000;
        }

        .teacher-empty-box {
            border: 1px dashed #cbd5e1;
            background: #f8fafc;
            color: #64748b;
            border-radius: 14px;
            padding: 1rem;
            text-align: center;
        }

        @media (max-width: 991.98px) {
            .teacher-meta-card,
            .detail-card {
                grid-column: span 12 / span 12;
            }

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

            .teacher-track-grid {
                grid-template-columns: minmax(0, 1fr);
            }
        }

        @media (max-width: 575.98px) {
            .teacher-hero,
            .teacher-section {
                padding: 1rem;
            }

            .teacher-hours-card {
                align-items: flex-start;
            }

            .teacher-hours-card b {
                margin-inline-start: 0;
            }

            .detail-card--media {
                max-width: 100%;
            }

            .detail-pairs,
            .review-rating-grid {
                grid-template-columns: minmax(0, 1fr);
            }
        }
    </style>
@endpush