@extends('layouts.app')

@section('title', 'Data Makanan')

@section('content')

<div class="max-w-7xl mx-auto px-4 py-8 space-y-6">

    <!-- HEADER -->
    <div class="flex flex-col md:flex-row md:items-center md:justify-between gap-5">

        <div>
            <h1 class="text-4xl font-bold tracking-tight text-gray-800">
                Data Makanan
            </h1>

            <p class="text-gray-500 mt-2 text-base">
                Kelola data makanan untuk proses rekomendasi
            </p>
        </div>

        <a href="{{ route('makanan.create') }}"
           class="inline-flex items-center gap-2 px-5 py-3 bg-green-600 text-white text-sm font-semibold rounded-2xl shadow-sm hover:bg-green-700 transition">

            <span class="text-lg">+</span>
            Tambah Makanan
        </a>

    </div>

    <!-- CARD TABLE -->
    <div class="bg-white border border-gray-200 rounded-[2rem] shadow-sm overflow-hidden">

        <!-- TOP -->
        <div class="flex items-center justify-between px-6 py-5 border-b border-gray-100 bg-gray-50">

            <div>
                <h2 class="text-lg font-semibold text-gray-800">
                    Daftar Makanan
                </h2>

                <p class="text-sm text-gray-500 mt-1">
                    Total {{ $makanan->total() }} makanan tersedia
                </p>
            </div>

        </div>

        <!-- TABLE -->
        <div class="overflow-x-auto">

            <table class="min-w-[1000px] w-full">

                <!-- HEAD -->
                <thead class="bg-gray-50 border-b border-gray-100">

                    <tr class="text-xs font-semibold uppercase tracking-wide text-gray-700">

                        <th class="px-6 py-4 text-left">
                            Nama Makanan
                        </th>

                        <th class="px-4 py-4 text-center">
                            Protein
                        </th>

                        <th class="px-4 py-4 text-center">
                            Lemak
                        </th>

                        <th class="px-4 py-4 text-center">
                            Karbo
                        </th>

                        <th class="px-4 py-4 text-center">
                            Serat
                        </th>

                        <th class="px-4 py-4 text-center">
                            Kalori
                        </th>

                        <th class="px-4 py-4 text-center">
                            Tekstur
                        </th>

                        <th class="px-6 py-4 text-center">
                            Aksi
                        </th>

                    </tr>

                </thead>

                <!-- BODY -->
                <tbody class="divide-y divide-gray-100">

                    @forelse($makanan as $m)

                    <tr class="hover:bg-gray-50 transition">

                        <!-- NAMA -->
                        <td class="px-6 py-5">

                            <div class="flex flex-col">

                                <span class="font-semibold text-gray-800 text-base">
                                    {{ $m->nama_makanan }}
                                </span>

                            </div>

                        </td>

                        <!-- NUTRISI -->
                        <td class="px-4 py-5 text-center text-gray-600 font-medium">
                            {{ number_format($m->protein, 1) }}g
                        </td>

                        <td class="px-4 py-5 text-center text-gray-600 font-medium">
                            {{ number_format($m->kandungan_lemak, 1) }}g
                        </td>

                        <td class="px-4 py-5 text-center text-gray-600 font-medium">
                            {{ number_format($m->karbohidrat, 1) }}g
                        </td>

                        <td class="px-4 py-5 text-center text-gray-600 font-medium">
                            {{ number_format($m->kandungan_serat, 1) }}g
                        </td>

                        <td class="px-4 py-5 text-center">

                            <span class="px-3 py-1 rounded-lg bg-gray-100 text-gray-700 text-xs font-semibold">
                                {{ number_format($m->kalori, 0) }} kkal
                            </span>

                        </td>

                        <!-- TEKSTUR -->
                        <td class="px-4 py-5 text-center">

                            <span class="px-3 py-1 rounded-full bg-gray-100 text-gray-700 text-xs font-medium">
                                {{ ucfirst($m->tekstur) }}
                            </span>

                        </td>

                        <!-- AKSI -->
                        <td class="px-6 py-5">

                            <div class="flex items-center justify-center gap-2 flex-wrap">

                                <!-- DETAIL -->
                                <a href="{{ route('makanan.show', $m->id) }}"
                                   class="px-4 py-2 rounded-xl bg-green-500 text-white text-xs font-semibold hover:bg-black transition">

                                    Detail
                                </a>

                                <!-- EDIT -->
                                <a href="{{ route('makanan.edit', $m->id) }}"
                                   class="px-4 py-2 rounded-xl bg-blue-600 text-white text-xs font-semibold hover:bg-black transition">

                                    Edit
                                </a>

                                <!-- HAPUS -->
                                <form action="{{ route('makanan.destroy', $m->id) }}" method="POST" class="form-hapus-makanan">

                                    @csrf
                                    @method('DELETE')

                                    <button type="submit"
                                        class="px-4 py-2 rounded-xl bg-red-500 text-white text-xs font-semibold hover:bg-red-600 transition">

                                        Hapus
                                    </button>

                                </form>

                            </div>

                        </td>

                    </tr>

                    @empty

                    <tr>

                        <td colspan="8" class="py-20 text-center">

                            <div class="flex flex-col items-center">

                                <div class="w-16 h-16 rounded-full bg-gray-100 flex items-center justify-center text-2xl mb-4">
                                    🍲
                                </div>

                                <h3 class="text-lg font-semibold text-gray-700">
                                    Belum Ada Data Makanan
                                </h3>

                                <p class="text-sm text-gray-400 mt-1">
                                    Tambahkan data makanan terlebih dahulu
                                </p>

                            </div>

                        </td>

                    </tr>

                    @endforelse

                </tbody>

            </table>

        </div>

    </div>

    @if($makanan->hasPages())

