@extends('layoutuser.app')
@section('content')

<div style="background: linear-gradient(to bottom, #e3f2fd, #bbdefb); min-height: 100vh; padding-top: 5rem; padding-bottom: 5rem;">
    <div class="container">
        <div class="text-center mb-5">
            <p class="d-inline-block border rounded-pill bg-primary text-light py-1 px-4">Simulasi Menu</p>
            <h1 class="text-dark mb-4">Simulasi Pemilihan Menu Makanan</h1>
            <p class="text-dark mb-4 pb-2">
                Pilih minimal 4 makanan untuk melihat hasil simulasi rekomendasi menu berdasarkan metode AHP.
            </p>
        </div>

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

        <div class="row justify-content-center">
            <div class="col-lg-10">
                <div class="card shadow-sm">
                    <div class="card-body p-4">
                        <form action="{{ route('user.simulasi.proses') }}" method="POST" id="formSimulasi">
                            @csrf
                            
                            <!-- Pilih Waktu Makan -->
                            <div class="mb-4">
                                <label class="form-label">Waktu Makan</label>
                                <select name="waktu_makan_id" class="form-select" required>
                                    <option value="">Pilih Waktu Makan</option>
                                    @foreach($waktuMakans as $waktuMakan)
                                        <option value="{{ $waktuMakan->id }}">{{ $waktuMakan->nama }}</option>
                                    @endforeach
                                </select>
                        </div>

                            <!-- Pilih Komponen -->
                            <div class="mb-4">
                                <label class="form-label">Komponen Makanan</label>
                                <select name="komponen_id" class="form-select" required>
                                    <option value="">Pilih Komponen</option>
                                    @foreach($komponens as $komponen)
                                        <option value="{{ $komponen->id }}">{{ $komponen->nama }}</option>
                                    @endforeach
                                </select>
                    </div>

                            <!-- Daftar Makanan -->
                            <div class="mb-4">
                                <label class="form-label">Pilih Makanan (Minimal 4)</label>
                                <div class="alert alert-info">
                                    <i class="fas fa-info-circle me-2"></i>
                                    Pilih minimal 4 makanan untuk melakukan simulasi
                                </div>
                                <div id="daftarMakanan" class="row g-3">
                                    <!-- Makanan akan dimuat secara dinamis -->
                        </div>
                    </div>

                            <!-- Tombol Submit -->
                            <div class="text-center">
                                <button type="submit" class="btn btn-primary rounded-pill px-5 py-2">
                                    <i class="fas fa-calculator me-2"></i>Proses Simulasi
                                </button>
                        </div>
                        </form>
                    </div>
                </div>
            </div>
                        </div>
    </div>
                </div>

<!-- Modal Detail Makanan -->
<div class="modal fade" id="modalDetailMakanan" tabindex="-1">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Detail Makanan</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <div class="row">
                    <div class="col-md-6">
                        <img id="makananImage" src="" class="img-fluid rounded" alt="Gambar Makanan">
                    </div>
                    <div class="col-md-6">
                        <h6 class="mb-3">Informasi Nutrisi</h6>
                        <table class="table table-sm">
                            <tr>
                                <td>Energi</td>
                                <td id="makananEnergi">-</td>
                            </tr>
                            <tr>
                                <td>Protein</td>
                                <td id="makananProtein">-</td>
                            </tr>
                            <tr>
                                <td>Lemak</td>
                                <td id="makananLemak">-</td>
                            </tr>
                            <tr>
                                <td>Karbohidrat</td>
                                <td id="makananKarbohidrat">-</td>
                            </tr>
                            <tr>
                                <td>Natrium</td>
                                <td id="makananNatrium">-</td>
                            </tr>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

@push('scripts')
<script>
$(document).ready(function() {
    // Load makanan ketika komponen dan waktu makan dipilih
    $('select[name="komponen_id"], select[name="waktu_makan_id"]').change(function() {
        const komponenId = $('select[name="komponen_id"]').val();
        const waktuMakanId = $('select[name="waktu_makan_id"]').val();
        
        if (komponenId && waktuMakanId) {
            $.get(`/user/simulasi/get-makanan/${komponenId}/${waktuMakanId}`, function(makanans) {
                let html = '';
                makanans.forEach(function(makanan) {
                    html += `
                        <div class="col-md-6 col-lg-4">
                            <div class="card h-100">
                                <div class="card-body">
                                    <div class="form-check">
                                        <input class="form-check-input makanan-checkbox" type="checkbox" 
                                               name="makanan_ids[]" value="${makanan.id}" 
                                               id="makanan${makanan.id}">
                                        <label class="form-check-label" for="makanan${makanan.id}">
                                            ${makanan.nama}
                                        </label>
                                    </div>
                                    <button type="button" class="btn btn-link btn-sm p-0 mt-2" 
                                            onclick="showDetailMakanan(${JSON.stringify(makanan)})">
                                        <i class="fas fa-info-circle"></i> Detail
                                    </button>
                                </div>
                            </div>
                        </div>
                    `;
                });
                $('#daftarMakanan').html(html);
            });
        }
    });

    // Validasi form sebelum submit
    $('#formSimulasi').submit(function(e) {
        const selectedMakanan = $('.makanan-checkbox:checked').length;
        if (selectedMakanan < 4) {
            e.preventDefault();
            alert('Pilih minimal 4 makanan untuk melakukan simulasi');
        }
    });
});

function showDetailMakanan(makanan) {
    $('#makananImage').attr('src', makanan.gambar || '/images/no-image.jpg');
    $('#makananEnergi').text(makanan.energi + ' kkal');
    $('#makananProtein').text(makanan.protein + ' g');
    $('#makananLemak').text(makanan.lemak + ' g');
    $('#makananKarbohidrat').text(makanan.karbohidrat + ' g');
    $('#makananNatrium').text(makanan.natrium + ' mg');
    $('#modalDetailMakanan').modal('show');
    }
</script>
@endpush

@endsection