@extends('layouts.app')

@section('title', 'Detail Guru — ' . $guru->nama)
@section('page-title', 'Detail Guru')

@section('content')

<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('guru.index') }}" style="color:#1565c0;text-decoration:none;">Data Guru</a>
        </li>
        <li class="breadcrumb-item active text-muted">{{ $guru->nama }}</li>
    </ol>
</nav>

<div class="row">
    <div class="col-md-4 mb-4">
        <div class="card-table" style="border-radius:14px;overflow:hidden;">
            <div style="background:linear-gradient(135deg,#064e3b,#16a34a);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($guru->nama, 0, 1)) }}
                </div>
                <h5 class="text-white mb-1 fw-bold">{{ $guru->nama }}</h5>
                <span style="background:rgba(255,255,255,.2);color:#fff;
                             padding:3px 12px;border-radius:20px;font-size:.78rem;">
                    Tenaga Pendidik
                </span>
            </div>
            <div style="padding:20px;text-align:center;">
                <span class="badge"
                    style="background:#dcfce7;color:#16a34a;padding:7px 16px;border-radius:8px;font-size:.85rem;font-weight:600;">
                    <i class="bi bi-book me-1"></i> {{ $guru->mata_pelajaran }}
                </span>
            </div>
        </div>
    </div>

    <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:#16a34a;"></i>
                Informasi Lengkap Guru
            </div>
            <div style="padding:24px;">
                <div class="row g-3">

                    <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-person me-1"></i> Nama Lengkap
                            </div>
                            <div style="font-weight:600;color:#1a2b4a;font-size:1.05rem;">{{ $guru->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> NIP
                            </div>
                            <div style="font-weight:600;color:#1a2b4a;font-family:monospace;">{{ $guru->nip }}</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;">{{ $guru->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-book me-1"></i> Mata Pelajaran
                            </div>
                            <div style="font-weight:600;color:#16a34a;">{{ $guru->mata_pelajaran }}</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;">{{ $guru->alamat }}</div>
                        </div>
                    </div>

                </div>

                <div class="mt-4">
                    <a href="{{ route('guru.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 Guru
                    </a>
                </div>
            </div>
        </div>
    </div>
</div>

@endsection