@extends('layouts.app')

@section('title', 'Laporan')

@section('content')

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

    <!-- HEADER -->
    <div>
        <h1 class="text-3xl font-bold text-gray-800">
            Laporan Rekomendasi
        </h1>
        <p class="text-base text-gray-500 mt-1">
            Riwayat hasil rekomendasi makanan berdasarkan metode SAW
        </p>
    </div>

    <!-- SUCCESS ALERT -->
    @if(session('success'))
        <div class="px-5 py-4 rounded-xl bg-green-100 text-green-800 text-base font-medium">
            {{ session('success') }}
        </div>
    @endif

    <!-- FILTER -->
    <div class="bg-white border border-gray-200 rounded-2xl shadow-sm">

        <div class="px-8 py-5 border-b border-gray-100">
            <h2 class="text-base font-semibold text-gray-700">
                Filter Pencarian
            </h2>
        </div>

        <div class="p-7">

            <form method="GET" action="{{ route('laporan.index') }}">

                <div class="grid grid-cols-1 md:grid-cols-4 gap-5">

                    <div>
                        <label class="block text-xs font-bold uppercase tracking-wide text-gray-500 mb-2">
                            Nama Pasien
                        </label>

                        <input type="text"
                            name="nama_pasien"
                            value="{{ request('nama_pasien') }}"
                            placeholder="Masukkan nama pasien..."
                            class="w-full border border-gray-200 rounded-2xl px-4 py-3 text-sm focus:outline-none focus:ring-4 focus:ring-green-100 focus:border-green-500">
                    </div>

                    <div>
                        <label class="block text-xs font-bold uppercase tracking-wide text-gray-500 mb-2">
                            Dari Tanggal 
                        </label>

                        <input type="date"
                            name="tanggal_dari"
                            value="{{ request('tanggal_dari') }}"
                            class="w-full border border-gray-200 rounded-2xl px-4 py-3 text-sm focus:outline-none focus:ring-4 focus:ring-green-100 focus:border-green-500">
                    </div>

                    <div>
                        <label class="block text-xs font-bold uppercase tracking-wide text-gray-500 mb-2">
                            Sampai Tanggal 
                        </label>

                        <input type="date"
                            name="tanggal_sampai"
                            value="{{ request('tanggal_sampai') }}"
                            class="w-full border border-gray-200 rounded-2xl px-4 py-3 text-sm focus:outline-none focus:ring-4 focus:ring-green-100 focus:border-green-500">
                    </div>

                    <div class="flex flex-col sm:flex-row items-stretch sm:items-end gap-3">
                        <button type="submit"
                            class="w-full px-5 py-3 rounded-2xl bg-green-600 text-white text-sm font-semibold hover:bg-green-700 transition">
                            Cari
                        </button>

                        <a href="{{ route('laporan.index') }}"
                            class="w-full text-center px-5 py-3 rounded-2xl bg-gray-100 text-gray-700 text-sm font-semibold hover:bg-gray-200 transition">
                            Reset
                        </a>
                    </div>

                </div>

            </form>

        </div>
    </div>

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

        <div class="px-8 py-5 border-b border-gray-100">
            <h2 class="text-base font-semibold text-gray-700">
                Data Laporan
            </h2>
        </div>

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

            @if($laporan->count() > 0)

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

                <!-- HEAD -->
                <thead class="bg-gray-50 text-sm text-gray-600 uppercase tracking-wide">
                    <tr>
                        <th class="px-6 py-4 text-left">No</th>
                        <th class="px-6 py-4 text-left">Pasien</th>
                        <th class="px-6 py-4 text-left">Gejala</th>
                        <th class="px-6 py-4 text-left">Nilai SAW</th>
                        <th class="px-6 py-4 text-left">Waktu</th>
                        <th class="px-6 py-4 text-center">Aksi</th>
                    </tr>
                </thead>

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

                    @foreach($laporan as $item)

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

                        <td class="px-6 py-5">
                            {{ $laporan->firstItem() + $loop->index }}
                        </td>

                        <td class="px-6 py-5 font-semibold text-gray-800">
                            {{ $item->nama_pasien }}
                        </td>

                        <td class="px-6 py-5 text-gray-600 max-w-xs">
                            {{ ucwords(str_replace(',', ', ', $item->gejala)) }}
                        </td>

                        <td class="px-6 py-5 font-bold text-green-600">
                            {{ number_format($item->nilai_saw,4) }}
                        </td>

                        <td class="px-6 py-5 text-sm text-gray-500">
                            {{ $item->created_at->format('d M Y') }}
                        </td>

                        <!-- AKSI -->
                        <td class="px-6 py-5">
                            <div class="flex justify-center gap-3">

                                <!-- DETAIL -->
                                <a href="{{ route('laporan.detail',$item->id) }}"
                                   class="px-4 py-2 text-sm font-medium rounded-lg bg-blue-500 text-white hover:bg-blue-600 transition">
                                    Detail
                                </a>

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

                                    @csrf
                                    @method('DELETE')

                                    <button
                                        type="submit"
                                        class="px-4 py-2 text-sm font-medium rounded-lg bg-red-500 text-white hover:bg-red-600 transition">
                                        Hapus
                                    </button>

                                </form>

                            </div>
                        </td>

                    </tr>

                    @endforeach

                </tbody>

            </table>

            <!-- <div class="px-8 py-5 border-t border-gray-100">
                {{ $laporan->links() }}
            </div> -->

            @else

            <div class="text-center py-16 text-gray-400 text-lg">
                Belum ada riwayat rekomendasi
            </div> 

            @endif 

        </div>

        @if($laporan->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">{{ $laporan->firstItem() }}</span>
        sampai
        <span class="font-semibold text-gray-700">{{ $laporan->lastItem() }}</span>
        dari
        <span class="font-semibold text-gray-700">{{ $laporan->total() }}</span>
        data
    </div>

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

        {{-- Previous --}}
        @if ($laporan->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="{{ $laporan->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 ($laporan->getUrlRange(1, $laporan->lastPage()) as $page => $url)

            @if ($page == $laporan->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 ($laporan->hasMorePages())
            <a href="{{ $laporan->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>

</div>

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

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

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

        e.preventDefault();

        Swal.fire({
            title: 'Hapus Data Laporan?',
            html: `
                <div style="font-size:14px; color:#6b7280; line-height:1.7; margin-top:8px;">
                    Data laporan 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