@extends('layouts.app')

@section('subtitle', 'Verifikasi Surat')

@section('content_body')
    <!-- Global Hero Section -->
    <x-hero-section title="Verifikasi Surat" subtitle="Kelola dan verifikasi seluruh surat yang sedang diproses sebelum diberikan keputusan akhir" />

    <!-- Floating Statistics Cards -->
    <div class="px-3" style="margin-top: -65px; position: relative; z-index: 10;">
        <div class="row">
            <div class="col-lg-3 col-md-6 col-12 mb-4">
                <x-statistic-card 
                    title="Total Diproses" 
                    value="{{ number_format($totalDiproses) }} Surat" 
                    icon="fas fa-spinner fa-spin" 
                    color="primary" 
                    description="Sedang diverifikasi admin" 
                />
            </div>
            <div class="col-lg-3 col-md-6 col-12 mb-4">
                <x-statistic-card 
                    title="Hari Ini" 
                    value="{{ number_format($diprosesHariIni) }} Surat" 
                    icon="fas fa-calendar-day" 
                    color="secondary" 
                    description="Dimulai hari ini" 
                />
            </div>
            <div class="col-lg-3 col-md-6 col-12 mb-4">
                <x-statistic-card 
                    title="Minggu Ini" 
                    value="{{ number_format($diprosesMingguIni) }} Surat" 
                    icon="fas fa-calendar-week" 
                    color="warning" 
                    description="Dimulai minggu ini" 
                />
            </div>
            <div class="col-lg-3 col-md-6 col-12 mb-4">
                <x-statistic-card 
                    title="Bulan Ini" 
                    value="{{ number_format($diprosesBulanIni) }} Surat" 
                    icon="fas fa-calendar-alt" 
                    color="success" 
                    description="Dimulai bulan ini" 
                />
            </div>
        </div>

        <!-- Tabel Verifikasi Surat (menggunakan x-data-table) -->
        <x-data-table id="verifikasiTable" :export-columns="[0, 1, 2, 3, 4, 5, 6, 7]" title="Data Verifikasi Surat" placeholder="Cari nomor pengajuan, pemohon, atau NIK...">
            <x-slot name="filters">
                <div class="filter-control-item filter-jenis" style="width: 220px;">
                    <label class="filter-label font-weight-bold mb-1 text-secondary" style="font-size: 0.8rem;">Jenis Surat</label>
                    <div class="input-group-filter d-flex align-items-center border px-2 bg-white" style="height: 40px; border-radius: 10px; border-color: #e2e8f0 !important; width: 100%;">
                        <span class="text-muted mr-2"><i class="far fa-file-alt"></i></span>
                        <select id="filterJenis" class="form-control border-0 p-0 bg-transparent" style="box-shadow: none; font-size: 0.9rem;">
                            <option value="">Semua Jenis Surat</option>
                            @foreach($jenisSurats as $jenis)
                                <option value="{{ $jenis->nama_surat }}">{{ $jenis->nama_surat }}</option>
                            @endforeach
                        </select>
                    </div>
                </div>
                
                <div class="filter-control-item filter-tanggal" style="width: 220px;">
                    <label class="filter-label font-weight-bold mb-1 text-secondary" style="font-size: 0.8rem;">Rentang Tanggal</label>
                    <div class="input-group-filter d-flex align-items-center border px-2 bg-white" style="height: 40px; border-radius: 10px; border-color: #e2e8f0 !important; width: 100%;">
                        <span class="text-muted mr-2"><i class="far fa-calendar-alt"></i></span>
                        <input type="text" id="filterTanggal" class="form-control border-0 p-0 bg-transparent" placeholder="Pilih Rentang Tanggal..." readonly style="box-shadow: none; font-size: 0.9rem; background-color: #fff; cursor: pointer;">
                    </div>
                </div>
            </x-slot>

            <thead>
                <tr>
                    <th width="5%">No</th>
                    <th>Nomor Pengajuan</th>
                    <th>Nama Pemohon</th>
                    <th>NIK</th>
                    <th>Jenis Surat</th>
                    <th>Tanggal Pengajuan</th>
                    <th>Status</th>
                    <th>Admin Verifikator</th>
                    <th width="60" class="text-center">Aksi</th>
                </tr>
            </thead>
            <tbody>
                @foreach($diproses as $item)
                    <tr>
                        <td>{{ $loop->iteration }}</td>
                        <td><strong>{{ $item->nomor_pengajuan }}</strong></td>
                        <td><span class="font-weight-bold text-dark">{{ $item->penduduk->nama_lengkap }}</span></td>
                        <td><span class="text-muted">{{ $item->penduduk->nik }}</span></td>
                        <td><span class="text-secondary font-weight-medium">{{ $item->jenisSurat->nama_surat }}</span></td>
                        <td>
                            <span class="text-muted" style="font-size: 0.85rem;">
                                {{ \Carbon\Carbon::parse($item->tanggal_pengajuan)->format('d-m-Y') }}<br>
                                <small class="text-muted">{{ \Carbon\Carbon::parse($item->tanggal_pengajuan)->format('H:i') }} WIB</small>
                            </span>
                        </td>
                        <td>
                            <span class="badge badge-primary px-2 py-1.5" style="border-radius: 6px; background-color: var(--primary-color) !important;">PROSES</span>
                        </td>
                        <td>
                            <span class="font-weight-semibold text-dark">{{ $item->processor->name ?? '-' }}</span>
                        </td>
                        <td class="text-center">
                            <a href="{{ route('pengajuan-surat.show', $item->id) }}" class="btn btn-sm btn-action-view" title="Lihat Detail" style="width: 32px; height: 32px; padding: 0 !important; display: inline-flex; align-items: center; justify-content: center; border-radius: 6px !important;">
                                <i class="fas fa-eye"></i>
                            </a>
                        </td>
                    </tr>
                @endforeach
            </tbody>
        </x-data-table>
    </div>
