@extends('layouts.website')

@section('title', 'Directory Alumni')

@section('content')

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

    /* --- ALUMNI CARD --- */
    .alumni-card {
        background: #fff;
        border: none;
        border-radius: 20px;
        padding: 30px 20px;
        text-align: center;
        box-shadow: 0 10px 30px rgba(0,0,0,0.05);
        transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275), box-shadow 0.3s;
        height: 100%;
        position: relative;
        overflow: hidden;
        z-index: 1;
    }
    .alumni-card::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 6px;
        background: linear-gradient(90deg, #1a237e, #ffc107);
        z-index: 2;
    }
    .alumni-card:hover {
        transform: translateY(-10px);
        box-shadow: 0 20px 40px rgba(26, 35, 126, 0.15);
    }

    /* --- PROFILE IMAGE --- */
    .profile-wrapper {
        width: 140px;
        height: 140px;
        margin: 0 auto 20px;
        position: relative;
        z-index: 2;
    }
    .profile-img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        border-radius: 50%;
        border: 4px solid #fff;
        box-shadow: 0 5px 15px rgba(0,0,0,0.15);
        transition: transform 0.4s ease;
    }
    /* Lingkaran dekoratif di belakang foto */
    .profile-bg-circle {
        position: absolute;
        top: -5px;
        left: -5px;
        right: -5px;
        bottom: -5px;
        border-radius: 50%;
        border: 2px dashed #1a237e; /* Garis putus-putus biru */
        z-index: -1;
        transition: transform 0.4s ease, border-color 0.4s;
    }
    
    .alumni-card:hover .profile-img {
        transform: scale(1.05);
    }
    .alumni-card:hover .profile-bg-circle {
        transform: rotate(180deg);
        border-color: #ffc107; /* Berubah jadi kuning saat hover */
    }

    /* --- TEXT CONTENT --- */
    .alumni-name {
        font-weight: 800;
        font-size: 1.1rem;
        color: #2c3e50;
        margin-bottom: 5px;
        text-transform: uppercase;
        letter-spacing: 0.5px;
    }
    
    .badge-angkatan {
        background-color: #fff8e1;
        color: #ff8f00;
        font-weight: 700;
        padding: 5px 15px;
        border-radius: 50px;
        font-size: 0.8rem;
        display: inline-block;
        margin-bottom: 15px;
        border: 1px solid #ffecb3;
    }

    .alumni-job {
        font-size: 0.9rem;
        color: #6c757d;
        min-height: 40px; /* Menjaga tinggi kartu tetap sama meski teks job pendek */
        display: flex;
        align-items: center;
        justify-content: center;
        line-height: 1.4;
    }

    /* --- EMPTY STATE --- */
    .empty-state {
        text-align: center;
        padding: 80px 20px;
        background: #f8f9fa;
        border-radius: 20px;
        border: 2px dashed #dee2e6;
    }
</style>

<div class="container my-5">
    
    {{-- 1. HEADER --}}
    <div class="text-center mb-5" data-aos="fade-down" data-aos-duration="1000">
        <h2 class="page-title">Alumni Sekolah</h2>
        <p class="text-muted mt-3">Jejaring alumni SMK Swasta 16 Farmasi Bengkulu yang tersebar di berbagai bidang.</p>
    </div>

    {{-- 2. GRID ALUMNI --}}
    <div class="row g-4 justify-content-center">
        
        @forelse($alumnis as $index => $alumni)
            {{-- Gunakan $index untuk delay animasi agar muncul bertingkat --}}
            <div class="col-md-6 col-lg-3" data-aos="fade-up" data-aos-duration="1000" data-aos-delay="{{ $index * 100 }}">
                <div class="alumni-card h-100">
                    
                    {{-- Foto Profil --}}
                    <div class="profile-wrapper">
                        <div class="profile-bg-circle"></div>
                        @if($alumni->foto)
                            {{-- Cek apakah foto ada di storage atau public biasa --}}
                            @if(file_exists(public_path('storage/'.$alumni->foto)))
                                <img src="{{ asset('storage/'.$alumni->foto) }}" alt="{{ $alumni->nama }}" class="profile-img">
                            @else
                                <img src="{{ asset('images/'.$alumni->foto) }}" alt="{{ $alumni->nama }}" class="profile-img"
                                     onerror="this.src='https://ui-avatars.com/api/?name={{ urlencode($alumni->nama) }}&background=1a237e&color=fff&size=150'">
                            @endif
                        @else
                            {{-- Avatar Default Inisial Nama --}}
                            <img src="https://ui-avatars.com/api/?name={{ urlencode($alumni->nama) }}&background=1a237e&color=fff&size=150" alt="{{ $alumni->nama }}" class="profile-img">
                        @endif
                    </div>

                    {{-- Data Diri --}}
                    <h5 class="alumni-name">{{ $alumni->nama }}</h5>
                    
                    <div class="badge-angkatan">
                        <i class="fas fa-graduation-cap me-1"></i> Angkatan {{ $alumni->angkatan }}
                    </div>

                    <hr class="w-25 mx-auto my-3 opacity-25">

                    <div class="alumni-job">
                        @if($alumni->pekerjaan)
                             <span><i class="fas fa-briefcase me-2 text-primary opacity-50"></i> {{ Str::limit($alumni->pekerjaan, 40) }}</span>
                        @else
                             <span class="text-muted fst-italic small">Belum mengisi data pekerjaan</span>
                        @endif
                    </div>

                </div>
            </div>
        @empty
            {{-- STATE KOSONG --}}
            <div class="col-12" data-aos="fade-up">
                <div class="empty-state">
                    <i class="fas fa-user-graduate fa-4x text-muted mb-3 opacity-50"></i>
                    <h5 class="fw-bold text-secondary">Belum Ada Data Alumni</h5>
                    <p class="text-muted">Database alumni saat ini masih kosong.</p>
                </div>
            </div>
        @endforelse

    </div>

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

</div>

@endsection