@extends('layouts.website')

@section('title', $ekstra->name . ' - Kegiatan Ekstrakulikuler')

@section('content')
<style>
    /* Hero Section Spesifik Halaman Ini */
    .ekskul-hero {
        background: linear-gradient(to right, #1a237e, #283593);
        color: white;
        padding: 60px 0;
        margin-bottom: 40px;
    }
    
    .photo-card {
        border: none;
        border-radius: 10px;
        overflow: hidden;
        transition: transform 0.3s ease;
        box-shadow: 0 4px 10px rgba(0,0,0,0.1);
        cursor: pointer;
    }
    .photo-card:hover {
        transform: scale(1.03);
        box-shadow: 0 10px 20px rgba(0,0,0,0.2);
    }
    .photo-card img {
        height: 250px;
        width: 100%;
        object-fit: cover;
    }
</style>

{{-- HERO SECTION --}}
<section class="ekskul-hero">
    <div class="container">
        <div class="d-flex align-items-center">
            <div class="me-4 d-none d-md-block">
                {{-- Icon Besar --}}
                <div class="bg-white text-primary rounded-circle d-flex align-items-center justify-content-center" style="width: 100px; height: 100px;">
                    <i class="{{ $ekstra->icon ?? 'fas fa-star' }} fa-3x"></i>
                </div>
            </div>
            <div>
                <h4 class="text-warning mb-1">Ekstrakulikuler</h4>
                <h1 class="fw-bold display-5">{{ $ekstra->name }}</h1>
                <p class="mb-0 opacity-75"><i class="fas fa-clock me-2"></i>Jadwal: {{ $ekstra->jadwal ?? 'Menyesuaikan' }} | <i class="fas fa-user-tie me-2"></i>Pembina: {{ $ekstra->pembina ?? '-' }}</p>
            </div>
        </div>
    </div>
</section>

<div class="container mb-5">
    <div class="row">
        {{-- KOLOM KIRI: DESKRIPSI --}}
        <div class="col-lg-4 mb-4">
            <div class="card border-0 shadow-sm p-4 sticky-top" style="top: 90px; z-index: 1;">
                <h4 class="fw-bold mb-3 text-primary">Tentang Kegiatan</h4>
                <div class="text-muted">
                    @if($ekstra->deskripsi)
                        {!! nl2br(e($ekstra->deskripsi)) !!}
                    @else
                        <p>Belum ada deskripsi untuk kegiatan ini.</p>
                    @endif
                </div>
                <hr>
                <a href="{{ route('web.index') }}" class="btn btn-outline-secondary w-100">
                    <i class="fas fa-arrow-left me-2"></i> Kembali ke Home
                </a>
            </div>
        </div>

        {{-- KOLOM KANAN: GALERI FOTO --}}
        <div class="col-lg-8">
            <h3 class="fw-bold mb-4 border-bottom pb-2 border-warning d-inline-block">Galeri Kegiatan</h3>
            
            <div class="row g-3">
                @forelse($ekskul as $photo)
                    <div class="col-md-6">
                        <div class="photo-card" data-bs-toggle="modal" data-bs-target="#galleryModal" 
                             data-bs-img="{{ asset('images/' . $photo->photo_path) }}" 
                             data-bs-cap="{{ $photo->caption }}">
                            <img src="{{ asset('images/' . $photo->photo_path) }}" alt="{{ $ekstra->caption }}">
                            @if($photo->caption)
                                <div class="p-2 bg-white text-center small text-muted border-top">
                                    {{ Str::limit($photo->caption, 40) }}
                                </div>
                            @endif
                        </div>
                    </div>
                @empty
                    <div class="col-12">
                        <div class="alert alert-info d-flex align-items-center">
                            <i class="fas fa-info-circle me-3 fa-2x"></i>
                            <div>
                                <strong>Belum ada dokumentasi.</strong><br>
                                Foto kegiatan {{ $ekstra->name }} belum diupload oleh admin.
                            </div>
                        </div>
                    </div>
                @endforelse
            </div>
        </div>
    </div>
</div>

{{-- MODAL PREVIEW FOTO --}}
<div class="modal fade" id="galleryModal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered modal-lg">
        <div class="modal-content bg-transparent border-0">
            <div class="modal-body p-0 position-relative text-center">
                <button type="button" class="btn-close btn-close-white position-absolute top-0 end-0 m-3" data-bs-dismiss="modal" aria-label="Close"></button>
                <img src="" id="modalImg" class="img-fluid rounded shadow-lg" style="max-height: 80vh;">
                <p id="modalCap" class="mt-2 text-white fw-bold bg-dark bg-opacity-75 d-inline-block px-3 py-1 rounded"></p>
            </div>
        </div>
    </div>
</div>

<script>
    document.addEventListener("DOMContentLoaded", function(){
        var galleryModal = document.getElementById('galleryModal');
        galleryModal.addEventListener('show.bs.modal', function (event) {
            var button = event.relatedTarget;
            var imgSrc = button.getAttribute('data-bs-img');
            var imgCap = button.getAttribute('data-bs-cap');
            
            var modalImg = galleryModal.querySelector('#modalImg');
            var modalCap = galleryModal.querySelector('#modalCap');
            
            modalImg.src = imgSrc;
            modalCap.textContent = imgCap ? imgCap : '';
            modalCap.style.display = imgCap ? 'inline-block' : 'none';
        });
    });
</script>

@endsection