@extends('Admin.layout')
@section('content')
    <div class="row align-items-center mb-5">
        <div class="col-12 col-sm">
            <h4>Delivery Management</h4>
        </div>

        <div class="col-12 col-sm-auto">
            <a href="{{ route('add_delivery_partner') }}" class="btn btn-primary w-100">
                Add Delivery partner
            </a>
        </div>
    </div>

    <div class="d-flex flex-lg-row flex-column justify-content-start gap-3 my-5">
        <a href="#" class="btn btn-primary d-flex align-items-center">
            <i class="ti tabler-user me-2"></i>
            <span>New Entry</span>
        </a>

        <a href="{{ route('verified_entry') }}" class="btn d-flex align-items-center">
            <i class="ti tabler-checklist me-2"></i>
            <span>Verified Entry</span>
        </a>
    </div>

    <div class="card p-5">
        <div
            class="d-flex flex-column flex-lg-row justify-content-between align-items-start align-items-lg-center my-4 gap-3">
            <div class="d-flex align-items-center gap-3">
                <select id="pageLength" class="form-select w-auto">
                    <option value="10">10</option>
                    <option value="25">25</option>
                    <option value="50">50</option>
                    <option value="100">100</option>
                    <option value="all">All</option>
                </select>

                <select id="statusFilter" class="form-select w-auto">
                    <option value="all">All Status</option>
                    <option value="pending">Pending</option>
                    <option value="rejected">Rejected</option>
                </select>
            </div>

            <div class="col-lg-6 col-12">
                <div class="d-flex flex-column flex-lg-row gap-3">
                    <div class="search-box flex-grow-1">
                        <input type="search" id="searchInput" class="form-control" placeholder="Search by name or phone...">
                    </div>

                    <button type="button" id="exportBtn" class="btn btn-primary border flex-shrink-0">
                        <i class="ti tabler-download me-2"></i>
                        Export
                    </button>
                </div>
            </div>
        </div>

        <div class="row g-4" id="partnerGrid">
            @forelse($pendingPartners as $partner)
                @php $status = strtolower($partner->status ?? 'pending'); @endphp
                <div class="col-xl-3 col-lg-4 col-md-6 col-sm-6 partner-card-wrapper"
                    data-name="{{ strtolower($partner->full_name ?? '') }}" data-phone="{{ $partner->phno ?? '' }}"
                    data-status="{{ $status }}">
                    <div class="card border-0 shadow-sm text-center h-100">
                        <div class="card-body">
                            <img src="{{ $partner->image ? asset('storage/' . $partner->image) : asset('assets/images/user_pfl.png') }}"
                                class="rounded-circle mb-3 partner-img" width="80" height="80" alt="Profile Image">

                            <h6 class="fw-semibold mb-1 partner-name">{{ $partner->full_name ?? 'N/A' }}</h6>
                            <small class="text-muted d-block mb-2 partner-phone">{{ $partner->phno ?? 'N/A' }}</small>

                            <span
                                class="badge px-3 py-2 partner-status-badge {{ $status === 'rejected' ? 'bg-danger-subtle text-danger' : 'bg-warning-subtle text-warning' }}">
                                {{ ucfirst($status) }}
                            </span>
                        </div>

                        <div class="card-footer  border-0">
                            <a href="{{ route('edit_delivery_partner', ['id' => $partner->id]) }}"
                                class="btn btn-primary w-100">
                                View Profile
                            </a>
                        </div>
                    </div>
                </div>
            @empty
                <div class="col-12 text-center py-5" id="noDataMessage">
                    <p class="text-muted mb-0">No pending delivery partners found.</p>
                </div>
            @endforelse

            <div class="col-12 text-center py-5 d-none" id="noMatchMessage">
                <p class="text-muted mb-0">No records match your filters.</p>
            </div>
        </div>
    </div>

    <script>
        document.addEventListener('DOMContentLoaded', function () {
            const searchInput = document.getElementById('searchInput');
            const statusFilter = document.getElementById('statusFilter');
            const pageLength = document.getElementById('pageLength');
            const exportBtn = document.getElementById('exportBtn');
            const cards = Array.from(document.querySelectorAll('.partner-card-wrapper'));
            const noMatchMessage = document.getElementById('noMatchMessage');

            function filterCards() {
                const query = (searchInput ? searchInput.value : '').toLowerCase().trim();
                const selectedStatus = (statusFilter ? statusFilter.value : 'all').toLowerCase();
                const limit = pageLength && pageLength.value !== 'all' ? parseInt(pageLength.value, 10) : Infinity;

                let visibleCount = 0;

                cards.forEach(card => {
                    const name = card.dataset.name || '';
                    const phone = card.dataset.phone || '';
                    const status = card.dataset.status || '';

                    const matchesSearch = name.includes(query) || phone.includes(query);
                    const matchesStatus = selectedStatus === 'all' || status === selectedStatus;

                    if (matchesSearch && matchesStatus) {
                        if (visibleCount < limit) {
                            card.classList.remove('d-none');
                        } else {
                            card.classList.add('d-none');
                        }
                        visibleCount++;
                    } else {
                        card.classList.add('d-none');
                    }
                });

                if (noMatchMessage) {
                    noMatchMessage.classList.toggle('d-none', visibleCount > 0);
                }
            }

            function exportToCSV(e) {
                e.preventDefault();

                const originalBtnHTML = exportBtn.innerHTML;
                exportBtn.disabled = true;
                exportBtn.innerHTML = `
                <span class="spinner-border spinner-border-sm me-2" role="status" aria-hidden="true"></span>
                Exporting...
            `;

                setTimeout(() => {
                    const query = (searchInput ? searchInput.value : '').toLowerCase().trim();
                    const selectedStatus = (statusFilter ? statusFilter.value : 'all').toLowerCase();

                    const exportData = [];

                    cards.forEach(card => {
                        const name = card.dataset.name || '';
                        const phone = card.dataset.phone || '';
                        const status = card.dataset.status || '';

                        const matchesSearch = name.includes(query) || phone.includes(query);
                        const matchesStatus = selectedStatus === 'all' || status === selectedStatus;

                        if (matchesSearch && matchesStatus) {
                            const fullName = card.querySelector('.partner-name')?.innerText.trim() || 'N/A';
                            const phoneNumber = card.querySelector('.partner-phone')?.innerText.trim() || 'N/A';
                            const partnerStatus = card.querySelector('.partner-status-badge')?.innerText.trim() || 'N/A';

                            exportData.push({
                                name: fullName,
                                phone: phoneNumber,
                                status: partnerStatus
                            });
                        }
                    });

                    if (exportData.length === 0) {
                        alert('No records match your current filter criteria to export.');
                        exportBtn.disabled = false;
                        exportBtn.innerHTML = originalBtnHTML;
                        return;
                    }

                    const csvRows = [['Full Name', 'Phone Number', 'Status']];

                    exportData.forEach(row => {
                        const safeName = `"${row.name.replace(/"/g, '""')}"`;
                        const safePhone = `"${row.phone.replace(/"/g, '""')}"`;
                        const safeStatus = `"${row.status.replace(/"/g, '""')}"`;

                        csvRows.push([safeName, safePhone, safeStatus].join(','));
                    });

                    const blob = new Blob([csvRows.join('\n')], { type: 'text/csv;charset=utf-8;' });
                    const url = URL.createObjectURL(blob);
                    const link = document.createElement('a');

                    const timestamp = new Date().toISOString().split('T')[0];
                    link.href = url;
                    link.setAttribute('download', `delivery_partners_${selectedStatus}_${timestamp}.csv`);

                    document.body.appendChild(link);
                    link.click();
                    document.body.removeChild(link);
                    URL.revokeObjectURL(url);

                    setTimeout(() => {
                        exportBtn.disabled = false;
                        exportBtn.innerHTML = originalBtnHTML;
                    }, 500);

                }, 200);
            }

            if (searchInput) searchInput.addEventListener('input', filterCards);
            if (statusFilter) statusFilter.addEventListener('change', filterCards);
            if (pageLength) pageLength.addEventListener('change', filterCards);
            if (exportBtn) exportBtn.addEventListener('click', exportToCSV);

            filterCards();
        });
    </script>
@endsection