@extends('admin.layouts.app')

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

@section('content')
    <div class="container-fluid">
        <div class="row mb-4">
            <div class="col-12">
                <div class="d-flex justify-content-between align-items-center">
                    <h2 class="text-warning mb-0">
                        <i class="fas fa-users me-2"></i>Users Management
                    </h2>
                    <div class="d-flex gap-2">
                        <button class="btn btn-success" data-bs-toggle="modal" data-bs-target="#addUserModal">
                            <i class="fas fa-user-plus me-2"></i>Add User
                        </button>
                    </div>
                </div>
            </div>
        </div>

        <div class="row mb-4">
            <div class="col-12">
                <label for="searchInput" class="form-label text-warning"><span>Search</span> Users</label>
                <input type="text" id="searchInput" class="form-control bg-dark text-white border-warning"
                    placeholder="<span>Search</span> by Name, Email, Plan, Balance, Status, Referrals, or Joined..."
                    style="max-width: 300px;">
            </div>
        </div>

        <div class="row">
            <div class="col-12">
                <div class="card bg-dark border-warning">
                    <div class="card-body">
                        <div class="table-responsive">
                            <table class="table table-dark table-hover" id="usersTable">
                                <thead>
                                    <tr>
                                        <th class="text-warning">User</th>
                                        <th class="text-warning">Plan</th>
                                        <th class="text-warning">Balance</th>
                                        <th class="text-warning">Status</th>
                                        <th class="text-warning">Referrals</th>
                                        <th class="text-warning">Joined</th>
                                        <th class="text-warning">Actions</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @foreach ($users as $user)
                                        <tr>
                                            <td>
                                                <div class="d-flex align-items-center">
                                                    <div class="avatar me-3">
                                                        <img src="https://ui-avatars.com/api/?name={{ urlencode($user->name) }}&background=ffc107&color=000"
                                                            alt="{{ $user->name }}" class="rounded-circle"
                                                            style="width: 40px; height: 40px;">
                                                    </div>
                                                    <div>
                                                        <h6 class="mb-0 text-white">{{ $user->name }}</h6>
                                                        <small class="text-white">{{ $user->email }}</small>
                                                    </div>
                                                </div>
                                            </td>
                                            <td>
                                                @if ($user->plan_name)
                                                    <span class="text-white">{{ $user->plan_name }}</span>
                                                    <span
                                                        class="badge {{ $user->plan_is_active ? 'bg-success' : 'bg-danger' }}">
                                                        {{ $user->plan_is_active ? 'Active' : tra('Inactive') }}
                                                    </span>
                                                @else
                                                    <span class="badge bg-secondary">No Plan</span>
                                                @endif
                                            </td>
                                            <td>
                                                <span class="text-success">${{ number_format($user->balance, 2) }}</span>
                                            </td>
                                            <td>
                                                <span
                                                    class="text-white">{{ $user->is_active ? 'Active' : 'Inactive' }}</span>
                                            </td>
                                            <td>
                                                <span class="text-white">{{ $user->referral_count }}</span>
                                            </td>
                                            <td>
                                                <small
                                                    class="text-white">{{ \Carbon\Carbon::parse($user->created_at)->format('M d, Y') }}</small>
                                            </td>
                                            <td>
                                                <div class="btn-group">
                                                    <a href="{{ route('admin.users.details', $user->id) }}"
                                                        class="btn btn-sm btn-info">
                                                        <i class="fas fa-eye"></i>
                                                    </a>
                                                    <form action="{{ route('admin.users.destroy', $user->id) }}"
                                                        method="POST" style="display: inline;">
                                                        @csrf
                                                        @method('DELETE')
                                                        <button type="submit" class="btn btn-sm btn-danger"
                                                            onclick="return confirm('Are you sure you want to delete this user?')">
                                                            <i class="fas fa-trash"></i>
                                                        </button>
                                                    </form>
                                                </div>
                                            </td>
                                        </tr>
                                    @endforeach
                                </tbody>
                            </table>
                        </div>

                        <div class="d-flex justify-content-between align-items-center mt-4">
                            <div class="pagination-container">
                                {{ $users->links() }}
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Filter Modal -->
    <div class="modal fade" id="filterModal" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content bg-dark border-warning">
                <div class="modal-header border-warning">
                    <h5 class="modal-title text-warning">Filter Users</h5>
                    <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"
                        aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <form id="filterForm">
                        <div class="mb-3">
                            <label class="form-label text-warning">Plan</label>
                            <select class="form-select bg-dark text-white border-warning" name="plan">
                                <option value="">All Plans</option>
                                @foreach (\App\Models\Plan::all() as $plan)
                                    <option value="{{ $plan->id }}">{{ $plan->name }}</option>
                                @endforeach
                            </select>
                        </div>
                        <div class="mb-3">
                            <label class="form-label text-warning">Status</label>
                            <select class="form-select bg-dark text-white border-warning" name="status">
                                <option value="">All Status</option>
                                <option value="active">Active</option>
                                <option value="inactive">Inactive</option>
                            </select>
                        </div>
                        <div class="mb-3">
                            <label class="form-label text-warning">Date Range</label>
                            <div class="input-group">
                                <input type="date" class="form-control bg-dark text-white border-warning"
                                    name="start_date">
                                <span class="input-group-text bg-dark text-warning border-warning">to</span>
                                <input type="date" class="form-control bg-dark text-white border-warning"
                                    name="end_date">
                            </div>
                        </div>
                    </form>
                </div>
                <div class="modal-footer border-warning">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                    <button type="button" class="btn btn-warning" onclick="applyFilters()">Apply Filters</button>
                </div>
            </div>
        </div>
    </div>

    <!-- Add User Modal -->
    <div class="modal fade" id="addUserModal" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content bg-dark border-warning">
                <div class="modal-header border-warning">
                    <h5 class="modal-title text-warning">Add New User</h5>
                    <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"
                        aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <form id="addUserForm">
                        @csrf
                        <div class="mb-3">
                            <label class="form-label text-warning">Name</label>
                            <input type="text" class="form-control bg-dark text-white border-warning" name="name"
                                required>
                        </div>
                        <div class="mb-3">
                            <label class="form-label text-warning">Email</label>
                            <input type="email" class="form-control bg-dark text-white border-warning" name="email"
                                required>
                        </div>
                        <div class="mb-3">
                            <label class="form-label text-warning">Password</label>
                            <input type="password" class="form-control bg-dark text-white border-warning" name="password"
                                required>
                        </div>
                        <div class="mb-3">
                            <label class="form-label text-warning">Plan</label>
                            <select class="form-select bg-dark text-white border-warning" name="plan_id">
                                <option value="">Select Plan</option>
                                @foreach (\App\Models\Plan::all() as $plan)
                                    <option value="{{ $plan->id }}">{{ $plan->name }}</option>
                                @endforeach
                            </select>
                        </div>
                    </form>
                </div>
                <div class="modal-footer border-warning">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                    <button type="button" class="btn btn-warning" onclick="addUser()">Add User</button>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('scripts')
    <script>
        // Search filter implementation
        document.getElementById('searchInput').addEventListener('input', function() {
            const searchTerms = this.value.trim().toLowerCase().split(/\s+/).filter(term => term.length > 0);
            const table = document.getElementById('usersTable');
            const rows = table.getElementsByTagName('tbody')[0].getElementsByTagName('tr');

            for (let row of rows) {
                const cells = row.getElementsByTagName('td');
                let matchesAllTerms = true;

                // If no search terms, show all rows
                if (searchTerms.length === 0) {
                    row.style.display = '';
                    continue;
                }

                // Check if row matches all search terms
                for (let term of searchTerms) {
                    let termMatch = false;

                    // Check columns: User (0), Plan (1), Balance (2), Status (3), Referrals (4), Joined (5)
                    for (let i of [0, 1, 2, 3, 4, 5]) {
                        if (!cells[i]) continue;

                        // User column: check name and email
                        if (i === 0) {
                            const name = cells[i].getElementsByTagName('h6')[0]?.textContent.toLowerCase() || '';
                            const email = cells[i].getElementsByTagName('small')[0]?.textContent.toLowerCase() || '';
                            if (name.includes(term) || email.includes(term)) {
                                termMatch = true;
                            }
                        }
                        // Plan column: check plan name and status
                        else if (i === 1) {
                            const planName = cells[i].getElementsByTagName('span')[0]?.textContent.toLowerCase() || '';
                            const badge = cells[i].getElementsByTagName('span')[1]?.textContent.toLowerCase() || '';
                            if (planName.includes(term) || badge.includes(term)) {
                                termMatch = true;
                            }
                        }
                        // Other columns: check text content
                        else {
                            const content = cells[i].textContent.toLowerCase();
                            if (content.includes(term)) {
                                termMatch = true;
                            }
                        }

                        if (termMatch) break;
                    }

                    if (!termMatch) {
                        matchesAllTerms = false;
                        break;
                    }
                }

                row.style.display = matchesAllTerms ? '' : 'none';
            }
        });

        function applyFilters() {
            // Implement filter logic here
            $('#filterModal').modal('hide');
        }

        function addUser() {
            // Implement add user logic here
            $('#addUserModal').modal('hide');
        }

        function editUser(id) {
            // Implement edit user logic here
        }
    </script>
@endsection