@extends('admin.layout.main')

@section('title', 'PeGas - Hasil Prediksi Pangkalan')

@section('content')
<div class="container-fluid">
    <div class="d-sm-flex align-items-center justify-content-between mb-4">
        <div>
            <h1 class="h3 mb-0 text-gray-800 font-weight-bold">Hasil Prediksi Pangkalan</h1>
            <small class="text-muted">Pantau proyeksi kebutuhan volume pasokan tabung gas pangkalan mitra ke depan.</small>
        </div>
        <a href="{{ route('admin.hasil-prediksi.export-rekap-massal') }}" class="btn btn-sm btn-success shadow-sm px-3 font-weight-bold">
            <i class="fas fa-file-excel mr-1"></i> Download Rekap Semua Prediksi
        </a>
    </div>

    <div class="card shadow mb-4">
        <div class="card-header bg-white py-3 border-0">
            <h6 class="m-0 font-weight-bold" style="color: #7bb31a;">Daftar Pangkalan Mitra Terdaftar</h6>
        </div>
        <div class="card-body">
            <div class="table-responsive">
                <table class="table table-bordered table-striped table-hover shadow-sm" id="pangkalanTable" width="100%" cellspacing="0">
                    <thead class="bg-light text-dark font-weight-bold">
                        <tr>
                            <th width="8%">No</th>
                            <th>Nama Pemilik</th>
                            <th>Email</th>
                            <th>Total Log Prediksi</th>
                            <th>Status Permintaan Pasokan</th>
                            <th width="15%" class="text-center">Aksi</th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach($pangkalanList as $p)
                        <tr>
                            <td>{{ $loop->iteration }}</td>
                            <td class="font-weight-bold text-gray-800">{{ $p->name }}</td>
                            <td>{{ $p->email }}</td>
                            <td><span class="badge badge-info px-2 py-1">{{ $p->hasil_prediksi_count }} Hari</span></td>
                            
                            <!-- Komponen Badge Indikator Status Hasil Prediksi -->
                            <td>
                                @if($p->status_mitigasi === 'PERLU PERHATIAN KHUSUS')
                                    <span class="badge badge-danger text-uppercase px-3 py-2 font-weight-bold shadow-sm" style="letter-spacing: 0.5px;">
                                        <i class="fas fa-exclamation-triangle mr-1"></i> Perlu Perhatian Khusus
                                    </span>
                                @elseif($p->status_mitigasi === 'Pantauan Berkala')
                                    <span class="badge badge-warning text-dark text-uppercase px-3 py-2 font-weight-bold shadow-sm" style="letter-spacing: 0.5px;">
                                        <i class="fas fa-eye mr-1"></i> Pantauan Berkala
                                    </span>
                                @elseif($p->status_mitigasi === 'Stabil (Aman)')
                                    <span class="badge badge-success text-uppercase px-3 py-2 font-weight-bold shadow-sm" style="letter-spacing: 0.5px;">
                                        <i class="fas fa-check-circle mr-1"></i> Stabil (Aman)
                                    </span>
                                @else
                                    <span class="badge badge-secondary px-3 py-2 font-weight-bold">{{ $p->status_mitigasi }}</span>
                                @endif
                            </td>

                            <td class="text-center">
                                <a href="{{ route('admin.hasil-prediksi.show', $p->id) }}" class="btn btn-sm btn-info btn-circle shadow-sm" title="Lihat Detail Prediksi"><i class="fas fa-eye"></i></a>
                                <a href="{{ route('admin.hasil-prediksi.export', $p->id) }}" class="btn btn-sm btn-success btn-circle ml-1 shadow-sm" title="Unduh Excel Prediksi"><i class="fas fa-download"></i></a>
                            </td>
                        </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>

@push('scripts')
<script>
    $(document).ready(function() {
        $('#pangkalanTable').DataTable({
            "language": {
                "url": "//cdn.datatables.net/plug-ins/1.10.21/i18n/Indonesian.json"
            }
        });
    });
</script>
@endpush
@endsection