@extends('layout.layout')

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

    <div class="container-fluid app-bg">
        <div class="page-shell">
            <div class="d-flex flex-column gap-4">
                <x-page-title title="{{ $teamTitle }}"
                    description="Quarterly team report based on finished, renewed, retention, auto renew, and old data metrics.">
                    <span class="ui-pill ui-pill--info">{{ $quarter['label'] }} ({{ $quarter['start'] }} to
                        {{ $quarter['end'] }})</span>
                </x-page-title>

                @if($isSuperAdmin && count($availableTeams) > 1)
                    <ul class="nav nav-tabs">
                        @foreach($availableTeams as $key => $availableTeam)
                            <li class="nav-item">
                                <a class="nav-link {{ $teamKey === $key ? 'active' : '' }}"
                                   href="{{ route('teams_performance', array_merge(request()->except(['page', 'team', 'manager_id']), ['team' => $key])) }}">
                                    {{ str_replace(' Team Performance', '', $availableTeam['title']) }}
                                </a>
                            </li>
                        @endforeach
                    </ul>
                @endif

                @if($teamKey !== 'sales' && $managerTabs->isNotEmpty())
                    <ul class="nav nav-pills gap-2">
                        @if($isSuperAdmin || $teamKey === 'retention')
                            <li class="nav-item">
                                <a class="nav-link {{ empty($selectedManagerId) ? 'active' : '' }}"
                                   href="{{ route('teams_performance', array_merge(request()->except(['page', 'manager_id']), ['team' => $teamKey])) }}">
                                    {{ $teamKey === 'retention' ? 'All Team Leaders' : 'All Managers' }}
                                </a>
                            </li>
                        @endif
                        @foreach($managerTabs as $managerTab)
                            <li class="nav-item">
                                <a class="nav-link {{ (int) $selectedManagerId === (int) $managerTab->id ? 'active' : '' }}"
                                   href="{{ route('teams_performance', array_merge(request()->except(['page', 'manager_id']), ['team' => $teamKey, 'manager_id' => $managerTab->id])) }}">
                                    {{ $managerTab->full_name ?? trim(($managerTab->first_name ?? '') . ' ' . ($managerTab->last_name ?? '')) }}
                                </a>
                            </li>
                        @endforeach
                    </ul>
                @endif

                {{-- <div class="row g-3">
                    <div class="col-md-3">
                        <div class="ui-card p-3 h-100">
                            <label class="form-label text-muted small mb-1">Total {{ $memberLabel }}s</label>
                            <p class="mb-0 ui-title">{{ $summary['total_members'] }}</p>
                        </div>
                    </div>
                    <div class="col-md-3">
                        <div class="ui-card p-3 h-100">
                            <label class="form-label text-muted small mb-1">Finished</label>
                            <p class="mb-0 ui-title">{{ $summary['finished'] }}</p>
                        </div>
                    </div>
                    <div class="col-md-3">
                        <div class="ui-card p-3 h-100">
                            <label class="form-label text-muted small mb-1">Renewed</label>
                            <p class="mb-0 ui-title">{{ $summary['renewed'] }}</p>
                        </div>
                    </div>
                    <div class="col-md-3">
                        <div class="ui-card p-3 h-100">
                            <label class="form-label text-muted small mb-1">Quarter %</label>
                            <p class="mb-0 ui-title">{{ $summary['percentage'] }}%</p>
                        </div>
                    </div>
                </div> --}}

                <div class="ui-card ui-card--table">
                    <div class="ui-card__header">
                        <div class="d-flex align-items-center gap-3 flex-nowrap">
                            <h6 class="mb-0 ui-title" style="margin-right: auto;">Filters</h6>

                            <form action="{{ route('teams_performance') }}" method="GET"
                                class="d-flex align-items-center gap-2 flex-nowrap mb-0">
                                <input type="hidden" name="search" value="{{ request('search') }}">
                                <input type="hidden" name="team" value="{{ $teamKey }}">
                                @if($selectedManagerId)
                                    <input type="hidden" name="manager_id" value="{{ $selectedManagerId }}">
                                @endif
                                @if($teamKey !== 'academic')
                                    <input type="hidden" name="job_title" value="{{ request('job_title') }}">
                                @endif
                                <input type="hidden" name="per_page" value="{{ request('per_page', 10) }}">

                                @if($teamKey === 'academic')
                                    <select name="job_title" class="form-select form-select-sm" style="min-width: 130px;"
                                        onchange="this.form.submit()">
                                        <option value="">All Roles</option>
                                        <option value="teacher" {{ request('job_title') === 'teacher' ? 'selected' : '' }}>Teacher</option>
                                        <option value="tester" {{ request('job_title') === 'tester' ? 'selected' : '' }}>Tester</option>
                                    </select>
                                @endif

                                @if($teamKey === 'marketing')
                                    <input type="date" name="from" class="form-control form-control-sm"
                                        value="{{ request('from', $quarter['start']) }}" onchange="this.form.submit()">
                                    <input type="date" name="to" class="form-control form-control-sm"
                                        value="{{ request('to', $quarter['end']) }}" onchange="this.form.submit()">
                                @else
                                    <select name="quarter_no" class="form-select form-select-sm" style="min-width: 110px;"
                                        onchange="this.form.submit()">
                                        @for($q = 1; $q <= 4; $q++)
                                            <option value="{{ $q }}" {{ (int) request('quarter_no', now()->quarter) === $q ? 'selected' : '' }}>
                                                Q{{ $q }}
                                            </option>
                                        @endfor
                                    </select>

                                    <select name="quarter_year" class="form-select form-select-sm" style="min-width: 120px;"
                                        onchange="this.form.submit()">
                                        @for($year = now()->year + 1; $year >= now()->year - 5; $year--)
                                            <option value="{{ $year }}" {{ (int) request('quarter_year', now()->year) === $year ? 'selected' : '' }}>
                                                {{ $year }}
                                            </option>
                                        @endfor
                                    </select>
                                @endif
                            </form>

                            <x-table-controls :action="route('teams_performance')" searchName="search"
                                searchPlaceholder="{{ $teamKey === 'marketing' ? 'Search marketing data...' : 'Search team member...' }}"
                                :preserveQuery="$teamKey === 'marketing' ? [
                                    'team' => $teamKey,
                                    'from' => request('from', $quarter['start']),
                                    'to' => request('to', $quarter['end']),
                                ] : [
                                    'quarter_no' => request('quarter_no'),
                                    'quarter_year' => request('quarter_year'),
                                    'team' => $teamKey,
                                    'manager_id' => $selectedManagerId,
                                    'job_title' => request('job_title'),
                                ]"
                                :clearPreserveQuery="$teamKey === 'marketing' ? [
                                    'team' => $teamKey,
                                ] : [
                                    'team' => $teamKey,
                                    'manager_id' => $selectedManagerId,
                                ]" />
                        </div>
                    </div>

                    @includeIf("dashboard.teams_performance.partials.{$teamKey}_table", [
                        'members' => $members,
                        'memberLabel' => $memberLabel,
                    ])
                </div>
            </div>
        </div>
    </div>

    <div class="modal fade" id="metricStudentsModal" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog modal-lg modal-dialog-scrollable">
            <div class="modal-content">
                <div class="modal-header">
                    <div class="modal-title" id="metricStudentsTitle">Students</div>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <div class="table-responsive">
                        <table class="table table-sm table-bordered align-middle mb-0">
                            <thead>
                                <tr>
                                    <th style="width: 80px;">#</th>
                                    <th>Student</th>
                                </tr>
                            </thead>
                            <tbody id="metricStudentsBody"></tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="modal fade" id="marketingDetailsModal" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog modal-xl modal-dialog-scrollable">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="marketingDetailsTitle">Details</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body" id="marketingDetailsBody">
                    <div class="py-5 text-center ui-muted">Loading...</div>
                </div>
            </div>
        </div>
    </div>
