@extends('layouts.admin') {{-- Sesuaikan dengan layout admin Anda --}}

@section('content')
<div class="container py-4">
    <div class="card shadow mb-4">
        <div class="card-header bg-primary text-white">
            <h5 class="mb-0">Kelola Ekskul: {{ $ekskul->name }}</h5>
        </div>
        <div class="card-body">
            
            {{-- FORM UPLOAD FOTO --}}
            <div class="mb-4 p-3 bg-light rounded border">
                <h6 class="fw-bold">Upload Foto Kegiatan Baru</h6>
                <form action="{{ route('admin.ekskul.upload_photo', $ekskul->id) }}" method="POST" enctype="multipart/form-data">
                    @csrf
                    <div class="row g-2 align-items-end">
                        <div class="col-md-5">
                            <label>Pilih Foto</label>
                            <input type="file" name="photo" class="form-control" required>
                        </div>
                        <div class="col-md-5">
                            <label>Caption / Keterangan</label>
                            <input type="text" name="caption" class="form-control" placeholder="Contoh: Latihan rutin sore hari">
                        </div>
                        <div class="col-md-2">
                            <button type="submit" class="btn btn-success w-100">Upload</button>
                        </div>
                    </div>
                </form>
            </div>

            <hr>

            {{-- LIST FOTO YANG SUDAH ADA --}}
            <h6 class="fw-bold mb-3">Galeri Foto Saat Ini</h6>
            <div class="row g-3">
                @foreach($ekskul->photos as $photo)
                    <div class="col-md-3">
                        <div class="card h-100">
                            <img src="{{ asset('storage/' . $photo->photo_path) }}" class="card-img-top" style="height: 150px; object-fit: cover;">
                            <div class="card-body p-2">
                                <small class="d-block mb-2">{{ $photo->caption ?? '-' }}</small>
                                <form action="{{ route('admin.ekskul.delete_photo', $photo->id) }}" method="POST" onsubmit="return confirm('Hapus foto ini?');">
                                    @csrf
                                    @method('DELETE')
                                    <button class="btn btn-danger btn-sm w-100">Hapus</button>
                                </form>
                            </div>
                        </div>
                    </div>
                @endforeach
            </div>

        </div>
    </div>
</div>
@endsection