@extends('layouts.main')

@section('content')
<div class="min-h-screen bg-white py-4 px-4">
    <div class="w-full">
        <!-- Header -->
        <div class="mb-4">
            <div class="bg-gradient-to-r from-indigo-600 to-indigo-700 rounded-t-xl shadow-lg px-5 py-2">
                <div class="flex items-center justify-between">
                    <h2 class="text-xl font-bold text-white flex items-center">
                        <i class="fas fa-users mr-2"></i>
                        Manajemen Keanggotaan KOGTIK
                    </h2>
                    <div class="flex items-center gap-3">
                        <form method="GET" action="{{ route('keanggotaan.manage') }}" id="filterForm" class="flex items-center gap-2">
                            <select name="status" id="statusFilter" class="px-3 py-1.5 rounded-lg border-0 focus:ring-2 focus:ring-white/50 text-gray-900 text-sm">
                                <option value="">Semua Status</option>
                                <option value="aktif" {{ request('status') == 'aktif' ? 'selected' : '' }}>Aktif</option>
                                <option value="pending" {{ request('status') == 'pending' ? 'selected' : '' }}>Pending</option>
                                <option value="nonaktif" {{ request('status') == 'nonaktif' ? 'selected' : '' }}>Nonaktif</option>
                                <option value="ditolak" {{ request('status') == 'ditolak' ? 'selected' : '' }}>Ditolak</option>
                            </select>
                            <div class="relative">
                                <input type="text" 
                                       name="search"
                                       id="searchInput"
                                       value="{{ request('search') }}"
                                       class="pl-9 pr-3 py-1.5 rounded-lg border-0 focus:ring-2 focus:ring-white/50 text-gray-900 placeholder-gray-500 text-sm"
                                       placeholder="Cari anggota...">
                                <i class="fas fa-search absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-300"></i>
                                <div id="searchLoading" class="hidden absolute right-3 top-1/2 transform -translate-y-1/2">
                                    <i class="fas fa-spinner fa-spin text-gray-400"></i>
                                </div>
                            </div>
                            <select name="per_page" id="perPageFilter" class="px-3 py-1.5 rounded-lg border-0 focus:ring-2 focus:ring-white/50 text-gray-900 text-sm">
                                <option value="10" {{ request('per_page') == '10' ? 'selected' : '' }}>10</option>
                                <option value="25" {{ request('per_page') == '25' || !request('per_page') ? 'selected' : '' }}>25</option>
                                <option value="50" {{ request('per_page') == '50' ? 'selected' : '' }}>50</option>
                                <option value="100" {{ request('per_page') == '100' ? 'selected' : '' }}>100</option>
                                <option value="all" {{ request('per_page') == 'all' ? 'selected' : '' }}>Semua</option>
                            </select>
                        </form>
                        @if(auth()->user()->isAdmin() || auth()->user()->isSuperAdmin())
                            @if($stats['pending'] > 0)
                                <form action="{{ route('keanggotaan.verify-all') }}" method="POST" class="inline" onsubmit="return confirm('Apakah Anda yakin ingin memverifikasi semua {{ $stats['pending'] }} keanggotaan yang pending?')">
                                    @csrf
                                    @method('POST')
                                    <button type="submit" class="bg-green-500 hover:bg-green-600 text-white px-4 py-1.5 rounded-lg transition-all flex items-center shadow-md">
                                        <i class="fas fa-check-double mr-2 text-sm"></i>
                                        Verifikasi Semua ({{ $stats['pending'] }})
                                    </button>
                                </form>
                            @endif
                        @endif
                        <a href="{{ route('keanggotaan.create') }}" class="bg-white/20 hover:bg-white/30 text-white px-3 py-1.5 rounded-lg transition-all flex items-center">
                            <i class="fas fa-plus mr-2 text-sm"></i>
                            Tambah Keanggotaan
                        </a>
                    </div>
                </div>
            </div>
        </div>

        <!-- Alert Messages -->
        @if(session('success'))
            <div class="mb-6 bg-green-50 border-l-4 border-green-500 rounded-lg p-4 shadow-sm">
                <div class="flex items-center">
                    <i class="fas fa-check-circle text-green-500 mr-3 text-xl"></i>
                    <div class="flex-1">
                        <p class="text-green-800 font-medium">{{ session('success') }}</p>
                    </div>
                    <button type="button" class="text-green-500 hover:text-green-700" onclick="this.parentElement.parentElement.remove()">
                        <i class="fas fa-times"></i>
                    </button>
                </div>
            </div>
        @endif

        @if(session('error'))
            <div class="mb-6 bg-red-50 border-l-4 border-red-500 rounded-lg p-4 shadow-sm">
                <div class="flex items-center">
                    <i class="fas fa-exclamation-triangle text-red-500 mr-3 text-xl"></i>
                    <div class="flex-1">
                        <p class="text-red-800 font-medium">{{ session('error') }}</p>
                    </div>
                    <button type="button" class="text-red-500 hover:text-red-700" onclick="this.parentElement.parentElement.remove()">
                        <i class="fas fa-times"></i>
                    </button>
                </div>
            </div>
        @endif

        <!-- Statistics Cards -->
        <div class="grid grid-cols-1 md:grid-cols-5 gap-4 mb-6">
            <div class="bg-gradient-to-br from-blue-500 to-blue-600 rounded-xl shadow-lg p-5 text-white transform hover:scale-105 transition-transform duration-200">
                <div class="flex items-center justify-between">
                    <div>
                        <p class="text-blue-100 text-sm font-medium mb-1">Total Anggota</p>
                        <p class="text-3xl font-bold">{{ $stats['total'] ?? 0 }}</p>
                        <p class="text-blue-100 text-xs mt-1">Semua keanggotaan</p>
                    </div>
                    <i class="fas fa-users text-4xl opacity-50"></i>
                </div>
            </div>
            <div class="bg-gradient-to-br from-green-500 to-green-600 rounded-xl shadow-lg p-5 text-white transform hover:scale-105 transition-transform duration-200">
                <div class="flex items-center justify-between">
                    <div>
                        <p class="text-green-100 text-sm font-medium mb-1">Aktif</p>
                        <p class="text-3xl font-bold">{{ $stats['aktif'] ?? 0 }}</p>
                        <p class="text-green-100 text-xs mt-1">{{ $stats['total'] > 0 ? round(($stats['aktif'] / $stats['total']) * 100, 1) : 0 }}% dari total</p>
                    </div>
                    <i class="fas fa-check-circle text-4xl opacity-50"></i>
                </div>
            </div>
            <div class="bg-gradient-to-br from-yellow-500 to-yellow-600 rounded-xl shadow-lg p-5 text-white transform hover:scale-105 transition-transform duration-200">
                <div class="flex items-center justify-between">
                    <div>
                        <p class="text-yellow-100 text-sm font-medium mb-1">Pending</p>
                        <p class="text-3xl font-bold">{{ $stats['pending'] ?? 0 }}</p>
                        <p class="text-yellow-100 text-xs mt-1">Menunggu persetujuan</p>
                    </div>
                    <i class="fas fa-clock text-4xl opacity-50"></i>
                </div>
            </div>
            <div class="bg-gradient-to-br from-red-500 to-red-600 rounded-xl shadow-lg p-5 text-white transform hover:scale-105 transition-transform duration-200">
                <div class="flex items-center justify-between">
                    <div>
                        <p class="text-red-100 text-sm font-medium mb-1">Nonaktif</p>
                        <p class="text-3xl font-bold">{{ $stats['nonaktif'] ?? 0 }}</p>
                        <p class="text-red-100 text-xs mt-1">Keanggotaan nonaktif</p>
                    </div>
                    <i class="fas fa-times-circle text-4xl opacity-50"></i>
                </div>
            </div>
            <div class="bg-gradient-to-br from-gray-500 to-gray-600 rounded-xl shadow-lg p-5 text-white transform hover:scale-105 transition-transform duration-200">
                <div class="flex items-center justify-between">
                    <div>
                        <p class="text-gray-100 text-sm font-medium mb-1">Ditolak</p>
                        <p class="text-3xl font-bold">{{ $stats['ditolak'] ?? 0 }}</p>
                        <p class="text-gray-100 text-xs mt-1">Permohonan ditolak</p>
                    </div>
                    <i class="fas fa-ban text-4xl opacity-50"></i>
                </div>
            </div>
        </div>

        <!-- Table Card -->
        <div class="bg-white rounded-b-xl shadow-xl overflow-hidden">
            <div class="overflow-x-auto">
                <table class="min-w-full divide-y divide-gray-200">
                    <thead class="bg-gradient-to-r from-gray-50 to-gray-100">
                        <tr>
                            <th class="px-6 py-3 text-left text-xs font-semibold text-gray-700 uppercase tracking-wider">No</th>
                            <th class="px-6 py-3 text-left text-xs font-semibold text-gray-700 uppercase tracking-wider">Anggota</th>
                            <th class="px-6 py-3 text-left text-xs font-semibold text-gray-700 uppercase tracking-wider">Nomor Anggota</th>
                            <th class="px-6 py-3 text-left text-xs font-semibold text-gray-700 uppercase tracking-wider">Status</th>
                            <th class="px-6 py-3 text-left text-xs font-semibold text-gray-700 uppercase tracking-wider">Tanggal Bergabung</th>
                            <th class="px-6 py-3 text-left text-xs font-semibold text-gray-700 uppercase tracking-wider">Tanggal Berakhir</th>
                            <th class="px-6 py-3 text-center text-xs font-semibold text-gray-700 uppercase tracking-wider">Aksi</th>
                        </tr>
                    </thead>
                    <tbody id="keanggotaanTableBody" class="bg-white divide-y divide-gray-200">
                        @include('keanggotaan.partials.table')
                    </tbody>
                </table>
            </div>

            <div id="paginationContainer">
                @include('keanggotaan.partials.pagination')
            </div>
        </div>
    </div>