@endsection

@push('scripts')
    <script>
        document.addEventListener('DOMContentLoaded', function () {
            const modalEl = document.getElementById('metricStudentsModal');
            const modalTitle = document.getElementById('metricStudentsTitle');
            const modalBody = document.getElementById('metricStudentsBody');
            const modal = new bootstrap.Modal(modalEl);

            document.querySelectorAll('.metric-open').forEach((btn) => {
                btn.addEventListener('click', function () {
                    const title = this.getAttribute('data-metric-title') || 'Students';
                    const students = JSON.parse(this.getAttribute('data-students') || '[]');

                    modalTitle.textContent = title;
                    modalBody.innerHTML = '';

                    if (!students.length) {
                        modalBody.innerHTML = '<tr><td colspan="3" class="text-center text-muted">No students found.</td></tr>';
                    } else {
                        students.forEach((student, idx) => {
                            const row = document.createElement('tr');
                            const profileUrl = `/students/${student.student_id}`;
                            row.innerHTML = `
                                            <td>${idx + 1}</td>
                                            <td>
                                                <a href="${profileUrl}" class="btn btn-sm btn-outline-primary">
                                                ${student.name || 'Student'}
                                                </a>
                                            </td>
                                        `;
                            modalBody.appendChild(row);
                        });
                    }
                    modal.show();
                });
            });

            const marketingModalEl = document.getElementById('marketingDetailsModal');
            const marketingModalTitle = document.getElementById('marketingDetailsTitle');
            const marketingModalBody = document.getElementById('marketingDetailsBody');
            const marketingModal = marketingModalEl ? new bootstrap.Modal(marketingModalEl) : null;

            function loadMarketingDetails(url) {
                if (!marketingModal) return;

                marketingModalTitle.textContent = 'Details';
                marketingModalBody.innerHTML = '<div class="py-5 text-center ui-muted">Loading...</div>';
                marketingModal.show();

                fetch(url, {
                    headers: {
                        'X-Requested-With': 'XMLHttpRequest',
                        'Accept': 'application/json',
                    },
                })
                    .then((response) => response.json())
                    .then((payload) => {
                        marketingModalTitle.textContent = payload.title || 'Details';
                        marketingModalBody.innerHTML = payload.html || '<div class="py-5 text-center ui-muted">No data found.</div>';
                    })
                    .catch(() => {
                        marketingModalBody.innerHTML = '<div class="py-5 text-center text-danger">Failed to load details.</div>';
                    });
            }

            document.querySelectorAll('.js-marketing-detail').forEach((button) => {
                button.addEventListener('click', function () {
                    loadMarketingDetails(this.dataset.url);
                });
            });

            if (marketingModalBody) {
                marketingModalBody.addEventListener('click', function (event) {
                    const link = event.target.closest('.pagination a');
                    if (!link) return;

                    event.preventDefault();
                    loadMarketingDetails(link.href);
                });
            }
        });
    </script>
@endpush