@extends('student.layout')
@section('title','My Dashboard')
@section('page-title','My Japan Journey')

@section('content')
@php
$si = $student->stageInfo();
$paidFees    = $student->fees->where('status','paid')->sum('amount');
$pendingFees = $student->fees->whereIn('status',['pending','partial'])->sum('amount');
$verifiedDocs = $student->documents->where('status','verified')->count();
$totalDocs    = $student->documents->count();
@endphp

<!-- Stage Card -->
<div style="background:linear-gradient(135deg,var(--navy),#1e3a5f);border-radius:18px;padding:28px;margin-bottom:20px;color:white;position:relative;overflow:hidden;">
    <div style="position:absolute;right:-20px;top:-20px;font-size:120px;opacity:0.05;font-family:'Noto Sans JP',sans-serif;">進</div>
    <div style="font-family:'Noto Sans JP',sans-serif;font-size:11px;color:rgba(255,255,255,0.4);letter-spacing:2px;margin-bottom:8px;">あなたの旅の進捗</div>
    <div style="font-size:13px;color:rgba(255,255,255,0.5);margin-bottom:6px;">Current Stage</div>
    <div style="font-size:24px;font-weight:800;color:white;margin-bottom:4px;">
        <i class="fas {{ $si['icon'] }}" style="color:{{ $si['color'] }};margin-right:8px;"></i>
        {{ $si['label'] }}
    </div>
    <div style="font-size:13px;color:rgba(255,255,255,0.4);">{{ $student->course }} · {{ $student->batch ?? 'No batch assigned' }} · Enrolled {{ $student->enrollment_date?->format('d M Y') }}</div>

    <!-- Progress bar -->
    <div style="margin-top:20px;">
        @php
        $allStages  = array_keys(\App\Models\Student::stages());
        $currentIdx = array_search($student->current_stage, $allStages);
        $pct        = round(($currentIdx / (count($allStages)-1)) * 100);
        @endphp
        <div style="display:flex;justify-content:space-between;font-size:11px;color:rgba(255,255,255,0.4);margin-bottom:6px;">
            <span>Enquiry</span><span>{{ $pct }}% Complete</span><span>Japan 🎌</span>
        </div>
        <div style="height:6px;background:rgba(255,255,255,0.1);border-radius:3px;">
            <div style="height:6px;width:{{ $pct }}%;background:var(--gold);border-radius:3px;transition:width 1s;"></div>
        </div>
    </div>
</div>

<!-- Stats row -->
<div style="display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:20px;">
    <div class="card" style="padding:18px;text-align:center;">
        <div style="font-size:24px;font-weight:900;color:var(--red);">{{ $student->course }}</div>
        <div style="font-size:11px;color:#64748b;margin-top:4px;">Current Course</div>
    </div>
    <div class="card" style="padding:18px;text-align:center;">
        <div style="font-size:24px;font-weight:900;color:#22c55e;">₹{{ number_format($paidFees) }}</div>
        <div style="font-size:11px;color:#64748b;margin-top:4px;">Fee Paid</div>
    </div>
    <div class="card" style="padding:18px;text-align:center;">
        <div style="font-size:24px;font-weight:900;color:{{ $pendingFees>0?'#f59e0b':'#22c55e' }};">
            {{ $pendingFees>0 ? '₹'.number_format($pendingFees) : '✓' }}
        </div>
        <div style="font-size:11px;color:#64748b;margin-top:4px;">Fee Pending</div>
    </div>
    <div class="card" style="padding:18px;text-align:center;">
        <div style="font-size:24px;font-weight:900;color:#3b82f6;">{{ $verifiedDocs }}/{{ $totalDocs ?: '—' }}</div>
        <div style="font-size:11px;color:#64748b;margin-top:4px;">Docs Verified</div>
    </div>
</div>

<div style="display:grid;grid-template-columns:1fr 1fr;gap:18px;">
    <!-- Study Materials preview -->
    <div class="card">
        <div class="card-header">
            <h3><i class="fas fa-book-open" style="color:var(--red);margin-right:6px;"></i>Study Materials</h3>
            <a href="{{ route('student.materials') }}" class="btn btn-outline btn-sm">View All</a>
        </div>
        <div class="card-body" style="padding:0;">
            @forelse($materials as $m)
            <div style="display:flex;align-items:center;gap:12px;padding:12px 16px;border-bottom:1px solid #f1f5f9;">
                <div style="width:36px;height:36px;background:{{ $m->type=='pdf'?'#fef2f2':($m->type=='video'?'#eff6ff':'#f0fdf4') }};border-radius:10px;display:flex;align-items:center;justify-content:center;flex-shrink:0;">
                    <i class="fas {{ $m->typeIcon() }}" style="color:{{ $m->type=='pdf'?'var(--red)':($m->type=='video'?'#3b82f6':'#22c55e') }};font-size:14px;"></i>
                </div>
                <div style="flex:1;min-width:0;">
                    <div style="font-size:13px;font-weight:600;color:#0f172a;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;">{{ $m->title }}</div>
                    <div style="font-size:11px;color:#94a3b8;">{{ $m->topic ?? $m->course }}</div>
                </div>
                @if($m->file_path || $m->external_url)
                <a href="{{ $m->file_path ? asset('uploads/materials/'.$m->file_path) : $m->external_url }}" target="_blank" class="btn btn-outline btn-sm btn-icon"><i class="fas fa-arrow-right"></i></a>
                @endif
            </div>
            @empty
            <div style="padding:24px;text-align:center;color:#94a3b8;font-size:13px;">No materials yet. Check back soon!</div>
            @endforelse
        </div>
    </div>

    <!-- Recent tests -->
    <div class="card">
        <div class="card-header">
            <h3><i class="fas fa-chart-bar" style="color:var(--red);margin-right:6px;"></i>Recent Tests</h3>
            <a href="{{ route('student.performance') }}" class="btn btn-outline btn-sm">View All</a>
        </div>
        <div class="card-body" style="padding:0;">
            @forelse($recentTests as $r)
            <div style="display:flex;align-items:center;justify-content:space-between;padding:12px 16px;border-bottom:1px solid #f1f5f9;">
                <div>
                    <div style="font-size:13px;font-weight:600;color:#0f172a;">{{ $r->test?->title }}</div>
                    <div style="font-size:11px;color:#94a3b8;">{{ $r->test?->test_date?->format('d M Y') }}</div>
                </div>
                @if($r->marks_obtained !== null)
                <div style="text-align:right;">
                    <div style="font-size:18px;font-weight:900;color:{{ $r->percentage()>=60?'#22c55e':'#dc2626' }};">{{ $r->marks_obtained }}</div>
                    <div style="font-size:10px;color:#94a3b8;">/ {{ $r->test?->total_marks }}</div>
                </div>
                @else
                <span class="badge badge-gray">Pending</span>
                @endif
            </div>
            @empty
            <div style="padding:24px;text-align:center;color:#94a3b8;font-size:13px;">No tests yet.</div>
            @endforelse
        </div>
    </div>
</div>
@endsection