@extends('layout.app')

@section('title', 'Lihat Alternatif Terpilih')

@push('styles')
<style>
    .card {
        border: none;
        border-radius: 15px;
        box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
        margin-bottom: 2rem;
        transition: all 0.3s ease;
    }

    .card:hover {
        box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
    }
    
    .card-header {
        background: linear-gradient(45deg, #0d6efd, #0dcaf0);
        color: white;
        border: none;
        border-radius: 15px 15px 0 0 !important;
        padding: 1.5rem;
    }

    .card-body {
        padding: 1.5rem;
    }

    .table th {
        background-color: #f8f9fa;
        font-weight: 600;
        text-align: center;
        vertical-align: middle;
        padding: 1rem;
    }

    .table td {
        text-align: center;
        vertical-align: middle;
        padding: 1rem;
    }

    .nutrition-value {
        font-weight: 500;
        color: #0d6efd;
    }

    .invers-value {
        font-weight: 500;
        color: #198754;
    }

    .btn-next {
        padding: 1rem 2rem;
        font-weight: 600;
        letter-spacing: 0.5px;
        box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
        transition: all 0.3s ease;
    }

    .btn-next:hover {
        transform: translateY(-2px);
        box-shadow: 0 1rem 2rem rgba(0, 0, 0, 0.15);
    }

    .table-title {
        font-size: 1.1rem;
        font-weight: 600;
        color: #495057;
        margin: 1rem 0;
        padding: 1rem;
        background: #f8f9fa;
        border-radius: 10px;
        display: flex;
        align-items: center;
    }

    .table-title i {
        margin-right: 0.75rem;
        color: #0d6efd;
    }

    .table-invers .table-title i {
        color: #198754;
    }

    .alert-info {
        background-color: #e8f4f8;
        border-color: #d6e9f9;
        border-radius: 10px;
    }

    .breadcrumb {
        background: transparent;
        padding: 0;
    }

    .breadcrumb-item a {
        color: #0d6efd;
        text-decoration: none;
    }

    .breadcrumb-item.active {
        color: #6c757d;
    }

    .table-hover tbody tr:hover {
        background-color: rgba(0,0,0,.075);
    }

    @media (max-width: 768px) {
        .table-responsive {
            border-radius: 10px;
            border: 1px solid #dee2e6;
        }
        
        .card-header {
            padding: 1rem;
        }
        
        .card-body {
            padding: 1rem;
        }
        
        .table td, .table th {
            padding: 0.75rem;
        }
    }
</style>
@endpush

@section('content')
<div class="content-wrapper">
    <div class="row">
        <div class="col-12">
            <!-- Page Title -->
            <div class="d-flex justify-content-between align-items-center mb-4">
                <h4 class="card-title mb-0">Alternatif Terpilih</h4>
                <nav aria-label="breadcrumb">
                    <ol class="breadcrumb mb-0">
                        <li class="breadcrumb-item"><a href="{{ route('admindash') }}">Dashboard</a></li>
                        <li class="breadcrumb-item"><a href="{{ route('alternatif.pilih') }}">Pilih Alternatif</a></li>
                        <li class="breadcrumb-item active">Lihat Alternatif</li>
                    </ol>
                </nav>
            </div>

            @php
                $alternatifsByKomponen = session('alternatifs_by_komponen');
                $hasilRekomendasi = session('hasil_rekomendasi');
            @endphp

            @if($alternatifsByKomponen && $hasilRekomendasi)
                <!-- Info Section -->
                <div class="alert alert-info mb-4">
                    <h5 class="alert-heading mb-2">
                        <i class="fas fa-info-circle me-2"></i>
                        Informasi Pemilihan
                    </h5>
                    <p class="mb-2">
                        Waktu Makan: <strong>{{ $hasilRekomendasi['waktu_makan_nama'] }}</strong><br>
                        Tanggal: <strong>{{ \Carbon\Carbon::parse($hasilRekomendasi['tanggal_rekomendasi'])->format('d F Y') }}</strong>
                    </p>
                    <hr>
                    <p class="mb-0">
                        <i class="fas fa-lightbulb me-2"></i>
                        Nilai invers digunakan untuk kriteria cost (Lemak dan Natrium), dimana semakin kecil nilainya semakin baik.
                    </p>
                </div>

                <!-- Alternatif Cards -->
                @foreach($alternatifsByKomponen as $komponenId => $komponen)
                    <div class="card">
                        <div class="card-header">
                            <h5 class="card-title mb-0">
                                <i class="fas fa-utensils me-2"></i>
                                {{ $komponen['nama_komponen'] }}
                            </h5>
                        </div>
                        <div class="card-body">
                            <!-- Normal Values Table -->
                            <div class="table-normal mb-4">
                                <div class="table-title">
                                    <i class="fas fa-table"></i>
                                    Nilai Nutrisi
                                </div>
                                <div class="table-responsive">
                                    <table class="table table-bordered table-hover">
                                        <thead>
                                            <tr>
                                                <th>Nama Makanan</th>
                                                <th>Lemak (g)</th>
                                                <th>Natrium (mg)</th>
                                                <th>Energi (kal)</th>
                                                <th>Karbohidrat (g)</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            @foreach($komponen['alternatifs'] as $alternatif)
                                                <tr>
                                                    <td>{{ $alternatif['nama'] }}</td>
                                                    <td class="nutrition-value">{{ number_format($alternatif['lemak'], 2) }}</td>
                                                    <td class="nutrition-value">{{ number_format($alternatif['natrium'], 2) }}</td>
                                                    <td class="nutrition-value">{{ number_format($alternatif['energi'], 2) }}</td>
                                                    <td class="nutrition-value">{{ number_format($alternatif['karbohidrat'], 2) }}</td>
                                                </tr>
                                            @endforeach
                                        </tbody>
                                    </table>
                                </div>
                            </div>

                            <!-- Inverse Values Table -->
                            <div class="table-invers">
                                <div class="table-title">
                                    <i class="fas fa-calculator"></i>
                                    Nilai Invers (Cost Criteria)
                                </div>
                                <div class="table-responsive">
                                    <table class="table table-bordered table-hover">
                                        <thead>
                                            <tr>
                                                <th>Nama Makanan</th>
                                                <th>Lemak (Invers)</th>
                                                <th>Natrium (Invers)</th>
                                                <th>Energi (kal)</th>
                                                <th>Karbohidrat (g)</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            @foreach($komponen['alternatifs'] as $alternatif)
                                                <tr>
                                                    <td>{{ $alternatif['nama'] }}</td>
                                                    <td class="invers-value">{{ number_format($alternatif['lemak_invers'], 4) }}</td>
                                                    <td class="invers-value">{{ number_format($alternatif['natrium_invers'], 4) }}</td>
                                                    <td class="nutrition-value">{{ number_format($alternatif['energi'], 2) }}</td>
                                                    <td class="nutrition-value">{{ number_format($alternatif['karbohidrat'], 2) }}</td>
                                                </tr>
                                            @endforeach
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                        </div>
                    </div>
                @endforeach

                <!-- Next Step Button -->
                <div class="text-center mt-4 mb-5">
                    <a href="{{ route('alternatif.perbandingan') }}" class="btn btn-success btn-lg btn-next">
                        <i class="fas fa-arrow-right me-2"></i>
                        Lanjut ke Perbandingan
                    </a>
                </div>
            @else
                <div class="alert alert-warning">
                    <i class="fas fa-exclamation-triangle me-2"></i>
                    Tidak ada data alternatif yang dipilih. Silakan pilih alternatif terlebih dahulu.
                </div>
            @endif
        </div>
    </div>
</div>
@endsection