@extends('layouts.dashboard')

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

@push('styles')
<!-- DataTables CSS -->
<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%) !important; 
        color: white !important; 
    }
    .badge { font-size: 0.75em; }
    .table-container { min-height: 400px; }
    @media print { .btn, .card-header { display: none !important; } }
</style>
@endpush

@section('content')
<div class="container-fluid">
    {{-- 📋 HEADER --}}
    <div class="row mb-4">
        <div class="col-12">
            <div class="d-flex justify-content-between align-items-center">
                <div>
                    <a href="{{ route('pelaporan.index') }}" class="btn btn-outline-secondary">
                        <i class="bi bi-arrow-left me-2"></i>Kembali ke Dashboard
                    </a>
                </div>
                <div class="text-end">
                    <h4 class="mb-1 fw-bold">Daftar Anggota Aktif</h4>
                    <div class="text-muted">
                        <small>Total: <strong>{{ number_format($totalAnggota ?? 0) }}</strong> anggota</small><br>
                        <small>Update: {{ now()->translatedFormat('d F Y H:i') }}</small>
                    </div>
                </div>
            </div>
        </div>
    </div>

    {{-- 🔍 FILTER FORM --}}
    <div class="card border-0 shadow-sm mb-4">
        <div class="card-body">
            <form method="GET" class="row g-3 align-items-end">
                <div class="col-md-3">
                    <label class="form-label fw-semibold small text-muted">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-2">
                    <label class="form-label fw-semibold small text-muted">Status Kartu</label>
                    <select name="status_kartu" class="form-select form-select-sm">
                        <option value="">🎫 Semua Status</option>
                        <option value="aktif" {{ request('status_kartu') == 'aktif' ? 'selected' : '' }}>✅ Aktif</option>
                        <option value="menunggu" {{ request('status_kartu') == 'menunggu' ? 'selected' : '' }}>⏳ Menunggu</option>
                        <option value="" {{ request('status_kartu') == '' ? 'selected' : '' }}>❌ Belum</option>
                    </select>
                </div>
                
                <div class="col-md-4">
                    <label class="form-label fw-semibold small text-muted">🔍 Cari Nama/NIK</label>
                    <input type="text" name="search" class="form-control form-control-sm" 
                           value="{{ request('search') }}" 
                           placeholder="Ketik nama atau NIK...">
                </div>
                
                <div class="col-md-3">
                    <button type="submit" class="btn btn-primary w-100 h-100">
                        <i class="bi bi-search me-1"></i>Terapkan Filter
                    </button>
                </div>
            </form>
        </div>
    </div>

    {{-- 📤 EXPORT BUTTONS --}}
    <div class="mb-4 text-end">
        <div class="btn-group btn-group-lg" role="group">
            <a href="{{ route('pelaporan.daftar-anggota.export.excel') }}" class="btn btn-success shadow-sm">
                <i class="bi bi-file-earmark-excel me-2"></i><strong>Excel</strong>
            </a>
            <a href="{{ route('pelaporan.daftar-anggota.export.pdf') }}" class="btn btn-danger shadow-sm">
                <i class="bi bi-file-earmark-pdf me-2"></i><strong>PDF</strong>
            </a>
            <button type="button" class="btn btn-outline-info shadow-sm" onclick="window.print()">
                <i class="bi bi-printer me-2"></i><strong>Print</strong>
            </button>
        </div>
    </div>

    {{-- 📊 TABEL DATA --}}
    <div class="card shadow-lg border-0 overflow-hidden">
        <div class="card-header gradient-header py-3">
            <div class="row align-items-center">
                <div class="col">
                    <h5 class="mb-0 fw-bold">
                        <i class="bi bi-people-fill me-2"></i>Data Anggota Aktif HNSI
                    </h5>
                </div>
                <div class="col-auto">
                    <span class="badge bg-light text-dark fs-6 px-3 py-2">
                        {{ $anggotas->total() ?? 0 }} <small>records</small>
                    </span>
                </div>
            </div>
        </div>

        <div class="card-body p-0 table-container">
            <div class="table-responsive">
                <table class="table table-hover mb-0" id="anggotaTable">
                    <thead class="table-dark sticky-top">
                        <tr>
                            <th class="fw-bold">👤 Nama Lengkap</th>
                            <th class="fw-bold">🆔 NIK</th>
                            <th class="fw-bold">📅 Tgl Lahir</th>
                            <th class="fw-bold">🗺️ Provinsi</th>
                            <th class="fw-bold">🏘️ Kabupaten</th>
                            <th class="fw-bold">🎫 Status Kartu</th>
                            <th class="fw-bold">📱 WA</th>
                            <th class="fw-bold">⚙️ Aksi</th>
                        </tr>
                    </thead>
                    <tbody>
                        @forelse($anggotas ?? collect() as $anggota)
                        <tr class="align-middle">
                            <td>
                                <div>
                                    <strong class="d-block">{{ $anggota->nama_lengkap }}</strong>
                                    <small class="text-muted">
                                        {{ $anggota->jenis_kelamin == 'L' ? 'Laki-laki' : ($anggota->jenis_kelamin == 'P' ? 'Perempuan' : '-') }}
                                    </small>
                                </div>
                            </td>
                            <td>
                                <code class="text-primary fs-6">{{ $anggota->nik }}</code>
                            </td>
                            <td>
                                {{ $anggota->tanggal_lahir ? date('d/m/Y', strtotime($anggota->tanggal_lahir)) : '-' }}
                            </td>
                            <td>
                                @php
                                    $provName = DB::table('reg_provinces')
                                        ->where('id', $anggota->alamat_provinsi_id)
                                        ->value('name') ?? '-';
                                @endphp
                                <span class="fw-semibold">{{ $provName }}</span>
                            </td>
                            <td>
                                @php
                                    $kotaName = DB::table('reg_regencies')
                                        ->where('id', $anggota->alamat_kota_id)
                                        ->value('name') ?? '-';
                                @endphp
                                {{ $kotaName }}
                            </td>
                            <td>
                                @php $status = $anggota->status_kartu ?? 'belum'; @endphp
                                @switch(strtolower($status))
                                    @case('aktif')
                                    @case('selesai')
                                        <span class="badge bg-success">
                                            <i class="bi bi-check-circle-fill me-1"></i>Aktif
                                        </span>
                                        @break
                                    @case('menunggu')
                                    @case('pending')
                                        <span class="badge bg-warning text-dark">
                                            <i class="bi bi-clock-fill me-1"></i>Menunggu
                                        </span>
                                        @break
                                    @default
                                        <span class="badge bg-secondary">
                                            <i class="bi bi-x-circle me-1"></i>{{ ucwords($status) }}
                                        </span>
                                @endswitch
                            </td>
                            <td>
                                @if($anggota->nomor_wa && strlen(preg_replace('/[^0-9]/', '', $anggota->nomor_wa)) > 10)
                                    <a href="https://wa.me/{{ preg_replace('/[^0-9]/', '', $anggota->nomor_wa) }}" 
                                       class="btn btn-success btn-sm shadow-sm" target="_blank" title="Chat WA">
                                        <i class="bi bi-whatsapp"></i>
                                    </a>
                                @else
                                    <span class="text-muted small">-</span>
                                @endif
                            </td>
                            <td>
                                <div class="btn-group btn-group-sm" role="group">
                                    <a href="#" class="btn btn-outline-primary" onclick="viewDetail({{ $anggota->anggota_id }})" title="Detail">
                                        <i class="bi bi-eye"></i>
                                    </a>
                                    @if($anggota->no_kartu_anggota)
                                        <a href="#" class="btn btn-outline-success" title="Kartu Anggota">
                                            <i class="bi bi-card-text"></i>
                                        </a>
                                    @endif
                                </div>
                            </td>
                        </tr>
                        @empty
                        <tr>
                            <td colspan="8" class="text-center py-5 bg-light">
                                <div class="my-4">
                                    <i class="bi bi-people display-1 text-muted mb-3 opacity-50"></i>
                                    <h4 class="text-muted">Tidak ada data anggota aktif</h4>
                                    <p class="text-muted mb-0">Coba ubah filter atau tambah data anggota</p>
                                </div>
                            </td>
                        </tr>
                        @endforelse
                    </tbody>
                </table>
            </div>
        </div>

        {{-- 📄 PAGINATION --}}
        @if(isset($anggotas) && $anggotas->hasPages())
        <div class="card-footer bg-light border-top">
            <div class="row align-items-center">
                <div class="col-md-6">
                    <small class="text-muted">
                        Menampilkan {{ $anggotas->firstItem() }} - {{ $anggotas->lastItem() }} 
                        dari {{ number_format($anggotas->total()) }} total
                    </small>
                </div>
                <div class="col-md-6">
                    {{ $anggotas->appends(request()->query())->links() }}
                </div>
            </div>
        </div>
        @endif
    </div>
