@extends('layouts/contentNavbarLayout')

@section('title', 'Users List')

@section('vendor-script')
    <script src="{{ asset('assets/vendor/libs/masonry/masonry.js') }}"></script>
@endsection

@section('content')
    <div class="card shadow-sm border-0">
        <div class="card-header bg-primary text-white d-flex justify-content-between align-items-center">
            Users List
        </div>

        @if (session('success'))
            <div class="alert alert-success m-3">
                {{ session('success') }}
            </div>
        @endif

        <div class="card-body">
            <form id="filter-form">
                <div class="row g-3 mb-4">
                    <div class="col-md-4">
                        <label for="searchInput" class="form-label">Search</label>
                        <input type="text" id="searchInput" class="form-control"
                            placeholder="Search by name, email or phone...">
                    </div>

                    <div class="col-md-2">
                        <label for="kycstatus" class="form-label">KYC Status</label>
                        <select name="kycstatus" id="kycstatus" class="form-select">
                            <option value="">All</option>
                            <option value="C">Pending</option>
                            <option value="A">Approved</option>
                            <option value="B">Rejected</option>
                        </select>
                    </div>

                    <div class="col-md-2">
                        <label for="active" class="form-label">User Status</label>
                        <select name="active" id="active" class="form-select">
                            <option value="">All</option>
                            <option value="1">Active</option>
                            <option value="0">Blocked</option>
                        </select>
                    </div>

                    <div class="col-md-2">
                        <label for="startDate" class="form-label">Start Date</label>
                        <input type="date" id="startDate" class="form-control">
                    </div>

                    <div class="col-md-2">
                        <label for="endDate" class="form-label">End Date</label>
                        <input type="date" id="endDate" class="form-control">
                    </div>
                    <div class="col-md-2">
                        <button type="submit" class="btn btn-primary w-100">Apply </button>
                    </div>
                    <div class="col-md-2">
                        <button type="button" class="btn btn-outline-primary w-100" id="reset_filter">Reset</button>
                    </div>
                </div>
            </form>

            <div class="table-responsive">
                <table class="table table-hover align-middle text-nowrap">
                    <thead class="table-light">
                        <tr>
                            <th>#</th>
                            <th>User</th>
                            <th>Email</th>
                            <th>Mobile</th>
                            <th>Payout</th>
                            <th>PayIn</th>
                            <th>Status</th>
                            <th>KYC</th>
                            <th>Created At</th>
                            <th>Action</th>
                        </tr>
                    </thead>
                    <tbody id="userTableBody">
                        {{-- Rows populated via backend or AJAX --}}
                    </tbody>
                </table>
            </div>

            <div class="mt-3 d-flex justify-content-center" id="paginationLinks">
                {{-- Pagination links injected here --}}
            </div>
        </div>
    </div>
