{% extends 'baseadmin.html.twig' %}
{% import "_modules/bsmacros.html.twig" as bs %}

{% block title %}
	{{ parent() }}
	- Customers
{% endblock %}

{% block breadcrumb %}
	{{ parent() }}
	<li class="breadcrumb-item active" aria-current="page">Customers</li>
{% endblock %}

{% block content %}
	<div class="d-sm-flex align-items-center justify-content-between mb-4">
		<h1 class="h3 mb-0 text-gray-800">Customer Management</h1>
	</div>

	<!-- Search & Filter Panel -->
	<div class="card shadow mb-4">
		<div class="card-header py-3">
			<h6 class="m-0 font-weight-bold">Search</h6>
		</div>
		<div class="card-body">
			<form id="searchForm" method="GET">
				<div class="row">
					<div class="col-md-3 mb-3">
						<label for="username">Username</label>
						<input type="text" class="form-control" id="username" name="username" placeholder="<any>" value="{{ query.get('username') }}">
					</div>
					<div class="col-md-3 mb-3">
						<label for="email">Email</label>
						<input type="text" class="form-control" id="email" name="email" placeholder="<any>" value="{{ query.get('email') }}">
					</div>
					<div class="col-md-3 mb-3">
						<label for="steamid">Steam ID</label>
						<input type="text" class="form-control" id="steamid" name="steamid" placeholder="<any>" value="{{ query.get('steamid') }}">
					</div>
					<div class="col-md-3 mb-3">
						<label for="role">Role</label>
						<select class="form-control" id="role" name="role" value="{{ query.get('role') }}">
							<option value="">&lt;any&gt;</option>
							<option value="ROLE_USER">Regular User</option>
							<option value="ROLE_ADMIN">Admin</option>
						</select>
					</div>
				</div>
				<div class="row">
					<div class="col-md-3 mb-3">
						<label for="minSpent">Minimum Spent</label>
						<input type="number" class="form-control" id="minSpent" name="minSpent" step="0.01" placeholder="&lt;any&gt;" value="{{ query.get('minSpent') }}">
					</div>
					<div class="col-md-3 mb-3">
						<label for="minBalance">Min Credit Balance</label>
						<input type="number" class="form-control" id="minBalance" name="minBalance" step="0.01" placeholder="&lt;any&gt;" value="{{ query.get('minBalance') }}">
					</div>
					<div class="col-md-3 mb-3">
						<label for="maxBalance">Max Credit Balance</label>
						<input type="number" class="form-control" id="maxBalance" name="maxBalance" step="0.01" placeholder="&lt;any&gt;" value="{{ query.get('maxBalance') }}">
					</div>
					<div class="col-md-3 mb-3">
						<label for="limit">Results Per Page</label>
						<select class="form-control" id="limit" name="limit" value="{{ query.get('limit') }}">
							{% set limits = ["25", "50", "100"] %}
							{% for limit in limits %}
								<option value="{{ limit }}" {% if query.get('limit') == limit %} selected {% endif %}>{{ limit }}</option>
							{% endfor %}
						</select>
					</div>
				</div>
				<div class="row mt-2">
					<div class="col-md-12">
						<button type="submit" class="btn btn-primary">
							<i class="fas fa-search fa-sm"></i>
							Search
						</button>
						<button type="button" id="resetSearch" class="btn btn-secondary">
							<i class="fas fa-sync-alt fa-sm"></i>
							Reset
						</button>
						<button type="button" id="exportCSV" class="btn btn-success float-right">
							<i class="fas fa-file-csv fa-sm"></i>
							Export CSV
						</button>
					</div>
				</div>
			</form>
		</div>
	</div>

	<!-- Customer Table -->
	<div class="card shadow mb-4">
		<div class="card-header py-3 d-flex flex-row align-items-center justify-content-between">
			<h6 class="m-0 font-weight-bold">Customers</h6>
			<div class="dropdown no-arrow">
				<a class="dropdown-toggle" href="#" role="button" id="dropdownMenuLink" data-bs-toggle="dropdown" aria-expanded="false">
					<i class="fas fa-ellipsis-v fa-sm fa-fw text-muted"></i>
				</a>

				<ul class="dropdown-menu dropdown-menu-end shadow" aria-labelledby="dropdownMenuLink">
					<li>
						<h6 class="dropdown-header">Modify Selected Users:</h6>
					</li>

					<li>
						<a class="dropdown-item bulk-action" data-action="delete" href="#">
							<i class="fas fa-trash-alt fa-sm fa-fw me-2 text-muted"></i>Delete Selected Users
						</a>
					</li>
					<li>
						<a class="dropdown-item bulk-action" data-action="credit" href="#">
							<i class="fas fa-dollar-sign fa-sm fa-fw me-2 text-muted"></i>Credit Selected Users
						</a>
					</li>
				</ul>
			</div>
		</div>
		<div class="card-body">
			<div class="table-responsive">
				<table class="table table-bordered" id="customersTable" width="100%" cellspacing="0">
					<thead>
						<tr>
							<th><input type="checkbox" id="selectAll"></th>
							<th>#</th>
							<th>Avatar</th>
							<th>Username</th>
							<th>Email</th>
							<th>Steam ID</th>
							<th>Credits</th>
							<th>Rank</th>
							<th>Spent</th>
							<th>Last Active</th>
							<th>Stripe Customer</th>
						</tr>
					</thead>
					<tbody>
						{% for user in users %}
							<tr>
								<td><input type="checkbox" class="customer-select" value="{{ user.id }}"></td>
								<td>{{ user.id }}</td>
								<td>
									<img src="{{ user.avatar }}" alt="{{ user.username }}" class="rounded-circle" width="40" height="40">
								</td>
								<td>
									<a href="{{ path('admin.customers.view', {'id': user.id}) }}" class="text-decoration-none">
										{{ user.username }}
										<sup>
											<i class="fas fa-external-link-alt"></i>
										</sup>
									</a>
								</td>
								<td>{{ user.emailAddress }}</td>
								<td>{{ user.steamId }}</td>
								<td>{{ user.creditBalance|number_format(2) }}</td>
								<td>{{ user.gameRank }}</td>
								<td>${{ user.totalSpent|number_format(2) }}</td>
								<td>
									{% if user.lastLogin %}
										{{ user.lastLogin|date_tz }}
									{% else %}
										Never
									{% endif %}
								</td>
								<td class="text-center">
									<div class="d-flex gap-2 align-items-center">
										{% if user.stripeCustomerId %}
											<a href="https://dashboard.stripe.com/test/customers/{{ user.stripeCustomerId }}" target="_blank" class="text-decoration-none">
												<i class="fab fa-stripe"></i>
											</a>
											<small>{{ user.stripeCustomerId }}</small>
										{% else %}
											<span class="text-muted">
												Not Registered
												<i class="fas fa-info-circle" {{ bs.tooltip('Customer is not registered with Stripe') }}></i>
											</span>
										{% endif %}
									</div>
								</td>
							</tr>
						{% endfor %}
					</tbody>
				</table>
			</div>

			<!-- Pagination -->
			<div class="row mt-3">
				<div class="col-sm-12 col-md-5">
					<div class="dataTables_info" id="dataTable_info" role="status" aria-live="polite">
						Showing
						{{ (page - 1) * limit + 1 }}
						to
						{{ min(page * limit, total) }}
						of
						{{ total }}
						entries
					</div>
				</div>
				<div class="col-sm-12 col-md-7">
					<div class="dataTables_paginate paging_simple_numbers" id="dataTable_paginate">
						<ul class="pagination justify-content-end">
							{% if page > 1 %}
								<li class="paginate_button page-item previous">
									<a href="?page={{ page - 1 }}&limit={{ limit }}{{ query_params }}" class="page-link">Previous</a>
								</li>
							{% else %}
								<li class="paginate_button page-item previous disabled">
									<a href="#" class="page-link">Previous</a>
								</li>
							{% endif %}

							{% for i in max(1, page - 2)..min(totalPages, page + 2) %}
								<li class="paginate_button page-item {{ i == page ? 'active' : '' }}">
									<a href="?page={{ i }}&limit={{ limit }}{{ query_params }}" class="page-link">{{ i }}</a>
								</li>
							{% endfor %}

							{% if page < totalPages %}
								<li class="paginate_button page-item next">
									<a href="?page={{ page + 1 }}&limit={{ limit }}{{ query_params }}" class="page-link">Next</a>
								</li>
							{% else %}
								<li class="paginate_button page-item next disabled">
									<a href="#" class="page-link">Next</a>
								</li>
							{% endif %}
						</ul>
					</div>
				</div>
			</div>
		</div>
	</div>
