@extends('layouts.user')

@section('title', 'Riwayat Rekomendasi')

@section('content')

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

    {{-- HEADER --}}
    <div>

        <h1 class="text-3xl font-bold text-gray-800">
            Riwayat Rekomendasi
        </h1>

        <p class="text-base text-gray-500 mt-1">
            Riwayat hasil rekomendasi makanan yang pernah Anda lakukan.
        </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

    {{-- 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 Riwayat Rekomendasi
            </h2>

        </div>

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

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

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

                <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">
                            Nama
                        </th>

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

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

                        <th class="px-6 py-4 text-left">
                            Nilai SAW
                        </th>

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

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

                    </tr>

                </thead>

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

                    @foreach($laporans as $laporan)

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

                        <td class="px-6 py-5">
                            {{ $loop->iteration }}
                        </td>

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

                        <td class="px-6 py-5 text-gray-600">
                            {{ ucwords($laporan->gejala) }}
                        </td>

                        <td class="px-6 py-5">
                            {{ $laporan->aktivitas_harian }}
                        </td>

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

                        <td class="px-6 py-5 text-sm text-gray-500">
                            {{ $laporan->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('user.laporan.show', $laporan->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('user.laporan.destroy', $laporan->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>

            @else

            <div class="text-center py-16 text-gray-400 text-lg">

                Belum ada riwayat rekomendasi

            </div>

            @endif

        </div>

    </div>

</div>

@endsection