<div class="flex flex-col md:flex-row md:items-center md:justify-between gap-4 px-2 pt-5">

    <div class="text-sm text-gray-500">
        Menampilkan
        <span class="font-semibold text-gray-700">{{ $makanan->firstItem() }}</span>
        sampai
        <span class="font-semibold text-gray-700">{{ $makanan->lastItem() }}</span>
        dari
        <span class="font-semibold text-gray-700">{{ $makanan->total() }}</span>
        data
    </div>

    <div class="flex flex-wrap items-center gap-2 justify-center md:justify-start">

        {{-- Previous --}}
        @if ($makanan->onFirstPage())
            <span class="px-4 py-2 rounded-xl border border-gray-200 text-gray-300 text-sm cursor-not-allowed">
                Sebelumnya
            </span>
        @else
            <a href="{{ $makanan->previousPageUrl() }}"
               class="px-4 py-2 rounded-xl border border-gray-200 bg-white text-gray-600 text-sm hover:bg-green-50 hover:text-green-700 transition">
                Sebelumnya
            </a>
        @endif

        {{-- Page Numbers --}}
        @foreach ($makanan->getUrlRange(1, $makanan->lastPage()) as $page => $url)

            @if ($page == $makanan->currentPage())
                <span class="w-10 h-10 flex items-center justify-center rounded-xl bg-green-600 text-white text-sm font-bold shadow-sm">
                    {{ $page }}
                </span>
            @else
                <a href="{{ $url }}"
                   class="w-10 h-10 flex items-center justify-center rounded-xl border border-gray-200 bg-white text-gray-600 text-sm hover:bg-green-50 hover:text-green-700 transition">
                    {{ $page }}
                </a>
            @endif

        @endforeach

        {{-- Next --}}
        @if ($makanan->hasMorePages())
            <a href="{{ $makanan->nextPageUrl() }}"
               class="px-4 py-2 rounded-xl border border-gray-200 bg-white text-gray-600 text-sm hover:bg-green-50 hover:text-green-700 transition">
                Berikutnya
            </a>
        @else
            <span class="px-4 py-2 rounded-xl border border-gray-200 text-gray-300 text-sm cursor-not-allowed">
                Berikutnya
            </span>
        @endif

    </div>

</div>

@endif

</div>

<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>

<script>
    document.querySelectorAll('.form-hapus-makanan').forEach(form => {

        form.addEventListener('submit', function(e) {

            e.preventDefault();

            Swal.fire({
                title: 'Hapus Data?',
                html: `
                    <div style="font-size:14px; color:#6b7280; line-height:1.7; margin-top:8px;">
                        Data makanan yang dihapus tidak dapat dikembalikan.
                    </div>
                `,
                icon: 'warning',
                showCancelButton: true,
                confirmButtonText: 'Hapus',
                cancelButtonText: 'Batal',
                reverseButtons: true,
                focusCancel: true,

                background: '#ffffff',
                color: '#111827',

                customClass: {
                    popup: 'rounded-[24px] p-6 shadow-xl',
                    title: 'text-xl font-bold text-gray-800',
                    htmlContainer: 'text-sm text-gray-500',
                    confirmButton: 'bg-red-500 hover:bg-red-600 text-white px-6 py-3 rounded-xl text-sm font-semibold',
                    cancelButton: 'bg-gray-100 hover:bg-gray-200 text-gray-700 px-6 py-3 rounded-xl text-sm font-semibold mr-2'
                },

                buttonsStyling: false

            }).then((result) => {

                if (result.isConfirmed) {
                    form.submit();
                }

            });

        });

    });
</script>

@endsection