@extends('layouts.admin')

@section('content')
<style>
    .table-admin { font-size: 10px !important; border-collapse: separate; border-spacing: 0; }
    .table-admin th { background: #1e293b !important; color: white !important; padding: 8px 10px !important; white-space: nowrap; border: 1px solid #334155; }
    .table-admin td { padding: 6px 10px !important; white-space: nowrap; border-bottom: 1px solid #e2e8f0; background-color: #fff; }

    /* Sticky Freeze Columns */
    /* NO tetap paling kiri */
    .sticky-no { position: sticky; left: 0; z-index: 11; background: #fff !important; width: 40px; text-align: center; border-right: 1px solid #e2e8f0 !important; }
    
    /* Logic CSS Dinamis buat Freeze Kolom */
    @if($isSuperAdmin)
        /* Jika Superadmin: NO (0px) -> RW (40px) -> NIS (100px) -> Nama (180px) */
        .sticky-rw { position: sticky; left: 40px; z-index: 11; background: #fff8e1 !important; width: 60px; text-align: center; }
        .sticky-nis { position: sticky; left: 100px; z-index: 11; background: #fff !important; width: 80px; }
        .sticky-name { position: sticky; left: 180px; z-index: 11; background: #fff !important; border-right: 2px solid #cbd5e1 !important; }
    @else
        /* Jika Admin RW: NO (0px) -> NIS (40px) -> Nama (120px) */
        .sticky-nis { position: sticky; left: 40px; z-index: 11; background: #fff !important; width: 80px; }
        .sticky-name { position: sticky; left: 120px; z-index: 11; background: #fff !important; border-right: 2px solid #cbd5e1 !important; }
    @endif

    /* Fix Header Sticky agar tetap di atas body saat di-scroll */
    thead th.sticky-no, thead th.sticky-rw, thead th.sticky-nis, thead th.sticky-name { z-index: 12 !important; }

    .row-kk { background-color: #f8fafc !important; border-top: 1.5px solid #334155 !important; }
    .row-anggota:hover td { background-color: #f1f5f9 !important; }
    .nis-label { background: #0d6efd; color: white; padding: 2px 5px; border-radius: 3px; font-weight: bold; font-size: 9px; }
    
    .table-responsive { overflow-x: auto; max-height: 75vh; border: 1px solid #e2e8f0; }
    .table-responsive::-webkit-scrollbar { height: 10px; width: 8px; }
    .table-responsive::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 10px; }
    .table-responsive::-webkit-scrollbar-track { background: #f1f5f9; }
</style>

<div class="container-fluid py-3">
    <div class="row align-items-end mb-4">
        <div class="col-md-6">
            <h4 class="fw-bold mb-1 text-uppercase" style="letter-spacing: 1px;">
                Daftar Warga SINOMAN {{ $isSuperAdmin ? '(GLOBAL)' : '' }}
            </h4>
            <p class="text-muted small mb-0">
                <i class="fas fa-info-circle me-1"></i>
                {{ $isSuperAdmin ? 'Memantau seluruh data warga lintas RW dalam sistem Pangrukti Layon' : 'Data warga aktif di wilayah RW Anda' }}
            </p>
        </div>
        <div class="col-md-6 text-end">
            <button onclick="exportExcel()" class="btn btn-success btn-sm px-3 shadow-sm fw-bold">
                <i class="fas fa-file-excel me-1"></i> EXPORT EXCEL (XLSX)
            </button>
        </div>
    </div>

    <div class="card shadow-sm border-0">
        <div class="card-header bg-white py-3">
            <div class="row g-2 align-items-center">
                <div class="col-auto">
                    <label class="small text-muted d-block">Baris</label>
                    <select id="per_page" class="form-select form-select-sm" style="width: 80px;">
                        <option value="50">50</option>
                        <option value="100" selected>100</option>
                        <option value="250">250</option>
                        <option value="500">500</option>
                    </select>
                </div>
                <div class="col-md-4">
                    <label class="small text-muted d-block">Pencarian Cepat</label>
                    <div class="input-group input-group-sm">
                        <span class="input-group-text bg-light border-end-0"><i class="fas fa-search text-muted"></i></span>
                        <input type="text" id="search" class="form-control border-start-0" value="{{ $search }}" placeholder="Ketik Nama, NIK, NIS, atau Nama Desa...">
                    </div>
                </div>
                <div class="col text-end align-self-end">
                    <span id="loading-status" class="badge bg-primary text-white" style="display: none; padding: 8px 12px;">
                        <i class="fas fa-spinner fa-spin me-1"></i> SEDANG MENGAMBIL DATA...
                    </span>
                </div>
            </div>
        </div>

        <div class="card-body p-0">
            <div id="table-container">
                @include('adminrw.partials._anggota_table')
            </div>
        </div>
    </div>
</div>

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
    $(document).ready(function() {
        // Fungsi Fetch Data Ajax
        function fetchData(page, search, perPage) {
            $('#loading-status').show();
            $('#table-container').css('opacity', '0.5');
            
            $.ajax({
                url: "{{ route('adminrw.data-anggota') }}",
                data: { 
                    page: page, 
                    search: search, 
                    per_page: perPage 
                },
                success: function(response) {
                    $('#table-container').html(response).css('opacity', '1');
                    $('#loading-status').hide();
                    // Auto scroll ke posisi paling atas tabel
                    $('.table-responsive').scrollTop(0);
                },
                error: function() {
                    alert('Sesi berakhir atau server error. Silahkan login ulang.');
                    $('#loading-status').hide();
                    $('#table-container').css('opacity', '1');
                }
            });
        }

        // Live Search dengan Debounce (biar server gak jebol kalo ngetik cepet)
        let timer;
        $('#search').on('keyup', function() {
            clearTimeout(timer);
            timer = setTimeout(function() {
                fetchData(1, $('#search').val(), $('#per_page').val());
            }, 500);
        });

        // Event saat ganti jumlah data per halaman
        $('#per_page').on('change', function() {
            fetchData(1, $('#search').val(), $(this).val());
        });

        // Event handling buat link pagination hasil dari Ajax
        $(document).on('click', '.pagination a', function(e) {
            e.preventDefault();
            let page = $(this).attr('href').split('page=')[1];
            fetchData(page, $('#search').val(), $('#per_page').val());
        });
    });

    // Function Export Excel
    function exportExcel() {
        let search = $('#search').val();
        let url = "{{ route('adminrw.data-anggota.export') }}";
        // Buka di tab baru atau redirect untuk memicu download
        window.location.href = url + "?search=" + encodeURIComponent(search);
    }
</script>
@endsection