@extends('layouts.website')

@section('title', 'Direktori Guru dan Tenaga Kependidikan')

@section('content')

{{-- CSS MODERN --}}
<style>
    /* --- HEADER TITLE --- */
    .page-header {
        text-align: center;
        margin-bottom: 50px;
    }
    .page-title {
        font-weight: 800;
        font-size: 2.2rem;
        color: #1a237e;
        text-transform: uppercase;
        letter-spacing: 1px;
        position: relative;
        display: inline-block;
        padding-bottom: 15px;
    }
    .page-title::after {
        content: '';
        position: absolute;
        left: 50%;
        bottom: 0;
        transform: translateX(-50%);
        width: 80px;
        height: 5px;
        background-color: #ffc107;
        border-radius: 2px;
    }

    /* --- KARTU GURU MODERN --- */
    .guru-card {
        background: #fff;
        border: none; /* Hapus border kasar lama */
        border-radius: 15px; /* Rounded modern */
        display: flex; /* Layout kiri-kanan tetap dipertahankan */
        overflow: hidden;
        height: 100%;
        box-shadow: 0 5px 15px rgba(0,0,0,0.05); /* Bayangan halus */
        transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275), box-shadow 0.3s;
        position: relative;
    }
    
    .guru-card:hover {
        transform: translateY(-8px);
        box-shadow: 0 15px 30px rgba(26, 35, 126, 0.15);
    }

    /* Dekorasi Garis Aksen Kiri */
    .guru-card::before {
        content: '';
        position: absolute;
        left: 0;
        top: 0;
        bottom: 0;
        width: 5px;
        background: #1a237e;
        z-index: 1;
    }

    /* Bagian Foto (Kiri) */
    .guru-photo-wrapper {
        width: 160px; /* Sedikit diperlebar */
        min-width: 160px;
        background-color: #f8f9fa;
        padding: 15px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-right: 1px solid #f0f0f0;
    }

    .guru-photo {
        width: 100%;
        height: 160px; 
        object-fit: cover;
        object-position: top center;
        border-radius: 10px; /* Foto rounded */
        box-shadow: 0 4px 8px rgba(0,0,0,0.1);
        transition: transform 0.4s ease;
    }
    
    .guru-card:hover .guru-photo {
        transform: scale(1.05);
    }

    /* Bagian Info (Kanan) */
    .guru-details {
        flex-grow: 1;
        padding: 20px 25px;
        font-size: 0.95rem;
        color: #444;
        display: flex;
        flex-direction: column;
        justify-content: center;
    }

    /* Baris Data */
    .detail-row {
        display: flex;
        margin-bottom: 8px;
        line-height: 1.5;
        border-bottom: 1px dashed #eee; /* Garis pemisah putus-putus halus */
        padding-bottom: 5px;
    }
    .detail-row:last-child {
        border-bottom: none;
        margin-bottom: 0;
        padding-bottom: 0;
    }

    .detail-label {
        font-weight: 700;
        width: 130px;
        min-width: 130px;
        color: #1a237e; /* Warna label biru */
        font-size: 0.9rem;
    }

    .detail-value {
        flex-grow: 1;
        color: #333;
        font-weight: 500;
    }

    /* Responsif HP */
    @media (max-width: 576px) {
        .guru-card {
            flex-direction: column;
            text-align: center;
        }
        .guru-card::before {
            width: 100%;
            height: 5px;
            bottom: auto;
        }
        .guru-photo-wrapper {
            width: 100%;
            border-right: none;
            border-bottom: 1px solid #f0f0f0;
            padding: 25px;
            background: linear-gradient(to bottom, #fff, #f8f9fa);
        }
        .guru-photo {
            width: 140px;
            height: 140px;
            border-radius: 50%; /* Jadi bulat di HP agar lebih modern */
            border: 4px solid #fff;
        }
        .guru-details {
            padding: 25px;
            text-align: left;
        }
        .detail-row {
            padding-bottom: 8px;
            margin-bottom: 8px;
        }
    }
    
    /* Empty State */
    .empty-state {
        text-align: center;
        padding: 60px 20px;
        background: #f8f9fa;
        border-radius: 20px;
        border: 2px dashed #dee2e6;
    }
</style>

<div class="container my-5">
    
    {{-- Header dengan Animasi --}}
    <div class="page-header" data-aos="fade-down" data-aos-duration="1000">
        <h3 class="page-title">Direktori Guru & Staff</h3>
        <p class="text-muted mt-3">Daftar tenaga pendidik dan kependidikan profesional kami.</p>
    </div>

    {{-- List Guru --}}
    @if($gurus->count() > 0)
        <div class="row g-4">
            @foreach($gurus as $index => $guru)
                <div class="col-lg-6" data-aos="fade-up" data-aos-duration="1000" data-aos-delay="{{ $index * 100 }}"> {{-- Delay bertingkat --}}
                    <div class="guru-card">
                        
                        {{-- FOTO (STRUKTUR TETAP) --}}
                        <div class="guru-photo-wrapper">
                            @if($guru->foto && file_exists(public_path('images/'.$guru->foto)))
                                <img src="{{ asset('images/'.$guru->foto) }}" class="guru-photo" alt="{{ $guru->nama_lengkap }}">
                            @else
                                {{-- Placeholder Keren --}}
                                <img src="https://ui-avatars.com/api/?name={{ urlencode($guru->nama_lengkap) }}&background=1a237e&color=fff&size=256" class="guru-photo" alt="No Image">
                            @endif
                        </div>

                        {{-- DATA DETAIL (STRUKTUR TETAP) --}}
                        <div class="guru-details">
                            
                            <div class="detail-row">
                                <div class="detail-label">Nama Lengkap</div>
                                <div class="detail-value fw-bold text-dark">{{ $guru->nama_lengkap }}</div>
                            </div>

                            @if(!empty($guru->nip))
                            <div class="detail-row">
                                <div class="detail-label">NIP</div>
                                <div class="detail-value font-monospace text-muted">{{ $guru->nip }}</div>
                            </div>
                            @endif

                            <div class="detail-row">
                                <div class="detail-label">Jenis Kelamin</div>
                                <div class="detail-value">{{ $guru->jenis_kelamin }}</div>
                            </div>

                            <div class="detail-row">
                                <div class="detail-label">Tempat Lahir</div>
                                <div class="detail-value">{{ $guru->tempat_lahir ?? '-' }}</div>
                            </div>

                            <div class="detail-row">
                                <div class="detail-label">Tanggal Lahir</div>
                                <div class="detail-value">
                                    @if($guru->tanggal_lahir)
                                        {{ \Carbon\Carbon::parse($guru->tanggal_lahir)->translatedFormat('d F Y') }}
                                    @else
                                        -
                                    @endif
                                </div>
                            </div>

                            {{-- Jabatan dengan Badge --}}
                            <div class="detail-row mt-2" style="border-bottom: none;">
                                <div class="detail-label">Jabatan</div>
                                <div class="detail-value">
                                    <span class="badge bg-warning text-dark text-uppercase shadow-sm">
                                        {{ $guru->jabatan }}
                                    </span>
                                </div>
                            </div>

                        </div>
                    </div>
                </div>
            @endforeach
        </div>

        {{-- Pagination --}}
        <div class="mt-5 d-flex justify-content-center" data-aos="fade-up">
            {{ $gurus->links() }}
        </div>

    @else
        {{-- EMPTY STATE --}}
        <div class="col-12" data-aos="fade-up">
            <div class="empty-state">
                <i class="fas fa-chalkboard-teacher fa-4x text-muted mb-3 opacity-50"></i>
                <h5 class="fw-bold text-secondary">Data Belum Tersedia</h5>
                <p class="text-muted">Data Guru dan Tenaga Kependidikan belum ditambahkan ke sistem.</p>
            </div>
        </div>
    @endif

</div>

@endsection