@extends('admin.layout')
@section('title', 'Banner Home')
@section('subtitle', 'Slide carousel di bagian atas home customer')

@php
    $inputClass = 'w-full rounded-xl border border-line px-3 py-2 text-sm outline-none focus:border-brand focus:ring-2 focus:ring-brand/20';
    $labelClass = 'block text-[11px] font-semibold uppercase tracking-wide text-sub mb-1';
@endphp

@section('content')
    <x-flash />

    <div class="flex flex-wrap items-center gap-2 mb-4">
        <p class="text-sm text-sub">
            {{ $banners->where('is_active', true)->count() }} dari {{ $banners->count() }} banner tampil di aplikasi.
            Banner tanpa gambar tampil sebagai kartu teks di aplikasi.
        </p>
        <details class="ml-auto relative">
            <summary class="cursor-pointer list-none px-4 py-2 rounded-xl bg-brand text-white text-sm font-semibold hover:bg-brand-dark transition">
                + Tambah banner
            </summary>
            <form method="POST" action="{{ route('admin.banners.store') }}" enctype="multipart/form-data"
                  class="absolute right-0 mt-2 z-20 w-96 bg-white rounded-2xl border border-line shadow-lg p-4 space-y-3">
                @csrf
                <x-banner-fields />
                <button class="w-full py-2 rounded-xl bg-brand text-white text-sm font-semibold hover:bg-brand-dark transition">Simpan</button>
            </form>
        </details>
    </div>

    <div class="grid lg:grid-cols-2 gap-4">
        @forelse ($banners as $banner)
            <div class="bg-white rounded-2xl border border-line overflow-hidden {{ $banner->is_active ? '' : 'opacity-60' }}">
                {{-- Pratinjau meniru kartu oranye di aplikasi: tag di atas, judul & keterangan di dasar. --}}
                <div class="m-4 rounded-2xl bg-accent text-white p-5 min-h-[150px] flex flex-col justify-between bg-cover bg-center relative overflow-hidden"
                     @if ($banner->imageUrl()) style="background-image: url('{{ $banner->imageUrl() }}')" @endif>
                    {{-- Lapisan gelap supaya teks tetap terbaca di atas gambar apa pun. --}}
                    @if ($banner->imageUrl())
                        <div class="absolute inset-0 bg-black/35"></div>
                    @endif
                    @if ($banner->tag)
                        <span class="relative self-start rounded-full bg-white/20 px-3 py-1 text-[10px] font-extrabold tracking-wider">
                            {{ $banner->tag }}
                        </span>
                    @else
                        {{-- Tanpa tag, kartu tidak perlu pil kosong — teksnya tetap
                             menempel di dasar berkat justify-between di wadah. --}}
                        <span></span>
                    @endif
                    @if ($banner->displayTitle() || $banner->displaySubtitle())
                        <div class="relative">
                            @if ($banner->displayTitle())
                                <p class="text-xl font-extrabold leading-tight">{{ $banner->displayTitle() }}</p>
                            @endif
                            @if ($banner->displaySubtitle())
                                <p class="text-sm text-white/90 mt-1">{{ $banner->displaySubtitle() }}</p>
                            @endif
                        </div>
                    @endif
                </div>

                <div class="px-4 pb-4 flex flex-wrap items-center gap-3 text-sm">
                    <x-badge :color="$banner->is_active ? 'green' : 'gray'">
                        {{ $banner->is_active ? 'Tampil' : 'Disembunyikan' }}
                    </x-badge>
                    <span class="text-sub">Urutan {{ $banner->sort_order }}</span>
                    @if ($banner->image_path)
                        <x-badge color="green">Bergambar</x-badge>
                    @else
                        <x-badge color="gray">Tanpa gambar</x-badge>
                    @endif

                    <div class="ml-auto flex items-center gap-3">
                        <form method="POST" action="{{ route('admin.banners.toggle', $banner) }}">
                            @csrf
                            <button class="font-semibold text-brand hover:text-brand-dark">
                                {{ $banner->is_active ? 'Sembunyikan' : 'Tampilkan' }}
                            </button>
                        </form>
                        <details class="text-left">
                            <summary class="cursor-pointer list-none font-semibold text-brand hover:text-brand-dark">Ubah</summary>
                            <form method="POST" action="{{ route('admin.banners.update', $banner) }}" enctype="multipart/form-data"
                                  class="absolute right-6 mt-2 z-20 w-96 bg-white rounded-2xl border border-line shadow-lg p-4 space-y-3">
                                @csrf @method('PUT')
                                <x-banner-fields :model="$banner" />
                                <button class="w-full py-2 rounded-xl bg-brand text-white text-sm font-semibold hover:bg-brand-dark transition">Simpan</button>
                            </form>
                        </details>
                        <form method="POST" action="{{ route('admin.banners.destroy', $banner) }}"
                              onsubmit="return confirm('Hapus banner {{ $banner->title }}?')">
                            @csrf @method('DELETE')
                            <button class="font-semibold text-red-500 hover:text-red-600">Hapus</button>
                        </form>
                    </div>
                </div>
            </div>
        @empty
            <p class="text-sub">Belum ada banner. Home customer akan tampil tanpa carousel.</p>
        @endforelse
    </div>
@endsection