@extends('layouts.app')
@section('title', 'WHMCS Admin - User Management')
@section('page-title', 'User Management')

@section('breadcrumb')
    <a href="{{ route('dashboard') }}" class="breadcrumb-item">Dashboard</a>
    <span class="breadcrumb-item active">User Management</span>
@endsection

@section('operation')
    <a class="whmcs-btn whmcs-btn-primary me-3 btn_modal" href="{{ route('user.create') }}" type="button">
        <i class="fas fa-plus me-2"></i>New User
    </a>
@endsection

@section('content')
<!-- Stats Cards -->
<div class="row mb-4">
    <div class="col-xl-3 col-md-6 mb-4">
        <div class="stats-card">
            <div class="d-flex align-items-center">
                <div class="stats-card-icon primary">
                    <i class="fas fa-users"></i>
                </div>
                <div class="flex-grow-1">
                    <div class="stats-card-value">{{ $totalUsers }}</div>
                    <div class="stats-card-label">Total Users</div>
                    
                </div>
            </div>
        </div>
    </div>

    <div class="col-xl-3 col-md-6 mb-4">
        <div class="stats-card">
            <div class="d-flex align-items-center">
                <div class="stats-card-icon primary">
                    <i class="fas fa-user-check"></i>
                </div>
                <div class="flex-grow-1">
                    <div class="stats-card-value">{{ $activeUsers }}</div>
                    <div class="stats-card-label">Active Users</div>
                   
                </div>
            </div>
        </div>
    </div>

    <div class="col-xl-3 col-md-6 mb-4">
        <div class="stats-card">
            <div class="d-flex align-items-center">
                <div class="stats-card-icon primary">
                    <i class="fas fa-user-clock"></i>
                </div>
                <div class="flex-grow-1">
                    <div class="stats-card-value">{{ $pendingUsers }}</div>
                    <div class="stats-card-label">Pending Users</div>
                    
                </div>
            </div>
        </div>
    </div>

    <div class="col-xl-3 col-md-6 mb-4">
        <div class="stats-card">
            <div class="d-flex align-items-center">
                <div class="stats-card-icon primary">
                    <i class="fas fa-user-times"></i>
                </div>
                <div class="flex-grow-1">
                    <div class="stats-card-value">{{ $inactiveUsers }}</div>
                    <div class="stats-card-label">Inactive Users</div>
                    
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Filters -->
<div class="row mb-4">
    <div class="col-12">
        <div class="whmcs-card">
            <div class="whmcs-card-body">
                <div class="row g-3">
                    <!-- Search Users -->
                    <div class="col-md-3">
                        <label class="whmcs-form-label">Search Users</label>
                        <div class="input-group">
                            <input type="text" class="whmcs-form-control" placeholder="Name, Email, Username..." id="searchUsers">
                            <button class="whmcs-btn whmcs-btn-outline-secondary" type="button">
                                <i class="fas fa-search"></i>
                            </button>
                        </div>
                    </div>

                    <!-- Status Filter -->
                    <div class="col-md-2">
                        <label class="whmcs-form-label">Status</label>
                        <select class="whmcs-form-control whmcs-form-select" id="filterStatus">
                            <option value="">All Status</option>
                            <option value="active">Active</option>
                            <option value="pending">Pending</option>
                            <option value="inactive">Inactive</option>
                        </select>
                    </div>

                    <!-- Role Filter -->
               {{--      <div class="col-md-2">
                        <label class="whmcs-form-label">Role</label>
                        <select class="whmcs-form-control whmcs-form-select" id="filterRole">
                            <option value="">All Roles</option>
                            @foreach ($roles as $role)
                                <option value="{{ $role->name }}">{{ ucfirst($role->name) }}</option>
                            @endforeach
                        </select>
                    </div>
 --}}
                    <!-- Date Range Filter -->
                    <div class="col-md-2">
                        <label class="whmcs-form-label">Date Range</label>
                        <select class="whmcs-form-control whmcs-form-select" id="filterDateRange">
                            <option value="">All Time</option>
                            <option value="today">Today</option>
                            <option value="week">This Week</option>
                            <option value="month">This Month</option>
                            <option value="year">This Year</option>
                        </select>
                    </div>

                    <!-- Filter Buttons -->
                    <div class="col-md-3">
                        <label class="whmcs-form-label">&nbsp;</label>
                        <div class="d-flex gap-2">
                            <button class="whmcs-btn whmcs-btn-primary" type="button" id="applyFilters">Apply Filters</button>
                            <button class="whmcs-btn whmcs-btn-outline-secondary" type="button" id="clearFilters">Clear</button>
                        </div>
                    </div>
                </div>

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

