@extends('admin.layout.main')

@section('title', 'Detail Prediksi - ' . $pangkalan->name)

@section('content')
<div class="container-fluid">
    <div class="d-sm-flex align-items-center justify-content-between mb-4">
        <h1 class="h3 mb-0 text-gray-800">Detail Prediksi: <strong>{{ $pangkalan->name }}</strong></h1>
        <div>
            <a href="{{ route('admin.hasil-prediksi') }}" class="btn btn-sm btn-secondary shadow-sm mr-2">
                <i class="fas fa-arrow-left fa-sm"></i> Kembali
            </a>
            <a href="{{ route('admin.hasil-prediksi.export', ['id' => $pangkalan->id, 'bulan_tahun' => request('bulan_tahun')]) }}" class="btn btn-sm btn-success shadow-sm">
                <i class="fas fa-file-excel fa-sm text-white-50"></i> Download Excel
            </a>
        </div>
    </div>

    <div class="card shadow mb-3">
        <div class="card-header py-3 bg-light">
            <h6 class="m-0 font-weight-bold text-primary"><i class="fas fa-filter mr-1"></i> Panel Penyaringan Data</h6>
        </div>
        <div class="card-body">

            <!-- BOKS INFORMASI BARU: REKOMENDASI EVALUASI MITIGASI PASOKAN PREDIKSI -->
            <div class="mb-4 p-3 rounded shadow-sm border-left-{{ $statusPenting === 'PERLU PERHATIAN KHUSUS' ? 'danger' : ($statusPenting === 'Pantauan Berkala' ? 'warning' : 'success') }}" 
                 style="background-color: #f8f9fc; border-left-width: 4px;">
                <div class="row align-items-center">
                    <div class="col-md-3 border-right mb-2 mb-md-0">
                        <span class="small font-weight-bold text-muted d-block text-uppercase">Status :</span>
                        @if($statusPenting === 'PERLU PERHATIAN KHUSUS')
                            <h5 class="font-weight-bold text-danger m-0 mt-1"><i class="fas fa-exclamation-triangle fa-sm mr-1"></i> {{ $statusPenting }}</h5>
                        @elseif($statusPenting === 'Pantauan Berkala')
                            <h5 class="font-weight-bold text-warning text-dark m-0 mt-1"><i class="fas fa-eye fa-sm mr-1"></i> {{ $statusPenting }}</h5>
                        @else
                            <h5 class="font-weight-bold text-success m-0 mt-1"><i class="fas fa-check-circle fa-sm mr-1"></i> {{ $statusPenting }}</h5>
                        @endif
                        <small class="text-muted font-weight-bold mt-1 d-block">Potensi Lonjakan Puncak: <span class="text-dark">{{ $persenKenaikanTeks }}</span></small>
                    </div>
                    <div class="col-md-9 pl-md-4">
                        <span class="small font-weight-bold text-muted d-block text-uppercase">Rekomendasi Tindakan Agen Berdasarkan Proyeksi:</span>
                        <p class="text-gray-800 small m-0 mt-1 font-italic font-weight-bold">"{{ $alasanAnalisis }}"</p>
                    </div>
                </div>
            </div>
            <hr class="mt-0 mb-4">

            <form method="GET" action="{{ route('admin.hasil-prediksi.show', $pangkalan->id) }}" id="formFilterPrediksi">
                <div class="row align-items-end">
                    
                    <div class="col-md-4 mb-3 mb-md-0">
                        <label class="small font-weight-bold text-dark">Pilih Bulan & Tahun:</label>
                        <select name="bulan_tahun" id="selectBulanTahun" class="form-control form-control-sm">
                            <option value="">-- Tampilkan Semua Bulan --</option>
                            @foreach($availableMonths as $month)
                                <option value="{{ $month['value'] }}" {{ $filterBulanTahun == $month['value'] ? 'selected' : '' }}>
                                    {{ $month['label'] }}
                                </option>
                            @endforeach
                        </select>
                    </div>

                    <div class="col-md-3 mb-3 mb-md-0">
                        <label class="small font-weight-bold text-dark">Urutan Tanggal:</label>
                        <select name="sort" class="form-control form-control-sm">
                            <option value="asc" {{ $sortOrder == 'asc' ? 'selected' : '' }}>Terlama ke Terbaru (Ascending)</option>
                            <option value="desc" {{ $sortOrder == 'desc' ? 'selected' : '' }}>Terbaru ke Terlama (Descending)</option>
                        </select>
                    </div>

                    <div class="col-md-5">
                        <button type="submit" class="btn btn-sm btn-primary shadow-sm px-3">
                            <i class="fas fa-search fa-sm mr-1"></i> Terapkan Filter
                        </button>
                        
                        <button type="button" id="btnBulanIni" class="btn btn-sm btn-info shadow-sm px-3 ml-1">
                            <i class="fas fa-calendar-day fa-sm mr-1"></i> Bulan Ini
                        </button>

                        @if($filterBulanTahun || $sortOrder !== 'desc')
                            <a href="{{ route('admin.hasil-prediksi.show', $pangkalan->id) }}" class="btn btn-sm btn-danger shadow-sm px-3 ml-1">
                                <i class="fas fa-undo fa-sm mr-1"></i> Reset
                            </a>
                        @endif
                    </div>

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

    <div class="card shadow mb-4">
        <div class="card-body">
            <div class="table-responsive">
                <table class="table table-bordered table-striped table-hover" id="tableDetailAdmin" width="100%" cellspacing="0">
                    <thead class="bg-gray-100 text-dark">
                        <tr>
                            <th width="5%">No</th>
                            <th>Tanggal</th>
                            <th>Estimasi Kebutuhan (Tabung)</th>
                            <th>Batas Bawah</th>
                            <th>Batas Atas</th>
                        </tr>
                    </thead>
                    <tbody>
                        @forelse($hasil_prediksi as $index => $p)
                        <tr>
                            <td>{{ $index + 1 }}</td>
                            <td data-order="{{ $p->tanggal }}">
                                {{ \Carbon\Carbon::parse($p->tanggal)->locale('id')->translatedFormat('d F Y') }}
                            </td>
                            <td class="font-weight-bold text-primary">{{ number_format($p->estimasi, 0, ',', '.') }}</td>
                            <td class="text-muted">{{ number_format($p->batas_bawah, 0, ',', '.') }}</td>
                            <td class="text-muted">{{ number_format($p->batas_atas, 0, ',', '.') }}</td>
                        </tr>
                        @empty
                        <tr>
                            <td colspan="5" class="text-center py-4 text-muted">
                                <i class="fas fa-chart-bar fa-2x mb-2 d-block opacity-25"></i>
                                Tidak ditemukan data prediksi yang cocok untuk kriteria filter ini.
                            </td>
                        </tr>
                        @endforelse
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>

