@extends('layouts.sidenav')

@section('title', 'Users')
<link rel="icon" href="{{ asset('Bg/logoCRG.png') }}" type="image/png">
@section('content')
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css" rel="stylesheet">
<style>
    .table-container {
      padding: 20px;
    }
    .table th, .table td {
      vertical-align: middle;
    }
    .table-actions {
      display: flex;
      gap: 10px;
    }
    body {
        margin: 0;
        padding: 0;
    }
    .status-indicator {
        width: 10px;
        height: 10px;
        border-radius: 50%;
        display: inline-block;
        margin-right: 5px;
    }
    .role {
        background-color: #dfa70d; /* Green for online */
    }
    .inactive {
        background-color: #e9e9e9; /* Gray for inactive */
    }
</style>

<div class="content" id="mainContent">
    <div class="container table-container">
        <div class="d-flex justify-content-between mb-3">
            <h4>Users</h4>

            <div class="d-flex gap-2">
                <button class="btn" id="deleteBtn"><img src="{{ asset('icon/icon-trash.png') }}" width="25" height="25">  Delete</button>
                <button class="btn"><img src="{{ asset('icon/icon-filter.png') }}" width="25" height="20">  Filter</button>
                <button class="btn"><img src="{{ asset('icon/icon-export.png') }}" width="25" height="20">  Export</button>
                <a class="btn btn-primary text-light" href="{{ url('/user_add') }}">+ Add New User</a>
            </div>
        </div>
        <span class="text-muted ms-2">รายการผู้ใช้งาน</span>
        <table class="table">
            <thead>
                <tr>
                    <th><input type="checkbox" id="checkAll" /></th>
                    <th>ชื่อสกุล</th>
                    <th>Username</th>
                    <th>Create Date</th>
                    <th>Last Login</th>
                    <th>Role</th>
                     <th>Actions</th>
                </tr>
            </thead>
            <tbody>
                <!-- ข้อมูลผู้ใช้จะถูกเพิ่มเข้ามาจาก JavaScript -->
            </tbody>
        </table>

        <div class="d-flex justify-content-between">
            <div>
                <span>1 - 5 of 5 items</span>
            </div>
            <div>
                <button class="btn btn-secondary btn-sm">Previous</button>
                <button class="btn btn-secondary btn-sm">Next</button>
            </div>
        </div>
    </div>
</div>