@endsection

@section('css')
    @parent
    <!-- DataTables Buttons Styles -->
    <link rel="stylesheet" href="https://cdn.datatables.net/buttons/2.4.2/css/buttons.bootstrap4.min.css" />
    <!-- DateRangePicker Styles -->
    <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.css" />
@stop

@section('js')
    @parent
    <!-- Moment.js and DateRangePicker JS CDN -->
    <script type="text/javascript" src="https://cdn.jsdelivr.net/momentjs/latest/moment.min.js"></script>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.min.js"></script>
    
    <!-- DataTables Buttons & PDFMake/JSZip Dependencies -->
    <script src="https://cdn.datatables.net/buttons/2.4.2/js/dataTables.buttons.min.js"></script>
    <script src="https://cdn.datatables.net/buttons/2.4.2/js/buttons.bootstrap4.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.10.1/jszip.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.2.7/pdfmake.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.2.7/vfs_fonts.js"></script>
    <script src="https://cdn.datatables.net/buttons/2.4.2/js/buttons.html5.min.js"></script>
    <script src="https://cdn.datatables.net/buttons/2.4.2/js/buttons.print.min.js"></script>

    <script>
        $(function() {
            let table;
            $(document).on('datatable:initialized:verifikasiTable', function(e, dtInstance) {
                table = dtInstance;

                // Custom Filters Event Listeners
                $('#filterJenis').on('change', function() {
                    table.column(4).search(this.value).draw();
                });
            });

            // Initialize DateRangePicker
            $('#filterTanggal').daterangepicker({
                autoUpdateInput: false,
                locale: {
                    format: 'DD-MM-YYYY',
                    cancelLabel: 'Clear',
                    applyLabel: 'Pilih',
                    daysOfWeek: ['Min', 'Sen', 'Sel', 'Rab', 'Kam', 'Jum', 'Sab'],
                    monthNames: ['Januari', 'Februari', 'Maret', 'April', 'Mei', 'Juni', 'Juli', 'Agustus', 'September', 'Oktober', 'November', 'Desember']
                }
            });

            $('#filterTanggal').on('apply.daterangepicker', function(ev, picker) {
                $(this).val(picker.startDate.format('DD-MM-YYYY') + ' - ' + picker.endDate.format('DD-MM-YYYY'));
                table.draw();
            });

            $('#filterTanggal').on('cancel.daterangepicker', function(ev, picker) {
                $(this).val('');
                table.draw();
            });

            // Datatable custom date range filter
            $.fn.dataTable.ext.search.push(
                function(settings, data, dataIndex) {
                    if (settings.nTable.id !== 'verifikasiTable') return true;

                    let range = $('#filterTanggal').val();
                    if (!range) return true;

                    let parts = range.split(' - ');
                    let start = moment(parts[0], 'DD-MM-YYYY').startOf('day');
                    let end = moment(parts[1], 'DD-MM-YYYY').endOf('day');
                    
                    let rawDateStr = data[5].split('\n')[0].trim();
                    let dateVal = moment(rawDateStr, 'DD-MM-YYYY');

                    if (!start.isValid() || !end.isValid() || !dateVal.isValid()) return true;

                    return dateVal.isSameOrAfter(start) && dateVal.isSameOrBefore(end);
                }
            );

            // Tooltips
            $('[title]').tooltip({
                trigger: 'hover'
            });
        });
    </script>
@stop