<!-- User List Table -->
<div class="whmcs-card mt-4">
    <div class="whmcs-card-header d-flex justify-content-between align-items-center">
        <h5><i class="fas fa-users me-2"></i>User List</h5>
        <div class="d-flex align-items-center gap-3">
            <div class="d-flex align-items-center">
                <label class="me-2">Show:</label>
                <select class="whmcs-form-select form-control" style="width: auto;" id="page_size" onchange="changePageSize(this.value)">
                    <option value="10">10 per page</option>
                    <option value="25" selected>25 per page</option>
                    <option value="50">50 per page</option>
                    <option value="100">100 per page</option>
                </select>
            </div>
            <div class="dropdown">
                <button class="whmcs-btn whmcs-btn-outline-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown">
                    <i class="fas fa-download me-2"></i>Export
                </button>
                <ul class="dropdown-menu">
                    <li><a class="dropdown-item" href="#" data-export="csv"><i class="fas fa-file-csv me-2"></i>Export as CSV</a></li>
                    <li><a class="dropdown-item" href="#" data-export="excel"><i class="fas fa-file-excel me-2"></i>Export as Excel</a></li>
                    <li><a class="dropdown-item" href="#" data-export="pdf"><i class="fas fa-file-pdf me-2"></i>Export as PDF</a></li>
                </ul>
            </div>
        </div>
    </div>
    <div class="whmcs-card-body p-0">
        <div id="users-table"></div>
    </div>
</div>
@endsection

@push('scripts')
<script>
$(document).ready(function() {

    function loadUsers(page = 1) {
        $('#users-table').empty();
        $('#loading-indicator').show();

        const perPage = $("#page_size").val();
        const status = $('#filterStatus').val();
        const role = $('#filterRole').val();
        const dateRange = $('#filterDateRange').val();
        const search = $('#searchUsers').val();

        $.ajax({
            url: "{{ route('user.getdata') }}" + '?page=' + page,
            type: 'GET',
            dataType: 'html',
            data: {
                perPage: perPage,
                status: status,
                role: role,
                dateRange: dateRange,
                search: search
            },
            success: function(data) {
                $('#loading-indicator').hide();
                $('#users-table').html(data);
            },
            error: function() {
                $('#loading-indicator').hide();
                toastr.error("Failed to load users.");
            }
        });
    }

    // Initial load
    loadUsers(1);

    // Pagination links
    $('#users-table').on('click', '.pagination a', function(e) {
        e.preventDefault();
        const page = $(this).attr('href').split('page=')[1];
        loadUsers(page);
    });

    // Filter apply button
    $('#applyFilters').on('click', function() {
        loadUsers(1);
    });

    // Filter clear button
    $('#clearFilters').on('click', function() {
        $('#searchUsers').val('');
        $('#filterStatus').val('');
        $('#filterRole').val('');
        $('#filterDateRange').val('');
        loadUsers(1);
    });

    // Export users
    function exportUsers(type) {
        const status = $('#filterStatus').val();
        const role = $('#filterRole').val();
        const dateRange = $('#filterDateRange').val();
        const search = $('#searchUsers').val();

        const url = "{{ route('user.export') }}" +
            `?type=${type}&status=${status}&role=${role}&dateRange=${dateRange}&search=${search}`;

        window.open(url, '_blank');
    }

    $(document).on('click', '[data-export]', function(e) {
        e.preventDefault();
        const type = $(this).data('export');
        exportUsers(type);
    });

    // Change page size
    window.changePageSize = function(value) {
        loadUsers(1);
    };

});
</script>
@endpush