@extends('layout.app')

@section('content')
<div class="container mt-4">
    <div class="card">
        <div class="card-header">
            <h4 class="mb-0">Hasil Rekomendasi Pupuk</h4>
        </div>
        <div class="card-body">

            {{-- Menampilkan Rekomendasi Terbaik --}}
            @if ($rekomendasi && property_exists($rekomendasi, 'nama'))
                <div class="alert alert-success">
                    <h5>Pupuk Terbaik: <strong>{{ $rekomendasi->nama }}</strong></h5>
                    <ul class="mb-0">
                        <li>Kandungan: N = {{ $rekomendasi->N }}, P = {{ $rekomendasi->P }}, K = {{ $rekomendasi->K }}</li>
                        <li>Harga: Rp{{ number_format($rekomendasi->harga, 0, ',', '.') }}</li>
                        <li>Skor: {{ number_format($rekomendasi->nilai, 4) }}</li>
                    </ul>
                </div>
            @else
                <div class="alert alert-warning">
                    Tidak ada pupuk yang cocok dengan kebutuhan Anda.
                </div>
            @endif

            {{-- Tabel Semua Alternatif --}}
            @if (!empty($alternatifs))
                <div class="table-responsive mt-4">
                    <div class="table-wrapper">
                        <table class="table table-bordered table-hover">
                            <thead class="table-dark">
                                <tr>
                                    <th>Nama Pupuk</th>
                                    <th>N</th>
                                    <th>P</th>
                                    <th>K</th>
                                    <th>Harga</th>
                                    <th>Norm N</th>
                                    <th>Norm P</th>
                                    <th>Norm K</th>
                                    <th>Norm Harga</th>
                                    <th>Skor Akhir</th>
                                    <th>Persentase (%)</th>
                                </tr>
                            </thead>
                            <tbody>
                                @foreach ($alternatifs as $a)
                                    <tr>
                                        <td>{{ $a['nama'] }}</td>
                                        <td>{{ $a['N'] }}</td>
                                        <td>{{ $a['P'] }}</td>
                                        <td>{{ $a['K'] }}</td>
                                        <td>Rp{{ number_format($a['harga'], 0, ',', '.') }}</td>
                                        <td>{{ number_format($a['normalized_N'], 4) }}</td>
                                        <td>{{ number_format($a['normalized_P'], 4) }}</td>
                                        <td>{{ number_format($a['normalized_K'], 4) }}</td>
                                        <td>{{ number_format($a['normalized_harga'], 4) }}</td>
                                        <td><strong>{{ number_format($a['nilai'], 4) }}</strong></td>
                                        <td><strong>{{ number_format($a['persentase'], 2) }}%</strong></td>
                                    </tr>
                                @endforeach
                            </tbody>
                        </table>
                    </div>
                </div>
            @endif

        </div>
    </div>
</div>

<style>
/* Styling untuk tabel responsif */
.table-responsive {
    margin: 0;
    padding: 0;
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.table-wrapper {
    position: relative;
    min-width: 100%;
}

.table {
    margin-bottom: 0;
    width: 100%;
    background: #fff;
}

/* Custom scrollbar untuk tabel */
.table-responsive::-webkit-scrollbar {
    height: 8px;
}

.table-responsive::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 4px;
}

.table-responsive::-webkit-scrollbar-thumb {
    background: #888;
    border-radius: 4px;
}

.table-responsive::-webkit-scrollbar-thumb:hover {
    background: #555;
}

/* Styling untuk mobile */
@media (max-width: 768px) {
    .container {
        padding: 10px;
    }

    .card {
        margin: 0;
        border-radius: 0;
    }

    .table {
        font-size: 14px;
    }

    .table td, .table th {
        padding: 8px;
        white-space: nowrap;
    }

    .alert {
        margin: 10px 0;
        padding: 10px;
    }

    .table-responsive {
        border: 1px solid #dee2e6;
        border-radius: 4px;
    }

    /* Indikator scroll horizontal */
    .table-wrapper::after {
        content: '⟷ Geser untuk melihat lebih banyak';
        display: block;
        text-align: center;
        font-size: 12px;
        padding: 5px;
        color: #666;
        background: #f8f9fa;
        border-top: 1px solid #dee2e6;
    }
}
</style>
@endsection