@extends('layouts.dashboard')

@section('title', 'Laporan Daftar Anggota')
@section('page-title', 'Laporan - Daftar Anggota Aktif HNSI 2026')

@push('styles')
<link rel="stylesheet" href="https://cdn.datatables.net/1.13.7/css/dataTables.bootstrap5.min.css">
<link rel="stylesheet" href="https://cdn.datatables.net/buttons/2.4.2/css/buttons.bootstrap5.min.css">
<link rel="stylesheet" href="https://cdn.datatables.net/responsive/2.5.0/css/responsive.bootstrap5.min.css">
<style>
    .gradient-header{
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        color: #fff;
    }
    .badge-status { font-size: .78rem; }
    @media print {
        .no-print { display:none !important; }
        .card { border: none !important; box-shadow: none !important; }
        .table { font-size: 12px; }
    }
</style>
@endpush

@section('content')
<div class="container-fluid">

    {{-- Header --}}
    <div class="d-flex justify-content-between align-items-start mb-3">
        <div class="no-print">
            <a href="{{ route('pelaporan.index') }}" class="btn btn-outline-secondary btn-sm">
                <i class="bi bi-arrow-left me-1"></i>Kembali ke Dashboard Pelaporan
            </a>
        </div>
        <div class="text-end">
            <h5 class="mb-1">Laporan Daftar Anggota Aktif</h5>
            <small class="text-muted">
                Total: <strong>{{ number_format($totalAnggota ?? 0) }}</strong> anggota
                | Update: {{ now()->format('d/m/Y H:i') }}
            </small>
        </div>
    </div>

    {{-- Filter --}}
    <div class="card shadow-sm mb-3 no-print">
        <div class="card-header">
            <strong><i class="bi bi-funnel me-1"></i>Filter</strong>
        </div>
        <div class="card-body">
            <form method="GET" class="row g-3 align-items-end">
                <div class="col-md-4">
                    <label class="form-label small mb-1">Provinsi</label>
                    <select name="province_id" class="form-select form-select-sm">
                        <option value="">Semua Provinsi</option>
                        @foreach(($provinces ?? []) as $id => $name)
                            <option value="{{ $id }}" {{ request('province_id') == $id ? 'selected' : '' }}>
                                {{ $name }}
                            </option>
                        @endforeach
                    </select>
                </div>

                <div class="col-md-3">
                    <label class="form-label small mb-1">Status Kartu</label>
                    <select name="status_kartu" class="form-select form-select-sm">
                        <option value="">Semua</option>
                        <option value="aktif" {{ request('status_kartu') == 'aktif' ? 'selected' : '' }}>Aktif</option>
                        <option value="menunggu" {{ request('status_kartu') == 'menunggu' ? 'selected' : '' }}>Menunggu</option>
                        <option value="pending" {{ request('status_kartu') == 'pending' ? 'selected' : '' }}>Pending</option>
                        <option value="selesai" {{ request('status_kartu') == 'selesai' ? 'selected' : '' }}>Selesai</option>
                        <option value="belum" {{ request('status_kartu') == 'belum' ? 'selected' : '' }}>Belum</option>
                    </select>
                    <small class="text-muted">“Belum” = NULL/kosong</small>
                </div>

                <div class="col-md-3">
                    <label class="form-label small mb-1">Cari Nama / NIK</label>
                    <input type="text" name="search" class="form-control form-control-sm"
                           value="{{ request('search') }}" placeholder="Nama atau NIK">
                </div>

                <div class="col-md-2 d-grid gap-2">
                    <button type="submit" class="btn btn-primary btn-sm">
                        <i class="bi bi-search me-1"></i>Filter
                    </button>
                    <a href="{{ route('pelaporan.daftar-anggota') }}" class="btn btn-outline-secondary btn-sm">
                        <i class="bi bi-arrow-clockwise me-1"></i>Reset
                    </a>
                </div>
            </form>
        </div>
    </div>

    {{-- Tombol Export (backend) --}}
    <div class="d-flex justify-content-end mb-3 gap-2 no-print">
        <button class="btn btn-outline-primary btn-sm" onclick="window.print()">
            <i class="bi bi-printer me-1"></i>Print
        </button>

        @if(\Illuminate\Support\Facades\Route::has('pelaporan.daftar-anggota.export.excel'))
            <a href="{{ route('pelaporan.daftar-anggota.export.excel') }}" class="btn btn-success btn-sm">
                <i class="bi bi-file-earmark-excel me-1"></i>Export Excel
            </a>
        @endif

        @if(\Illuminate\Support\Facades\Route::has('pelaporan.daftar-anggota.export.pdf'))
            <a href="{{ route('pelaporan.daftar-anggota.export.pdf') }}" class="btn btn-danger btn-sm">
                <i class="bi bi-file-earmark-pdf me-1"></i>Export PDF
            </a>
        @endif
    </div>

    {{-- Alert kalau data kosong (JANGAN taruh <td colspan> di tbody) --}}
    @if(($anggotas->count() ?? 0) === 0)
        <div class="alert alert-warning no-print">
            <strong>Tidak ada data</strong> untuk filter yang dipilih. Coba ubah filter atau klik Reset.
        </div>
    @endif

    {{-- Table --}}
    <div class="card shadow-lg border-0">
        <div class="card-header gradient-header">
            <div class="d-flex justify-content-between align-items-center">
                <div>
                    <strong><i class="bi bi-people-fill me-1"></i>Data Anggota</strong>
                    <div class="small opacity-75">Sumber: tabel <code>data_anggota</code></div>
                </div>
                <div class="small">
                    Records: <span class="badge bg-light text-dark">{{ $anggotas->total() ?? 0 }}</span>
                </div>
            </div>
        </div>

        <div class="card-body p-0">
            <div class="table-responsive">
                <table id="anggotaTable" class="table table-striped table-hover mb-0">
                    <thead class="table-dark">
                        <tr>
                            <th>Nama</th>
                            <th>NIK</th>
                            <th>JK</th>
                            <th>Tgl Lahir</th>
                            <th>Provinsi</th>
                            <th>Kab/Kota</th>
                            <th>Status Kartu</th>
                            <th>WA</th>
                            <th class="no-print">Aksi</th>
                        </tr>
                    </thead>

                    {{-- PENTING: kalau kosong, biarkan tbody kosong (DataTables aman) --}}
                    <tbody>
                        @foreach($anggotas as $a)
                            <tr>
                                <td>
                                    <strong>{{ $a->nama_lengkap }}</strong>
                                    @if(!empty($a->no_kartu_anggota))
                                        <div class="small text-muted">No KTA: {{ $a->no_kartu_anggota }}</div>
                                    @endif
                                </td>

                                <td><code>{{ $a->nik }}</code></td>

                                <td>
                                    @if($a->jenis_kelamin === 'L')
                                        <span class="badge bg-primary">L</span>
                                    @elseif($a->jenis_kelamin === 'P')
                                        <span class="badge bg-danger">P</span>
                                    @else
                                        <span class="badge bg-secondary">-</span>
                                    @endif
                                </td>

                                <td>{{ $a->tanggal_lahir ? \Carbon\Carbon::parse($a->tanggal_lahir)->format('d/m/Y') : '-' }}</td>

                                <td>
                                    @php
                                        $provName = DB::table('reg_provinces')->where('id', $a->alamat_provinsi_id)->value('name');
                                    @endphp
                                    {{ $provName ?? '-' }}
                                </td>

                                <td>
                                    @php
                                        $kabName = DB::table('reg_regencies')->where('id', $a->alamat_kota_id)->value('name');
                                    @endphp
                                    {{ $kabName ?? '-' }}
                                </td>

                                <td>
                                    @php $st = strtolower($a->status_kartu ?? ''); @endphp

                                    @if($st === '' || $st === 'belum')
                                        <span class="badge bg-secondary badge-status">Belum</span>
                                    @elseif($st === 'aktif')
                                        <span class="badge bg-success badge-status">Aktif</span>
                                    @elseif($st === 'menunggu' || $st === 'pending')
                                        <span class="badge bg-warning text-dark badge-status">Menunggu</span>
                                    @elseif($st === 'selesai')
                                        <span class="badge bg-primary badge-status">Selesai</span>
                                    @else
                                        <span class="badge bg-dark badge-status">{{ $a->status_kartu }}</span>
                                    @endif
                                </td>

                                <td>
                                    @php $wa = $a->nomor_wa ? preg_replace('/[^0-9]/', '', $a->nomor_wa) : ''; @endphp
                                    @if($wa)
                                        <a href="https://wa.me/{{ $wa }}" target="_blank" class="btn btn-success btn-sm" title="Chat WA">
                                            <i class="bi bi-whatsapp"></i>
                                        </a>
                                    @else
                                        <span class="text-muted">-</span>
                                    @endif
                                </td>

                                <td class="no-print">
                                    <div class="btn-group btn-group-sm" role="group">
                                        <button class="btn btn-outline-secondary" onclick="copyText('{{ $a->nik }}')" title="Copy NIK">
                                            <i class="bi bi-clipboard"></i>
                                        </button>
                                        <button class="btn btn-outline-primary" onclick="showDetail({{ $a->anggota_id }})" title="Detail (placeholder)">
                                            <i class="bi bi-eye"></i>
                                        </button>
                                    </div>
                                </td>
                            </tr>
                        @endforeach
                    </tbody>

                </table>
            </div>
        </div>

        {{-- Pagination Laravel --}}
        @if($anggotas->hasPages())
        <div class="card-footer bg-light no-print">
            <div class="d-flex justify-content-between align-items-center">
                <small class="text-muted">
                    Menampilkan {{ $anggotas->firstItem() ?? 0 }} - {{ $anggotas->lastItem() ?? 0 }}
                    dari {{ number_format($anggotas->total()) }}
                </small>
                <div>
                    {{ $anggotas->links() }}
                </div>
            </div>
        </div>
        @endif
    </div>

