@extends('admin.admin_dashboard')

@section('customcss')
    <!-- Custom Stylesheet -->
    <link href="{{ asset('../asset/vendor/jquery-nice-select/css/nice-select.css') }}" rel="stylesheet">

    <style>
        .user-avatar-img {
            width: 42px;
            height: 42px;
            object-fit: cover;
            border-radius: 50%;
            border: 2px solid #e2e8f0;
        }

        .user-avatar-initials {
            width: 42px;
            height: 42px;
            border-radius: 50%;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            background: linear-gradient(135deg, #103f38, #1c6d62);
            color: #ffffff;
            font-weight: 700;
            font-size: 16px;
            text-transform: uppercase;
            box-shadow: 0 2px 4px rgba(16, 63, 56, 0.2);
            user-select: none;
        }

        .table th,
        .table td {
            vertical-align: middle;
        }

        .content-icon {
            width: 32px;
            height: 32px;
            padding: 0;
            line-height: 32px;
            text-align: center;
            border-radius: 6px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            margin-left: 2px;
        }

        .content-icon i {
            font-size: 13px;
        }

        .gap-2 {
            gap: 0.5rem;
        }

        .pagination {
            margin-bottom: 0;
        }

        .pagination .page-link {
            padding: 6px 12px;
            border-radius: 6px;
            margin: 0 2px;
            color: #103f38;
        }

        .pagination .page-item.active .page-link {
            background-color: #103f38;
            border-color: #103f38;
            color: #fff;
        }

        .user-table-loader {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: rgba(255, 255, 255, 0.65);
            z-index: 10;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 8px;
            backdrop-filter: blur(1px);
        }

        #userTableResult {
            transition: opacity 0.2s ease-in-out;
        }
    </style>
@endsection

@section('admin')

<div class="content-body default-height">
    <div class="container-fluid">

        <div class="row page-titles">
            <ol class="breadcrumb">
                <li class="breadcrumb-item"><a href="javascript:void(0)">Home</a></li>
                <li class="breadcrumb-item active"><a href="javascript:void(0)">Staff User List</a></li>
            </ol>
        </div>

        <!-- Row -->
        <div class="row">
            <div class="col-xl-12">

                <!-- Filter Box -->
                <div class="filter cm-content-box box-primary mb-3">
                    <div class="content-title SlideToolHeader">
                        <div class="cpa">
                            <i class="fa-sharp fa-solid fa-filter me-2"></i>Filter
                        </div>
                        <div class="tools">
                            <a href="javascript:void(0);" class="expand handle"><i class="fal fa-angle-down"></i></a>
                        </div>
                    </div>
                    <div class="cm-content-body form excerpt">
                        <div class="card-body">
                            <form method="GET" action="{{ route('admin.user.staff') }}" id="userFilterForm">
                                <div class="row align-items-end">
                                    <div class="col-xl-3 col-sm-6 mb-3">
                                        <label class="form-label font-w600">Name</label>
                                        <input type="text" name="name" class="form-control ajax-filter-input" placeholder="Search by name" value="{{ request('name') }}" autocomplete="off">
                                    </div>
                                    <div class="col-xl-3 col-sm-6 mb-3">
                                        <label class="form-label font-w600">Email</label>
                                        <input type="text" name="email" class="form-control ajax-filter-input" placeholder="Search by email" value="{{ request('email') }}" autocomplete="off">
                                    </div>
                                    <div class="col-xl-2 col-sm-6 mb-3">
                                        <label class="form-label font-w600">Phone</label>
                                        <input type="text" name="phone" class="form-control ajax-filter-input" placeholder="Search by phone" value="{{ request('phone') }}" autocomplete="off">
                                    </div>
                                    <div class="col-xl-2 col-sm-6 mb-3">
                                        <label class="form-label font-w600">Per Page</label>
                                        <select name="per_page" class="form-control default-select">
                                            <option value="10" {{ request('per_page') == '10' ? 'selected' : '' }}>10</option>
                                            <option value="25" {{ request('per_page', '25') == '25' ? 'selected' : '' }}>25</option>
                                            <option value="50" {{ request('per_page') == '50' ? 'selected' : '' }}>50</option>
                                            <option value="100" {{ request('per_page') == '100' ? 'selected' : '' }}>100</option>
                                        </select>
                                    </div>
                                    <div class="col-xl-2 col-sm-12 mb-3 d-flex gap-2">
                                        <button type="submit" class="btn btn-primary flex-fill">
                                            <i class="fa fa-filter me-1"></i>Filter
                                        </button>
                                        <button type="button" id="btnResetFilter" class="btn btn-danger light flex-fill" title="Reset Filter">
                                            <i class="fa fa-times me-1"></i>Reset
                                        </button>
                                    </div>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>

                <!-- Add Button Bar -->
                <div class="mb-4 pb-1">
                    <a href="{{ route('admin.add.user') }}" class="btn btn-primary btn-sm">
                        <i class="fas fa-plus me-1"></i> Add User
                    </a>
                </div>

                <!-- Users List Table Box -->
                <div class="filter cm-content-box box-primary position-relative">
                    <div class="content-title SlideToolHeader">
                        <div class="cpa">
                            <i class="fa-solid fa-file-lines me-1"></i>Staff User List
                        </div>
                        <div class="tools">
                            <a href="javascript:void(0);" class="expand handle"><i class="fal fa-angle-down"></i></a>
                        </div>
                    </div>
                    <div class="cm-content-body form excerpt position-relative">
                        <div class="card-body pb-4 position-relative">

                            <!-- AJAX Loader -->
                            <div id="userTableLoader" class="user-table-loader d-none">
                                <div class="spinner-border text-primary" role="status">
                                    <span class="visually-hidden">Loading...</span>
                                </div>
                            </div>

                            <!-- Table Container -->
                            <div id="userTableResult">
                                @include('admin.users.partials.user_table', ['users' => $users, 'emptyMessage' => 'No staff found.'])
                            </div>

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

            </div>
        </div>

    </div>
