@extends('layout')
@section('content')
    <div class="container my-5">
        <div class="d-flex justify-content-between align-items-center mb-4">
            <h1 class="h3">Users List</h1>
        </div>
        <div class="input-group" style="width: 1200px;">
            <input type="text" class="form-control" id="searchUserId" placeholder="Enter User ID">
            <button class="btn btn-primary" onclick="fetchUserById()">Search</button>
            <button class="btn btn-secondary" onclick="fetchUsers()">Reload Users</button>
        </div>
        <!-- Table for Displaying Users -->
        <div class="table-responsive">
            <table class="table table-bordered table-hover">
                <thead class="table-light">
                    <tr>
                        <th scope="col">User Code</th>
                        <th scope="col">Name</th>
                        <th scope="col">Username</th>
                        <th scope="col">Create Date</th>
                        <th scope="col">Last Login</th>
                        <th scope="col">Role</th>
                        <th scope="col">Actions</th>
                    </tr>
                </thead>
                <tbody id="userTableBody">
                    <!-- Rows will be dynamically inserted here -->
                </tbody>
            </table>
        </div>
    </div>

    <!-- Update User Modal -->
    <div class="modal fade" id="updateUserModal" tabindex="-1" aria-labelledby="updateUserModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="updateUserModalLabel">Update User</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <form id="updateUserForm">
                        <div class="mb-3">
                            <label for="full_name" class="form-label">Full Name</label>
                            <input type="text" class="form-control" id="full_name" required>
                        </div>
                        <div class="mb-3">
                            <label for="email" class="form-label">Email</label>
                            <input type="email" class="form-control" id="email" required>
                        </div>
                        <div class="mb-3">
                            <label for="password" class="form-label">Password</label>
                            <input type="password" class="form-control" id="password" required>
                        </div>
                        <div class="mb-3">
                            <label for="userRole" class="form-label">User Role</label>
                            <select class="form-select" id="userRole" required>
                                <option value="CA">CA</option>
                                <option value="Admin">Admin</option>
                                <option value="Operation">Operation</option>
                            </select>
                        </div>
                        <div class="mb-3">
                            <label for="status" class="form-label">Status</label>
                            <select class="form-select" id="status" required>
                                <option value="Y">Active</option>
                                <option value="N">Inactive</option>
                            </select>
                        </div>
                        <button type="submit" class="btn btn-primary">Update User</button>
                    </form>
                </div>
            </div>
        </div>
    </div>

    <!-- Bootstrap 5 JavaScript Bundle -->
    {{-- <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script> --}}
    <script>
        function formatToTimestamp(isoDate) {
            const date = new Date(isoDate);
            const year = date.getFullYear();
            const month = String(date.getMonth() + 1).padStart(2, '0'); // Ensure two digits
            const day = String(date.getDate()).padStart(2, '0');
            const hours = String(date.getHours()).padStart(2, '0');
            const minutes = String(date.getMinutes()).padStart(2, '0');
            const seconds = String(date.getSeconds()).padStart(2, '0');
            return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
        }
        // Function to fetch users from API
        var token ="eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJpc3MiOiJodHRwOi8vMTI3LjAuMC4xOjgwMDAvYXBpL3VzZXJzL2xvZ2luIiwiaWF0IjoxNzM0OTI3OTMxLCJleHAiOjE3MzUwMTQzMzEsIm5iZiI6MTczNDkyNzkzMSwianRpIjoiMElUUnZ5UEFiWkhMZWNOVyIsInN1YiI6IjRhZDI4YTAyLTY5Y2UtNDI4ZS1iYWU2LTJlOGQ0YTZhZDIxNSIsInBydiI6ImY2NGQ0OGE2Y2VjN2JkZmE3ZmJmODk5NDU0YjQ4OGIzZTQ2MjUyMGEiLCJpZCI6IjRhZDI4YTAyLTY5Y2UtNDI4ZS1iYWU2LTJlOGQ0YTZhZDIxNSIsImZ1bGxfbmFtZSI6ImFiY2QiLCJlbWFpbCI6InRlc3RAZ21haWwuY29tIiwidXNlcl9yb2xlIjoiQWRtaW4ifQ.0_c_i5Ebzyq0hXfl4wEhhu-HoPZ8FneyOByXKcx4Vfk";
        // Fetch a single user by ID
        async function fetchUserById() {
            const userId = document.getElementById('searchUserId').value.trim();

            if (!userId) {
                alert("Please enter a User ID");
                return;
            }

            try {
                const response = await fetch(`{{ env('APP_URL') }}/api/users/${userId}`, {
                    method: 'GET',
                    headers: {
                        'Content-Type': 'application/json',
                        'Authorization': 'Bearer ' + token,
                        'sourceSystemId': 'YOUR_CONFIGURED_VALUE'
                    }
                });

                if (!response.ok) {
                    throw new Error('User not found');
                }

                const result = await response.json();

                if (result.status.statusType !== 'S') {
                    alert(`Error: ${result.status.errorMessage}`);
                    return;
                }

                // Display the single user in the table
                const user = result.data;
                const tableBody = document.querySelector('#userTableBody');
                tableBody.innerHTML = ''; // Clear the table

                const roleClass = {
                    'CA': 'role-ca',
                    'Admin': 'role-admin',
                    'Operation': 'role-operation'
                } [user.user_role] || 'bg-secondary';

                const formattedCreateDate = formatToTimestamp(user.create_time);

                const row = `
            <tr>
                <td>${user.id}</td>
                <td>${user.full_name}</td>
                <td>${user.email}</td>
                <td>${formattedCreateDate}</td>
                <td>${formattedCreateDate}</td>
                <td><span class="role-badge ${roleClass}">${user.user_role}</span></td>
                <td>
                    <div class="dropdown">
                        <button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
                            More
                        </button>
                        <ul class="dropdown-menu">
                            <li><a class="dropdown-item" href="#" onclick="openUpdateModal('${user.id}', '${user.full_name}', '${user.user_role}', '${user.status}', '${user.email}')">Update</a></li>
                        </ul>
                    </div>
                </td>
            </tr>
        `;
                tableBody.insertAdjacentHTML('beforeend', row);

            } catch (error) {
                // console.error('Error fetching user by ID:', error);
                alert('User not found.');
            }
        }

        async function fetchUsers() {

            try {

                const response = await fetch('{{ env('APP_URL') }}/api/users', {
                    method: 'GET',
                    headers: {
                        'Content-Type': 'application/json',
                        'Authorization': 'Bearer ' + token,
                        'sourceSystemId': 'YOUR_CONFIGURED_VALUE'
                    }
                });

                if (!response.ok) {
                    throw new Error('Failed to fetch data.');
                }

                const result = await response.json();

                if (result.status.statusType !== 'S') {
                    alert('Error: ' + result.status.errorMessage);
                    return;
                }

                // Render data into table
                const users = result.data;
                const tableBody = document.querySelector('#userTableBody');
                tableBody.innerHTML = ''; // Clear previous data

                users.forEach(user => {
                    const roleClass = {
                        'CA': 'role-ca',
                        'Admin': 'role-admin',
                        'Operation': 'role-operation'
                    } [user.user_role] || 'bg-secondary';
                    const formattedCreateDate = formatToTimestamp(user.create_time);
                    // const formattedLastLogin = formatToTimestamp(user.last_login);
                    const row = `
                        <tr>
                            <td>${user.id}</td>
                            <td>${user.full_name}</td>
                            <td>${user.email}</td>
                            <td>${formattedCreateDate}</td>
                            <td>${formattedCreateDate}</td>
                            <td><span class="role-badge ${roleClass}">${user.user_role}</span></td>
                            <td>
                                <div class="dropdown">
                                    <button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
                                        More
                                    </button>
                                    <ul class="dropdown-menu">
                                        <li><a class="dropdown-item" href="#" onclick="openUpdateModal('${user.id}', '${user.full_name}', '${user.user_role}', '${user.status}', '${user.email}')">Update</a></li>
                                    </ul>
                                </div>
                            </td>
                        </tr>
                    `;
                    tableBody.insertAdjacentHTML('beforeend', row);
                });

            } catch (error) {
                console.error('Error fetching users:', error);
                alert('Error fetching users.');
            }

        }

        function openUpdateModal(userId, fullName, role, status, email) {
            selectedUserId = userId; // Store the user ID
            document.getElementById('full_name').value = fullName;
            document.getElementById('email').value = email;
            document.getElementById('password').value = ''; // Reset password
            document.getElementById('userRole').value = role;
            document.getElementById('status').value = status;

            const modal = new bootstrap.Modal(document.getElementById('updateUserModal'));
            modal.show();
        }
        document.getElementById('updateUserForm').addEventListener('submit', async function(e) {
            e.preventDefault();
            const fullName = document.getElementById('full_name').value;
            const email = document.getElementById('email').value;
            const password = document.getElementById('password').value;
            const role = document.getElementById('userRole').value;
            const status = document.getElementById('status').value;

            try {
                const response = await fetch(`{{ env('APP_URL') }}/api/users/${selectedUserId}`, {
                    method: 'PUT',
                    headers: {
                        'Content-Type': 'application/json',
                        'Authorization': 'Bearer ' + token,
                        'sourceSystemId': 'YOUR_CONFIGURED_VALUE'
                    },
                    body: JSON.stringify({
                        full_name: fullName,
                        user_role: role,
                        email: email,
                        password: password,
                        status: status,
                    })
                });

                if (!response.ok) {
                    throw new Error('Failed to update user.');
                }
                const result = await response.json();
                alert(`Updated User_id ${result.data.user_id} successfully!`);
                fetchUsers(); // Reload users after update
                const modal = bootstrap.Modal.getInstance(document.getElementById('updateUserModal'));
                modal.hide();
            } catch (error) {
                console.error('Error updating user:', error);
                alert('Error updating user.');
            }
        });
        window.onload = fetchUsers;
    </script>
@endsection