@extends('layouts.app')

@section('page_title', 'User Management')

@section('content')
    <div class="card border-0 shadow-sm" style="min-height: 500px;">
        <div class="card-header border-0 bg-transparent">
            <div class="d-flex justify-content-between align-items-center">
                <h5 class="mb-0 fw-bold text-dark">User Management</h5>
                <a href="#" class="btn btn-primary btn-sm px-3">
                    <i class="fa-solid fa-plus me-1"></i> Add User
                </a>
            </div>
        </div>
        <div class="card-body">
            <!-- Search and Filters -->
            <div class="row mb-3 align-items-center">
                <div class="col-12 col-md-6 mb-2 mb-md-0">
                    <div class="input-group input-group-sm">
                        <span class="input-group-text bg-light border-end-0">
                            <i class="fa-solid fa-magnifying-glass text-muted"></i>
                        </span>
                        <input type="text" class="form-control border-start-0" placeholder="Search users..."
                            id="searchInput">
                    </div>
                </div>
                <div class="col-12 col-md-6 d-flex justify-content-end">
                    <button class="btn btn-outline-secondary btn-sm" id="clearFilters">
                        <i class="fa-solid fa-filter-circle-xmark me-1"></i> Clear Filters
                    </button>
                </div>
            </div>

            <!-- User Table -->
            <div class="table-container">
                <table class="table table-hover align-middle">
                    <thead class="table-light">
                        <tr>
                            <th class="text-center" style="width: 40px;">
                                <input type="checkbox" id="selectAll">
                            </th>
                            <th class="sortable" data-column="1">Username <i class="fa-solid fa-sort"></i></th>
                            <th class="sortable" data-column="2">First Name <i class="fa-solid fa-sort"></i></th>
                            <th class="sortable" data-column="3">Last Name <i class="fa-solid fa-sort"></i></th>
                            <th class="sortable" data-column="4">User Role <i class="fa-solid fa-sort"></i></th>
                            <th class="sortable" data-column="5">Email <i class="fa-solid fa-sort"></i></th>
                            <th class="sortable" data-column="6">Status <i class="fa-solid fa-sort"></i></th>
                            <th class="text-center" style="width: 120px;">Action</th>
                        </tr>
                    </thead>
                    <tbody id="userTableBody">
                        <!-- Rows will be populated dynamically via JavaScript -->
                    </tbody>
                </table>
            </div>

            <!-- Delete Selected Button and Pagination -->
            <div class="d-flex justify-content-between align-items-center mt-4">
                <!-- Delete Selected Button -->
                <div>
                    <button class="btn btn-danger btn-sm" id="deleteSelected" disabled>
                        <i class="fa-solid fa-trash-can me-1"></i> Delete Selected
                    </button>
                </div>
                <!-- Pagination -->
                <nav aria-label="Page navigation">
                    <ul class="pagination pagination-sm" id="pagination">
                        <!-- Pagination links will be generated dynamically -->
                    </ul>
                </nav>
            </div>
        </div>
    </div>

    <!-- Edit User Modal -->
    <div class="modal fade" id="editUserModal" tabindex="-1" aria-labelledby="editUserModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="editUserModalLabel">Edit User</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <form id="editUserForm">
                        <div class="mb-3">
                            <label for="editUsername" class="form-label">Username</label>
                            <input type="text" class="form-control" id="editUsername" readonly>
                        </div>
                        <div class="mb-3">
                            <label for="editFirstName" class="form-label">First Name</label>
                            <input type="text" class="form-control" id="editFirstName">
                        </div>
                        <div class="mb-3">
                            <label for="editLastName" class="form-label">Last Name</label>
                            <input type="text" class="form-control" id="editLastName">
                        </div>
                        <div class="mb-3">
                            <label for="editUserRole" class="form-label">User Role</label>
                            <input type="text" class="form-control" id="editUserRole">
                        </div>
                        <div class="mb-3">
                            <label for="editEmail" class="form-label">Email</label>
                            <input type="email" class="form-control" id="editEmail">
                        </div>
                        <div class="mb-3">
                            <label for="editStatus" class="form-label">Status</label>
                            <select class="form-select" id="editStatus">
                                <option value="Active">Active</option>
                                <option value="Inactive">Inactive</option>
                            </select>
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">Cancel</button>
                    <button type="button" class="btn btn-primary" id="updateUserBtn">Update</button>
                </div>
            </div>
        </div>
    </div>

    <!-- Custom CSS for Styling -->
    <style>
        /* Font Styling */
        .card,
        .table,
        .btn,
        .form-control,
        .input-group-text,
        .modal-content {
            font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
            font-weight: 400;
            line-height: 1.5;
        }

        .card-header h5,
        .modal-title {
            font-weight: 600;
        }

        .table th {
            font-weight: 500;
        }

        .form-label {
            font-weight: 500;
            font-size: 0.9rem;
        }

        .card {
            border-radius: 10px;
        }

        .card-header {
            background-color: transparent;
        }

        .btn-primary {
            background-color: #007bff;
            border-color: #007bff;
        }

        .btn-primary:hover {
            background-color: #0056b3;
            border-color: #0056b3;
        }

        .sortable {
            cursor: pointer;
        }

        .sortable:hover {
            background-color: #f1f3f5;
        }

        .table {
            font-size: 0.85rem;
            width: 100%;
            table-layout: auto;
        }

        .table th,
        .table td {
            padding: 0.5rem;
            vertical-align: middle;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .table th:first-child,
        .table td:first-child {
            width: 40px;
            text-align: center;
        }

        .table th:last-child,
        .table td:last-child {
            width: 120px;
            text-align: center;
        }

        .table td:nth-child(5),
        /* User Role */
        .table th:nth-child(5) {
            width: 100px;
        }

        .table td:nth-child(6),
        /* Email */
        .table th:nth-child(6) {
            max-width: 200px;
        }

        .table td:nth-child(7),
        /* Status */
        .table th:nth-child(7) {
            width: 120px;
        }

        .status-btn {
            font-size: 0.75rem;
            padding: 0.2rem 0.5rem;
        }

        .dropdown-menu-sm {
            min-width: 120px;
        }

        .dropdown-item {
            font-size: 0.85rem;
        }

        /* Table Container to Prevent Scrollbar */
        .table-container {
            overflow-x: hidden;
        }

        /* Modal Styling */
        .modal-content {
            border-radius: 8px;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
        }

        .modal-header {
            border-bottom: 1px solid #e9ecef;
        }

        .modal-footer {
            border-top: 1px solid #e9ecef;
        }

        .form-control,
        .form-select {
            font-size: 0.9rem;
            border-radius: 5px;
        }

        /* Pagination Styling */
        .pagination-sm .page-link {
            padding: 0.25rem 0.5rem;
            font-size: 0.85rem;
        }

        /* Responsive adjustments */
        @media (max-width: 576px) {
            .table {
                font-size: 0.75rem;
            }

            .table th,
            .table td {
                padding: 0.3rem;
            }

            .btn-sm {
                padding: 0.2rem 0.4rem;
                font-size: 0.75rem;
            }

            .input-group-sm>.form-control {
                font-size: 0.75rem;
            }

            .status-btn {
                font-size: 0.65rem;
            }

            .dropdown-item {
                font-size: 0.75rem;
            }

            .pagination-sm .page-link {
                padding: 0.2rem 0.4rem;
                font-size: 0.75rem;
            }

            .table td:nth-child(6) {
                /* Email */
                max-width: 150px;
            }

            .form-control,
            .form-select {
                font-size: 0.85rem;
            }
        }
    </style>

    <!-- JavaScript for Interactivity -->
    <script>
        // Sample data (replace with dynamic data from backend in real implementation)
        const allRows = [{
                id: 1,
                username: 'superadmin',
                firstName: 'Maryse',
                lastName: 'Howe',
                role: 'Admin',
                email: 'maryse.howe@qqq.com',
                status: 'Active'
            },
            {
                id: 2,
                username: 'superadmin1',
                firstName: 'Joseph',
                lastName: 'Sazon',
                role: 'Admin',
                email: 'mis.specialist@unioil.com',
                status: 'Active'
            },
            {
                id: 3,
                username: 'graxia',
                firstName: 'Graxia',
                lastName: 'Montino',
                role: 'Admin',
                email: 'business.analyst@unioil.com',
                status: 'Active'
            },
            {
                id: 4,
                username: 'cinerosimo',
                firstName: 'Cine',
                lastName: 'Rosimo',
                role: 'Admin',
                email: 'frosimo1@yopmail.com',
                status: 'Active'
            },
            {
                id: 5,
                username: 'graxia',
                firstName: 'Graxia',
                lastName: 'Montino',
                role: 'Admin',
                email: 'business.analyst@unioil.com',
                status: 'Active'
            },
            {
                id: 6,
                username: 'graxia',
                firstName: 'Graxia',
                lastName: 'Montino',
                role: 'Admin',
                email: 'business.analyst@unioil.com',
                status: 'Active'
            },
            {
                id: 7,
                username: 'graxia',
                firstName: 'Graxia',
                lastName: 'Montino',
                role: 'Admin',
                email: 'business.analyst@unioil.com',
                status: 'Active'
            }
        ];

        // Pagination settings
        const rowsPerPage = 5;
        let currentPage = 1;
        let filteredRows = [...allRows];
        let originalRows = [...allRows].map(row => ({
            ...row
        })); // Deep copy for original data

        // Function to render table rows for the current page
        function renderTable() {
            const tableBody = document.getElementById('userTableBody');
            tableBody.innerHTML = '';

            const start = (currentPage - 1) * rowsPerPage;
            const end = start + rowsPerPage;
            const paginatedRows = filteredRows.slice(start, end);

            paginatedRows.forEach(row => {
                const tr = document.createElement('tr');
                tr.setAttribute('data-id', row.id);
                tr.innerHTML = `
                    <td class="text-center"><input type="checkbox" class="rowCheckbox"></td>
                    <td>${row.username}</td>
                    <td>${row.firstName}</td>
                    <td>${row.lastName}</td>
                    <td>${row.role}</td>
                    <td>${row.email}</td>
                    <td>
                        <div class="dropdown">
                            <button class="btn btn-sm btn-outline-secondary status-btn" type="button" id="statusDropdown${row.id}" data-bs-toggle="dropdown" aria-expanded="false">
                                <span class="status-text">${row.status}</span>
                            </button>
                            <ul class="dropdown-menu dropdown-menu-end dropdown-menu-sm" aria-labelledby="statusDropdown${row.id}">
                                <li>
                                    <a class="dropdown-item d-flex align-items-center gap-2 status-option" href="#" data-status="Active">
                                        <i class="fa-solid fa-check text-success" style="font-size: 14px;"></i>
                                        <span>Active</span>
                                    </a>
                                </li>
                                <li>
                                    <a class="dropdown-item d-flex align-items-center gap-2 status-option" href="#" data-status="Inactive">
                                        <i class="fa-solid fa-xmark text-danger" style="font-size: 14px;"></i>
                                        <span>Inactive</span>
                                    </a>
                                </li>
                            </ul>
                        </div>
                    </td>
                    <td class="text-center">
                        <a href="#" class="btn btn-sm btn-outline-primary me-1 edit-btn" title="Edit" data-id="${row.id}">
                            <i class="fa-solid fa-pen-to-square"></i>
                        </a>
                        <a href="#" class="btn btn-sm btn-outline-secondary me-1" title="View">
                            <i class="fa-solid fa-eye"></i>
                        </a>
                        <button class="btn btn-sm btn-outline-danger" onclick="confirmDelete(${row.id})" title="Delete">
                            <i class="fa-solid fa-trash-can"></i>
                        </button>
                    </td>
                `;
                tableBody.appendChild(tr);
            });

            // Reattach event listeners
            attachStatusListeners();
            attachCheckboxListeners();
            attachEditListeners();
            updateDeleteButtonState();
        }

        // Function to render pagination
        function renderPagination() {
            const pagination = document.getElementById('pagination');
            pagination.innerHTML = '';

            const pageCount = Math.ceil(filteredRows.length / rowsPerPage);

            // Previous button
            const prevLi = document.createElement('li');
            prevLi.className = `page-item ${currentPage === 1 ? 'disabled' : ''}`;
            prevLi.innerHTML = `<a class="page-link" href="#" aria-label="Previous"><span aria-hidden="true">«</span></a>`;
            prevLi.addEventListener('click', (e) => {
                e.preventDefault();
                if (currentPage > 1) {
                    currentPage--;
                    renderTable();
                    renderPagination();
                }
            });
            pagination.appendChild(prevLi);

            // Page numbers
            for (let i = 1; i <= pageCount; i++) {
                const li = document.createElement('li');
                li.className = `page-item ${currentPage === i ? 'active' : ''}`;
                li.innerHTML = `<a class="page-link" href="#">${i}</a>`;
                li.addEventListener('click', (e) => {
                    e.preventDefault();
                    currentPage = i;
                    renderTable();
                    renderPagination();
                });
                pagination.appendChild(li);
            }

            // Next button
            const nextLi = document.createElement('li');
            nextLi.className = `page-item ${currentPage === pageCount ? 'disabled' : ''}`;
            nextLi.innerHTML = `<a class="page-link" href="#" aria-label="Next"><span aria-hidden="true">»</span></a>`;
            nextLi.addEventListener('click', (e) => {
                e.preventDefault();
                if (currentPage < pageCount) {
                    currentPage++;
                    renderTable();
                    renderPagination();
                }
            });
            pagination.appendChild(nextLi);
        }

        // Search Functionality
        document.getElementById('searchInput').addEventListener('input', function() {
            const searchTerm = this.value.toLowerCase();
            filteredRows = allRows.filter(row => {
                return Object.values(row).some(value =>
                    value.toString().toLowerCase().includes(searchTerm)
                );
            });
            currentPage = 1; // Reset to first page
            renderTable();
            renderPagination();
        });

        // Sorting Functionality
        let sortDirection = {};
        document.querySelectorAll('.sortable').forEach(header => {
            header.addEventListener('click', function() {
                const column = parseInt(this.getAttribute('data-column'));
                const columnMap = {
                    1: 'username',
                    2: 'firstName',
                    3: 'lastName',
                    4: 'role',
                    5: 'email',
                    6: 'status'
                };
                const key = columnMap[column];

                // Toggle sort direction
                sortDirection[column] = !sortDirection[column] ? 'asc' : sortDirection[column] === 'asc' ?
                    'desc' : 'asc';

                // Update sort icons
                document.querySelectorAll('.sortable i').forEach(icon => {
                    icon.classList.remove('fa-sort-up', 'fa-sort-down');
                    icon.classList.add('fa-sort');
                });
                const icon = this.querySelector('i');
                icon.classList.remove('fa-sort');
                icon.classList.add(sortDirection[column] === 'asc' ? 'fa-sort-up' : 'fa-sort-down');

                // Sort filtered rows
                filteredRows.sort((a, b) => {
                    const aValue = a[key].toLowerCase();
                    const bValue = b[key].toLowerCase();
                    if (sortDirection[column] === 'asc') {
                        return aValue.localeCompare(bValue);
                    } else {
                        return bValue.localeCompare(aValue);
                    }
                });

                currentPage = 1; // Reset to first page
                renderTable();
                renderPagination();
            });
        });

        // Clear Filters and Reset Sorting
        document.getElementById('clearFilters').addEventListener('click', function() {
            // Clear search input
            document.getElementById('searchInput').value = '';

            // Reset sort icons
            document.querySelectorAll('.sortable i').forEach(icon => {
                icon.classList.remove('fa-sort-up', 'fa-sort-down');
                icon.classList.add('fa-sort');
            });
            sortDirection = {};

            // Reset filtered rows to original
            filteredRows = [...allRows];
            currentPage = 1;
            renderTable();
            renderPagination();
        });

        // Select All Checkbox Functionality
        document.getElementById('selectAll').addEventListener('change', function() {
            const checkboxes = document.querySelectorAll('.rowCheckbox');
            checkboxes.forEach(checkbox => {
                checkbox.checked = this.checked;
            });
            updateDeleteButtonState();
        });

        // Checkbox Listeners for Batch Delete
        function attachCheckboxListeners() {
            const checkboxes = document.querySelectorAll('.rowCheckbox');
            checkboxes.forEach(checkbox => {
                checkbox.addEventListener('change', updateDeleteButtonState);
            });
        }

        // Update Delete Button State
        function updateDeleteButtonState() {
            const checkboxes = document.querySelectorAll('.rowCheckbox');
            const checkedCount = Array.from(checkboxes).filter(cb => cb.checked).length;
            const deleteButton = document.getElementById('deleteSelected');
            deleteButton.disabled = checkedCount < 2;
        }

        // Delete Selected (UI Only)
        document.getElementById('deleteSelected').addEventListener('click', function() {
            if (confirm('Are you sure you want to delete the selected users?')) {
                const checkboxes = document.querySelectorAll('.rowCheckbox');
                const selectedIds = Array.from(checkboxes)
                    .filter(cb => cb.checked)
                    .map(cb => cb.closest('tr').getAttribute('data-id'));

                // Simulate deletion by removing from allRows and filteredRows
                allRows = allRows.filter(row => !selectedIds.includes(row.id.toString()));
                filteredRows = filteredRows.filter(row => !selectedIds.includes(row.id.toString()));
                originalRows = originalRows.filter(row => !selectedIds.includes(row.id.toString()));

                // Reset to first page if necessary
                const maxPage = Math.ceil(filteredRows.length / rowsPerPage);
                if (currentPage > maxPage) {
                    currentPage = maxPage || 1;
                }

                renderTable();
                renderPagination();

                // Reset select all checkbox
                document.getElementById('selectAll').checked = false;
            }
        });

        // Status Dropdown Functionality
        function attachStatusListeners() {
            const options = document.querySelectorAll('.status-option');
            options.forEach(option => {
                option.removeEventListener('click', handleStatusChange);
                option.addEventListener('click', handleStatusChange);
            });
        }

        function handleStatusChange(e) {
            e.preventDefault();
            const newStatus = this.getAttribute('data-status');
            const row = this.closest('tr');
            const userId = row.getAttribute('data-id');
            const statusText = row.querySelector('.status-text');

            // Update the button text
            if (statusText) {
                statusText.textContent = newStatus;
            }

            // Update the data in allRows, filteredRows, and originalRows
            const rowData = allRows.find(r => r.id == userId);
            if (rowData) {
                rowData.status = newStatus;
            }
            const filteredRowData = filteredRows.find(r => r.id == userId);
            if (filteredRowData) {
                filteredRowData.status = newStatus;
            }
            const originalRowData = originalRows.find(r => r.id == userId);
            if (originalRowData) {
                originalRowData.status = newStatus;
            }

            // Simulate an API call to update the status
            updateUserStatus(userId, newStatus);
        }

        // Edit Button Functionality
        function attachEditListeners() {
            const editButtons = document.querySelectorAll('.edit-btn');
            editButtons.forEach(button => {
                button.addEventListener('click', function(e) {
                    e.preventDefault();
                    const userId = this.getAttribute('data-id');
                    const user = allRows.find(row => row.id == userId);

                    // Populate modal fields with user data
                    document.getElementById('editUsername').value = user.username;
                    document.getElementById('editFirstName').value = user.firstName;
                    document.getElementById('editLastName').value = user.lastName;
                    document.getElementById('editUserRole').value = user.role;
                    document.getElementById('editEmail').value = user.email;
                    document.getElementById('editStatus').value = user.status;

                    // Show the modal
                    const modal = new bootstrap.Modal(document.getElementById('editUserModal'));
                    modal.show();
                });
            });
        }

        // Update Button in Modal (Static for now)
        document.getElementById('updateUserBtn').addEventListener('click', function() {
            // For static purposes, just close the modal
            const modal = bootstrap.Modal.getInstance(document.getElementById('editUserModal'));
            modal.hide();
        });

        // Simulated API call to update status
        function updateUserStatus(userId, status) {
            console.log(`Updating user ${userId} status to ${status}`);
            // Replace with actual AJAX call to your backend, e.g.:
            /*
            fetch(`/user/update-status/${userId}`, {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content')
                },
                body: JSON.stringify({ status: status })
            })
            .then(response => response.json())
            .then(data => {
                if (data.success) {
                    console.log('Status updated successfully');
                } else {
                    console.error('Failed to update status');
                }
            })
            .catch(error => console.error('Error:', error));
            */
        }

        // Delete Confirmation
        function confirmDelete(id) {
            if (confirm('Are you sure you want to delete this user?')) {
                // Simulate deletion by removing from allRows and filteredRows
                allRows = allRows.filter(row => row.id != id);
                filteredRows = filteredRows.filter(row => row.id != id);
                originalRows = originalRows.filter(row => row.id != id);

                // Reset to first page if necessary
                const maxPage = Math.ceil(filteredRows.length / rowsPerPage);
                if (currentPage > maxPage) {
                    currentPage = maxPage || 1;
                }

                renderTable();
                renderPagination();
            }
        }

        // Initial render
        renderTable();
        renderPagination();
    </script>
@endsection