</div>
@endsection

@push('styles')
<style>
    .pagination {
        display: flex;
        gap: 0.5rem;
        align-items: center;
    }
    
    .pagination > li > a,
    .pagination > li > span {
        padding: 0.5rem 0.75rem;
        border-radius: 0.5rem;
        border: 1px solid #e5e7eb;
        color: #6b7280;
        transition: all 0.2s;
    }
    
    .pagination > li > a:hover {
        background-color: #f3f4f6;
        border-color: #d1d5db;
        color: #374151;
    }
    
    .pagination > .active > span,
    .pagination > .active > a {
        background-color: #3b82f6;
        border-color: #3b82f6;
        color: white;
    }
    
    .pagination > .disabled > span,
    .pagination > .disabled > a {
        opacity: 0.5;
        cursor: not-allowed;
    }
</style>
@endpush

@push('scripts')
<script>
(function() {
    'use strict';
    
    document.addEventListener('DOMContentLoaded', function() {
        const searchInput = document.getElementById('searchInput');
        const statusFilter = document.getElementById('statusFilter');
        const perPageFilter = document.getElementById('perPageFilter');
        const tableBody = document.getElementById('keanggotaanTableBody');
        const paginationContainer = document.getElementById('paginationContainer');
        const searchLoading = document.getElementById('searchLoading');
        
        if (!searchInput || !tableBody) return;
        
        // Reset filter saat halaman di-refresh tanpa parameter
        const urlParams = new URLSearchParams(window.location.search);
        if (!urlParams.has('search') && !urlParams.has('status') && !urlParams.has('per_page')) {
            // Reset form ke default
            if (statusFilter) statusFilter.value = '';
            if (searchInput) searchInput.value = '';
            if (perPageFilter) perPageFilter.value = '25';
        }
        
        // Debounce function untuk menghindari terlalu banyak request
        function debounce(fn, delay) {
            let timeoutId;
            return function(...args) {
                clearTimeout(timeoutId);
                timeoutId = setTimeout(() => fn.apply(this, args), delay);
            };
        }
        
        // Function untuk melakukan search
        function performSearch() {
            const searchTerm = searchInput ? searchInput.value.trim() : '';
            const status = statusFilter ? statusFilter.value : '';
            const perPage = perPageFilter ? perPageFilter.value : '25';
            
            // Tampilkan loading indicator
            if (searchLoading) {
                searchLoading.classList.remove('hidden');
            }
            
            // Build URL dengan query parameters
            const params = new URLSearchParams();
            if (searchTerm) {
                params.append('search', searchTerm);
            }
            if (status) {
                params.append('status', status);
            }
            if (perPage) {
                params.append('per_page', perPage);
            }
            params.append('ajax', '1'); // Flag untuk AJAX request
            
            const url = '{{ route('keanggotaan.manage') }}?' + params.toString();
            
            // Fetch data
            fetch(url, {
                headers: {
                    'X-Requested-With': 'XMLHttpRequest',
                    'Accept': 'application/json'
                }
            })
            .then(response => {
                if (!response.ok) {
                    throw new Error('Network response was not ok');
                }
                return response.json();
            })
            .then(data => {
                // Update table body
                if (data.html) {
                    tableBody.innerHTML = data.html;
                }
                
                // Update pagination
                if (data.pagination) {
                    paginationContainer.innerHTML = data.pagination;
                }
                
                // Update URL tanpa reload
                const newUrl = window.location.pathname + (params.toString() ? '?' + params.toString() : '');
                window.history.pushState({}, '', newUrl);
            })
            .catch(error => {
                console.error('Error:', error);
                // Fallback: reload page dengan parameter
                const params = new URLSearchParams();
                if (searchTerm) {
                    params.append('search', searchTerm);
                }
                if (status) {
                    params.append('status', status);
                }
                if (perPage) {
                    params.append('per_page', perPage);
                }
                window.location.href = '{{ route('keanggotaan.manage') }}' + (params.toString() ? '?' + params.toString() : '');
            })
            .finally(() => {
                // Sembunyikan loading indicator
                if (searchLoading) {
                    searchLoading.classList.add('hidden');
                }
            });
        }
        
        // Debounced search function (300ms delay)
        const debouncedSearch = debounce(performSearch, 300);
        
        // Event listeners
        if (searchInput) {
            searchInput.addEventListener('input', function() {
                debouncedSearch();
            });
        }
        
        if (statusFilter) {
            statusFilter.addEventListener('change', function() {
                performSearch(); // No debounce untuk status filter
            });
        }
        
        if (perPageFilter) {
            perPageFilter.addEventListener('change', function() {
                performSearch(); // No debounce untuk per page filter
            });
        }
        
        // Handle pagination clicks (delegation)
        document.addEventListener('click', function(e) {
            if (e.target.closest('.pagination a')) {
                e.preventDefault();
                const url = e.target.closest('.pagination a').href;
                if (url) {
                    // Extract search, status, dan per_page dari current form
                    const searchTerm = searchInput ? searchInput.value.trim() : '';
                    const status = statusFilter ? statusFilter.value : '';
                    const perPage = perPageFilter ? perPageFilter.value : '25';
                    const urlObj = new URL(url);
                    
                    if (searchTerm) {
                        urlObj.searchParams.set('search', searchTerm);
                    } else {
                        urlObj.searchParams.delete('search');
                    }
                    if (status) {
                        urlObj.searchParams.set('status', status);
                    } else {
                        urlObj.searchParams.delete('status');
                    }
                    if (perPage) {
                        urlObj.searchParams.set('per_page', perPage);
                    }
                    urlObj.searchParams.set('ajax', '1');
                    
                    // Fetch paginated results
                    if (searchLoading) {
                        searchLoading.classList.remove('hidden');
                    }
                    
                    fetch(urlObj.toString(), {
                        headers: {
                            'X-Requested-With': 'XMLHttpRequest',
                            'Accept': 'application/json'
                        }
                    })
                    .then(response => response.json())
                    .then(data => {
                        if (data.html) {
                            tableBody.innerHTML = data.html;
                        }
                        if (data.pagination) {
                            paginationContainer.innerHTML = data.pagination;
                        }
                        window.history.pushState({}, '', urlObj.pathname + urlObj.search);
                    })
                    .catch(error => {
                        console.error('Error:', error);
                        window.location.href = urlObj.toString();
                    })
                    .finally(() => {
                        if (searchLoading) {
                            searchLoading.classList.add('hidden');
                        }
                    });
                }
            }
        });
    });
})();
</script>
@endpush