@extends('layouts.admin')

@section('content')
<style>
    .glass-card {
        position: relative;
        overflow: hidden;
        border-radius: 1.5rem;
        border: 1px solid rgba(255, 255, 255, 0.14);
        background:
            linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.02)),
            rgba(7, 12, 28, 0.48);
        box-shadow:
            inset 0 1px 0 rgba(255, 255, 255, 0.12),
            0 24px 50px rgba(2, 6, 23, 0.26);
        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(12px);
    }
    .glass-card::before {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient(135deg, rgba(255, 255, 255, 0.12), transparent 35%);
        pointer-events: none;
    }

    .student-profile-header {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: space-between;
        gap: 1rem;
    }
    .student-profile-actions {
        display: flex;
        flex-wrap: wrap;
        justify-content: flex-end;
        gap: 0.75rem;
    }
    .student-profile-photo-card {
        display: flex;
        align-items: center;
        gap: 1rem;
    }
    .student-profile-photo {
        width: 5rem;
        height: 5rem;
        border-radius: 1.5rem;
        object-fit: cover;
        border: 1px solid rgba(255, 255, 255, 0.2);
        box-shadow: 0 12px 24px rgba(2, 6, 23, 0.24);
    }

    .student-profile-meta-label {
        display: block;
        font-size: 0.7rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.18em;
        color: rgb(165 243 252);
    }
    .student-profile-meta-value {
        margin-top: 0.5rem;
        font-size: 0.95rem;
        font-weight: 600;
        line-height: 1.5;
        color: white;
        word-break: break-word;
    }

    /* ===== KPI STATS ===== */
    .kpi-stat {
        padding: 1rem 1.1rem;
        border-radius: 1.15rem;
        border: 1px solid rgba(255, 255, 255, 0.1);
        background: rgba(255, 255, 255, 0.03);
        position: relative;
        overflow: hidden;
    }
    .kpi-stat-label {
        font-size: 0.6rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.14em;
        color: #94a3b8;
    }
    .kpi-stat-value {
        font-size: 1.5rem;
        font-weight: 700;
        color: white;
        margin-top: 0.35rem;
        line-height: 1;
    }
    .kpi-stat-blue { border-color: rgba(59,130,246,0.3); background: linear-gradient(135deg, rgba(59,130,246,0.08), rgba(15,23,42,0.4)); }
    .kpi-stat-cyan { border-color: rgba(34,211,238,0.3); background: linear-gradient(135deg, rgba(34,211,238,0.08), rgba(15,23,42,0.4)); }
    .kpi-stat-green { border-color: rgba(34,197,94,0.3); background: linear-gradient(135deg, rgba(34,197,94,0.08), rgba(15,23,42,0.4)); }
    .kpi-stat-amber { border-color: rgba(234,179,8,0.3); background: linear-gradient(135deg, rgba(234,179,8,0.08), rgba(15,23,42,0.4)); }

    /* ===== EXAM TYPE CARDS ===== */
    .exam-type-stat {
        padding: 1rem 1.1rem;
        border-radius: 1.15rem;
        border: 1px solid rgba(255, 255, 255, 0.1);
        background: rgba(255, 255, 255, 0.03);
        transition: all 0.2s ease;
    }
    .exam-type-stat:hover {
        transform: translateY(-2px);
        border-color: rgba(34, 211, 238, 0.4);
        background: rgba(34, 211, 238, 0.04);
    }
    .exam-type-badge {
        display: inline-flex;
        padding: 0.15rem 0.55rem;
        border-radius: 0.35rem;
        background: linear-gradient(135deg, rgba(34,211,238,0.18), rgba(59,130,246,0.18));
        border: 1px solid rgba(34,211,238,0.35);
        font-size: 0.62rem;
        font-weight: 700;
        color: #67e8f9;
        letter-spacing: 0.08em;
    }

    /* ===== PROGRESS BAR ===== */
    .bar-track-lg {
        height: 10px;
        border-radius: 9999px;
        background: rgba(255, 255, 255, 0.06);
        overflow: hidden;
        margin-top: 0.75rem;
        position: relative;
    }
    .bar-fill-lg {
        height: 100%;
        border-radius: 9999px;
        transition: width 1.2s cubic-bezier(0.22, 1, 0.36, 1);
        position: relative;
        box-shadow: 0 0 12px rgba(34, 211, 238, 0.3);
    }
    .bar-green { background: linear-gradient(90deg, #16a34a, #4ade80); box-shadow: 0 0 12px rgba(34,197,94,0.4); }
    .bar-yellow { background: linear-gradient(90deg, #ca8a04, #facc15); box-shadow: 0 0 12px rgba(250,204,21,0.4); }
    .bar-red { background: linear-gradient(90deg, #dc2626, #f87171); box-shadow: 0 0 12px rgba(239,68,68,0.4); }

    /* ===== CHART CARD ===== */
    .chart-wrap {
        position: relative;
        height: 260px;
    }

    /* ===== EXAM HISTORY ROW ===== */
    .exam-history-row {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 1rem;
        padding: 1rem 1.15rem;
        border-radius: 1rem;
        border: 1px solid rgba(255, 255, 255, 0.08);
        background: rgba(255, 255, 255, 0.02);
        transition: all 0.2s ease;
        flex-wrap: wrap;
    }
    .exam-history-row:hover {
        background: rgba(34, 211, 238, 0.04);
        border-color: rgba(34, 211, 238, 0.3);
    }

    .status-pass { color: #4ade80; }
    .status-fail { color: #f87171; }

    .mini-badge {
        display: inline-flex;
        padding: 0.15rem 0.5rem;
        border-radius: 0.35rem;
        font-size: 0.6rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.06em;
    }
    .mini-badge-green { background: rgba(34,197,94,0.15); color: #86efac; border: 1px solid rgba(34,197,94,0.35); }
    .mini-badge-red { background: rgba(239,68,68,0.15); color: #fca5a5; border: 1px solid rgba(239,68,68,0.35); }
    .mini-badge-cyan { background: rgba(34,211,238,0.15); color: #67e8f9; border: 1px solid rgba(34,211,238,0.35); }
    .mini-badge-slate { background: rgba(148,163,184,0.12); color: #cbd5e1; border: 1px solid rgba(148,163,184,0.3); }

    @media (max-width: 767px) {
        .student-profile-mobile-grid {
            display: grid;
            grid-template-columns: repeat(2, minmax(0, 1fr));
            gap: 1rem;
        }
        .student-profile-mobile-span-2 { grid-column: span 2; }
        .exam-history-row { flex-direction: column; align-items: stretch; }
        .chart-wrap { height: 220px; }
    }
</style>

<div class="space-y-5">

    {{-- ============ HEADER ============ --}}
    <div class="student-profile-header">
        <div>
            <h1 class="text-3xl font-bold text-white">Student Profile</h1>
            <p class="text-sm text-slate-400 mt-1">Complete performance overview and account management</p>
        </div>

        <div class="student-profile-actions">
            <a href="{{ route('admin.students.edit', $student->id) }}" class="admin-action-btn bg-indigo-600 text-white">
                Edit Student
            </a>
            <!--@if($student->violations()->exists())-->
            <!--    <a href="{{ route('admin.violations.student_overview', $student->id) }}" class="admin-action-btn bg-rose-600 text-white">-->
            <!--        View Violations-->
            <!--    </a>-->
            <!--@endif-->
            <form method="POST" action="{{ route('admin.students.toggle', $student->id) }}"
                x-data
                @submit.prevent="appConfirm('Are you sure you want to change student status?', { title: 'Change Student Status', confirmText: 'Yes, Continue' }).then(confirmed => { if (confirmed) $el.submit(); });">
                @csrf
                <button type="submit" {{ $student->trashed() ? 'disabled' : '' }}
                    class="admin-action-btn bg-yellow-600 text-white hover:bg-yellow-700 transition">
                    Block / Unblock
                </button>
            </form>
            <form method="POST" action="{{ route('admin.students.destroy', $student->id) }}"
                x-data
                @submit.prevent="appConfirm('{{ $student->trashed() ? 'Restore this student account to app access?' : 'Remove this student from app access? Their database records will stay.' }}', { title: '{{ $student->trashed() ? 'Restore Student' : 'Remove Student' }}', confirmText: '{{ $student->trashed() ? 'Restore' : 'Remove' }}' }).then(confirmed => { if (confirmed) $el.submit(); });">
                @csrf
                @method('DELETE')
                <button type="submit" class="admin-action-btn bg-red-600 text-white hover:bg-red-700 transition">
                    {{ $student->trashed() ? 'Restore' : 'Delete' }}
                </button>
            </form>
        </div>
    </div>

    {{-- ============ BASIC INFO ============ --}}
    <div class="student-profile-mobile-grid md:grid md:grid-cols-4 gap-4">
        <div class="glass-card p-4 student-profile-photo-card student-profile-mobile-span-2">
            <img src="{{ $student->profilePhotoUrl() }}" alt="{{ $student->name }}" class="student-profile-photo">
            <div>
                <span class="student-profile-meta-label">Student</span>
                <p class="student-profile-meta-value">{{ $student->name }}</p>
                <p class="text-xs text-slate-400 mt-1">{{ $student->email ?? 'N/A' }}</p>
            </div>
        </div>

        <div class="glass-card p-4">
            <span class="student-profile-meta-label">Reg No</span>
            <p class="student-profile-meta-value">{{ $student->registration_no ?? 'N/A' }}</p>
        </div>

        <div class="glass-card p-4">
            <span class="student-profile-meta-label">Contact No</span>
            <p class="student-profile-meta-value">{{ $student->phone ?? 'N/A' }}</p>
        </div>

        <div class="glass-card p-4">
            <span class="student-profile-meta-label">D.O.B</span>
            <p class="student-profile-meta-value">{{ optional($student->date_of_birth)->format('d M Y') ?? 'N/A' }}</p>
        </div>

        <div class="glass-card p-4">
            <span class="student-profile-meta-label">Joined</span>
            <p class="student-profile-meta-value">{{ $student->created_at->format('d M Y') }}</p>
        </div>

        <div class="glass-card p-4">
            <span class="student-profile-meta-label">Status</span>
            <p class="student-profile-meta-value">
                @if($student->trashed())
                    <span class="mini-badge mini-badge-red">Deleted</span>
                @elseif($student->status === 'blocked' ?? false)
                    <span class="mini-badge mini-badge-red">Blocked</span>
                @else
                    <span class="mini-badge mini-badge-green">Active</span>
                @endif
            </p>
        </div>

        <div class="glass-card p-4">
            <span class="student-profile-meta-label">Last Activity</span>
            <p class="student-profile-meta-value">
                {{ $lastActivity ? $lastActivity->diffForHumans() : 'No activity yet' }}
            </p>
        </div>
    </div>

    {{-- ============ KPI STATS ============ --}}
    <div>
        <h2 class="text-lg font-semibold text-white mb-3">📊 Performance Overview</h2>
        <div class="grid grid-cols-2 md:grid-cols-4 gap-4">
            <div class="kpi-stat kpi-stat-blue">
                <p class="kpi-stat-label">Total Attempts</p>
                <p class="kpi-stat-value">{{ $totalAttempts }}</p>
            </div>
            <div class="kpi-stat kpi-stat-cyan">
                <p class="kpi-stat-label">Avg Score</p>
                <p class="kpi-stat-value">{{ number_format($avgScore, 1) }}%</p>
            </div>
            <div class="kpi-stat kpi-stat-green">
                <p class="kpi-stat-label">Best Score</p>
                <p class="kpi-stat-value">{{ number_format($bestScore, 1) }}%</p>
            </div>
            <div class="kpi-stat kpi-stat-amber">
                <p class="kpi-stat-label">Pass Rate</p>
                <p class="kpi-stat-value">{{ number_format($passRate, 1) }}%</p>
            </div>
        </div>
    </div>

    {{-- ============ CHARTS ROW: Pass/Fail Doughnut + Score Trend Line ============ --}}
    @if($totalAttempts > 0)
        <div class="grid grid-cols-1 lg:grid-cols-3 gap-5">

            {{-- Pass/Fail Doughnut --}}
            <div class="glass-card p-5">
                <div class="mb-3">
                    <h2 class="text-lg font-semibold text-white">🎯 Pass vs Fail</h2>
                    <p class="text-xs text-slate-400 mt-0.5">Overall test outcome split</p>
                </div>
                <div class="chart-wrap">
                    <canvas id="passFailChart"></canvas>
                </div>
                <div class="grid grid-cols-2 gap-3 mt-4">
                    <div class="rounded-xl border border-green-400/25 bg-green-500/5 px-3 py-2.5">
                        <p class="text-[0.6rem] font-bold uppercase tracking-wider text-green-300">Passed</p>
                        <p class="text-lg font-bold text-green-200 mt-0.5">{{ $passedCount }}</p>
                    </div>
                    <div class="rounded-xl border border-red-400/25 bg-red-500/5 px-3 py-2.5">
                        <p class="text-[0.6rem] font-bold uppercase tracking-wider text-red-300">Failed</p>
                        <p class="text-lg font-bold text-red-200 mt-0.5">{{ $failedCount }}</p>
                    </div>
                </div>
            </div>

            {{-- Score Trend Line Chart --}}
            <div class="glass-card p-5 lg:col-span-2">
                <div class="mb-3 flex items-center justify-between flex-wrap gap-2">
                    <div>
                        <h2 class="text-lg font-semibold text-white">📈 Score Trend</h2>
                        <p class="text-xs text-slate-400 mt-0.5">Last {{ min(10, $totalAttempts) }} attempts</p>
                    </div>
                    <span class="mini-badge mini-badge-cyan">Latest first</span>
                </div>
                <div class="chart-wrap">
                    <canvas id="scoreTrendChart"></canvas>
                </div>
            </div>

        </div>
    @endif

    {{-- ============ EXAM TYPE BREAKDOWN ============ --}}
    @if(count($examTypeBreakdown) > 0)
        <div>
            <h2 class="text-lg font-semibold text-white mb-3">🎯 Performance by Exam Type</h2>

            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
                @foreach($examTypeBreakdown as $type)
                    @php
                        if ($type['avg'] >= 75) { $color = 'green'; $label = 'Excellent'; $emoji = '🌟'; }
                        elseif ($type['avg'] >= 60) { $color = 'green'; $label = 'Good'; $emoji = '👍'; }
                        elseif ($type['avg'] >= 40) { $color = 'yellow'; $label = 'Average'; $emoji = '⚠️'; }
                        else { $color = 'red'; $label = 'Needs Work'; $emoji = '🚨'; }
                    @endphp

                    <div class="exam-type-stat">
                        <div class="flex items-center justify-between gap-2 mb-2">
                            <span class="exam-type-badge">{{ $type['code'] }}</span>
                            <span class="text-xs text-slate-400">{{ $type['attempts'] }} attempt{{ $type['attempts'] > 1 ? 's' : '' }}</span>
                        </div>
                        <p class="text-sm font-semibold text-white truncate">{{ $type['name'] }}</p>

                        <div class="flex items-baseline justify-between mt-3">
                            <span class="text-3xl font-bold text-{{ $color }}-400">{{ number_format($type['avg'], 1) }}%</span>
                            <span class="text-xs font-semibold text-{{ $color }}-300">{{ $emoji }} {{ $label }}</span>
                        </div>

                        <div class="bar-track-lg">
                            <div class="bar-fill-lg bar-{{ $color }}" style="width: {{ max($type['avg'], 2) }}%"></div>
                        </div>

                        <div class="flex items-center justify-between mt-2 text-xs text-slate-400">
                            <span>Best: <span class="font-bold text-green-400">{{ number_format($type['best'] ?? $type['avg'], 1) }}%</span></span>
                            <span>Lowest: <span class="font-bold text-red-400">{{ number_format($type['worst'] ?? $type['avg'], 1) }}%</span></span>
                        </div>
                    </div>
                @endforeach
            </div>
        </div>
    @endif

    {{-- ============ EXAM HISTORY ============ --}}
    <div>
        <h2 class="text-lg font-semibold text-white mb-3">📋 Exam History</h2>

        @forelse($results as $r)
            @php
                $passed = ($r->status ?? null) === 'Pass' || ($r->obtained_marks >= ($r->total_marks * 0.4));
                $percentage = $r->total_marks > 0 ? round(($r->obtained_marks / $r->total_marks) * 100, 1) : 0;
                $barColor = $percentage >= 60 ? 'green' : ($percentage >= 40 ? 'yellow' : 'red');
            @endphp

            <div class="exam-history-row mb-2">
                <div class="flex-1 min-w-0">
                    <div class="flex items-center gap-2 flex-wrap mb-1">
                        @if($r->exam->exam_type ?? null)
                            <span class="mini-badge mini-badge-cyan">{{ $r->exam->exam_type }}</span>
                        @endif
                        @if($r->exam->subject ?? null && $r->exam->subject !== 'All Subjects')
                            <span class="text-xs text-slate-400">📚 {{ $r->exam->subject }}</span>
                        @endif
                        @if($r->exam->topic ?? null)
                            <span class="text-xs text-slate-400">→ {{ $r->exam->topic }}</span>
                        @endif
                    </div>
                    <p class="font-semibold text-white truncate">{{ $r->exam->title ?? 'Exam' }}</p>

                    {{-- Progress bar under title --}}
                    <div class="bar-track-lg" style="margin-top: 0.5rem; max-width: 240px;">
                        <div class="bar-fill-lg bar-{{ $barColor }}" style="width: {{ max($percentage, 2) }}%"></div>
                    </div>

                    <p class="text-xs text-slate-400 mt-1.5">
                        {{ optional($r->submitted_at ?? $r->created_at)->format('d M Y, h:i A') }}
                    </p>
                </div>

                <div class="flex items-center gap-4 flex-shrink-0">
                    <div class="text-right">
                        <p class="text-sm font-bold {{ $passed ? 'text-green-400' : 'text-red-400' }}">
                            {{ $r->obtained_marks }} / {{ $r->total_marks }}
                        </p>
                        <p class="text-xs text-slate-400 mt-0.5">
                            {{ $percentage }}% · <span class="{{ $passed ? 'status-pass' : 'status-fail' }}">{{ $passed ? 'Pass' : 'Fail' }}</span>
                        </p>
                    </div>
                    <a href="{{ route('admin.results.sheet', $r->id) }}"
                       class="admin-action-btn bg-indigo-600 text-white text-xs px-3 py-1.5">
                        View Sheet
                    </a>
                </div>
            </div>
        @empty
            <div class="glass-card p-8 text-center">
                <p class="text-3xl mb-2">📭</p>
                <p class="text-slate-300 font-semibold">No exams attempted yet</p>
                <p class="text-slate-400 text-sm mt-1">This student hasn't taken any tests so far.</p>
            </div>
        @endforelse
    </div>

</div>

{{-- ============ CHART.JS SCRIPTS ============ --}}
@if($totalAttempts > 0)
<script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.0/dist/chart.umd.min.js"></script>
<script>
document.addEventListener("DOMContentLoaded", function () {

    // ===== Pass/Fail Doughnut =====
    const passFailCtx = document.getElementById('passFailChart');
    if (passFailCtx) {
        new Chart(passFailCtx, {
            type: 'doughnut',
            data: {
                labels: ['Passed', 'Failed'],
                datasets: [{
                    data: [{{ $passedCount }}, {{ $failedCount }}],
                    backgroundColor: [
                        'rgba(34, 197, 94, 0.85)',
                        'rgba(239, 68, 68, 0.85)'
                    ],
                    borderColor: 'rgba(15, 23, 42, 0.9)',
                    borderWidth: 3,
                    hoverOffset: 10,
                }]
            },
            options: {
                responsive: true,
                maintainAspectRatio: false,
                cutout: '68%',
                plugins: {
                    legend: {
                        position: 'bottom',
                        labels: {
                            color: '#cbd5e1',
                            font: { size: 12, weight: '600' },
                            padding: 14,
                            usePointStyle: true,
                            pointStyle: 'circle',
                        }
                    },
                    tooltip: {
                        backgroundColor: '#1e293b',
                        titleColor: '#fff',
                        bodyColor: '#cbd5e1',
                        padding: 12,
                        callbacks: {
                            label: function(ctx) {
                                const total = ctx.dataset.data.reduce((a, b) => a + b, 0);
                                const pct = total > 0 ? ((ctx.parsed / total) * 100).toFixed(1) : 0;
                                return ctx.label + ': ' + ctx.parsed + ' (' + pct + '%)';
                            }
                        }
                    }
                }
            }
        });
    }

    // ===== Score Trend Line Chart =====
    const scoreTrendCtx = document.getElementById('scoreTrendChart');
    const trendLabels = @json($trendLabels ?? []);
    const trendScores = @json($trendScores ?? []);

    if (scoreTrendCtx && trendScores.length) {
        new Chart(scoreTrendCtx, {
            type: 'line',
            data: {
                labels: trendLabels,
                datasets: [{
                    label: 'Score %',
                    data: trendScores,
                    borderColor: '#22d3ee',
                    backgroundColor: (context) => {
                        const ctx = context.chart.ctx;
                        const gradient = ctx.createLinearGradient(0, 0, 0, 260);
                        gradient.addColorStop(0, 'rgba(34, 211, 238, 0.35)');
                        gradient.addColorStop(1, 'rgba(34, 211, 238, 0)');
                        return gradient;
                    },
                    borderWidth: 3,
                    fill: true,
                    tension: 0.4,
                    pointBackgroundColor: trendScores.map(v => v >= 75 ? '#4ade80' : (v >= 40 ? '#facc15' : '#f87171')),
                    pointBorderColor: '#fff',
                    pointBorderWidth: 2,
                    pointRadius: 5,
                    pointHoverRadius: 7,
                }]
            },
            options: {
                responsive: true,
                maintainAspectRatio: false,
                plugins: {
                    legend: { display: false },
                    tooltip: {
                        backgroundColor: '#1e293b',
                        titleColor: '#fff',
                        bodyColor: '#cbd5e1',
                        padding: 12,
                        callbacks: {
                            title: (items) => items[0].label,
                            label: (item) => 'Score: ' + item.parsed.y + '%'
                        }
                    }
                },
                scales: {
                    y: {
                        beginAtZero: true,
                        max: 100,
                        ticks: { color: '#94a3b8', callback: v => v + '%' },
                        grid: { color: 'rgba(148, 163, 184, 0.1)' }
                    },
                    x: {
                        ticks: { color: '#94a3b8', maxRotation: 45, minRotation: 0 },
                        grid: { display: false }
                    }
                }
            }
        });
    }
});
</script>
@endif

@endsection