<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>

<script>
    document.addEventListener("DOMContentLoaded", function() {
        const btnBulanIni = document.getElementById('btnBulanIni');
        const selectBulanTahun = document.getElementById('selectBulanTahun');
        const formFilterPrediksi = document.getElementById('formFilterPrediksi');

        if (btnBulanIni && selectBulanTahun && formFilterPrediksi) {
            btnBulanIni.addEventListener('click', function() {
                const dateNow = new Date();
                const year = dateNow.getFullYear();
                const month = String(dateNow.getMonth() + 1).padStart(2, '0');
                const currentYearMonth = `${year}-${month}`;

                let optionExists = false;
                for (let i = 0; i < selectBulanTahun.options.length; i++) {
                    if (selectBulanTahun.options[i].value === currentYearMonth) {
                        selectBulanTahun.value = currentYearMonth;
                        optionExists = true;
                        break;
                    }
                }

                if (optionExists) {
                    formFilterPrediksi.submit();
                } else {
                    Swal.fire({
                        icon: 'warning',
                        title: 'Data Tidak Tersedia',
                        text: 'Data prediksi untuk periode bulan berjalan saat ini tidak ditemukan di database pangkalan.',
                        confirmButtonColor: '#36B9CC',
                        confirmButtonText: 'Paham'
                    });
                }
            });
        }
    });
</script>
@endsection