@extends('layouts.admin')

@section('content')
    <!-- Bootstrap Links -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
    <script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>

    <!-- Font Awesome -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">

    <style>
        :root {
            --primary-color: #4839F5;
            --secondary-color: #6247FF;
            --accent-color: #FF6B5B;
            --text-color: #2D2D3F;
            --light-bg: #f8f9ff;
            --card-bg: #ffffff;
            --border-radius: 12px;
            --shadow: 0 4px 20px rgba(72, 57, 245, 0.1);
        }

        body {
            background-color: var(--light-bg);
            color: var(--text-color);
            font-family: 'Poppins', sans-serif;
        }

        .users-container {
            background: linear-gradient(135deg, #f8f9ff 0%, #eff0ff 100%);
            min-height: 100vh;
            padding: 2rem;
        }

        .page-title {
            color: var(--primary-color);
            font-weight: 600;
            margin-bottom: 1.5rem;
        }

        .custom-card {
            background: var(--card-bg);
            border-radius: var(--border-radius);
            box-shadow: var(--shadow);
            padding: 2rem;
            border: none;
        }

        .table-header {
            background-color: var(--primary-color);
            color: white;
        }

        .table {
            border-collapse: separate;
            border-spacing: 0;
            border-radius: var(--border-radius);
            overflow: hidden;
        }

        .table thead th {
            border-bottom: none;
            font-weight: 600;
            text-transform: uppercase;
            font-size: 0.85rem;
            letter-spacing: 0.5px;
        }

        .table tbody tr:hover {
            background-color: rgba(72, 57, 245, 0.05);
        }

        .role-badge {
            font-size: 0.75rem;
            padding: 0.5rem 0.75rem;
            border-radius: 50px;
            font-weight: 500;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
        }

        .action-btns .btn {
            margin: 0.2rem;
            min-width: 40px;
            height: 40px;
            border-radius: 50%;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            transition: all 0.3s ease;
            border: none;
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
        }

        .action-btns .btn:hover {
            transform: translateY(-3px);
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
        }

        .btn-primary {
            background-color: var(--primary-color);
        }

        .btn-primary:hover {
            background-color: var(--secondary-color);
        }

        .btn-danger {
            background-color: var(--accent-color);
        }

        .btn-info {
            background-color: #3DD5F3;
        }

        .btn-warning {
            background-color: #ffc107;
            color: #212529;
        }

        .form-control {
            border-radius: var(--border-radius);
            padding: 0.75rem 1.25rem;
            border: 2px solid #e0e0ff;
            transition: all 0.3s ease;
            background-color: #f8f9ff;
        }

        .form-control:focus {
            border-color: var(--primary-color);
            box-shadow: 0 0 0 0.25rem rgba(72, 57, 245, 0.25);
        }

        .form-label {
            color: var(--primary-color);
            font-weight: 600;
            margin-bottom: 0.5rem;
        }

        .filter-card {
            background: var(--card-bg);
            border-radius: var(--border-radius);
            box-shadow: var(--shadow);
            padding: 1.5rem;
            margin-bottom: 2rem;
            border: none;
        }

        .stats-card {
            background: linear-gradient(145deg, var(--primary-color), var(--secondary-color));
            border-radius: var(--border-radius);
            box-shadow: var(--shadow);
            padding: 1.5rem;
            color: white;
            margin-bottom: 2rem;
            position: relative;
            overflow: hidden;
        }

        .stats-card:before {
            content: '';
            position: absolute;
            top: -30px;
            right: -30px;
            width: 100px;
            height: 100px;
            border-radius: 50%;
            background: rgba(255, 255, 255, 0.1);
        }

        .stats-card .stats-icon {
            font-size: 2rem;
            margin-bottom: 1rem;
        }

        .stats-card .stats-number {
            font-size: 2.5rem;
            font-weight: 700;
            margin-bottom: 0.5rem;
        }

        .stats-card .stats-title {
            font-size: 1rem;
            opacity: 0.8;
        }

        .hover-animate {
            transition: all 0.2s ease;
        }

        .hover-animate:hover {
            transform: translateX(5px);
        }

        .empty-state {
            text-align: center;
            padding: 3rem 0;
        }

        .pulse {
            animation: pulse 2s infinite;
        }

        @keyframes pulse {
            0% {
                transform: scale(1);
            }

            50% {
                transform: scale(1.05);
            }

            100% {
                transform: scale(1);
            }
        }

        .pagination {
            margin: 20px 0;
        }

        .pagination .page-item .page-link {
            color: var(--primary-color);
            border: 1px solid rgba(72, 57, 245, 0.1);
            margin: 0 4px;
            border-radius: var(--border-radius);
            transition: all 0.3s ease;
        }

        .pagination .page-item.active .page-link {
            background-color: var(--primary-color);
            border-color: var(--primary-color);
            color: white;
            box-shadow: var(--shadow);
        }

        .pagination .page-item.disabled .page-link {
            opacity: 0.6;
            pointer-events: none;
        }

        .pagination .page-link:hover {
            background-color: var(--light-bg);
            border-color: var(--primary-color);
        }
    </style>

    <div class="users-container">
        <div class="container">
            <!-- Header Section -->
            <div class="row mb-4">
                <div class="col-12">
                    <h2 class="page-title"><i class="fas fa-users-cog me-2"></i>User Management</h2>
                </div>
            </div>

            <!-- Stats Section -->
            <div class="row mb-4">
                <div class="col-md-3">
                    <div class="stats-card">
                        <div class="stats-icon"><i class="fas fa-users"></i></div>
                        <div class="stats-number">{{ $users->count() }}</div>
                        <div class="stats-title">Total Users</div>
                    </div>
                </div>
                <div class="col-md-3">
                    <div class="stats-card">
                        <div class="stats-icon"><i class="fas fa-user-shield"></i></div>
                        <div class="stats-number">{{ $users->where('role', 'admin')->count() }}</div>
                        <div class="stats-title"> Super Admins</div>
                    </div>
                </div>
                <div class="col-md-3">
                    <div class="stats-card">
                        <div class="stats-icon"><i class="fas fa-user-tie"></i></div>
                        <div class="stats-number">{{ $users->where('role', 'sub_admin')->count() }}</div>
                        <div class="stats-title">Sub Admins</div>
                    </div>
                </div>
                <div class="col-md-3">
                    <div class="stats-card">
                        <div class="stats-icon"><i class="fas fa-user"></i></div>
                        <div class="stats-number">{{ $users->where('role', 'user')->count() }}</div>
                        <div class="stats-title">Regular Users</div>
                    </div>
                </div>
            </div>

            <!-- Filter and Add User Section -->
            <div class="filter-card mb-4">
                <div class="row align-items-end">
                    <div class="col-md-4">
                        <label for="searchUser" class="form-label">
                            <i class="fas fa-search me-2"></i>Search Users
                        </label>
                        <input type="text" id="searchUser" class="form-control" placeholder="Search by name or email...">
                    </div>
                    <div class="col-md-4">
                        <label for="roleFilter" class="form-label">
                            <i class="fas fa-filter me-2"></i>Filter by Role
                        </label>
                        <select id="roleFilter" class="form-control">
                            <option value="all">All Roles</option>
                            <option value="admin">Admin</option>
                            <option value="sub_admin">Sub Admin</option>
                            <option value="user">User</option>
                        </select>
                    </div>
                    <div class="col-md-4 text-end">
                        <a href="{{ route('admin.users.create') }}" class="btn btn-primary">
                            <i class="fas fa-plus me-2"></i>Add New User
                        </a>
                    </div>
                </div>
            </div>

            <!-- Table Section -->
            <div class="custom-card">
                @if (session('success'))
                    <div class="alert alert-success alert-dismissible fade show" role="alert">
                        <i class="fas fa-check-circle me-2"></i>{{ session('success') }}
                        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
                    </div>
                @endif

                <div class="table-responsive">
                    <table class="table table-hover align-middle" id="myTable">
                        <thead class="table-header">
                            <tr>
                                <th scope="col" class="text-center">#</th>
                                <th scope="col">Name</th>
                                <th scope="col">Email</th>
                                <th scope="col" class="text-center">Role</th>
                                <th scope="col" class="text-center">Actions</th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach ($users as $user)
                                                <tr class="user-row hover-animate" data-role="{{ $user->role }}">
                                                    <td class="text-center">
                                                        <span class="row-number"></span>
                                                    </td>
                                                    <td>
                                                        <div class="d-flex align-items-center">
                                                            <div class="me-3">
                                                                <i class="fas fa-user fa-lg text-primary"></i>
                                                            </div>
                                                            <div>
                                                                <strong>{{ $user->name }}</strong>
                                                            </div>
                                                        </div>
                                                    </td>
                                                    <td>{{ $user->email }}</td>
                                                    <td class="text-center">
                                                        <span class="role-badge
                                                                                                                    {{ $user->role === 'admin' ? 'bg-full' :
                                ($user->role === 'sub_admin' ? 'bg-keyword' : 'bg-element') }}">
                                                            {{ ucfirst($user->role) }}
                                                        </span>
                                                    </td>
                                                    <td class="action-btns">
                                                        @if (auth()->user()->isAdmin())
                                                            <div class="d-flex justify-content-center">
                                                                <a href="{{ route('admin.users.show', $user) }}" class="btn btn-primary"
                                                                    data-bs-toggle="tooltip" title="View User Details">
                                                                    <i class="fas fa-eye"></i>
                                                                </a>

                                                                <form method="POST" action="{{ route('admin.users.impersonate', $user) }}">
                                                                    @csrf
                                                                    <button type="button" class="btn btn-info impersonate-btn"
                                                                        data-id="{{ $user->id }}"
                                                                        data-route="{{ route('admin.users.impersonate', $user) }}"
                                                                        data-bs-toggle="tooltip" title="Impersonate User">
                                                                        <i class="fas fa-user-secret"></i>
                                                                    </button>
                                                                </form>
                                                                <form method="POST" action="{{ route('admin.users.destroy', $user) }}">
                                                                    @csrf @method('DELETE')
                                                                    <button type="button" class="btn btn-danger delete-btn"
                                                                        data-id="{{ $user->id }}"
                                                                        data-route="{{ route('admin.users.destroy', $user) }}"
                                                                        data-bs-toggle="tooltip" title="Delete User">
                                                                        <i class="fas fa-trash-alt"></i>
                                                                    </button>
                                                                </form>
                                                            </div>
                                                        @else
                                                            <a href="{{ route('admin.users.show', $user) }}" class="btn btn-primary"
                                                                data-bs-toggle="tooltip" title="View User Details">
                                                                <i class="fas fa-eye"></i>
                                                            </a>
                                                        @endif
                                                    </td>
                                                </tr>
                            @endforeach

                            @if(count($users) === 0)
                                <tr>
                                    <td colspan="5">
                                        <div class="empty-state">
                                            <i class="fas fa-users fa-4x mb-3 text-muted pulse"></i>
                                            <h4>No users found</h4>
                                            <p class="text-muted">Add your first user to start managing</p>
                                            <a href="{{ route('admin.users.create') }}" class="btn btn-primary mt-3">
                                                <i class="fas fa-plus me-2"></i>Add User
                                            </a>
                                        </div>
                                    </td>
                                </tr>
                            @endif
                        </tbody>
                    </table>
                </div>

                <!-- Hidden Delete Form -->
                <form id="deleteForm" method="POST" style="display: none;">
                    @csrf
                    @method('DELETE')
                </form>
                <!-- Hidden Impersonate Form -->
                <form id="impersonateForm" method="POST" style="display: none;">
                    @csrf
                </form>

                <!-- Pagination -->
                <div class="d-flex justify-content-center mt-4">
                    <ul class="pagination" id="pagination">
                        <!-- Pagination links will be inserted here by JavaScript -->
                    </ul>
                </div>
            </div>
        </div>
    </div>

    <script>
(function(window, document, $) {
    var $j = jQuery.noConflict();

    document.addEventListener('DOMContentLoaded', function () {
        try {
            if (window.userManagementInitialized) return;
            window.userManagementInitialized = true;

            if (
                !$j('#searchUser').length ||
                !$j('.user-row').length ||
                !$j('#pagination').length ||
                !$j('#roleFilter').length ||
                !$j('#deleteForm').length ||
                !$j('#impersonateForm').length
            ) {
                console.error("Missing required DOM elements for user management.");
                return;
            }

            let currentPage = 1;
            const rowsPerPage = 10;

            initializeTooltips();
            safeApplyFiltersAndPagination();

            function initializeTooltips() {
                try {
                    let tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'));
                    tooltipTriggerList.map(function (tooltipTriggerEl) {
                        return new bootstrap.Tooltip(tooltipTriggerEl);
                    });
                } catch (e) {
                    console.error("Error initializing tooltips:", e);
                }
            }

            function safeApplyFiltersAndPagination() {
                try {
                    const roleFilter = $j('#roleFilter').val();
                    const searchTerm = $j('#searchUser').val().toLowerCase();

                    let visibleRows = $j('.user-row').filter(function () {
                        const role = $j(this).data('role');
                        const name = $j(this).find('td:nth-child(2)').text().toLowerCase();
                        const email = $j(this).find('td:nth-child(3)').text().toLowerCase();

                        const matchesRole = roleFilter === 'all' || role === roleFilter;
                        const matchesSearch = searchTerm === '' ||
                            name.includes(searchTerm) ||
                            email.includes(searchTerm);

                        return matchesRole && matchesSearch;
                    });

                    let totalPages = Math.ceil(visibleRows.length / rowsPerPage);
                    let start = (currentPage - 1) * rowsPerPage;
                    let end = start + rowsPerPage;

                    $j('.user-row').hide();
                    visibleRows.slice(start, end).each(function(index) {
                        $j(this).show();
                        $j(this).find('.row-number').text(start + index + 1);
                    });

                    safeUpdatePagination(totalPages);
                    safeHandleEmptyState(visibleRows.length);
                } catch (e) {
                    console.error("Error applying user filters and pagination:", e);
                }
            }

            function safeUpdatePagination(totalPages) {
                try {
                    let pagination = $j('#pagination');
                    pagination.empty();

                    if (totalPages === 0) return;

                    pagination.append(`
                        <li class="page-item ${currentPage === 1 ? 'disabled' : ''}">
                            <a class="page-link" href="#" data-page="${currentPage - 1}">Previous</a>
                        </li>
                    `);

                    for (let i = 1; i <= totalPages; i++) {
                        pagination.append(`
                            <li class="page-item ${i === currentPage ? 'active' : ''}">
                                <a class="page-link" href="#" data-page="${i}">${i}</a>
                            </li>
                        `);
                    }

                    pagination.append(`
                        <li class="page-item ${currentPage === totalPages ? 'disabled' : ''}">
                            <a class="page-link" href="#" data-page="${currentPage + 1}">Next</a>
                        </li>
                    `);
                } catch (e) {
                    console.error("Error updating user pagination:", e);
                }
            }

            function safeHandleEmptyState(visibleCount) {
                try {
                    if (visibleCount === 0 && !$j('#no-results-row').length) {
                        $j('#myTable tbody').append(`
                            <tr id="no-results-row">
                                <td colspan="5" class="text-center py-4">
                                    <i class="fas fa-search fa-2x mb-3 text-muted"></i>
                                    <p>No users match your search criteria</p>
                                </td>
                            </tr>
                        `);
                    } else if (visibleCount > 0) {
                        $j('#no-results-row').remove();
                    }
                } catch (e) {
                    console.error("Error handling empty state:", e);
                }
            }

            // Event Listeners
            $j('#roleFilter').on('change', function () {
                try {
                    currentPage = 1;
                    safeApplyFiltersAndPagination();
                } catch (e) {
                    console.error("Error handling role filter change:", e);
                }
            });

            $j('#searchUser').on('keyup', function () {
                try {
                    currentPage = 1;
                    safeApplyFiltersAndPagination();
                } catch (e) {
                    console.error("Error handling search user keyup:", e);
                }
            });

            $j(document).on('click', '.page-link', function (e) {
                try {
                    e.preventDefault();
                    let page = parseInt($j(this).data('page'));
                    if (!isNaN(page)) {
                        currentPage = page;
                        safeApplyFiltersAndPagination();
                    }
                } catch (e) {
                    console.error("Error handling page link click:", e);
                }
            });

            $j('.user-row').hover(
                function () {
                    try {
                        $j(this).addClass('bg-light');
                    } catch (e) {
                        console.error("Error handling row hover (in):", e);
                    }
                },
                function () {
                    try {
                        $j(this).removeClass('bg-light');
                    } catch (e) {
                        console.error("Error handling row hover (out):", e);
                    }
                }
            );

            $j('.delete-btn').on('click', function () {
                try {
                    const userId = $j(this).data('id');
                    const deleteRoute = $j(this).data('route');
                    const deleteForm = $j('#deleteForm');

                    Swal.fire({
                        title: 'Are you sure?',
                        text: "You won't be able to revert this!",
                        icon: 'warning',
                        showCancelButton: true,
                        confirmButtonColor: '#4839F5',
                        cancelButtonColor: '#FF6B5B',
                        confirmButtonText: 'Yes, delete it!'
                    }).then((result) => {
                        if (result.isConfirmed) {
                            deleteForm.attr('action', deleteRoute);
                            deleteForm.submit();
                        }
                    });
                } catch (e) {
                    console.error("Error handling delete button click:", e);
                }
            });

            $j('.impersonate-btn').on('click', function () {
                try {
                    const userId = $j(this).data('id');
                    const impersonateRoute = $j(this).data('route');
                    const impersonateForm = $j('#impersonateForm');

                    Swal.fire({
                        title: 'Impersonate User?',
                        text: "You will be logged in as this user. Continue?",
                        icon: 'question',
                        showCancelButton: true,
                        confirmButtonColor: '#4839F5',
                        cancelButtonColor: '#FF6B5B',
                        confirmButtonText: 'Yes, impersonate'
                    }).then((result) => {
                        if (result.isConfirmed) {
                            impersonateForm.attr('action', impersonateRoute);
                            impersonateForm.submit();
                        }
                    });
                } catch (e) {
                    console.error("Error handling impersonifeqte button click:", e);
                }
            });

            // Initial load with fallback retry
            setTimeout(function () {
                try {
                    if ($j('.user-row').length > 0) {
                        safeApplyFiltersAndPagination();
                    } else {
                        console.warn("No .user-row elements found yet, retrying...");
                        setTimeout(() => safeApplyFiltersAndPagination(), 500);
                    }
                } catch (e) {
                    console.error("Error during initial load:", e);
                }
            }, 100);

        } catch (e) {
            console.error("Top-level user management script error:", e);
        }
    });

})(window, document, jQuery);
        // Success message after action (if session has success)
        @if(session('success'))
            Swal.fire({
                icon: 'success',
                title: 'Success!',
                text: '{{ session('success') }}',
                timer: 3000,
                showConfirmButton: false,
                position: 'top-end',
                background: '#fff',
                iconColor: '#4839F5' // Matches your primary color
            });
        @endif
    </script>
@endsection