</div>

@endsection

@section('customjs')
    <script src="{{ asset('../asset/vendor/jquery-nice-select/js/jquery.nice-select.min.js') }}"></script>
    <script>
        document.addEventListener('DOMContentLoaded', function () {
            const filterForm = document.getElementById('userFilterForm');
            const tableContainer = document.getElementById('userTableResult');
            const tableLoader = document.getElementById('userTableLoader');
            const resetBtn = document.getElementById('btnResetFilter');
            const inputs = filterForm.querySelectorAll('.ajax-filter-input');
            const perPageSelect = filterForm.querySelector('select[name="per_page"]');

            let debounceTimer = null;
            let currentAbortController = null;

            function showLoader() {
                if (tableLoader) tableLoader.classList.remove('d-none');
                if (tableContainer) tableContainer.style.opacity = '0.5';
            }

            function hideLoader() {
                if (tableLoader) tableLoader.classList.add('d-none');
                if (tableContainer) tableContainer.style.opacity = '1';
            }

            function buildUrl() {
                const formData = new FormData(filterForm);
                const params = new URLSearchParams();

                formData.forEach((val, key) => {
                    const clean = String(val).trim();
                    if (clean !== '') {
                        params.append(key, clean);
                    }
                });

                const baseUrl = filterForm.getAttribute('action');
                return params.toString() ? `${baseUrl}?${params.toString()}` : baseUrl;
            }

            async function loadUsers(url = null, updateHistory = true) {
                const targetUrl = url || buildUrl();

                if (currentAbortController) {
                    currentAbortController.abort();
                }
                currentAbortController = new AbortController();

                showLoader();

                try {
                    const response = await fetch(targetUrl, {
                        method: 'GET',
                        headers: {
                            'X-Requested-With': 'XMLHttpRequest',
                            'Accept': 'application/json'
                        },
                        signal: currentAbortController.signal
                    });

                    if (!response.ok) {
                        throw new Error(`HTTP error! status: ${response.status}`);
                    }

                    const data = await response.json();

                    if (data.status && data.html) {
                        tableContainer.innerHTML = data.html;

                        if (updateHistory) {
                            window.history.replaceState({}, '', targetUrl);
                        }
                    }
                } catch (err) {
                    if (err.name !== 'AbortError') {
                        console.error('Staff list AJAX error:', err);
                    }
                } finally {
                    hideLoader();
                }
            }

            function debouncedFilter() {
                clearTimeout(debounceTimer);
                debounceTimer = setTimeout(() => {
                    loadUsers();
                }, 300);
            }

            inputs.forEach(input => {
                input.addEventListener('input', debouncedFilter);
            });

            if (perPageSelect) {
                perPageSelect.addEventListener('change', () => {
                    loadUsers();
                });
            }

            filterForm.addEventListener('submit', function (e) {
                e.preventDefault();
                loadUsers();
            });

            if (resetBtn) {
                resetBtn.addEventListener('click', function (e) {
                    e.preventDefault();
                    filterForm.reset();
                    inputs.forEach(inp => inp.value = '');
                    if (perPageSelect) perPageSelect.value = '25';
                    loadUsers(filterForm.getAttribute('action'));
                });
            }

            document.addEventListener('click', function (e) {
                const pageLink = e.target.closest('#userTableResult .pagination a');
                if (!pageLink) return;

                e.preventDefault();
                const href = pageLink.getAttribute('href');
                if (!href || href === '#') return;

                loadUsers(href);

                const tableBox = document.getElementById('userTableResult');
                if (tableBox) {
                    tableBox.scrollIntoView({ behavior: 'smooth', block: 'start' });
                }
            });

            window.addEventListener('popstate', function () {
                loadUsers(window.location.href, false);
            });
        });
    </script>
@endsection