</div>
@endsection

@push('scripts')
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>

<script src="https://cdn.datatables.net/1.13.7/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.13.7/js/dataTables.bootstrap5.min.js"></script>

<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.bootstrap5.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.1.53/pdfmake.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.53/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 src="https://cdn.datatables.net/responsive/2.5.0/js/dataTables.responsive.min.js"></script>
<script src="https://cdn.datatables.net/responsive/2.5.0/js/responsive.bootstrap5.min.js"></script>

<script>
$(function () {
    // Aman dari “double init” jika layout/komponen me-render ulang
    if ($.fn.DataTable.isDataTable('#anggotaTable')) {
        $('#anggotaTable').DataTable().destroy();
    }

    // Anda pakai pagination Laravel, jadi DataTables paging dimatikan
    $('#anggotaTable').DataTable({
        responsive: true,
        paging: false,
        info: false,
        order: [[0, 'asc']],
        dom: 'Bfrtip',
        buttons: [
            { extend: 'excelHtml5', text: 'Excel (DT)', className: 'btn btn-success btn-sm' },
            { extend: 'pdfHtml5', text: 'PDF (DT)', className: 'btn btn-danger btn-sm', orientation: 'landscape', pageSize: 'A4' },
            { extend: 'print', text: 'Print (DT)', className: 'btn btn-outline-primary btn-sm' }
        ],
        language: {
            search: "Cari (halaman ini):",
            emptyTable: "Tidak ada data pada halaman ini",
            zeroRecords: "Tidak ditemukan"
        }
    });
});

function copyText(text) {
    navigator.clipboard.writeText(text).then(() => alert('NIK disalin: ' + text));
}
function showDetail(id) {
    alert('Detail anggota (placeholder) ID: ' + id);
}
</script>
@endpush