@extends('layouts.app')

@section('title', 'Users')

@section('content')
    <!-- Breadcrumb -->
    <nav class="mb-4">
        <ol class="flex items-center space-x-2 text-sm text-gray-600">
            <li><a href="{{ url('dashboard') }}" class="hover:text-blue-600">Dashboard</a></li>
            <li>
                <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path>
                </svg>
            </li>
            <li><a href="#" class="hover:text-blue-600">User</a></li>
            <li>
                <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path>
                </svg>
            </li>
            <li class="text-gray-900">View</li>
        </ol>
    </nav>

    <!-- Dashboard Overview -->
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4 mb-6">
        <div class="bg-white p-4 rounded shadow flex items-center">
            <div class="p-2 bg-blue-100 rounded-full">
                <svg class="w-6 h-6 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"></path>
                </svg>
            </div>
            <div class="ml-4">
                <p class="text-sm font-medium text-gray-600">Total Users</p>
                <p class="text-2xl font-bold text-gray-900" id="totalUsersCard">0</p>
            </div>
        </div>
        <div class="bg-white p-4 rounded shadow flex items-center">
            <div class="p-2 bg-green-100 rounded-full">
                <svg class="w-6 h-6 text-green-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                </svg>
            </div>
            <div class="ml-4">
                <p class="text-sm font-medium text-gray-600">Members</p>
                <p class="text-2xl font-bold text-gray-900" id="membersCard">0</p>
            </div>
        </div>
        <div class="bg-white p-4 rounded shadow flex items-center">
            <div class="p-2 bg-yellow-100 rounded-full">
                <svg class="w-6 h-6 text-yellow-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                </svg>
            </div>
            <div class="ml-4">
                <p class="text-sm font-medium text-gray-600">Organizers</p>
                <p class="text-2xl font-bold text-gray-900" id="organizersCard">0</p>
            </div>
        </div>
        <div class="bg-white p-4 rounded shadow flex items-center">
            <div class="p-2 bg-red-100 rounded-full">
                <svg class="w-6 h-6 text-red-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6"></path>
                </svg>
            </div>
            <div class="ml-4">
                <p class="text-sm font-medium text-gray-600">Admins</p>
                <p class="text-2xl font-bold text-gray-900" id="adminsCard">0</p>
            </div>
        </div>
    </div>

    <!-- Filters -->
    <div class="bg-white p-4 mb-4 flex space-x-2 items-center">
        <input type="text" id="filterName" placeholder="Name" class="px-2 py-1 border rounded w-1/4">
        <input type="text" id="filterEmail" placeholder="Email" class="px-2 py-1 border rounded w-1/4">
        <select id="filterRole" class="px-2 py-1 border rounded">
            <option value="">All Roles</option>
            <option value="admin">Admin</option>
            <option value="member">Member</option>
            <option value="organizer">Organizer</option>
        </select>
        <button id="btnFilter" class="px-3 py-1 bg-indigo-600 text-white rounded hover:bg-indigo-700">Filter</button>
    </div>

    <p id="totalRecords" class="mb-2 text-sm text-gray-600">Total: 0</p>

    <!-- Table -->
    <div class="overflow-x-auto bg-white p-4 rounded shadow">
        <table class="min-w-full text-xs">
            <thead class="bg-gray-50">
            <tr>
                <th class="px-2 py-2 text-left font-medium text-gray-500 uppercase tracking-wider">SL</th>
                <th class="px-2 py-2 text-left font-medium text-gray-500 uppercase tracking-wider">Name</th>
                <th class="px-2 py-2 text-left font-medium text-gray-500 uppercase tracking-wider">Email</th>
                <th class="px-2 py-2 text-left font-medium text-gray-500 uppercase tracking-wider">Phone</th>
                <th class="px-2 py-2 text-left font-medium text-gray-500 uppercase tracking-wider">Role</th>
                <th class="px-2 py-2 text-left font-medium text-gray-500 uppercase tracking-wider">Status</th>
                <th class="px-2 py-2 text-left font-medium text-gray-500 uppercase tracking-wider">Created Date</th>
                <th class="px-2 py-2 text-left font-medium text-gray-500 uppercase tracking-wider">Actions</th>
            </tr>
            </thead>
            <tbody id="userTableBody" class="bg-white divide-y divide-gray-200"></tbody>
        </table>
    </div>

    <!-- Pagination -->
    <div class="mt-3 flex justify-between items-center">
        <div id="pagination" class="flex space-x-1"></div>
        <div class="text-sm text-gray-500" id="paginationInfo"></div>
    </div>
@endsection