<script>
    document.addEventListener("DOMContentLoaded", function () {
        const token = localStorage.getItem('jwtToken');
        if (!token) {
            alert("No token found. Please log in.");
            return;
        }
    
        // Handle Select All and Individual Checkboxes
        const checkAll = document.getElementById('checkAll');
        const checkItems = document.querySelectorAll('.checkItem');
        const deleteBtn = document.getElementById('deleteBtn');
    
        // Select all checkboxes functionality
        checkAll.addEventListener('change', function () {
            checkItems.forEach(item => {
                item.checked = checkAll.checked;
            });
        });
    
        // Update the select all checkbox when individual checkboxes change
        checkItems.forEach(item => {
            item.addEventListener('change', function () {
                checkAll.checked = [...checkItems].every(item => item.checked);
            });
        });
    
        // Function to fetch and display users
        async function fetchUsers() {
            try {
                const response = await fetch('{{ env('APP_URL') }}/api/users', {
                    method: 'GET',
                    headers: {
                        'Content-Type': 'application/json',
                        'Authorization': 'Bearer ' + token,
                    }
                });
    
                if (!response.ok) {
                    throw new Error('Failed to fetch users.');
                }
    
                const result = await response.json();
    
                if (result.status.statusType !== 'S') {
                    alert('Error: ' + result.status.errorMessage);
                    return;
                }
    
                const users = result.data;
                const tableBody = document.querySelector('table tbody');
                tableBody.innerHTML = ''; // Clear old data
    
                users.forEach(user => {
                    const formattedCreateDate = formatToTimestamp(user.create_time);
                    const formattedUpdateDate = formatToTimestamp(user.update_time);
    
                    const row = `
                        <tr>
                            <td><input type="checkbox" class="checkItem" data-id="${user.id}" /></td>
                            <td>${user.full_name}</td>
                            <td>${user.email}</td>
                            <td>${formattedCreateDate}</td>
                            <td>${formattedUpdateDate}</td>
                            <td>
                                <span class="badge role text-black ${user.user_role.toLowerCase()}">${user.user_role}</span>
                            </td>
                            <td>
                                <div class="btn-group gap-2">
                                    <button class="btn btn-sm btn-primary" onclick="window.location.href='/user_edit?id=' + '${user.id}'">Edit</button>
                                    <button class="btn btn-sm btn-success approve-btn" data-id="${user.id}">Approve</button>
                                </div>
                            </td>
                        </tr>
                    `;
                    tableBody.insertAdjacentHTML('beforeend', row);
                });
    
            } catch (error) {
                console.error('Error fetching users:', error);
                alert('Error fetching users.');
            }
        }
    
        // Approve or reject user
        async function updateStatus(userId, status) {
            try {
                const response = await fetch(`{{ env('APP_URL') }}/api/users/status/${userId}`, {
                    method: "PUT",
                    headers: {
                        "Content-Type": "application/json",
                        "Authorization": "Bearer " + token,
                    },
                    body: JSON.stringify({ status: status }) // Send "Y" for approve, "N" for reject
                });
    
                if (!response.ok) {
                    throw new Error("Failed to update status.");
                }
    
                const result = await response.json();
    
                if (result.status.statusType === "S") {
                    Swal.fire({
                        icon: "success",
                        title: status === "Y" ? "Approved!" : "Rejected!",
                        text: `User has been ${status === "Y" ? "approved" : "rejected"} successfully.`,
                    }).then(() => {
                        fetchUsers(); // Reload users list after update
                    });
                } else {
                    Swal.fire({
                        icon: "error",
                        title: "Error",
                        text: result.status.errorMessage || 'Failed to update user status.',
                    });
                }
            } catch (error) {
                Swal.fire({
                    icon: "error",
                    title: "Unexpected Error",
                    text: "An error occurred while updating the user status. Please try again later.",
                });
            }
        }
    
        // Function to show the approval/rejection dialog
        async function showApprovalDialog(userId) {
            const result = await Swal.fire({
                title: 'Approve, Reject or Cancel?',
                text: "Do you want to approve or reject this user?",
                icon: 'question',
                showCancelButton: true,
                showDenyButton: true,
                confirmButtonText: 'Approve',
                denyButtonText: 'Reject',
                cancelButtonText: 'Cancel',
                reverseButtons: true, 
                customClass: {
                    denyButton: 'reject-btn',
                    confirmButton: 'approve-btn',
                }
            });
    
            if (result.isConfirmed) {
                // Approve action
                updateStatus(userId, "Y");
            } else if (result.isDenied) {
                // Reject action
                updateStatus(userId, "N");
            } else {
                // Cancel action
                Swal.fire({
                    title: 'Cancelled',
                    text: 'No changes made.',
                    icon: 'info'
                });
            }
        }
    
        // Event listener for approve button click
        document.body.addEventListener('click', function (event) {
            if (event.target.classList.contains("approve-btn")) {
                const userId = event.target.getAttribute("data-id");
                showApprovalDialog(userId);
            }
        });
    
        // Function to delete selected users
        async function deleteUsers(userIds) {
            try {
                Swal.fire({
                    title: 'กำลังลบข้อมูล...',
                    text: 'Please wait while the users are being deleted.',
                    allowOutsideClick: false,
                    didOpen: () => {
                        Swal.showLoading();
                    },
                });
    
                for (const userId of userIds) {
                    const response = await fetch(`{{ env('APP_URL') }}/api/users/${userId}`, {
                        method: 'DELETE',
                        headers: {
                            'Content-Type': 'application/json',
                            'Authorization': 'Bearer ' + token,
                        },
                    });
    
                    if (!response.ok) {
                        const result = await response.json();
                        Swal.fire({
                            icon: 'error',
                            title: 'Error',
                            text: result.status.errorMessage || 'An error occurred while deleting a user.',
                        });
                        return;
                    }
                }
    
                Swal.fire({
                    icon: 'success',
                    title: 'Deleted!',
                    text: 'ลบข้อมูลผู้ใช้งานสำเร็จ',
                }).then(() => {
                    fetchUsers(); // Reload users list after deletion
                });
            } catch (error) {
                console.error('Error deleting users:', error);
                Swal.fire({
                    icon: 'error',
                    title: 'Unexpected Error',
                    text: 'An error occurred while deleting users. Please try again later.',
                });
            }
        }
    
        // Event listener for delete button
        deleteBtn.addEventListener('click', function () {
            const selectedCheckboxes = document.querySelectorAll('.checkItem:checked');
            const selectedIds = [...selectedCheckboxes].map(checkbox => checkbox.getAttribute('data-id'));
    
            if (selectedIds.length === 0) {
                Swal.fire({
                    icon: 'info',
                    title: 'No Selection',
                    text: 'Please select at least one user to delete.',
                });
                return;
            }
    
            Swal.fire({
                title: 'Are you sure?',
                text: 'You will not be able to recover deleted users!',
                icon: 'warning',
                showCancelButton: true,
                confirmButtonText: 'Yes, delete them!',
                cancelButtonText: 'No, cancel',
            }).then((result) => {
                if (result.isConfirmed) {
                    deleteUsers(selectedIds);
                }
            });
        });
    
        // Function to format timestamp
        function formatToTimestamp(isoDate) {
            const date = new Date(isoDate);
            const year = date.getFullYear();
            const month = String(date.getMonth() + 1).padStart(2, '0');
            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}`;
        }
    
        fetchUsers(); // Initial fetch to load users
    });
    </script>
    

@endsection