@extends('admin.layout.main')
@section('title', 'Detail Penjualan - ' . $pangkalan->name)

@section('content')
<div class="d-sm-flex align-items-center justify-content-between mb-4">
    <h1 class="h3 mb-0 text-gray-800">Detail Penjualan: <strong>{{ $pangkalan->name }}</strong></h1>
    <div>
        <a href="{{ route('admin.data-penjualan-user.index') }}" class="btn btn-sm btn-secondary shadow-sm mr-2">
            <i class="fas fa-arrow-left fa-sm mr-1"></i> Kembali
        </a>
        <a href="{{ route('admin.data-penjualan-user.export', array_merge(['id' => $pangkalan->id], request()->query())) }}" class="btn btn-sm btn-success shadow-sm">
            <i class="fas fa-download fa-sm text-white-50 mr-1"></i> 
            {{ request('bulan_tahun') ? 'Download Excel (Bulan Terpilih)' : 'Download Excel (Keseluruhan)' }}
        </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 Penjualan</h6>
    </div>
    <div class="card-body">
        
        <!-- KOMPONEN BARU: MATRIKS NOTIFIKASI KESIMPULAN EVALUASI AGEN SECARA REAL-TIME -->
        <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 Pengawasan (CV):</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">Nilai Fluktuasi Data: <span class="text-dark">{{ $cvPersen }}</span></small>
                </div>
                <div class="col-md-9 pl-md-4">
                    <span class="small font-weight-bold text-muted d-block text-uppercase">Penyebab & Alasan Analisis Operasional:</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.data-penjualan-user.show', $pangkalan->id) }}" id="formFilterPenjualan">
            <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 Keseluruhan Data --</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="desc" {{ $sortOrder == 'desc' ? 'selected' : '' }}>Terbaru ke Terlama (Descending)</option>
                        <option value="asc" {{ $sortOrder == 'asc' ? 'selected' : '' }}>Terlama ke Terbaru (Ascending)</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.data-penjualan-user.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-header py-3">
        <h6 class="m-0 font-weight-bold text-primary">Histori Transaksi User</h6>
    </div>
    <div class="card-body">
        <div class="table-responsive">
            <table class="table table-bordered" id="tableDetailAdmin" width="100%" cellspacing="0">
                <thead class="bg-gray-100">
                    <tr>
                        <th width="5%">No</th>
                        <th>Tanggal Penjualan</th>
                        <th>Jumlah (Tabung)</th>
                    </tr>
                </thead>
                <tbody>
                    @forelse($data_penjualan as $item)
                    <tr>
                        <td>{{ $loop->iteration }}</td>
                        <td data-order="{{ \Carbon\Carbon::parse($item->tanggal)->format('Ymd') }}">
                            {{ \Carbon\Carbon::parse($item->tanggal)->locale('id')->translatedFormat('d F Y') }}
                        </td>
                        <td>{{ number_format($item->jumlah, 0, ',', '.') }}</td>
                    </tr>
                    @empty
                    <tr>
                        <td colspan="3" class="text-center py-4 text-muted">
                            <i class="fas fa-box-open fa-2x mb-2 d-block opacity-25"></i>
                            Tidak ditemukan histori transaksi penjualan pada periode bulan terpilih.
                        </td>
                    </tr>
                    @endforelse
                </tbody>
            </table>
        </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 formFilterPenjualan = document.getElementById('formFilterPenjualan');

        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) {
                formFilterPenjualan.submit();
            } else {
                Swal.fire({
                    icon: 'warning',
                    title: 'Data Tidak Tersedia',
                    text: 'Data transaksi penjualan untuk periode bulan berjalan saat ini belum diinput atau tidak ditemukan di database.',
                    confirmButtonColor: '#7ebc12',
                    confirmButtonText: 'Paham'
                });
            }
        });
    });
</script>
@endsection