@extends('layout.app')

@section('content')
<div class="container mt-4">

    {{-- Judul halaman --}}
    <div class="text-center mb-4">
        <h2 class="fw-bold">📊 Hasil Rekomendasi Makanan</h2>
        <p class="text-muted">Berikut adalah peringkat makanan berdasarkan hasil perhitungan AHP.</p>
    </div>

    {{-- Flash success --}}
    @if(session('success'))
        <div class="alert alert-success alert-dismissible fade show" role="alert">
            {{ session('success') }}
            <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
        </div>
    @endif

    {{-- ===================== CAROUSEL ===================== --}}
    <div id="rekomendasiCarousel"
         class="carousel slide"
         data-bs-touch="true"
         data-bs-ride="carousel"
         data-bs-interval="7000">   {{-- non-auto slide, user geser manual --}}
        <div class="carousel-inner">

            @foreach($rekomendasiByDate as $tanggal => $items)
            <div class="carousel-item {{ $loop->first ? 'active' : '' }}">
                <div class="card shadow rounded">
                    <div class="card-header bg-success text-white text-center">
                        <h5 class="mb-0">
                            Rekomendasi&nbsp;
                            {{ \Carbon\Carbon::parse($tanggal)->translatedFormat('d F Y') }}
                        </h5>
                    </div>

                    <div class="card-body p-0">
                        <table class="table table-hover mb-0 text-center">
                            <thead class="table-light">
                                <tr>
                                    <th style="width: 15%">🏅 Peringkat</th>
                                    <th>🍽️ Nama Makanan</th>
                                    <th style="width: 25%">📈 Nilai Akhir</th>
                                </tr>
                            </thead>
                            <tbody>
                                @foreach($items as $index => $item)
                                    <tr>
                                        <td>
                                            <span class="badge bg-primary fs-6">
                                                {{ $index + 1 }}
                                            </span>
                                        </td>
                                        <td class="fw-semibold">{{ $item->makanan->nama }}</td>
                                        <td>{{ number_format($item->nilai_akhir, 4) }}</td>
                                    </tr>
                                @endforeach
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
            @endforeach

        </div>

        {{-- Navigasi kiri / kanan --}}
        <button class="carousel-control-prev" type="button"
                data-bs-target="#rekomendasiCarousel" data-bs-slide="prev">
            <span class="carousel-control-prev-icon"></span>
            <span class="visually-hidden">Previous</span>
        </button>
        <button class="carousel-control-next" type="button"
                data-bs-target="#rekomendasiCarousel" data-bs-slide="next">
            <span class="carousel-control-next-icon"></span>
            <span class="visually-hidden">Next</span>
        </button>

        {{-- Indikator (bulatan) --}}
        <div class="carousel-indicators position-relative mt-3">
            @foreach($rekomendasiByDate as $tanggal => $items)
                <button type="button"
                        data-bs-target="#rekomendasiCarousel"
                        data-bs-slide-to="{{ $loop->index }}"
                        class="{{ $loop->first ? 'active' : '' }}"
                        aria-label="Slide {{ $loop->iteration }}"></button>
            @endforeach
        </div>
    </div>
    {{-- ================== AKHIR CAROUSEL ================== --}}

    {{-- Tombol kirim hasil --}}
    <div class="mt-4 text-end">
        <form action="{{ route('rekomendasi.kirim', ['user' => 2]) }}"
              method="POST"
              onsubmit="return confirm('Yakin ingin mengirim hasil ini ke user?')">
            @csrf
            <button type="submit" class="btn btn-success">
                📤 Kirim Hasil ke User
            </button>
        </form>
    </div>

    {{-- Form hapus per tanggal --}}
    <div class="mt-3 text-end">
        <form action="{{ route('rekomendasi.hapusSemua') }}"
              method="POST"
              class="d-inline-flex align-items-center gap-2">
            @csrf
            <label class="mb-0 fw-semibold" for="tanggal_rekomendasi">
                Pilih Tanggal Rekomendasi:
            </label>
            <select name="tanggal_rekomendasi" id="tanggal_rekomendasi" required class="form-select w-auto">
                <option value="">-- Pilih Tanggal --</option>
                @foreach ($tanggalList as $tgl)
                    <option value="{{ $tgl }}">
                        {{ \Carbon\Carbon::parse($tgl)->format('d M Y') }}
                    </option>
                @endforeach
            </select>
            <button type="submit" class="btn btn-danger">
                Hapus Data
            </button>
        </form>
    </div>

    {{-- Tombol kembali --}}
    <div class="text-end mt-4">
        <a href="{{ route('alternatif.pilih') }}" class="btn btn-outline-secondary">
            🔙 Kembali ke Pemilihan Alternatif
        </a>
    </div>
</div>
@endsection