{{-- resources/views/public/ekskul.blade.php --}}
@extends('layouts.public')
@section('title', 'Program Ekstrakurikuler')

@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-activity me-1"></i> Pengembangan Diri
        </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);">
            Ekstrakurikuler
        </h1>
        <p class="lead mx-auto" style="max-width: 700px; color: rgba(255,255,255,0.9); font-weight: 400; font-size: 1.1rem;">
            Wadah pengembangan minat, bakat, dan potensi siswa di luar jam pelajaran akademik untuk mencetak generasi yang aktif dan berprestasi.
        </p>
    </div>
</section>

<section class="section-spacing section-bg-light" style="padding-top: 60px; padding-bottom: 100px;">
    <div class="container">
        <div class="row row-cols-1 row-cols-md-2 row-cols-lg-3 g-5">
            @forelse($ekskuls ?? [] as $ekskul)
            <div class="col">
                <div class="card h-100 border-0 shadow-sm rounded-4 overflow-hidden hover-lift d-flex flex-column" style="transition: transform 0.3s ease, box-shadow 0.3s ease;">
                    <div class="position-relative bg-light" style="height: 220px;">
                        @if(isset($ekskul->foto) && $ekskul->foto)
                            <img src="{{ asset('storage/ekskul/' . $ekskul->foto) }}" class="w-100 h-100 object-fit-cover" alt="{{ $ekskul->nama_ekskul ?? 'Ekstrakurikuler' }}">
                        @else
                            <div class="w-100 h-100 d-flex align-items-center justify-content-center bg-primary bg-opacity-10">
                                <i class="bi bi-image text-primary" style="font-size: 4rem; opacity: 0.3;"></i>
                            </div>
                        @endif
                        
                        @if(isset($ekskul->jadwal) && $ekskul->jadwal)
                        <div class="position-absolute top-0 end-0 m-3">
                            <span class="badge bg-dark bg-opacity-75 rounded-pill px-3 py-2 shadow-sm" style="backdrop-filter: blur(4px);">
                                <i class="bi bi-clock me-1"></i> {{ $ekskul->jadwal }}
                            </span>
                        </div>
                        @endif
                    </div>
                    
                    <div class="card-body p-4 d-flex flex-column" style="flex-grow: 1;">
                        <h4 class="fw-bold text-dark mb-3" style="font-family: 'Cairo', sans-serif;">{{ $ekskul->nama_ekskul ?? $ekskul->nama ?? 'Nama Ekstrakurikuler' }}</h4>
                        
                        <p class="text-muted mb-4" style="line-height: 1.7; font-size: 0.95rem; text-align: justify;">
                            {{ $ekskul->deskripsi ?? 'Deskripsi tentang ekstrakurikuler ini belum tersedia. Kegiatan ini bertujuan untuk mengembangkan bakat dan minat siswa.' }}
                        </p>
                        
                        <div class="mt-auto pt-3 border-top" style="border-color: rgba(0,0,0,0.05) !important;">
                            <div class="d-flex align-items-center">
                                <div class="bg-primary bg-opacity-10 rounded-circle d-flex align-items-center justify-content-center me-3" style="width: 40px; height: 40px;">
                                    <i class="bi bi-person-badge text-primary fs-5"></i>
                                </div>
                                <div>
                                    <p class="mb-0 small text-muted lh-1">Pembina</p>
                                    <p class="mb-0 fw-bold text-dark">{{ $ekskul->pembina ?? 'Belum Ditentukan' }}</p>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                </div>
            </div>
            @empty
            <div class="col-12 text-center py-5 text-muted">
                <i class="bi bi-controller" style="font-size: 4rem; opacity: 0.5;"></i>
                <p class="mt-3 fs-5">Data ekstrakurikuler belum ditambahkan.</p>
            </div>
            @endforelse
        </div>
        
    </div>
</section>

<style>
    .hover-lift:hover { 
        transform: translateY(-8px); 
        box-shadow: 0 15px 35px rgba(0,0,0,0.1) !important; 
    }
</style>
@endsection