@push('scripts')
    <script>
        let currentPage = 1;
        let perPage = 10;
        $(document).ready(function() {
            function loadUsers(page = 1) {
                currentPage = page;

                let filters = {
                    name: $('#filterName').val(),
                    email: $('#filterEmail').val(),
                    role: $('#filterRole').val(),
                    page: currentPage,
                    perPage: perPage
                };

                $.get('{{ route("users.data") }}', filters, function(res) {
                    let tbody = '';
                    res.data.forEach((user, index) => {
                        tbody += `<tr>
                    <td class="px-2 py-2 text-xs">${(currentPage-1)*perPage + index + 1}</td>
                    <td class="px-2 py-2 text-xs">${user.full_name}</td>
                    <td class="px-2 py-2 text-xs">${user.email}</td>
                    <td class="px-2 py-2 text-xs">${user.phone}</td>
                    <td class="px-2 py-2 text-xs">${user.role}</td>
                    <td class="px-2 py-2 text-xs">${user.status}</td>
                    <td class="px-2 py-2 text-xs">${user.created_date}</td>
                    <td class="px-2 py-2 text-xs">
                        <button class="text-blue-600 hover:text-blue-900" onclick="editUser(${user.user_id})">Edit</button>
                        <button class="ml-2 text-red-600 hover:text-red-900" onclick="deleteUser(${user.user_id})">Delete</button>
                    </td>
                </tr>`;
                    });
                    $('#userTableBody').html(tbody);
                    $('#totalRecords').text('Total: ' + res.total);

                    // Pagination
                    let pagination = '';
                    if (res.currentPage > 1) {
                        pagination += `<button onclick="loadUsers(${res.currentPage-1})" class="px-2 py-1 border rounded">&laquo;</button>`;
                    }
                    for (let i=1; i<=res.lastPage; i++) {
                        pagination += `<button onclick="loadUsers(${i})" class="px-2 py-1 border rounded ${i === res.currentPage ? 'bg-indigo-600 text-white' : ''}">${i}</button>`;
                    }
                    if (res.currentPage < res.lastPage) {
                        pagination += `<button onclick="loadUsers(${res.currentPage+1})" class="px-2 py-1 border rounded">&raquo;</button>`;
                    }
                    $('#pagination').html(pagination);
                });
            }
            // Filter button
            $('#btnFilter').on('clphick', function() {
                loadUsers(1);
            });
            // Initial load
            loadUsers();
        });
        // Edit function (global)
        function editUser(id) {
            //alert('Edit user with ID: ' + id);
             window.location.href = `/users/${id}/edit`;
        }
        // Delete function (global)
        function deleteUser(id) {
            Swal.fire({
                title: 'Are you sure?',
                text: "You won't be able to revert this!",
                icon: 'warning',
                showCancelButton: true,
                confirmButtonColor: '#d33',
                cancelButtonColor: '#3085d6',
                confirmButtonText: 'Yes, delete it!',
                cancelButtonText: 'Cancel'
            }).then((result) => {
                if (result.isConfirmed) {
                    $.ajax({
                        url: '/users/' + id, // resource route destroy
                        type: 'DELETE',
                        data: { _token: '{{ csrf_token() }}' },
                        success: function(res) {
                            if (res.success) {
                                Swal.fire('Deleted!', res.message, 'success');
                                loadUsers(currentPage); // reload current page
                            } else {
                                Swal.fire('Error!', res.message, 'error');
                            }
                        },
                        error: function(xhr) {
                            Swal.fire('Error!', 'Something went wrong!', 'error');
                        }
                    });
                }
            });
        }
        // Make loadUsers global for pagination buttons
        function loadUsers(page = 1) {
            let currentPage = page;

            let filters = {
                name: $('#filterName').val(),
                email: $('#filterEmail').val(),
                role: $('#filterRole').val(),
                page: currentPage,
                perPage: 10
            };

            $.get('{{ route("users.data") }}', filters, function(res) {
                let tbody = '';
                res.data.forEach((user, index) => {
                    tbody += `<tr>
                <td class="px-2 py-2 text-xs">${(currentPage-1)*10 + index + 1}</td>
                <td class="px-2 py-2 text-xs">${user.full_name}</td>
                <td class="px-2 py-2 text-xs">${user.email}</td>
                <td class="px-2 py-2 text-xs">${user.phone}</td>
                <td class="px-2 py-2 text-xs">${user.role}</td>
                <td class="px-2 py-2 text-xs">${user.status}</td>
                <td class="px-2 py-2 text-xs">${user.created_date}</td>
                <td class="px-2 py-2 text-xs">
                    <button class="text-blue-600 hover:text-blue-900" onclick="editUser(${user.user_id})">Edit</button>
                    <button class="ml-2 text-red-600 hover:text-red-900" onclick="deleteUser(${user.user_id})">Delete</button>
                </td>
            </tr>`;
                });
                $('#userTableBody').html(tbody);
                $('#totalRecords').text('Total: ' + res.total);

                // Pagination
                let pagination = '';
                if (res.currentPage > 1) {
                    pagination += `<button onclick="loadUsers(${res.currentPage-1})" class="px-2 py-1 border rounded">&laquo;</button>`;
                }
                for (let i=1; i<=res.lastPage; i++) {
                    pagination += `<button onclick="loadUsers(${i})" class="px-2 py-1 border rounded ${i === res.currentPage ? 'bg-indigo-600 text-white' : ''}">${i}</button>`;
                }
                if (res.currentPage < res.lastPage) {
                    pagination += `<button onclick="loadUsers(${res.currentPage+1})" class="px-2 py-1 border rounded">&raquo;</button>`;
                }
                $('#pagination').html(pagination);
            });
        }

    </script>
@endpush