</div>
@endsection

@push('scripts')
<!-- jQuery (required for DataTables) -->
<script src="https://code.jquery.com/jquery-3.7.0.min.js"></script>
<!-- DataTables Core -->
<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>
<!-- DataTables Buttons + Export -->
<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>
$(document).ready(function() {
    // Inisialisasi DataTables
    var table = $('#anggotaTable').DataTable({
        responsive: true,
        pageLength: 25,
        order: [[0, 'asc']],
        columnDefs: [
            { orderable: false, targets: [6, 7] }, // Disable sort WA & Aksi
            { className: "text-center", targets: [2,3,4,5,6,7] }
        ],
        dom: '<"row"<"col-sm-12 col-md-6"l><"col-sm-12 col-md-6"f>>' +
             '<"row"<"col-sm-12"B>>' +
             '<"row"<"col-sm-12"tr>>' +
             '<"row"<"col-sm-12 col-md-5"i><"col-sm-12 col-md-7"p>>',
        buttons: [
            {
                extend: 'excelHtml5',
                text: '<i class="bi bi-file-earmark-excel-fill me-1"></i>Excel',
                className: 'btn btn-success btn-sm shadow-sm me-1',
                title: 'Daftar Anggota Aktif HNSI 2026',
                exportOptions: { columns: ':visible' }
            },
            {
                extend: 'pdfHtml5',
                text: '<i class="bi bi-file-earmark-pdf-fill me-1"></i>PDF',
                className: 'btn btn-danger btn-sm shadow-sm me-1',
                orientation: 'landscape',
                pageSize: 'A4',
                title: 'Daftar Anggota Aktif HNSI 2026'
            },
            {
                extend: 'print',
                text: '<i class="bi bi-printer-fill me-1"></i>Print',
                className: 'btn btn-info btn-sm shadow-sm'
            }
        ],
        language: {
            search: "🔍 Cari Nama/NIK:",
            lengthMenu: "Tampil _MENU_ per halaman",
            info: "Menampilkan _START_ - _END_ dari _TOTAL_ anggota",
            infoEmpty: "Tidak ada data",
            infoFiltered: "(disaring dari _MAX_ total)",
            paginate: {
                first: "« Pertama",
                last: "Terakhir »",
                next: "Selanjut →",
                previous: "← Sebelum"
            },
            emptyTable: "Tidak ada data anggota aktif",
            zeroRecords: "Tidak ditemukan data yang cocok"
        }
    });

    // Auto-hide export buttons on mobile
    if ($(window).width() < 768) {
        table.buttons().nodes().addClass('d-none');
    }
});

// Fungsi detail modal (kosong dulu)
function viewDetail(id) {
    alert('Detail Anggota ID: ' + id + '\nRoute: anggota.show belum dibuat');
}
</script>
@endpush