</div>

 <script>
document.addEventListener('DOMContentLoaded', function() {
    $.noConflict();

    // Initialize datatables for better table functionality
    $('#customersTable').DataTable({
        "paging": true,
        "ordering": true,
        "info": false,
        "searching": false,
		"pageLimit": 5
    });

    // Handle select all checkbox
    $('#selectAll').on('change', function() {
        $('.customer-select').prop('checked', $(this).prop('checked'));
    });

    // Handle bulk actions
    $('.bulk-action').on('click', function(e) {
        e.preventDefault();
        
        const action = $(this).data('action');
        const selectedIds = [];
        
        $('.customer-select:checked').each(function() {
            selectedIds.push($(this).val());
        });
        
        if (selectedIds.length === 0) {
            alert('Please select at least one customer');
            return;
        }
        
        // Set modal content based on action
        let actionMessage = '';
        let actionWarning = '';
        
        switch(action) {
            case 'delete':
                actionMessage = `Are you sure you want to delete ${selectedIds.length} customer(s)?`;
                actionWarning = 'This action cannot be undone!';
                break;
            case 'upgrade':
                actionMessage = `Are you sure you want to upgrade ${selectedIds.length} customer(s) to Admin?`;
                actionWarning = 'This will give them full administrative access!';
                break;
            case 'downgrade':
                actionMessage = `Are you sure you want to remove Admin rights from ${selectedIds.length} customer(s)?`;
                actionWarning = '';
                break;
        }
        
        $('#bulkActionMessage').text(actionMessage);
        $('#bulkActionWarning').text(actionWarning);
        $('#confirmBulkAction').data('action', action);
        $('#confirmBulkAction').data('ids', selectedIds);
        
        $('#bulkActionModal').modal('show');
    });

    // Handle bulk action confirmation
    $('#confirmBulkAction').on('click', function() {
        const action = $(this).data('action');
        const selectedIds = $(this).data('ids');
        
        // Send bulk action request
        fetch(`/admin/customers/bulk-action`, {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
            },
            body: JSON.stringify({
                action: action,
                ids: selectedIds
            })
        })
        .then(response => {
            if (response.ok) {
                $('#bulkActionModal').modal('hide');
                // Reload the page to see changes
                window.location.reload();
            } else {
                throw new Error(`Failed to perform ${action} action`);
            }
        })
        .catch(error => {
            console.error(`Error performing ${action} action:`, error);
            alert(`Failed to perform ${action} action. Please try again.`);
        });
    });

    // Handle search form reset
    $('#resetSearch').on('click', function() {
        window.location = "{{ path('admin.customers') }}";
    });

    // Handle export CSV
    $('#exportCSV').on('click', function() {
        // Get current search parameters
        const formData = new FormData(document.getElementById('searchForm'));
        const searchParams = new URLSearchParams();
        
        formData.forEach((value, key) => {
            if (value) {
                searchParams.append(key, value);
            }
        });
        searchParams.append('export', 'csv');
        
        // Redirect to export URL
        window.location.href = `/admin/customers?${searchParams.toString()}`;
    });
});
</script>{% endblock %}