@extends('simaju.layouts.main')

@section('title', 'Dokumentasi Apel')
@section('page-title', 'Dokumentasi Apel')
@section('page-subtitle', 'Dokumentasi foto apel pagi dan apel pulang')

@section('content')

<div class="space-y-6">

    {{-- HEADER --}}
    <div class="flex flex-col lg:flex-row lg:items-center lg:justify-between gap-4">
        <div>
            <h2 class="text-xl font-bold text-gray-800">
                Dokumentasi Apel
            </h2>
            <p class="text-sm text-gray-500 mt-1">
                Kelola foto dokumentasi apel pagi dan apel pulang.
            </p>
        </div>

        <div class="flex flex-wrap gap-2">
            <a
                href="{{ route('simaju.dokumentasi-apel.index', ['jenis' => 'pagi']) }}"
                class="inline-flex items-center gap-2 px-4 py-2.5 rounded-xl font-semibold transition
                    {{ $jenis === 'pagi' || !$jenis
                        ? 'bg-blue-600 text-white shadow'
                        : 'bg-white text-gray-700 border border-gray-200 hover:bg-gray-50' }}"
            >
                <i class="fas fa-sun"></i>
                Apel Pagi
            </a>

            <a
                href="{{ route('simaju.dokumentasi-apel.index', ['jenis' => 'pulang']) }}"
                class="inline-flex items-center gap-2 px-4 py-2.5 rounded-xl font-semibold transition
                    {{ $jenis === 'pulang'
                        ? 'bg-indigo-600 text-white shadow'
                        : 'bg-white text-gray-700 border border-gray-200 hover:bg-gray-50' }}"
            >
                <i class="fas fa-moon"></i>
                Apel Pulang
            </a>

            <a
                href="{{ route('simaju.dokumentasi-apel.create', ['jenis' => $jenis ?: 'pagi']) }}"
                class="inline-flex items-center gap-2 px-4 py-2.5 rounded-xl font-semibold bg-emerald-600 text-white hover:bg-emerald-700 transition shadow"
            >
                <i class="fas fa-camera"></i>
                Tambah Foto
            </a>
        </div>
    </div>


    {{-- FILTER --}}
    <div class="bg-white rounded-2xl shadow-sm border border-gray-100 p-5">
        <form method="GET" class="grid grid-cols-1 md:grid-cols-4 gap-4">

            <div>
                <label class="block text-sm font-semibold text-gray-700 mb-1">
                    Jenis Apel
                </label>
                <select
                    name="jenis"
                    class="w-full px-4 py-2.5 border border-gray-200 rounded-xl focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
                >
                    <option value="">Semua Jenis</option>
                    <option value="pagi" {{ $jenis === 'pagi' ? 'selected' : '' }}>
                        Apel Pagi
                    </option>
                    <option value="pulang" {{ $jenis === 'pulang' ? 'selected' : '' }}>
                        Apel Pulang
                    </option>
                </select>
            </div>

            <div>
                <label class="block text-sm font-semibold text-gray-700 mb-1">
                    Tanggal
                </label>
                <input
                    type="date"
                    name="tanggal"
                    value="{{ $tanggal }}"
                    class="w-full px-4 py-2.5 border border-gray-200 rounded-xl focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
                >
            </div>

            <div>
                <label class="block text-sm font-semibold text-gray-700 mb-1">
                    Pencarian
                </label>
                <input
                    type="text"
                    name="search"
                    value="{{ $search }}"
                    placeholder="Cari keterangan..."
                    class="w-full px-4 py-2.5 border border-gray-200 rounded-xl focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
                >
            </div>

            <div class="flex items-end gap-2">
                <button
                    type="submit"
                    class="px-5 py-2.5 bg-blue-600 hover:bg-blue-700 text-white rounded-xl font-semibold transition"
                >
                    <i class="fas fa-search mr-1"></i>
                    Filter
                </button>

                <a
                    href="{{ route('simaju.dokumentasi-apel.index') }}"
                    class="px-5 py-2.5 bg-gray-100 hover:bg-gray-200 text-gray-700 rounded-xl font-semibold transition"
                >
                    Reset
                </a>
            </div>

        </form>
    </div>


    {{-- GALERI --}}
    @if($dokumentasis->count())

        <div class="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-6">

            @foreach($dokumentasis as $item)

                <div class="bg-white rounded-2xl shadow-sm border border-gray-100 overflow-hidden group">

                    {{-- FOTO --}}
                    <div class="relative aspect-[4/3] bg-gray-100 overflow-hidden">
                        <img
                            src="{{ $item->foto_url }}"
                            alt="{{ $item->jenis_apel_label }} - {{ $item->tanggal?->format('d/m/Y') }}"
                            class="w-full h-full object-cover transition duration-300 group-hover:scale-105"
                        >

                        <div class="absolute top-3 left-3">
                            <span class="inline-flex items-center gap-1 px-3 py-1 rounded-full text-xs font-bold bg-white/90 backdrop-blur text-gray-800 shadow">
                                <i class="fas {{ $item->jenis_apel === 'pagi' ? 'fa-sun text-amber-500' : 'fa-moon text-indigo-500' }}"></i>
                                {{ $item->jenis_apel_label }}
                            </span>
                        </div>
                    </div>

                    {{-- DETAIL --}}
                    <div class="p-5">
                        <div class="flex items-center gap-2 text-sm text-gray-500 mb-2">
                            <i class="far fa-calendar-alt"></i>
                            <span>{{ $item->tanggal?->format('d/m/Y') }}</span>
                        </div>

                        <p class="text-gray-700 leading-relaxed min-h-[3rem]">
                            {{ $item->keterangan ?: 'Tidak ada keterangan.' }}
                        </p>

                        <div class="flex items-center gap-2 mt-4 pt-4 border-t border-gray-100">
                            <a
                                href="{{ $item->foto_url }}"
                                target="_blank"
                                class="flex-1 inline-flex justify-center items-center gap-2 px-3 py-2.5 bg-blue-50 text-blue-700 hover:bg-blue-100 rounded-xl font-semibold transition"
                            >
                                <i class="fas fa-expand"></i>
                                Lihat
                            </a>

                            <a
                                href="{{ route('simaju.dokumentasi-apel.edit', $item->id) }}"
                                class="inline-flex justify-center items-center px-3 py-2.5 bg-amber-50 text-amber-700 hover:bg-amber-100 rounded-xl transition"
                                title="Edit"
                            >
                                <i class="fas fa-edit"></i>
                            </a>

                            <form
                                action="{{ route('simaju.dokumentasi-apel.destroy', $item->id) }}"
                                method="POST"
                                onsubmit="return confirm('Hapus dokumentasi apel ini?')"
                            >
                                @csrf
                                @method('DELETE')
                                <button
                                    type="submit"
                                    class="inline-flex justify-center items-center px-3 py-2.5 bg-red-50 text-red-700 hover:bg-red-100 rounded-xl transition"
                                    title="Hapus"
                                >
                                    <i class="fas fa-trash"></i>
                                </button>
                            </form>
                        </div>
                    </div>

                </div>

            @endforeach

        </div>

        @if($dokumentasis->hasPages())
            <div class="mt-6">
                {{ $dokumentasis->links() }}
            </div>
        @endif

    @else

        <div class="bg-white rounded-2xl border border-dashed border-gray-300 p-12 text-center">
            <div class="w-16 h-16 mx-auto rounded-2xl bg-blue-50 text-blue-600 flex items-center justify-center mb-4">
                <i class="fas fa-images text-2xl"></i>
            </div>

            <h3 class="text-lg font-bold text-gray-800">
                Belum ada dokumentasi
            </h3>

            <p class="text-sm text-gray-500 mt-1">
                Tambahkan foto apel pagi atau apel pulang untuk mulai membuat dokumentasi.
            </p>

            <a
                href="{{ route('simaju.dokumentasi-apel.create', ['jenis' => $jenis ?: 'pagi']) }}"
                class="inline-flex items-center gap-2 mt-5 px-5 py-2.5 bg-blue-600 text-white rounded-xl font-semibold hover:bg-blue-700 transition"
            >
                <i class="fas fa-camera"></i>
                Tambah Foto
            </a>
        </div>

    @endif

</div>

@endsection