@extends('layout.layout')

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

    @php

        $studentName = trim(($student->first_name ?? '') . ' ' . ($student->last_name ?? ''));
        $studentInitials = strtoupper(
            substr($student->first_name ?? 'S', 0, 1) . substr($student->last_name ?? '', 0, 1),
        );
    @endphp

    {{-- {{ dd($student) }} --}}

    <div class="container-fluid app-bg student-profile-page">
        <div class="page-shell">
            <div class="space-y-4">

                <x-page-title title="Student Profile"
                    description="Review personal details, courses, feedback, performance reports, referrals, notes, and student summary.">
                    <button type="button" onclick="history.back()" class="asset-btn asset-btn--secondary">
                        <iconify-icon icon="mdi:arrow-left"></iconify-icon>
                        Back
                    </button>

                    <a href="{{ route('profile') }}" class="asset-btn asset-btn--primary">
                        <iconify-icon icon="lucide:edit"></iconify-icon>
                        Edit
                    </a>

                    <a href="{{ route('changePassword') }}" class="asset-btn asset-btn--secondary">
                        <iconify-icon icon="ri:lock-password-line"></iconify-icon>
                        Change Password
                    </a>
                </x-page-title>

                <div class="ui-card student-shell-card">
                    <div class="student-profile-layout">

                        <aside class="student-profile-sidebar">
                            <div class="student-profile-sidebar__head">
                                <div class="student-avatar">
                                    {{ $studentInitials ?: 'ST' }}
                                </div>

                                <div class="student-profile-sidebar__info">
                                    <div class="student-profile-sidebar__name">
                                        {{ $studentName ?: 'Student Profile' }}
                                    </div>
                                    <div class="student-profile-sidebar__meta">
                                        {{ $student->student_code ?? '#' . $student->id }}
                                    </div>
                                </div>
                            </div>

                            <div class="student-tabs nav flex-column nav-pills" id="studentTabs" role="tablist"
                                aria-orientation="vertical">
                                <button class="nav-link active student-tab-link" id="basic-info-tab" data-bs-toggle="pill"
                                    data-bs-target="#basic-info" type="button" role="tab" aria-controls="basic-info"
                                    aria-selected="true">
                                    <span class="student-tab-link__icon"><i class="ri-user-3-line"></i></span>
                                    <span>Personal Details</span>
                                </button>

                                <button class="nav-link student-tab-link" id="summary-tab" data-bs-toggle="pill"
                                    data-bs-target="#summary" type="button" role="tab" aria-controls="summary"
                                    aria-selected="false">
                                    <span class="student-tab-link__icon"><i class="ri-file-list-3-line"></i></span>
                                    <span>Summary</span>
                                </button>
                                <button class="nav-link student-tab-link" id="certification-tab" data-bs-toggle="pill"
                                    data-bs-target="#certification" type="button" role="tab" aria-controls="certification"
                                    aria-selected="false">
                                    <span class="student-tab-link__icon"><i class="ri-file-list-3-line"></i></span>
                                    <span>Certification</span>
                                </button>

                                <button class="nav-link student-tab-link" id="performance-tab" data-bs-toggle="pill"
                                    data-bs-target="#performance_report" type="button" role="tab"
                                    aria-controls="performance_report" aria-selected="false">
                                    <span class="student-tab-link__icon"><i class="ri-line-chart-line"></i></span>
                                    <span>Performance Report</span>
                                </button>

                                <button class="nav-link student-tab-link" id="feedback-tab" data-bs-toggle="pill"
                                    data-bs-target="#feedback" type="button" role="tab" aria-controls="feedback"
                                    aria-selected="false">
                                    <span class="student-tab-link__icon"><i class="ri-feedback-line"></i></span>
                                    <span>Feedback</span>
                                </button>

                                <button class="nav-link student-tab-link" id="exams-tab" data-bs-toggle="pill"
                                    data-bs-target="#exams" type="button" role="tab" aria-controls="exams"
                                    aria-selected="false">
                                    <span class="student-tab-link__icon"><i class="ri-file-list-2-line"></i></span>
                                    <span>Exams</span>
                                </button>

                                <button class="nav-link student-tab-link" id="referral-tab" data-bs-toggle="pill"
                                    data-bs-target="#referral" type="button" role="tab" aria-controls="referral"
                                    aria-selected="false">
                                    <span class="student-tab-link__icon"><i class="ri-team-line"></i></span>
                                    <span>Referral</span>
                                </button>

                                {{-- <button class="nav-link student-tab-link" id="notes-tab" data-bs-toggle="pill"
                                    data-bs-target="#notes" type="button" role="tab" aria-controls="notes"
                                    aria-selected="false">
                                    <span class="student-tab-link__icon"><i class="ri-sticky-note-line"></i></span>
                                    <span>Notes</span>
                                </button> --}}

                                <button class="nav-link student-tab-link" id="invoices-tab" data-bs-toggle="pill"
                                    data-bs-target="#invoices" type="button" role="tab" aria-controls="invoices"
                                    aria-selected="false">
                                    <span class="student-tab-link__icon"><i class="ri-sticky-note-line"></i></span>
                                    <span>Invoices</span>
                                </button>
                            </div>
                        </aside>

                        <main class="student-profile-content">
                            <div class="tab-content" id="studentTabsContent">
                                @include('dashboard.student.show_tabs.basic_info')
                                @include('dashboard.student.show_tabs.summary')
                                @include('dashboard.student.show_tabs.certification')
                                @include('dashboard.student.show_tabs.performance_report')
                                @include('dashboard.student.show_tabs.feedback')
                                @include('dashboard.student.show_tabs.exams')
                                @include('dashboard.student.show_tabs.referral')
                                {{-- @include('dashboard.student.show_tabs.notes') --}}
                                @include('dashboard.student.show_tabs.invoices')
                            </div>
                        </main>

                    </div>
                </div>

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

