@extends('layouts.app')

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

@section('content_body')
    <x-page-header 
        title="Arsip Surat" 
        subtitle="Kelola seluruh dokumen surat yang telah diterbitkan dan arsipkan dokumen resmi desa."
        :breadcrumbs="['Dashboard' => route('dashboard'), 'Administrasi Surat' => '#', 'Arsip Surat' => route('surat-cetak.index')]"
    />

    <div class="container-fluid px-0">
        <div class="row">
            <!-- 1. TOTAL ARSIP -->
            <div class="col-lg-3 col-md-6 col-12 mb-4">
                <x-statistic-card 
                    title="TOTAL ARSIP" 
                    value="{{ number_format($totalArsip) }} Surat" 
                    icon="fas fa-box-open" 
                    color="primary" 
                    description="Seluruh surat yang telah diterbitkan." 
                />
            </div>
            <!-- 2. DRAFT -->
            <div class="col-lg-3 col-md-6 col-12 mb-4">
                <x-statistic-card 
                    title="DRAFT" 
                    value="{{ number_format($belumScan) }} Surat" 
                    icon="fas fa-file-invoice" 
                    color="warning" 
                    description="Belum ditandatangani." 
                />
            </div>
            <!-- 3. SURAT RESMI -->
            <div class="col-lg-3 col-md-6 col-12 mb-4">
                <x-statistic-card 
                    title="SURAT RESMI" 
                    value="{{ number_format($sudahScan) }} Surat" 
                    icon="fas fa-file-signature" 
                    color="success" 
                    description="Sudah diunggah hasil scan." 
                />
            </div>
            <!-- 4. ARSIP BULAN INI -->
            <div class="col-lg-3 col-md-6 col-12 mb-4">
                <x-statistic-card 
                    title="ARSIP BULAN INI" 
                    value="{{ number_format($totalBulanIni) }} Surat" 
                    icon="fas fa-calendar-alt" 
                    color="info" 
                    description="Surat bulan berjalan." 
                />
            </div>
        </div>

        <!-- Tabel Arsip Surat (menggunakan x-data-table) -->
        @if ($arsipSurat->isEmpty())
            <x-empty-state 
                icon="fas fa-folder-open" 
                title="Belum ada arsip surat yang tersedia." 
                description="Seluruh dokumen surat yang telah diterbitkan akan diarsipkan secara otomatis di sini."
            />
        @else
            <x-data-table id="arsipTable" :export-columns="[1, 2, 3, 4]" title="Data Arsip Surat" placeholder="Cari nomor surat, pemohon, atau jenis surat..." :show-export="false">
                <x-slot name="filters">
                    <!-- Filter Jenis Surat -->
                    <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">
                        <label class="filter-label d-none d-md-block" style="height: 18px; margin-bottom: 0;">&nbsp;</label>
                        <button id="btnFilterReset" class="btn btn-light border font-weight-bold" style="height: 40px; border-radius: 10px; padding: 0 16px; display: inline-flex; align-items: center; gap: 6px; transition: all 0.2s;" title="Refresh data dan reset filter">
                            <i class="fas fa-sync-alt"></i> Refresh
                        </button>
                    </div>
                </x-slot>

                <thead>
                    <tr>
                        <th width="5%" class="text-center">No</th>
                        <th>Nomor Surat</th>
                        <th>Nama Pemohon</th>
                        <th>Jenis Surat</th>
                        <th>Tanggal Surat</th>
                        <th width="150" class="text-center">Status</th>
                        <th width="100" class="text-center">Aksi</th>
                    </tr>
                </thead>
                <tbody>
                    @foreach ($arsipSurat as $item)
                        <tr>
                            <td class="text-center text-muted font-weight-medium">{{ $loop->iteration }}</td>
                            <td>
                                <div class="d-flex flex-column">
                                    <strong style="color: var(--primary-color); font-size: 0.95rem;">{{ $item->nomor_surat }}</strong>
                                    <span class="text-muted text-xs mt-0.5" style="font-size: 0.75rem;">No. Pengajuan: {{ $item->pengajuanSurat->nomor_pengajuan }}</span>
                                </div>
                            </td>
                            <td>
                                <div class="d-flex flex-column">
                                    <span class="font-weight-bold text-dark" style="font-size: 0.95rem;">{{ $item->pengajuanSurat->penduduk->nama_lengkap }}</span>
                                    <span class="text-muted text-xs mt-0.5" style="font-size: 0.75rem;">NIK: {{ $item->pengajuanSurat->penduduk->nik }}</span>
                                </div>
                            </td>
                            <td>
                                <span class="text-secondary font-weight-medium" style="font-size: 0.9rem;">{{ $item->pengajuanSurat->jenisSurat->nama_surat }}</span>
                            </td>
                            <td>
                                <span class="text-muted d-inline-flex align-items-center" style="font-size: 0.85rem;">
                                    <i class="far fa-calendar-alt mr-1.5 text-secondary" style="font-size: 0.8rem;"></i>
                                    {{ \Carbon\Carbon::parse($item->tanggal_cetak)->format('d-m-Y') }}
                                </span>
                            </td>
                            <td class="text-center">
                                @if ($item->file_scan_ttd)
                                    <span class="badge-status py-1.5 px-2.5 d-inline-flex align-items-center" style="background-color: #DCFCE7; color: #15803D; border: 1px solid #BBF7D0; border-radius: 20px; font-weight: 600; font-size: 0.8rem;">
                                        <span class="mr-1.5" style="width: 6px; height: 6px; background-color: #16A34A; border-radius: 50%;"></span>
                                        Surat Resmi
                                    </span>
                                @else
                                    <span class="badge-status status-badge-check py-1.5 px-2.5 d-inline-flex align-items-center" data-id="{{ $item->id }}" style="border-radius: 20px; font-weight: 600; font-size: 0.8rem;">
                                        <!-- Ditentukan via JS (Draft / Menunggu Scan) -->
                                    </span>
                                @endif
                            </td>
                            <td class="text-center">
                                <div class="d-flex align-items-center justify-content-center" style="gap: 8px;">
                                    <!-- Detail -->
                                    <a href="{{ route('surat-cetak.show', $item->id) }}" class="btn btn-action-view btn-sm d-inline-flex align-items-center justify-content-center" style="width: 32px; height: 32px; border-radius: 8px; transition: all 0.2s;" title="Lihat Detail Arsip">
                                        <i class="fas fa-eye" style="font-size: 0.9rem;"></i>
                                    </a>

                                    <!-- Cetak Draft -->
                                    <a href="{{ URL::signedRoute('surat.download', ['id' => $item->id]) }}" target="_blank" class="btn btn-action-print btn-print-draft btn-sm d-inline-flex align-items-center justify-content-center" data-id="{{ $item->id }}" style="width: 32px; height: 32px; border-radius: 8px; background-color: #f0fdfa; color: #0f766e; border: 1px solid #ccfbf1; transition: all 0.2s;" title="Cetak Draft Surat">
                                        <i class="fas fa-print" style="font-size: 0.9rem;"></i>
                                    </a>
                                </div>
                            </td>
                        </tr>
                    @endforeach
                </tbody>
            </x-data-table>
        @endif
    </div>
