<x-app-layout>
    <x-slot name="header">
        <h2 class="h4 mb-0">Banner Desa</h2>
    </x-slot>

    <div class="row g-3">
        <div class="col-md-4">
            <div class="card">
                <div class="card-header">Tambah Banner</div>
                <div class="card-body">
                    <form action="{{ route('admin-desa.banner.store') }}" method="POST" enctype="multipart/form-data">
                        @csrf
                        <div class="mb-3">
                            <x-input-label for="judul" value="Judul" />
                            <x-text-input id="judul" name="judul" required />
                        </div>
                        <div class="mb-3">
                            <x-input-label for="gambar" value="Gambar" />
                            <input type="file" id="gambar" name="gambar" class="form-control" accept="image/*" required>
                        </div>
                        <div class="mb-3">
                            <x-input-label for="urutan" value="Urutan" />
                            <input type="number" id="urutan" name="urutan" class="form-control" value="0">
                        </div>
                        <button class="btn btn-primary btn-sm">Simpan</button>
                    </form>
                </div>
            </div>
        </div>

        <div class="col-md-8">
            <div class="row g-3">
                @forelse ($banners as $banner)
                    <div class="col-md-6">
                        <div class="card">
                            <img src="{{ Storage::url($banner->gambar) }}" class="card-img-top" alt="{{ $banner->judul }}">
                            <div class="card-body d-flex justify-content-between align-items-center">
                                <span>{{ $banner->judul }}</span>
                                <form action="{{ route('admin-desa.banner.destroy', $banner) }}" method="POST" onsubmit="return confirm('Hapus banner ini?')">
                                    @csrf @method('DELETE')
                                    <button class="btn btn-sm btn-outline-danger">Hapus</button>
                                </form>
                            </div>
                        </div>
                    </div>
                @empty
                    <p class="text-muted">Belum ada banner.</p>
                @endforelse
            </div>
        </div>
    </div>
</x-app-layout>