@endsection
@section('js')
    <script>
        $(document).ready(function() {
            let currentPage = 1;

            function fetchUsers(page = 1) {
                $.ajax({
                    url: "{{ route('admin.users-filter') }}?page=" + page,
                    type: "GET",
                    data: {
                        search: $('#searchInput').val(),
                        start_date: $('#startDate').val(),
                        end_date: $('#endDate').val(),
                        active: $('#active').val(),
                        kycstatus: $('#kycstatus').val(),
                    },
                    success: function(response) {
                        currentPage = response.current_page;
                        updateUserTable(response.data, response.per_page);
                        updateUserPagination(response.total, response.per_page, response.current_page);
                    }
                });
            }

            const updateUserRouteTemplate =
                "{{ route('admin.users.users-update', ['id' => '__ID__', 'uid' => '__UID__']) }}";

            function updateUserTable(data, perPage) {
                let tableBody = $('#userTableBody');
                tableBody.empty();
                data.forEach((user, index) => {
                    const editLink = updateUserRouteTemplate
                        .replace('__ID__', user.id)
                        .replace('__UID__', user.uid);
                    let tableBody = $('#userTableBody');
                    let serialNo = (currentPage - 1) * perPage + (index + 1);
                    let statusBadge = user.active == 1 ? '<span class="badge bg-success">Active</span>' :
                        '<span class="badge bg-danger">Blocked</span>';
                    let apiBadge = user.apistatus == 'A' ? '<span class="badge bg-success">Active</span>' :
                        '<span class="badge bg-danger">Blocked</span>';
                    let kycBadge = user.kycstatus == 'A' ? '<span class="badge bg-success">Active</span>' :
                        '<span class="badge bg-danger">Blocked</span>';

                    tableBody.append(`
                <tr>
                    <td>${serialNo}</td>
                    <td>
                        <div class="d-flex align-items-center">
                            <div class="avatar avatar-sm me-3">
                                <img src="/assets/img/avatars/1.png" class="rounded-circle" alt="Avatar">
                            </div>
                            <div>
                                <h6 class="mb-0 text-truncate">${user.first_name} ${user.last_name}</h6>
                                <small class="text-truncate">#${user.uid}</small>
                            </div>
                        </div>
                    </td>
                    <td class="text-truncate">${user.email}</td>
                    <td class="text-truncate">${user.phone_number}</td>
                    <td class="text-truncate">${user.wallet_balance}</td>
                    <td class="text-truncate">${user.payin_balance}</td>
                    <td class="text-truncate">${statusBadge}</td>
                    <td class="text-truncate">${kycBadge}</td>
                    <td class="text-truncate">
                        ${new Date(user.created_at).toLocaleString('en-IN', {
                            day: '2-digit',
                            month: 'short',
                            year: 'numeric',
                            hour: '2-digit',
                            minute: '2-digit',
                            hour12: true
                        })}
                    </td>
                    <td>
                        <a href="${editLink}"><i class="fas fa-edit fa-lg"></i></a>
                    </td>
                </tr>
            `);
                });
            }


            function updateUserPagination(total, perPage, currentPage) {
                let totalPages = Math.ceil(total / perPage);
                let paginationHTML = '<ul class="pagination justify-content-center">';

                // Previous button
                paginationHTML += `<li class="page-item ${currentPage == 1 ? 'disabled' : ''}">
            <a class="page-link" href="#" data-page="${currentPage - 1}">«</a></li>`;

                let maxPagesToShow = 4;
                let half = Math.floor(maxPagesToShow / 2);

                let start = currentPage - half;
                let end = currentPage + half;

                if (start < 1) {
                    start = 1;
                    end = maxPagesToShow;
                }
                if (end > totalPages) {
                    end = totalPages;
                    start = totalPages - maxPagesToShow + 1;
                    if (start < 1) start = 1;
                }

                // Always show page 1
                if (start > 1) {
                    paginationHTML +=
                    `<li class="page-item"><a class="page-link" href="#" data-page="1">1</a></li>`;
                    if (start > 2) {
                        paginationHTML += `<li class="page-item disabled"><span class="page-link">...</span></li>`;
                    }
                }

                // Dynamic middle pages
                for (let i = start; i <= end; i++) {
                    paginationHTML += `<li class="page-item ${i == currentPage ? 'active' : ''}">
                <a class="page-link" href="#" data-page="${i}">${i}</a></li>`;
                }

                // Always show last page
                if (end < totalPages) {
                    if (end < totalPages - 1) {
                        paginationHTML += `<li class="page-item disabled"><span class="page-link">...</span></li>`;
                    }
                    paginationHTML +=
                        `<li class="page-item"><a class="page-link" href="#" data-page="${totalPages}">${totalPages}</a></li>`;
                }

                // Next button
                paginationHTML += `<li class="page-item ${currentPage == totalPages ? 'disabled' : ''}">
                <a class="page-link" href="#" data-page="${currentPage + 1}">»</a></li>`;

                paginationHTML += '</ul>';

                $('#paginationLinks').html(paginationHTML);
            }

            function formatDate(dateString) {
                const date = new Date(dateString);
                const formattedDate = date.toLocaleDateString('en-GB', {
                    day: '2-digit',
                    month: 'short',
                    year: 'numeric'
                });
                const formattedTime = date.toLocaleTimeString('en-GB', {
                    hour: '2-digit',
                    minute: '2-digit',
                    second: '2-digit'
                });
                return `${formattedDate} ${formattedTime}`;
            }

            // $('#searchInput, #startDate, #endDate, #active, #kycstatus').on('input change', function() {
            //     fetchUsers(1);
            // });

            $(document).on('click', '.pagination .page-link', function(e) {
                e.preventDefault();
                let page = $(this).data('page');
                if (page) fetchUsers(page);
            });

            fetchUsers();

            $('#filter-form').on('submit', function(e) {
                e.preventDefault();
                fetchUsers(1);
            });
            $('#reset_filter').on('click', function(e) {
                e.preventDefault();
                $('#filter-form')[0].reset();
                fetchUsers(1);
            });
        });
    </script>
@endsection