@endsection

@section('css')
    @parent
    <style>
        .btn-action-print:hover {
            background-color: #0f766e !important;
            color: #ffffff !important;
            border-color: #0f766e !important;
            transform: translateY(-1px);
            box-shadow: 0 4px 12px rgba(15, 118, 110, 0.25) !important;
        }
        /* Custom styling for floating cards hover */
        .float-card {
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
        }
        .float-card:hover {
            transform: translateY(-5px) !important;
            box-shadow: var(--card-shadow-hover) !important;
        }
    </style>
@stop

@section('js')
    @parent
    <script>
        $(function() {
            // Sederhanakan label pencarian menjadi 'Cari Arsip'
            setTimeout(function() {
                $('#arsipTable_search').closest('.filter-control-item').find('.filter-label').text('Cari Arsip');
            }, 100);

            // Inisialisasi DataTable instance
            let table;
            $(document).on('datatable:initialized:arsipTable', function(e, dtInstance) {
                table = dtInstance;

                // Event listener untuk Filter Jenis Surat
                $('#filterJenis').on('change', function() {
                    table.column(3).search(this.value).draw();
                });
            });

            // Reset filters & search
            $('#btnFilterReset').on('click', function() {
                $('#filterJenis').val('').trigger('change');
                $('#arsipTable_search').val('');
                if (table) {
                    table.search('').columns().search('').draw();
                }
            });

            // Logika Status Badge Client-Side
            function updateSuratStatus(id, isPrinted) {
                let badge = $('.status-badge-check[data-id="' + id + '"]');
                if (badge.length) {
                    if (isPrinted) {
                        badge.css({
                            'background-color': '#FFEDD5',
                            'color': '#C2410C',
                            'border': '1px solid #FED7AA'
                        }).html('<span class="mr-1.5" style="width: 6px; height: 6px; background-color: #EA580C; border-radius: 50%;"></span>Menunggu Scan');
                    } else {
                        badge.css({
                            'background-color': '#FEF3C7',
                            'color': '#B45309',
                            'border': '1px solid #FCD34D'
                        }).html('<span class="mr-1.5" style="width: 6px; height: 6px; background-color: #D97706; border-radius: 50%;"></span>Draft');
                    }
                }
            }

            // Inisialisasi status untuk semua baris saat load
            $('.status-badge-check').each(function() {
                let id = $(this).data('id');
                let isPrinted = localStorage.getItem('printed_surat_' + id) === 'true';
                updateSuratStatus(id, isPrinted);
            });

            // Ubah status menjadi Menunggu Scan saat tombol cetak diklik
            $(document).on('click', '.btn-print-draft', function() {
                let id = $(this).data('id');
                localStorage.setItem('printed_surat_' + id, 'true');
                updateSuratStatus(id, true);
            });

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