{{-- resources/views/public/guru.blade.php --}}
@extends('layouts.public')
@section('title', 'Direktori Tenaga Pendidik & Staff')

@section('content')
<section class="position-relative d-flex align-items-center justify-content-center overflow-hidden" style="min-height: 40vh; padding-top: 140px; padding-bottom: 80px; background: linear-gradient(135deg, var(--primary-dark) 0%, var(--primary-emerald) 100%);">
    <div class="position-absolute top-0 start-0 w-100 h-100" style="background-image: radial-gradient(rgba(255,255,255,0.1) 1px, transparent 1px); background-size: 20px 20px; opacity: 0.3;"></div>
    
    <div class="container position-relative text-center text-white" style="z-index: 2;">
        <span class="badge px-4 py-2 rounded-pill mb-3" style="background: var(--accent-gold); color: var(--primary-dark); font-size: 0.95rem; font-weight: 700; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);">
            <i class="bi bi-people-fill me-1"></i> Direktori
        </span>
        <h1 class="fw-bold mx-auto mb-3" style="font-size: 3rem; font-family: 'Cairo', sans-serif; text-shadow: 0 2px 10px rgba(0,0,0,0.3);">
            Tenaga Pendidik & Staff
        </h1>
        <p class="lead mx-auto" style="max-width: 700px; color: rgba(255,255,255,0.9); font-weight: 400; font-size: 1.1rem;">
            Mengenal lebih dekat para pahlawan tanpa tanda jasa yang berdedikasi membimbing dan mengelola administrasi madrasah kami.
        </p>
    </div>
</section>