@push('styles')
    <link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/17.0.8/css/intlTelInput.min.css" />

    <style>
        .student-profile-page .ui-card {
            border: 1px solid #e5e7eb;
            border-radius: 18px;
            background: #fff;
            box-shadow: 0 10px 30px rgba(15, 23, 42, 0.06);
            padding: 1.25rem;
            overflow: hidden;
        }

        .student-shell-card {
            min-width: 0;
        }

        .student-profile-layout {
            display: grid;
            grid-template-columns: 280px minmax(0, 1fr);
            gap: 1.25rem;
            align-items: start;
        }

        .student-profile-sidebar {
            position: sticky;
            top: 1rem;
            min-width: 0;
        }

        .student-profile-sidebar__head {
            display: flex;
            align-items: center;
            gap: 0.85rem;
            padding: 1rem;
            margin-bottom: 0.85rem;
            border: 1px solid #e5e7eb;
            border-radius: 18px;
            background: #f8fafc;
            min-width: 0;
        }

        .student-avatar {
            width: 48px;
            height: 48px;
            border-radius: 16px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            background: linear-gradient(135deg, #eff6ff, #eef2ff);
            color: #071b3d;
            font-weight: 800;
            letter-spacing: 0.04em;
            flex-shrink: 0;
        }

        .student-profile-sidebar__info {
            min-width: 0;
        }

        .student-profile-sidebar__name {
            font-size: 0.98rem;
            font-weight: 800;
            color: #111827;
            line-height: 1.3;
            overflow-wrap: anywhere;
        }

        .student-profile-sidebar__meta {
            margin-top: 0.2rem;
            color: #6b7280;
            font-size: 0.84rem;
            overflow-wrap: anywhere;
        }

        .student-tabs {
            gap: 0.5rem;
        }

        .student-tab-link {
            width: 100%;
            display: flex !important;
            align-items: center;
            gap: 0.65rem;
            text-align: left;
            border: 1px solid #dbe2ea !important;
            background: #f8fafc !important;
            color: #334155 !important;
            border-radius: 14px !important;
            padding: 0.82rem 0.95rem !important;
            font-size: 0.9rem;
            font-weight: 700;
            transition: 0.2s ease;
            box-shadow: none !important;
            white-space: normal;
            line-height: 1.35;
        }

        .student-tab-link:hover {
            background: #f1f5f9 !important;
            border-color: #cfd8e3 !important;
            color: #111827 !important;
        }

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

        .student-tab-link__icon {
            width: 28px;
            height: 28px;
            border-radius: 10px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            background: rgba(255, 255, 255, 0.85);
            color: #071b3d;
            flex-shrink: 0;
        }

        .student-tab-link.active .student-tab-link__icon {
            background: rgba(255, 255, 255, 0.12);
            color: #fff;
        }

        .student-profile-content,
        .tab-content,
        .tab-pane {
            min-width: 0;
            max-width: 100%;
            overflow-x: hidden;
        }

        .form-section {
            min-width: 0;
        }

        .form-section__head {
            margin-bottom: 1rem;
            padding-bottom: 0.9rem;
            border-bottom: 1px solid #eef2f7;
        }

        .form-section__title {
            font-size: 1rem;
            font-weight: 800;
            color: #111827;
        }

        .form-section__sub {
            color: #6b7280;
            font-size: 0.9rem;
            line-height: 1.55;
        }

        .modern-section {
            background: #f8fafc;
            border: 1px solid #edf2f7;
            border-radius: 18px;
            box-shadow: 0 2px 12px rgba(15, 23, 42, 0.04);
            padding: 1.25rem;
            margin-bottom: 1.25rem;
            min-width: 0;
        }

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

        .detail-item {
            grid-column: span 6 / span 6;
            border: 1px solid #e5e7eb;
            background: #fff;
            border-radius: 16px;
            padding: 0.95rem 1rem;
            min-width: 0;
        }

        .detail-item--full {
            grid-column: span 12 / span 12;
        }

        .detail-item__label {
            color: #6b7280;
            font-size: 0.78rem;
            font-weight: 800;
            text-transform: uppercase;
            letter-spacing: 0.04em;
            margin-bottom: 0.35rem;
        }

        .detail-item__value {
            color: #111827;
            font-size: 0.94rem;
            font-weight: 650;
            overflow-wrap: anywhere;
            word-break: break-word;
        }

        .table-card {
            border: 1px solid #e5e7eb;
            border-radius: 18px;
            background: #fff;
            overflow: hidden;
            margin-bottom: 1.25rem;
        }

        .table-card__head {
            padding: 1rem 1.1rem;
            border-bottom: 1px solid #eef2f7;
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 0.75rem;
            flex-wrap: wrap;
        }

        .table-card__title {
            font-size: 0.98rem;
            font-weight: 800;
            color: #111827;
            margin: 0;
        }

        .table-card__sub {
            color: #6b7280;
            font-size: 0.86rem;
            margin: 0.15rem 0 0;
        }

        .student-table-wrap {
            width: 100%;
            overflow-x: auto;
        }

        .student-table {
            width: 100%;
            margin: 0;
            vertical-align: middle;
            white-space: nowrap;
        }

        .student-table th {
            background: #f8fafc;
            color: #475569;
            font-size: 0.78rem;
            font-weight: 800;
            text-transform: uppercase;
            letter-spacing: 0.035em;
            border-bottom: 1px solid #e5e7eb !important;
            padding: 0.8rem 0.85rem;
            text-align: center;
        }

        .student-table td {
            color: #334155;
            font-size: 0.88rem;
            border-color: #eef2f7 !important;
            padding: 0.8rem 0.85rem;
            text-align: center;
        }

        .student-empty {
            padding: 2.5rem 1rem;
            text-align: center;
            color: #9ca3af;
        }

        .student-empty iconify-icon {
            display: block;
            font-size: 2rem;
            margin-bottom: 0.55rem;
        }

        .ui-pill {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 0.35rem;
            border-radius: 999px;
            padding: 0.28rem 0.65rem;
            font-size: 0.76rem;
            font-weight: 800;
            line-height: 1.2;
            white-space: nowrap;
        }

        .ui-pill--primary {
            background: #eff6ff;
            color: #0f1724;
        }

        .ui-pill--info {
            background: #eef2ff;
            color: #4338ca;
        }

        .ui-pill--success {
            background: #f0fdf4;
            color: #166534;
        }

        .ui-pill--warn {
            background: #fffbeb;
            color: #92400e;
        }

        .ui-pill--danger {
            background: #fef2f2;
            color: #b91c1c;
        }

        .ui-pill--neutral {
            background: #f3f4f6;
            color: #374151;
        }

        .detail-link {
            color: #071b3d;
            text-decoration: none;
            font-weight: 800;
        }

        .detail-link:hover {
            text-decoration: underline;
        }

        .asset-actions {
            display: flex;
            justify-content: flex-end;
            gap: 0.75rem;
            flex-wrap: wrap;
        }

        .select2-container {
            display: block !important;
            width: 100% !important;
        }

        .select2-container .selection {
            display: block !important;
            width: 100% !important;
        }

        .iti {
            display: block !important;
            width: 100%;
        }

        .iti input,
        .iti .form-control {
            width: 100% !important;
        }

        .iti__country {
            display: flex;
            align-items: center;
            padding: 5px;
        }

        .iti__country-list {
            white-space: normal !important;
            width: 275px !important;
            max-width: calc(100vw - 40px);
            border-radius: 12px;
            border-color: #dbe2ea;
            box-shadow: 0 18px 40px rgba(15, 23, 42, 0.14);
        }

        @media (max-width: 991.98px) {
            .student-profile-layout {
                grid-template-columns: 1fr;
            }

            .student-profile-sidebar {
                position: static;
            }

            .student-tabs {
                display: grid !important;
                grid-template-columns: repeat(2, minmax(0, 1fr));
            }

            .detail-item {
                grid-column: span 12 / span 12;
            }
        }

        @media (max-width: 575.98px) {
            .student-profile-page .ui-card {
                padding: 1rem;
            }

            .student-tabs {
                grid-template-columns: 1fr;
            }

            .student-profile-sidebar__head {
                align-items: flex-start;
            }

            .table-card__head {
                align-items: flex-start;
            }
        }
    </style>
@endpush

@push('scripts')
    <script src="https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/17.0.8/js/intlTelInput.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/17.0.8/js/utils.js"></script>
@endpush