@extends('layout.app')

@section('title', 'History Perhitungan AHP')

@section('content')
@include('admin.shared.admin-styles')
<div class="admin-container">
    <!-- Page Header -->
    <div class="page-header">
        <div class="row align-items-center">
            <div class="col-12">
                <h3 class="mb-0">
                    <i class="fas fa-history me-2"></i>History Perhitungan AHP
                </h3>
                <p class="text-white-50 mb-3">Riwayat perhitungan AHP untuk rekomendasi menu makanan</p>
            </div>
        </div>
    </div>

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

    <div class="row">
        <div class="col-12">
            <div class="admin-card">
                <div class="card-header">
                    <div class="row align-items-center">
                        <div class="col-md-6 mb-3 mb-md-0">
                            <h5 class="card-title mb-0">
                                <i class="fas fa-calculator me-2"></i>Data Perhitungan
                            </h5>
                        </div>
                        <div class="col-md-6">
                            <form id="filterForm" class="d-flex gap-2">
                                <input type="date" class="form-control" id="tanggalFilter" name="tanggal" value="{{ $tanggal }}">
                                <button type="submit" class="admin-btn btn-primary">
                                    <i class="fas fa-filter me-2"></i>Filter
                                </button>
                            </form>
                        </div>
                    </div>
                </div>

                <div class="card-body">
                    <!-- Nav tabs -->
                    <ul class="nav nav-pills nav-fill mb-4" role="tablist">
                        <li class="nav-item">
                            <a class="nav-link active" data-bs-toggle="tab" href="#bobotKriteria">
                                <i class="fas fa-weight me-2"></i>Bobot Kriteria
                            </a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" data-bs-toggle="tab" href="#perbandinganKriteria">
                                <i class="fas fa-balance-scale me-2"></i>Perbandingan Kriteria
                            </a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" data-bs-toggle="tab" href="#perbandinganAlternatif">
                                <i class="fas fa-random me-2"></i>Perbandingan Alternatif
                            </a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" data-bs-toggle="tab" href="#consistencyRatio">
                                <i class="fas fa-check-circle me-2"></i>Consistency Ratio
                            </a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" data-bs-toggle="tab" href="#skorMakanan">
                                <i class="fas fa-star me-2"></i>Bobot Alternatif atau Makanan
                            </a>
                        </li>
                    </ul>

                    <!-- Tab panes -->
                    <div class="tab-content">
                        <!-- Bobot Kriteria Tab -->
                        <div id="bobotKriteria" class="tab-pane active">
                            @forelse($bobotKriteria as $tanggalData => $bobots)
                            <div class="table-responsive">
                                <table class="admin-table">
                                    <thead>
                                        <tr>
                                            <th style="width: 5%">No</th>
                                            <th style="width: 65%">Kriteria</th>
                                            <th style="width: 30%">Bobot</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        @foreach($bobots as $index => $bobot)
                                        <tr>
                                            <td>{{ $index + 1 }}</td>
                                            <td>{{ $bobot->kriteria->nama }}</td>
                                            <td>{{ number_format($bobot->bobot, 4) }}</td>
                                        </tr>
                                        @endforeach
                                    </tbody>
                                </table>
                            </div>
                            @empty
                            <div class="text-center py-5">
                                <i class="fas fa-folder-open fa-3x text-muted mb-3"></i>
                                <p class="text-muted">Tidak ada data bobot kriteria untuk tanggal ini.</p>
                            </div>
                            @endforelse
                        </div>

                        <!-- Perbandingan Kriteria Tab -->
                        <div id="perbandinganKriteria" class="tab-pane fade">
                            @forelse($perbandinganKriteria as $tanggalData => $perbandinganKriterias)
                            <div class="table-responsive">
                                <table class="admin-table">
                                    <thead>
                                        <tr>
                                            <th style="width: 5%">No</th>
                                            <th style="width: 35%">Kriteria 1</th>
                                            <th style="width: 35%">Kriteria 2</th>
                                            <th style="width: 25%">Nilai</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        @foreach($perbandinganKriterias as $index => $perbandingan)
                                        <tr>
                                            <td>{{ $index + 1 }}</td>
                                            <td>{{ $perbandingan->kriteria1->nama }}</td>
                                            <td>{{ $perbandingan->kriteria2->nama }}</td>
                                            <td>{{ number_format($perbandingan->nilai, 4) }}</td>
                                        </tr>
                                        @endforeach
                                    </tbody>
                                </table>
                            </div>
                            @empty
                            <div class="text-center py-5">
                                <i class="fas fa-folder-open fa-3x text-muted mb-3"></i>
                                <p class="text-muted">Tidak ada data perbandingan kriteria untuk tanggal ini.</p>
                            </div>
                            @endforelse
                        </div>

                        <!-- Perbandingan Alternatif Tab -->
                        <div id="perbandinganAlternatif" class="tab-pane fade">
                            @forelse($perbandinganAlternatif as $tanggalData => $perbandinganAlternatifs)
                            <div class="table-responsive">
                                <table class="admin-table">
                                    <thead>
                                        <tr>
                                            <th style="width: 5%">No</th>
                                            <th style="width: 20%">Alternatif 1</th>
                                            <th style="width: 20%">Alternatif 2</th>
                                            <th style="width: 15%">Kriteria</th>
                                            <th style="width: 20%">Waktu Makan</th>
                                            <th style="width: 20%">Komponen</th>
                                            <th style="width: 10%">Nilai</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        @foreach($perbandinganAlternatifs as $index => $perbandingan)
                                        <tr>
                                            <td>{{ $index + 1 }}</td>
                                            <td>{{ $perbandingan->alternatif1->nama }}</td>
                                            <td>{{ $perbandingan->alternatif2->nama }}</td>
                                            <td>{{ $perbandingan->kriteria->nama }}</td>
                                            <td>{{ optional($perbandingan->waktuMakan)->nama ?? '-' }}</td>
                                            <td>{{ optional($perbandingan->komponen)->nama ?? '-' }}</td>
                                            <td>{{ number_format($perbandingan->nilai, 4) }}</td>
                                        </tr>
                                        @endforeach
                                    </tbody>
                                </table>
                            </div>
                            @empty
                            <div class="text-center py-5">
                                <i class="fas fa-folder-open fa-3x text-muted mb-3"></i>
                                <p class="text-muted">Tidak ada data perbandingan alternatif untuk tanggal ini.</p>
                            </div>
                            @endforelse
                        </div>

                        <!-- Consistency Ratio Tab -->
                        <div id="consistencyRatio" class="tab-pane fade">
                            @forelse($consistencyRatios as $tanggalData => $CRs)
                            <div class="table-responsive">
                                <table class="admin-table">
                                    <thead>
                                        <tr>
                                            <th style="width: 5%">No</th>
                                            <th style="width: 20%">Kriteria</th>
                                            <th style="width: 20%">Waktu Makan</th>
                                            <th style="width: 20%">Komponen</th>
                                            <th style="width: 15%">Nilai CR</th>
                                            <th style="width: 20%">Status</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        @foreach($CRs as $index => $cr)
                                        <tr>
                                            <td>{{ $index + 1 }}</td>
                                            <td>{{ optional($cr->kriteria)->nama ?? 'Semua Kriteria' }}</td>
                                            <td>{{ optional($cr->waktuMakan)->nama ?? '-' }}</td>
                                            <td>{{ optional($cr->komponen)->nama ?? '-' }}</td>
                                            <td>{{ number_format($cr->nilai_cr, 4) }}</td>
                                            <td>
                                                <span class="admin-badge {{ $cr->nilai_cr < 0.1 ? 'bg-success' : 'bg-warning' }}">
                                                    {{ $cr->nilai_cr < 0.1 ? 'Konsisten' : 'Perlu Review' }}
                                                </span>
                                            </td>
                                        </tr>
                                        @endforeach
                                    </tbody>
                                </table>
                            </div>
                            @empty
                            <div class="text-center py-5">
                                <i class="fas fa-folder-open fa-3x text-muted mb-3"></i>
                                <p class="text-muted">Tidak ada data consistency ratio untuk tanggal ini.</p>
                            </div>
                            @endforelse
                        </div>

                        <!-- Skor Makanan Tab -->
                        <div id="skorMakanan" class="tab-pane fade">
                            @forelse($skorMakanan as $tanggalData => $skors)
                            <div class="table-responsive">
                                <table class="admin-table">
                                    <thead>
                                        <tr>
                                            <th style="width: 5%">No</th>
                                            <th style="width: 25%">Makanan</th>
                                            <th style="width: 20%">Kriteria</th>
                                            <th style="width: 20%">Waktu Makan</th>
                                            <th style="width: 20%">Komponen</th>
                                            <th style="width: 10%">Nilai</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        @foreach($skors as $index => $skor)
                                        <tr>
                                            <td>{{ $index + 1 }}</td>
                                            <td>{{ $skor->makanan->nama }}</td>
                                            <td>{{ $skor->kriteria->nama }}</td>
                                            <td>{{ optional($skor->waktuMakan)->nama ?? '-' }}</td>
                                            <td>{{ optional($skor->komponen)->nama ?? '-' }}</td>
                                            <td>{{ number_format($skor->nilai, 4) }}</td>
                                        </tr>
                                        @endforeach
                                    </tbody>
                                </table>
                            </div>
                            @empty
                            <div class="text-center py-5">
                                <i class="fas fa-folder-open fa-3x text-muted mb-3"></i>
                                <p class="text-muted">Tidak ada data skor makanan untuk tanggal ini.</p>
                            </div>
                            @endforelse
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script>
document.addEventListener('DOMContentLoaded', function() {
    // Inisialisasi tooltips
    var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'))
    var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
        return new bootstrap.Tooltip(tooltipTriggerEl)
    });

    // Filter form handling
    const filterForm = document.getElementById('filterForm');
    if (filterForm) {
        filterForm.addEventListener('submit', function(e) {
            e.preventDefault();
            const tanggal = document.getElementById('tanggalFilter').value;
            window.location.href = `{{ route('history.ahp') }}?tanggal=${tanggal}`;
        });
    }

    // Simpan tab aktif ke localStorage
    $('a[data-bs-toggle="tab"]').on('shown.bs.tab', function (e) {
        localStorage.setItem('lastActiveHistoryTab', $(e.target).attr('href'));
    });

    // Restore tab aktif dari localStorage
    var lastTab = localStorage.getItem('lastActiveHistoryTab');
    if (lastTab) {
        $('a[href="' + lastTab + '"]').tab('show');
    }
});
</script>
@endpush