<section class="section-spacing section-bg-light" style="padding-top: 60px; padding-bottom: 100px;">
    <div class="container">
        <ul class="nav nav-pills justify-content-center mb-5" id="direktori-tab" role="tablist">
            <li class="nav-item" role="presentation">
                <button class="nav-link active px-4 fw-bold rounded-pill shadow-sm" id="guru-tab" data-bs-toggle="pill" data-bs-target="#tab-guru" type="button" role="tab" style="transition: all 0.3s;">
                    <i class="bi bi-person-video3 me-1"></i> Tenaga Pendidik (Guru)
                </button>
            </li>
            <li class="nav-item ms-3" role="presentation">
                <button class="nav-link px-4 fw-bold rounded-pill border bg-white text-dark shadow-sm" id="staff-tab" data-bs-toggle="pill" data-bs-target="#tab-staff" type="button" role="tab" style="transition: all 0.3s;">
                    <i class="bi bi-person-gear me-1"></i> Tenaga Kependidikan (Staff)
                </button>
            </li>
        </ul>

        <div class="tab-content" id="direktoriTabContent">
            <div class="tab-pane fade show active" id="tab-guru" role="tabpanel">
                <div class="row row-cols-1 row-cols-sm-2 row-cols-md-3 row-cols-lg-4 g-4">
                    {{-- Asumsi variabel dari controller adalah $gurus --}}
                    @forelse($gurus ?? [] as $guru)
                    <div class="col">
                        <div class="card h-100 border-0 shadow-sm rounded-4 overflow-hidden hover-lift text-center" style="transition: transform 0.3s ease, box-shadow 0.3s ease;">
                            <div class="card-body p-4">
                                <div class="mb-4 position-relative d-inline-block">
                                    <img src="{{ isset($guru->foto) && $guru->foto ? asset('storage/guru/' . $guru->foto) : 'https://ui-avatars.com/api/?name='.urlencode($guru->nama_lengkap ?? $guru->nama ?? 'Guru').'&background=random&size=200' }}" 
                                         class="img-fluid rounded-4 shadow-sm border border-white" 
                                         style="width: 130px; height: 130px; object-fit: cover; background: #f8f9fa; border-width: 3px !important;" 
                                         alt="Foto Guru">
                                </div>
                                
                                <h5 class="fw-bold text-dark mb-1" style="font-size: 1.15rem;">{{ $guru->nama_lengkap ?? $guru->nama ?? 'Nama Guru' }}</h5>
                                
                                <div class="mb-3">
                                    <span class="badge bg-primary bg-opacity-10 text-primary px-3 py-2 rounded-pill fw-medium border border-primary border-opacity-25">
                                        {{ $guru->jabatan ?? 'Guru Mata Pelajaran' }}
                                    </span>
                                </div>
                                
                                @if(isset($guru->mapel) && $guru->mapel)
                                <p class="text-muted small mb-0 mt-3 border-top pt-3" style="border-color: rgba(0,0,0,0.05) !important;">
                                    <i class="bi bi-book me-1"></i> Pengampu: <br>
                                    <strong>{{ $guru->mapel }}</strong>
                                </p>
                                @endif
                            </div>
                        </div>
                    </div>
                    @empty
                    <div class="col-12 text-center py-5 text-muted">
                        <i class="bi bi-people" style="font-size: 4rem; opacity: 0.5;"></i>
                        <p class="mt-3 fs-5">Data Tenaga Pendidik belum ditambahkan.</p>
                    </div>
                    @endforelse
                </div>
            </div>
            <div class="tab-pane fade" id="tab-staff" role="tabpanel">
                <div class="row row-cols-1 row-cols-sm-2 row-cols-md-3 row-cols-lg-4 g-4">
                    {{-- Asumsi variabel dari controller adalah $staffs --}}
                    @forelse($staffs ?? [] as $staff)
                    <div class="col">
                        <div class="card h-100 border-0 shadow-sm rounded-4 overflow-hidden hover-lift text-center" style="transition: transform 0.3s ease, box-shadow 0.3s ease;">
                            <div class="card-body p-4">
                                <div class="mb-4 position-relative d-inline-block">
                                    <img src="{{ isset($staff->foto) && $staff->foto ? asset('storage/staff/' . $staff->foto) : 'https://ui-avatars.com/api/?name='.urlencode($staff->nama_lengkap ?? $staff->nama ?? 'Staff').'&background=random&size=200' }}" 
                                         class="img-fluid rounded-4 shadow-sm border border-white" 
                                         style="width: 130px; height: 130px; object-fit: cover; background: #f8f9fa; border-width: 3px !important;" 
                                         alt="Foto Staff">
                                </div>
                                
                                <h5 class="fw-bold text-dark mb-1" style="font-size: 1.15rem;">{{ $staff->nama_lengkap ?? $staff->nama ?? 'Nama Staff' }}</h5>
                                
                                <div class="mb-3">
                                    <span class="badge bg-success bg-opacity-10 text-success px-3 py-2 rounded-pill fw-medium border border-success border-opacity-25">
                                        {{ $staff->jabatan ?? 'Staff Tata Usaha' }}
                                    </span>
                                </div>
                                
                                @if(isset($staff->tugas) && $staff->tugas)
                                <p class="text-muted small mb-0 mt-3 border-top pt-3" style="border-color: rgba(0,0,0,0.05) !important;">
                                    <i class="bi bi-briefcase me-1"></i> Bagian: <br>
                                    <strong>{{ $staff->tugas }}</strong>
                                </p>
                                @endif
                            </div>
                        </div>
                    </div>
                    @empty
                    <div class="col-12 text-center py-5 text-muted">
                        <i class="bi bi-person-gear" style="font-size: 4rem; opacity: 0.5;"></i>
                        <p class="mt-3 fs-5">Data Tenaga Kependidikan (Staff) belum ditambahkan.</p>
                    </div>
                    @endforelse
                </div>
            </div>
            
        </div>
        
    </div>
</section>

<style>
    .hover-lift:hover { 
        transform: translateY(-8px); 
        box-shadow: 0 15px 35px rgba(0,0,0,0.1) !important; 
    }
    
    #direktori-tab .nav-link.active {
        background: linear-gradient(135deg, var(--primary-dark) 0%, var(--primary-emerald) 100%) !important;
        color: white !important;
        border-color: transparent !important;
    }
    #direktori-tab .nav-link:not(.active):hover {
        background-color: rgba(0,0,0,0.02) !important;
    }
</style>
@endsection