@extends('layouts.app')

@section('title', 'Detail Siswa — ' . $siswa->nama)
@section('page-title', 'Detail Siswa')

@section('content')

{{-- Breadcrumb --}}
<nav style="margin-bottom:20px;">
    <ol class="breadcrumb" style="font-size:.82rem;">
        <li class="breadcrumb-item">
            <a href="{{ route('dashboard') }}" style="color:#1565c0;text-decoration:none;">Dashboard</a>
        </li>
        <li class="breadcrumb-item">
            <a href="{{ route('siswa.index') }}" style="color:#1565c0;text-decoration:none;">Data Siswa</a>
        </li>
        <li class="breadcrumb-item active text-muted">{{ $siswa->nama }}</li>
    </ol>
</nav>

<div class="row">
    {{-- Card Profil Siswa --}}
    <div class="col-md-4 mb-4">
        <div class="card-table" style="border-radius:14px;overflow:hidden;">
            <div style="background:linear-gradient(135deg,#0d3b7a,#1565c0);padding:35px 20px;text-align:center;">
                <div style="width:80px;height:80px;background:rgba(255,255,255,.2);
                            border-radius:50%;display:flex;align-items:center;
                            justify-content:center;font-size:2rem;color:#fff;
                            margin:0 auto 15px;font-weight:700;">
                    {{ strtoupper(substr($siswa->nama, 0, 1)) }}
                </div>
                <h5 class="text-white mb-1 fw-bold">{{ $siswa->nama }}</h5>
                <span style="background:rgba(255,255,255,.2);color:#fff;
                             padding:3px 12px;border-radius:20px;font-size:.78rem;">
                    Siswa Aktif
                </span>
            </div>
            <div style="padding:20px;">
                <div class="d-flex justify-content-center gap-2 flex-wrap">
                    <span class="badge"
                        style="background:#e8f0fe;color:#1565c0;padding:6px 14px;border-radius:8px;font-size:.8rem;">
                        <i class="bi bi-door-open me-1"></i> Kelas {{ $siswa->kelas }}
                    </span>
                    <span class="badge {{ $siswa->jenis_kelamin == 'Laki-laki' ? 'badge-laki' : 'badge-wanita' }}"
                        style="padding:6px 14px;border-radius:8px;font-size:.8rem;">
                        <i class="bi bi-gender-{{ $siswa->jenis_kelamin == 'Laki-laki' ? 'male' : 'female' }} me-1"></i>
                        {{ $siswa->jenis_kelamin }}
                    </span>
                </div>
            </div>
        </div>
    </div>

    {{-- Detail Informasi --}}
    <div class="col-md-8 mb-4">
        <div class="card-table">
            <div class="card-header">
                <i class="bi bi-person-lines-fill me-2" style="color:#1565c0;"></i>
                Informasi Lengkap Siswa
            </div>
            <div style="padding:24px;">
                <div class="row g-3">

                    <div class="col-md-6">
                        <div style="background:#f8f9fc;border-radius:10px;padding:16px;">
                            <div
                                style="font-size:.72rem;color:#9ca3af;font-weight:600;text-transform:uppercase;letter-spacing:.5px;margin-bottom:6px;">
                                <i class="bi bi-person me-1"></i> Nama Lengkap
                            </div>
                            <div style="font-weight:600;color:#1a2b4a;">{{ $siswa->nama }}</div>
                        </div>
                    </div>

                    <div class="col-md-6">
                        <div style="background:#f8f9fc;border-radius:10px;padding:16px;">
                            <div
                                style="font-size:.72rem;color:#9ca3af;font-weight:600;text-transform:uppercase;letter-spacing:.5px;margin-bottom:6px;">
                                <i class="bi bi-card-text me-1"></i> NISN
                            </div>
                            <div style="font-weight:600;color:#1a2b4a;font-family:monospace;">{{ $siswa->nisn }}</div>
                        </div>
                    </div>

                    <div class="col-md-6">
                        <div style="background:#f8f9fc;border-radius:10px;padding:16px;">
                            <div
                                style="font-size:.72rem;color:#9ca3af;font-weight:600;text-transform:uppercase;letter-spacing:.5px;margin-bottom:6px;">
                                <i class="bi bi-door-open me-1"></i> Kelas
                            </div>
                            <div style="font-weight:600;color:#1565c0;">{{ $siswa->kelas }}</div>
                        </div>
                    </div>

                    <div class="col-md-6">
                        <div style="background:#f8f9fc;border-radius:10px;padding:16px;">
                            <div
                                style="font-size:.72rem;color:#9ca3af;font-weight:600;text-transform:uppercase;letter-spacing:.5px;margin-bottom:6px;">
                                <i class="bi bi-gender-ambiguous me-1"></i> Jenis Kelamin
                            </div>
                            <div style="font-weight:600;color:#1a2b4a;">{{ $siswa->jenis_kelamin }}</div>
                        </div>
                    </div>

                    <div class="col-12">
                        <div style="background:#f8f9fc;border-radius:10px;padding:16px;">
                            <div
                                style="font-size:.72rem;color:#9ca3af;font-weight:600;text-transform:uppercase;letter-spacing:.5px;margin-bottom:6px;">
                                <i class="bi bi-geo-alt me-1"></i> Alamat
                            </div>
                            <div style="color:#374151;line-height:1.6;">{{ $siswa->alamat }}</div>
                        </div>
                    </div>

                    <div class="col-12">
                        <div style="background:#f8f9fc;border-radius:10px;padding:16px;">
                            <div
                                style="font-size:.72rem;color:#9ca3af;font-weight:600;text-transform:uppercase;letter-spacing:.5px;margin-bottom:6px;">
                                <i class="bi bi-calendar me-1"></i> Terdaftar Sejak
                            </div>
                            <div style="color:#374151;">{{ $siswa->created_at->translatedFormat('d F Y') }}</div>
                        </div>
                    </div>

                </div>

                <div class="mt-4">
                    <a href="{{ route('siswa.index') }}" class="btn btn-sm"
                        style="background:#f0f2f5;color:#374151;font-weight:600;">
                        <i class="bi bi-arrow-left me-1"></i> Kembali ke Daftar Siswa
                    </a>
                </div>
            </div>
        </div>
    </div>
</div>

@endsection