@extends('layout.layout')

@section('content')
    @php
        $quickParams = array_filter([
            'admin_id' => $filters['admin_id'] ?? null,
            'target_rate' => $targetRate,
        ], fn($value) => !is_null($value) && $value !== '');

        $tabItems = [
            ['key' => 'overview', 'label' => 'Overview'],
            ['key' => 'expectation', 'label' => 'Expectation'],
            ['key' => 'student-count', 'label' => 'Student Count'],
            ['key' => 'revenue', 'label' => 'Revenue'],
            ['key' => 'wasted-hours', 'label' => 'Wasted Hours'],
            ['key' => 'activities', 'label' => 'Activities'],
            ['key' => 'issues', 'label' => 'Issues'],
        ];
    @endphp

    <div class="container-fluid py-3">
        <style>
            .report-shell {
                background: #f8f9fb;
                border: 1px solid #e5e7eb;
                border-radius: 20px;
                padding: 18px;
            }

            .report-box,
            .report-sidebar,
            .report-card {
                background: #fff;
                border: 1px solid #e5e7eb;
                border-radius: 18px;
                box-shadow: 0 8px 20px rgba(15, 23, 42, .04);
            }

            .report-box {
                padding: 18px;
            }

            .report-sidebar {
                padding: 14px;
                position: sticky;
                top: 90px;
            }

            .tab-link {
                width: 100%;
                text-align: left;
                border: 1px solid #e5e7eb;
                background: #fff;
                color: #111827;
                border-radius: 14px;
                padding: 12px 14px;
                margin-bottom: 10px;
                font-weight: 600;
            }

            .tab-link.active {
                background: #111827;
                border-color: #111827;
                color: #fff;
            }

            .tab-pane-panel {
                display: none;
            }

            .tab-pane-panel.active {
                display: block;
            }

            .metric-tile,
            .solution-snippet {
                display: block;
                background: #fff;
                border: 1px solid #e5e7eb;
                border-radius: 16px;
                padding: 16px;
                color: inherit;
                text-decoration: none;
            }

            .metric-tile:hover,
            .solution-snippet:hover {
                color: inherit;
                border-color: #cbd5e1;
            }

            .report-card .card-header {
                background: #fff;
                border-bottom: 1px solid #f1f5f9;
                border-top-left-radius: 18px;
                border-top-right-radius: 18px;
            }

            .rank-row {
                display: flex;
                align-items: center;
                justify-content: space-between;
                gap: 16px;
                padding: 12px 0;
                border-bottom: 1px solid #eef2f7;
                color: inherit;
                text-decoration: none;
            }

            .rank-row:last-child {
                border-bottom: 0;
            }

            .rank-bar {
                height: 8px;
                border-radius: 999px;
                background: #e5e7eb;
                overflow: hidden;
                flex: 1;
            }

            .rank-bar>span {
                display: block;
                height: 100%;
                background: #475569;
            }

            .report-toolbar {
                width: 100%;
                max-width: 760px;
            }

            .quick-filters {
                display: flex;
                flex-wrap: wrap;
                gap: 8px;
            }

            .chart-wrap {
                position: relative;
                width: 100%;
                min-height: 280px;
            }

            .chart-wrap--sm {
                min-height: 220px;
            }

            .progress-line {
                height: 10px;
                background: #e5e7eb;
                border-radius: 999px;
                overflow: hidden;
            }

            .progress-line>span {
                display: block;
                height: 100%;
                background: #111827;
                border-radius: inherit;
            }

            .student-detail-toggle {
                width: 100%;
                text-align: left;
                cursor: pointer;
            }

            button.student-detail-toggle {
                appearance: none;
            }

            .student-detail-toggle.active {
                border-color: #111827;
                box-shadow: inset 0 0 0 1px #111827;
                background: #f8fafc;
            }

            .student-detail-toggle .metric-count {
                font-size: 2rem;
                font-weight: 700;
                line-height: 1;
            }

            .student-detail-panel {
                display: none;
            }

            .student-detail-panel.active {
                display: block;
            }

            .booking-student-card {
                border: 1px solid #e5e7eb;
                border-radius: 16px;
                padding: 14px;
                background: #fff;
            }

            .booking-accordion .accordion-item {
                border: 1px solid #e5e7eb;
                border-radius: 16px;
                overflow: hidden;
                margin-bottom: 12px;
            }

            .booking-accordion .accordion-button {
                background: #fff;
                box-shadow: none;
                gap: 12px;
                align-items: center;
            }

            .booking-accordion .accordion-button:not(.collapsed) {
                background: #f8fafc;
                color: #111827;
            }

            .booking-accordion .accordion-body {
                background: #fcfcfd;
            }

            .booking-pill {
                display: inline-flex;
                align-items: center;
                padding: 4px 10px;
                border-radius: 999px;
                font-size: 12px;
                background: #f8fafc;
                border: 1px solid #e2e8f0;
                color: #334155;
            }

            @media(max-width:991.98px) {
                .report-sidebar {
                    position: static;
                }
            }

            @media(max-width:767.98px) {
                .report-shell {
                    padding: 14px;
                }

                .rank-row {
                    flex-wrap: wrap;
                    align-items: flex-start;
                }

                .student-detail-toggle .metric-count {
                    font-size: 1.6rem;
                }

                .report-toolbar {
                    max-width: 100%;
                }
            }
        </style>

        <div class="report-shell">
            <div class="report-box mb-3">
                <div class="d-flex flex-wrap justify-content-between align-items-start gap-3">
                    <div>
                        <div class="small text-uppercase mb-2">Retention Control Center</div>
                        <div class="h4 mb-2">Retention Reports Dashboard</div>
                        <p class="mb-0">
                            {{ $fromDate->format('M d, Y') }} - {{ $toDate->format('M d, Y') }}
                            <span class="mx-2">|</span>
                            {{ $selectedAdmin ? ($selectedAdmin->full_name ?: trim(($selectedAdmin->first_name ?? '') . ' ' . ($selectedAdmin->last_name ?? ''))) : 'All retention admins' }}
                        </p>
                    </div>

                    <div class="report-toolbar">
                        <div class="mb-3">
                            <form method="GET" action="{{ route('reports.index') }}" class="row g-2 align-items-end">
                                <input type="hidden" name="target_rate" value="{{ $targetRate }}">
                                <div class="col-sm-3">
                                    <label class="form-label small mb-1">From</label>
                                    <input type="date" name="from" value="{{ $filters['from'] }}" class="form-control">
                                </div>
                                <div class="col-sm-3">
                                    <label class="form-label small mb-1">To</label>
                                    <input type="date" name="to" value="{{ $filters['to'] }}" class="form-control">
                                </div>
                                <div class="col-sm-4">
                                    <label class="form-label small mb-1">Admin</label>
                                    @if ($selectedAdminId && auth()->user()->staff?->jobTitle?->slug === 'admin')
                                        <input type="hidden" name="admin_id" value="{{ $selectedAdminId }}">
                                        <input type="text"
                                            value="{{ $selectedAdmin->full_name ?: trim(($selectedAdmin->first_name ?? '') . ' ' . ($selectedAdmin->last_name ?? '')) }}"
                                            class="form-control" disabled>
                                    @else
                                        <select name="admin_id" class="form-select">
                                            <option value="">All admins</option>
                                            @foreach ($adminOptions as $admin)
                                                <option value="{{ $admin->user_id }}" {{ (string) $selectedAdminId === (string) $admin->user_id ? 'selected' : '' }}>
                                                    {{ $admin->full_name ?: trim(($admin->first_name ?? '') . ' ' . ($admin->last_name ?? '')) }}
                                                </option>
                                            @endforeach
                                        </select>
                                    @endif
                                </div>
                                <div class="col-sm-2">
                                    <button type="submit" class="btn btn-dark">Apply</button>
                                </div>
                            </form>
                        </div>

                        <div class="quick-filters">
                            <a href="{{ route('reports.index', array_merge($quickParams, ['preset' => 'today'])) }}"
                                class="btn btn-sm {{ $preset === 'today' ? 'btn-dark' : 'btn-outline-secondary' }}">Today</a>
                            <a href="{{ route('reports.index', array_merge($quickParams, ['preset' => 'last7'])) }}"
                                class="btn btn-sm {{ $preset === 'last7' ? 'btn-dark' : 'btn-outline-secondary' }}">Last 7
                                Days</a>
                            <a href="{{ route('reports.index', array_merge($quickParams, ['preset' => 'last30'])) }}"
                                class="btn btn-sm {{ $preset === 'last30' ? 'btn-dark' : 'btn-outline-secondary' }}">Last 30
                                Days</a>
                            <a href="{{ route('reports.index') }}" class="btn btn-sm btn-outline-secondary">Reset</a>
                        </div>
                    </div>
                </div>
            </div>

            <div class="row g-3">
                <div class="col-lg-3">
                    <div class="report-sidebar">
                        @foreach ($tabItems as $item)
                            <button type="button" class="tab-link {{ $loop->first ? 'active' : '' }}"
                                data-tab="{{ $item['key'] }}">{{ $item['label'] }}</button>
                        @endforeach
                    </div>
                </div>

                <div class="col-lg-9">
                    <div id="tab-overview" class="tab-pane-panel active">
                        <div class="row g-3 mb-3">
                            @foreach ($overviewCards as $card)
                                <div class="col-md-6 col-xl-3">
                                    <div class="metric-tile h-100">
                                        <div class="small text-uppercase">{{ $card['label'] }}</div>
                                        <div class="display-6 fw-bold">{{ $card['value'] }}</div>
                                    </div>
                                </div>
                            @endforeach
                        </div>

                        <div class="row g-3 mb-3">
                            @foreach ($overviewHighlights as $highlight)
                                <div class="col-md-4">
                                    <div class="metric-tile h-100">
                                        <div class="small text-uppercase mb-2">{{ $highlight['label'] }}</div>
                                        <div class="h4 mb-1">{{ $highlight['value'] }}</div>
                                    </div>
                                </div>
                            @endforeach
                        </div>

                        <div class="row g-3">
                            <div class="col-xl-8">
                                <div class="report-card h-100">
                                    <div class="card-header pt-3 px-3">
                                        <div class="mb-1">Retention Trend</div>
                                    </div>
                                    <div class="card-body p-3">
                                        <div class="chart-wrap"><canvas id="trendChart"></canvas></div>
                                    </div>
                                </div>
                            </div>

                            <div class="col-xl-4">
                                <div class="report-card h-100">
                                    <div class="card-header pt-3 px-3">
                                        <div class="mb-1">Overview</div>
                                    </div>
                                    <div class="card-body px-3 pb-3">
                                        @foreach ($snapshotItems as $item)
                                            <div class="rank-row">
                                                <span>{{ $item['label'] }}</span>
                                                <span class="badge bg-secondary">{{ $item['value'] }}</span>
                                            </div>
                                        @endforeach
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div id="tab-expectation" class="tab-pane-panel">
                        <div class="row g-3">
                            <div class="col-xl-7">
                                <div class="report-card h-100">
                                    <div class="card-header pt-3 px-3">
                                        <div class="mb-1">Expectation Summary</div>
                                    </div>
                                    <div class="card-body p-3">
                                        <div class="chart-wrap"><canvas id="expectationChart"></canvas></div>
                                    </div>
                                </div>
                            </div>

                            <div class="col-xl-5">
                                <div class="report-card h-100">
                                    <div class="card-header pt-3 px-3 d-flex flex-wrap justify-content-between align-items-center gap-2">
                                        <div class="mb-1">Expectation KPIs</div>
                                        <form method="GET" action="{{ route('reports.index') }}"
                                            class="d-flex align-items-center gap-2"
                                            id="expectationTargetForm">
                                            <input type="hidden" name="from" value="{{ $filters['from'] }}">
                                            <input type="hidden" name="to" value="{{ $filters['to'] }}">
                                            @if ($selectedAdminId)
                                                <input type="hidden" name="admin_id" value="{{ $selectedAdminId }}">
                                            @endif
                                            <label for="expectationTargetRate" class="small mb-0 text-nowrap">Target %</label>
                                            <input type="number" min="1" max="100" name="target_rate"
                                                value="{{ $targetRate }}" class="form-control form-control-sm"
                                                id="expectationTargetRate" data-initial-value="{{ $targetRate }}"
                                                style="width: 96px;">
                                        </form>
                                    </div>
                                    <div class="card-body p-3">
                                        @foreach ($sections['expectation']['cards'] as $item)
                                            <div class="metric-tile mb-3">
                                                <div class="small">{{ $item['label'] }}</div>
                                                <div class="h4 mb-0">{{ $item['value'] }}</div>
                                            </div>
                                        @endforeach

                                        <div class="mt-3">
                                            <div class="d-flex justify-content-between mb-2">
                                                <span class="small">Progress Against Target</span>
                                                <strong>{{ $sections['expectation']['progress'] }}%</strong>
                                            </div>
                                            <div class="progress-line"><span
                                                    style="width: {{ $sections['expectation']['progress_width'] }}%"></span></div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div id="tab-student-count" class="tab-pane-panel">
                        <div class="row g-3 mb-3">
                            <div class="col-xl-6">
                                <div class="report-card h-100">
                                    <div class="card-header pt-3 px-3">
                                        <div class="mb-1">Student Count Split</div>
                                    </div>
                                    <div class="card-body p-3">
                                        <div class="chart-wrap chart-wrap--sm"><canvas id="studentChart"></canvas></div>
                                    </div>
                                </div>
                            </div>

                            <div class="col-xl-6">
                                <div class="report-card h-100">
                                    <div class="card-header pt-3 px-3">
                                        <div class="mb-1">Student Count Details</div>
                                    </div>
                                    <div class="card-body p-3">
                                        @foreach ($sections['student_count']['cards'] as $item)
                                            <button type="button"
                                                class="metric-tile student-detail-toggle mb-3 {{ $loop->first ? 'active' : '' }}"
                                                data-student-detail-target="{{ $item['key'] }}">
                                                <div class="d-flex justify-content-between align-items-start gap-3">
                                                    <div>
                                                        <div class="small">{{ $item['label'] }}</div>
                                                        <div class="small text-muted mt-2">{{ $item['meta'] }}</div>
                                                        <div class="small text-muted mt-2">{{ $item['hint'] }}</div>
                                                    </div>
                                                    <div class="metric-count">{{ $item['value'] }}</div>
                                                </div>
                                            </button>
                                        @endforeach
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="row g-3">
                            <div class="col-12">
                                <div class="report-card">
                                    <div class="card-header pt-3 px-3">
                                        <div class="mb-1">Booking Details</div>
                                    </div>
                                    <div class="card-body p-3">
                                        @foreach ($studentBookingDetails as $detailKey => $detailGroup)
                                            <div class="student-detail-panel {{ $loop->first ? 'active' : '' }}"
                                                data-student-detail-panel="{{ $detailKey }}">
                                                <div class="d-flex flex-wrap justify-content-between align-items-center gap-2 mb-3">
                                                    <div>
                                                        <div class="h5 mb-1">{{ $detailGroup['label'] }}</div>
                                                        <div class="small text-muted">
                                                            {{ number_format($detailGroup['students_count']) }} unique students
                                                            <span class="mx-1">|</span>
                                                            {{ number_format($detailGroup['bookings_count']) }} bookings
                                                        </div>
                                                    </div>
                                                </div>

                                                @forelse ($detailGroup['items'] as $category)
                                                    @php
                                                        $categoryItemId = $detailKey . '-category-' . $loop->index;
                                                        $categoryHeadingId = 'heading-' . $categoryItemId;
                                                        $categoryCollapseId = 'collapse-' . $categoryItemId;
                                                    @endphp
                                                    <div class="accordion booking-accordion mb-3"
                                                        id="accordion-{{ $categoryItemId }}">
                                                        <div class="accordion-item">
                                                            <h2 class="accordion-header" id="{{ $categoryHeadingId }}">
                                                                <button class="accordion-button {{ $loop->first ? '' : 'collapsed' }}"
                                                                    type="button" data-bs-toggle="collapse"
                                                                    data-bs-target="#{{ $categoryCollapseId }}"
                                                                    aria-expanded="{{ $loop->first ? 'true' : 'false' }}"
                                                                    aria-controls="{{ $categoryCollapseId }}">
                                                                    <span class="fw-semibold">{{ $category['label'] }}</span>
                                                                    <span class="booking-pill">{{ number_format($category['bookings_count']) }} bookings</span>
                                                                    <span class="booking-pill">{{ number_format($category['students_count']) }} unique students</span>
                                                                </button>
                                                            </h2>
                                                            <div id="{{ $categoryCollapseId }}"
                                                                class="accordion-collapse collapse {{ $loop->first ? 'show' : '' }}"
                                                                aria-labelledby="{{ $categoryHeadingId }}">
                                                                <div class="accordion-body">
                                                                    @foreach ($category['tracks'] as $track)
                                                                        @php
                                                                            $trackItemId = $categoryItemId . '-track-' . $loop->index;
                                                                            $trackHeadingId = 'heading-' . $trackItemId;
                                                                            $trackCollapseId = 'collapse-' . $trackItemId;
                                                                        @endphp
                                                                        <div class="accordion booking-accordion mb-3"
                                                                            id="accordion-{{ $trackItemId }}">
                                                                            <div class="accordion-item">
                                                                                <h2 class="accordion-header"
                                                                                    id="{{ $trackHeadingId }}">
                                                                                    <button
                                                                                        class="accordion-button {{ $loop->first ? '' : 'collapsed' }}"
                                                                                        type="button"
                                                                                        data-bs-toggle="collapse"
                                                                                        data-bs-target="#{{ $trackCollapseId }}"
                                                                                        aria-expanded="{{ $loop->first ? 'true' : 'false' }}"
                                                                                        aria-controls="{{ $trackCollapseId }}">
                                                                                        <span class="fw-semibold">{{ $track['label'] }}</span>
                                                                                        <span class="booking-pill">{{ number_format($track['bookings_count']) }} bookings</span>
                                                                                        <span class="booking-pill">{{ number_format($track['students_count']) }} unique students</span>
                                                                                    </button>
                                                                                </h2>
                                                                                <div id="{{ $trackCollapseId }}"
                                                                                    class="accordion-collapse collapse {{ $loop->first ? 'show' : '' }}"
                                                                                    aria-labelledby="{{ $trackHeadingId }}">
                                                                                    <div class="accordion-body">
                                                                                        @foreach ($track['levels'] as $level)
                                                                                            @php
                                                                                                $levelItemId = $trackItemId . '-level-' . $loop->index;
                                                                                                $levelHeadingId = 'heading-' . $levelItemId;
                                                                                                $levelCollapseId = 'collapse-' . $levelItemId;
                                                                                            @endphp
                                                                                            <div class="accordion booking-accordion mb-3"
                                                                                                id="accordion-{{ $levelItemId }}">
                                                                                                <div class="accordion-item">
                                                                                                    <h2 class="accordion-header"
                                                                                                        id="{{ $levelHeadingId }}">
                                                                                                        <button
                                                                                                            class="accordion-button {{ $loop->first ? '' : 'collapsed' }}"
                                                                                                            type="button"
                                                                                                            data-bs-toggle="collapse"
                                                                                                            data-bs-target="#{{ $levelCollapseId }}"
                                                                                                            aria-expanded="{{ $loop->first ? 'true' : 'false' }}"
                                                                                                            aria-controls="{{ $levelCollapseId }}">
                                                                                                            <span class="fw-semibold">{{ $level['label'] }}</span>
                                                                                                            <span class="booking-pill">{{ number_format($level['bookings_count']) }} bookings</span>
                                                                                                            <span class="booking-pill">{{ number_format($level['students_count']) }} unique students</span>
                                                                                                        </button>
                                                                                                    </h2>
                                                                                                    <div id="{{ $levelCollapseId }}"
                                                                                                        class="accordion-collapse collapse {{ $loop->first ? 'show' : '' }}"
                                                                                                        aria-labelledby="{{ $levelHeadingId }}">
                                                                                                        <div class="accordion-body">
                                                                                                            <div class="d-grid gap-3">
                                                                                                                @foreach ($level['students'] as $studentBooking)
                                                                                                                    <div class="booking-student-card">
                                                                                                                        <div class="d-flex flex-wrap justify-content-between align-items-start gap-2">
                                                                                                                            <div>
                                                                                                                                <div class="fw-semibold">{{ $studentBooking['student_name'] }}</div>
                                                                                                                                <div class="small text-muted">Student ID: #{{ $studentBooking['student_id'] }}</div>
                                                                                                                            </div>
                                                                                                                            <div class="d-flex flex-wrap gap-2 justify-content-end">
                                                                                                                                <span class="booking-pill">{{ $studentBooking['course_name'] }}</span>
                                                                                                                                <span class="booking-pill">{{ $studentBooking['track_type'] }}</span>
                                                                                                                            </div>
                                                                                                                        </div>
                                                                                                                        <div class="small text-muted mt-3">Teacher: {{ $studentBooking['teacher_name'] }}</div>
                                                                                                                        <div class="small text-muted">Booking dates: {{ $studentBooking['start_date'] }} - {{ $studentBooking['end_date'] }}</div>
                                                                                                                    </div>
                                                                                                                @endforeach
                                                                                                            </div>
                                                                                                        </div>
                                                                                                    </div>
                                                                                                </div>
                                                                                            </div>
                                                                                        @endforeach
                                                                                    </div>
                                                                                </div>
                                                                            </div>
                                                                        </div>
                                                                    @endforeach
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                @empty
                                                    <div class="text-muted">{{ $detailGroup['empty_state'] }}</div>
                                                @endforelse
                                            </div>
                                        @endforeach
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div id="tab-revenue" class="tab-pane-panel">
                        <div class="row g-3">
                            <div class="col-xl-7">
                                <div class="report-card h-100">
                                    <div class="card-header pt-3 px-3">
                                        <div class="mb-1">Revenue Trend</div>
                                    </div>
                                    <div class="card-body p-3">
                                        <div class="chart-wrap"><canvas id="revenueChart"></canvas></div>
                                    </div>
                                </div>
                            </div>

                            <div class="col-xl-5">
                                <div class="report-card h-100">
                                    <div class="card-header pt-3 px-3">
                                        <div class="mb-1">Revenue KPIs</div>
                                    </div>
                                    <div class="card-body p-3">
                                        <div class="row g-3">
                                            @foreach ($sections['revenue']['cards'] as $item)
                                                <div class="col-md-6 col-xl-12">
                                                    <div class="metric-tile h-100">
                                                        <div class="small">{{ $item['label'] }}</div>
                                                        <div class="h4 mb-0">{{ $item['value'] }}</div>
                                                    </div>
                                                </div>
                                            @endforeach
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                    </div>

                    <div id="tab-wasted-hours" class="tab-pane-panel">
                        <div class="row g-3">
                            <div class="col-xl-6">
                                <div class="report-card h-100">
                                    <div class="card-header pt-3 px-3">
                                        <div class="mb-1">Wasted Hours Breakdown</div>
                                    </div>
                                    <div class="card-body p-3">
                                        <div class="chart-wrap chart-wrap--sm"><canvas id="hoursChart"></canvas></div>
                                    </div>
                                </div>
                            </div>

                            <div class="col-xl-6">
                                <div class="report-card h-100">
                                    <div class="card-header pt-3 px-3">
                                        <div class="mb-1">Hours KPIs</div>
                                    </div>
                                    <div class="card-body p-3">
                                        @foreach ($sections['wasted_hours']['cards'] as $item)
                                            <div class="metric-tile mb-3">
                                                <div class="small">{{ $item['label'] }}</div>
                                                <div class="h4 mb-0">{{ $item['value'] }}</div>
                                            </div>
                                        @endforeach

                                        <div class="mt-3">
                                            <div class="d-flex justify-content-between mb-2">
                                                <span class="small">Recovery Coverage</span>
                                                <strong>{{ $sections['wasted_hours']['progress'] }}%</strong>
                                            </div>
                                            <div class="progress-line"><span
                                                    style="width: {{ $sections['wasted_hours']['progress'] }}%"></span>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div id="tab-activities" class="tab-pane-panel">
                        <div class="row g-3">
                            <div class="col-xl-6">
                                <div class="report-card h-100">
                                    <div class="card-header pt-3 px-3">
                                        <div class="mb-1">Activities Count</div>
                                    </div>
                                    <div class="card-body p-3">
                                        <div class="chart-wrap"><canvas id="activitiesChart"></canvas></div>
                                    </div>
                                </div>
                            </div>

                            <div class="col-xl-6">
                                <div class="report-card h-100">
                                    <div class="card-header pt-3 px-3">
                                        <div class="mb-1">Activity Details</div>
                                    </div>
                                    <div class="card-body p-3">
                                        @foreach ($sections['activities']['items'] as $item)
                                            <div class="rank-row">
                                                <span class="fw-semibold">{{ $item['label'] }}</span>
                                                <div class="rank-bar"><span
                                                        style="width: {{ max(min($item['count'] * 20, 100), $item['count'] > 0 ? 8 : 0) }}%"></span>
                                                </div>
                                                <strong>{{ $item['count'] }}</strong>
                                            </div>
                                            <div class="small text-muted mb-2">
                                                {{ number_format($item['students']) }} students
                                                <span class="mx-1">|</span>
                                                {{ $item['hours'] }}h utilized hours
                                            </div>
                                        @endforeach
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div id="tab-issues" class="tab-pane-panel">
                        <div class="row g-3 mb-3">
                            <div class="col-xl-6">
                                <div class="report-card h-100">
                                    <div class="card-header pt-3 px-3">
                                        <div class="mb-1">Issue Breakdown</div>
                                    </div>
                                    <div class="card-body p-3">
                                        <div class="chart-wrap"><canvas id="issuesChart"></canvas></div>
                                    </div>
                                </div>
                            </div>

                            <div class="col-xl-6">
                                <div class="report-card h-100">
                                    <div class="card-header pt-3 px-3">
                                        <div class="mb-1">Issue Status Snapshot</div>
                                    </div>
                                    <div class="card-body p-3">
                                        <div class="metric-tile mb-3">
                                            <div class="small">Total Issues</div>
                                            <div class="h4 mb-0">{{ $sections['issues']['total'] }}</div>
                                        </div>
                                        <div class="metric-tile mb-3">
                                            <div class="small">Pending Issues</div>
                                            <div class="h4 mb-0">{{ $sections['issues']['pending'] }}</div>
                                        </div>
                                        <div class="metric-tile">
                                            <div class="small">Resolved Issues</div>
                                            <div class="h4 mb-0">{{ $sections['issues']['resolved'] }}</div>
                                        </div>

                                        <div class="row mt-3">
                                            <div class="col">
                                                <div class="small mb-1">Peak Day</div>
                                                <div class="fw-semibold">{{ $issuePatterns['peak_day'] }}</div>
                                            </div>
                                            <div class="col">
                                                <div class="small mb-1">Peak Hour</div>
                                                <div class="fw-semibold">{{ $issuePatterns['peak_hour'] }}</div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="row g-3">
                            <div class="col-xl-7">
                                <div class="report-card h-100">
                                    <div class="card-header pt-3 px-3">
                                        <div class="mb-1">Issues by Hour</div>
                                    </div>
                                    <div class="card-body p-3">
                                        <div class="chart-wrap"><canvas id="issueHourChart"></canvas></div>
                                    </div>
                                </div>
                            </div>

                            <div class="col-xl-5">
                                <div class="report-card h-100">
                                    <div class="card-header pt-3 px-3">
                                        <div class="mb-1">Top Logged Issues</div>
                                    </div>
                                    <div class="card-body p-3">
                                        @forelse($sections['issues']['items'] as $item)
                                            <div class="rank-row">
                                                <span class="fw-semibold">{{ $item['label'] }}</span>
                                                <span class="badge bg-secondary border">{{ $item['count'] }}</span>
                                            </div>
                                        @empty
                                            <div>No issues logged in this range.</div>
                                        @endforelse
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    @push('scripts')
        <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
        <script>
            const charts = @json($charts);
            const chartInstances = {};

            const defaultScales = {
                y: {
                    beginAtZero: true,
                    ticks: {
                        precision: 0
                    }
                }
            };

            const defaultOptions = {
                responsive: true,
                maintainAspectRatio: false,
                plugins: {
                    legend: {
                        display: true
                    }
                },
                scales: defaultScales
            };

            const buildChart = (canvasId, config) => {
                const element = document.getElementById(canvasId);
                if (!element) {
                    return;
                }

                chartInstances[canvasId] = new Chart(element, config);
            };

            buildChart('trendChart', {
                type: 'line',
                data: {
                    labels: charts.trend.labels,
                    datasets: charts.trend.series.map((series, index) => ({
                        label: series.name,
                        data: series.data,
                        borderColor: ['#111827', '#475569', '#9ca3af'][index] || '#111827',
                        backgroundColor: ['rgba(17,24,39,.08)', 'rgba(71,85,105,.08)', 'rgba(156,163,175,.12)'][index] || 'rgba(17,24,39,.08)',
                        fill: index === 0,
                        tension: .32,
                        borderWidth: 2,
                        pointRadius: 3
                    }))
                },
                options: defaultOptions
            });

            buildChart('expectationChart', {
                type: 'bar',
                data: {
                    labels: charts.expectation.labels,
                    datasets: [{
                        label: 'Students',
                        data: charts.expectation.values,
                        backgroundColor: ['#111827', '#4b5563', '#9ca3af'],
                        borderRadius: 8
                    }]
                },
                options: { ...defaultOptions, plugins: { legend: { display: false } } }
            });

            buildChart('studentChart', {
                type: 'doughnut',
                data: {
                    labels: charts.students.labels,
                    datasets: [{
                        data: charts.students.values,
                        backgroundColor: ['#111827', '#9ca3af'],
                        borderWidth: 0
                    }]
                },
                options: {
                    responsive: true,
                    maintainAspectRatio: false,
                    plugins: { legend: { position: 'bottom' } }
                }
            });

            buildChart('revenueChart', {
                type: 'bar',
                data: {
                    labels: charts.revenue.labels,
                    datasets: [{
                        label: $invoice->currency ?? app(App\Services\CurrencyPricingService::class)->defaultCurrency(),
                        data: charts.revenue.values,
                        backgroundColor: '#374151',
                        borderRadius: 8
                    }]
                },
                options: defaultOptions
            });

            buildChart('hoursChart', {
                type: 'doughnut',
                data: {
                    labels: charts.hours.labels,
                    datasets: [{
                        data: charts.hours.values,
                        backgroundColor: ['#111827', '#6b7280', '#d1d5db'],
                        borderWidth: 0
                    }]
                },
                options: {
                    responsive: true,
                    maintainAspectRatio: false,
                    plugins: { legend: { position: 'bottom' } }
                }
            });

            buildChart('activitiesChart', {
                type: 'bar',
                data: {
                    labels: charts.activities.labels,
                    datasets: [{
                        label: 'Count',
                        data: charts.activities.counts,
                        backgroundColor: '#4b5563',
                        borderRadius: 8
                    }, {
                        label: 'Hours',
                        data: charts.activities.hours,
                        backgroundColor: '#9ca3af',
                        borderRadius: 8
                    }]
                },
                options: defaultOptions
            });

            buildChart('issuesChart', {
                type: 'bar',
                data: {
                    labels: charts.issues.labels,
                    datasets: [{
                        label: 'Issues',
                        data: charts.issues.values,
                        backgroundColor: '#6b7280',
                        borderRadius: 8
                    }]
                },
                options: defaultOptions
            });

            buildChart('issueHourChart', {
                type: 'bar',
                data: {
                    labels: charts.issue_hours.labels,
                    datasets: [{
                        label: 'Issues',
                        data: charts.issue_hours.values,
                        backgroundColor: '#9ca3af',
                        borderRadius: 6
                    }]
                },
                options: defaultOptions
            });

            const activateTab = (tabName) => {
                const fallbackTab = 'overview';
                const targetTab = tabName || fallbackTab;
                const targetButton =
                    document.querySelector(`.tab-link[data-tab="${targetTab}"]`) ||
                    document.querySelector(`.tab-link[data-tab="${fallbackTab}"]`);

                document.querySelectorAll('.tab-link').forEach((item) => item.classList.remove('active'));
                document.querySelectorAll('.tab-pane-panel').forEach((panel) => panel.classList.remove('active'));

                if (!targetButton) {
                    return;
                }

                targetButton.classList.add('active');

                const targetPanel = document.getElementById(`tab-${targetButton.dataset.tab}`);
                if (targetPanel) {
                    targetPanel.classList.add('active');
                }

                if (window.location.hash !== `#${targetButton.dataset.tab}`) {
                    history.replaceState(null, '', `#${targetButton.dataset.tab}`);
                }

                localStorage.setItem('retention_reports_active_tab', targetButton.dataset.tab);

                setTimeout(() => {
                    Object.values(chartInstances).forEach((chart) => {
                        chart.resize();
                        chart.update('none');
                    });
                }, 60);
            };

            document.querySelectorAll('.tab-link').forEach((button) => {
                button.addEventListener('click', (event) => {
                    event.preventDefault();
                    activateTab(button.dataset.tab);
                });
            });

            window.addEventListener('hashchange', () => {
                const hashTab = window.location.hash.replace('#', '');
                if (hashTab) {
                    activateTab(hashTab);
                }
            });

            const expectationTargetForm = document.getElementById('expectationTargetForm');
            const expectationTargetRateInput = document.getElementById('expectationTargetRate');

            if (expectationTargetForm && expectationTargetRateInput) {
                let targetSubmitTimer = null;

                const submitTargetFilter = () => {
                    const targetValue = expectationTargetRateInput.value.trim();

                    if (!targetValue || !expectationTargetRateInput.checkValidity()) {
                        return;
                    }

                    if (targetValue === expectationTargetRateInput.dataset.initialValue) {
                        return;
                    }

                    if (typeof expectationTargetForm.requestSubmit === 'function') {
                        expectationTargetForm.requestSubmit();
                        return;
                    }

                    expectationTargetForm.submit();
                };

                expectationTargetRateInput.addEventListener('input', () => {
                    window.clearTimeout(targetSubmitTimer);
                    targetSubmitTimer = window.setTimeout(submitTargetFilter, 600);
                });

                expectationTargetRateInput.addEventListener('change', () => {
                    window.clearTimeout(targetSubmitTimer);
                    submitTargetFilter();
                });
            }

            const studentDetailButtons = document.querySelectorAll('[data-student-detail-target]');
            const studentDetailPanels = document.querySelectorAll('[data-student-detail-panel]');

            const activateStudentDetailPanel = (detailKey) => {
                const fallbackKey = studentDetailButtons[0]?.dataset.studentDetailTarget;
                const targetKey = detailKey || fallbackKey;

                if (!targetKey) {
                    return;
                }

                studentDetailButtons.forEach((button) => {
                    button.classList.toggle('active', button.dataset.studentDetailTarget === targetKey);
                });

                studentDetailPanels.forEach((panel) => {
                    panel.classList.toggle('active', panel.dataset.studentDetailPanel === targetKey);
                });

                localStorage.setItem('retention_reports_student_detail_panel', targetKey);
            };

            studentDetailButtons.forEach((button) => {
                button.addEventListener('click', () => {
                    activateStudentDetailPanel(button.dataset.studentDetailTarget);
                });
            });

            const hashTab = window.location.hash.replace('#', '');
            const savedTab = localStorage.getItem('retention_reports_active_tab');
            const savedStudentDetailPanel = localStorage.getItem('retention_reports_student_detail_panel');
            activateStudentDetailPanel(savedStudentDetailPanel);
            activateTab(hashTab || savedTab || 'overview');
        </script>
    @endpush
@endsection