@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>
    body {
        padding: 20px;
    }
    .form-container {
        max-width: 800px;
        margin: 0;
    }
</style>

<div class="content" id="mainContent">
    <div class="container form-container">
        <h2 class="mb-4">แก้ไข Users</h2>
        <form id="editForm">
            <div class="mb-3">
                <label for="fullname" class="form-label">ชื่อ-นามสกุล</label>
                <input type="text" class="form-control" id="fullname" name="fullname" required>
            </div>
            <div class="mb-3">
                <label for="username" class="form-label">Username</label>
                <input type="email" class="form-control" id="username" name="username" required placeholder="E-mail">
            </div>
            <div class="mb-3">
                <label for="password" class="form-label">Password</label>
                <input type="password" class="form-control" id="password" name="password" required>
            </div>
            <div class="mb-3">
                <label for="confirm_password" class="form-label">Confirm Password</label>
                <input type="password" class="form-control" id="confirm_password" name="confirm_password" required>
            </div>
            <div class="mb-3">
                <label for="user_role" class="form-label">User Roles</label>
                <select class="form-select" id="user_role" name="user_role" required>
                    <option value="" disabled selected>Roles</option>
                    <option value="CA">CA</option>
                    <option value="Admin">Admin</option>
                    <option value="Operation">Operation</option>
                </select>
            </div>
            <div class="d-flex justify-content-between">
                <button type="reset" class="btn btn-light w-50">Reset</button>
                <button type="submit" class="btn btn-primary w-50">Submit</button>
            </div>
        </form>
    </div>
</div>

<script>
document.addEventListener("DOMContentLoaded", async () => {
    const token = localStorage.getItem("jwtToken");
    const userId = new URLSearchParams(window.location.search).get("id"); // Get the 'id' from URL

    if (!token || !userId) {
        alert("Invalid session or missing user ID.");
        window.location.href = "{{ env('APP_URL') }}/user"; // Redirect to the main page
        return;
    }

    try {
        // Fetch user data to populate the form
        const response = await fetch(`{{ env('APP_URL') }}/api/users/${userId}`, {
            method: "GET",
            headers: {
                "Content-Type": "application/json",
                Authorization: `Bearer ${token}`,
            },
        });

        const result = await response.json();

        if (response.ok && result.status.statusType === "S") {
            const userData = result.data;

            // Populate form fields with user data
            document.getElementById("fullname").value = userData.full_name || "";
            document.getElementById("username").value = userData.email || "";
            document.getElementById("user_role").value = userData.user_role || "";
        } else {
            alert(`Error: ${result.status.errorMessage || "Failed to fetch user data."}`);
            window.location.href = "{{ env('APP_URL') }}/user"; // Redirect to the main page
        }
    } catch (error) {
        console.error("Error fetching user data:", error);
        alert("An unexpected error occurred.");
        window.location.href = "{{ env('APP_URL') }}/user"; // Redirect to the main page
    }

    // Handle form submission to update user data
    const form = document.getElementById("editForm");
    form.addEventListener("submit", async (event) => {
        event.preventDefault();

        const updatedData = {
            full_name: document.getElementById("fullname").value.trim(),
            email: document.getElementById("username").value.trim(),
            password: document.getElementById("password").value.trim(),
            confirm_password: document.getElementById("confirm_password").value.trim(),
            user_role: document.getElementById("user_role").value,
            status: "Y",  // Assuming status is always "active", you can modify if necessary
        };

        if (updatedData.password !== updatedData.confirm_password) {
            alert("Passwords do not match.");
            return;
        }

        try {
    const response = await fetch(`{{ env('APP_URL') }}/api/users/${userId}`, {
        method: "PUT",
        headers: {
            "Content-Type": "application/json",
            Authorization: `Bearer ${token}`,
        },
        body: JSON.stringify(updatedData),
    });

    const result = await response.json();

    if (response.ok && result.status.statusType === "S") {
        // แสดง SweetAlert แจ้งว่าอัปเดตผู้ใช้สำเร็จ
        Swal.fire({
            icon: 'success',
            title: 'สำเร็จ!',
            text: 'อัพเดทข้อมูลผู้ใช้งานสำเร็จ',
            confirmButtonText: 'OK',
        }).then(() => {
            // หลังจากกด OK จะเปลี่ยนเส้นทางไปที่ /user
            window.location.href = "{{ env('APP_URL') }}/user";
        });
    } else {
        // แสดง SweetAlert แจ้งข้อผิดพลาด
        Swal.fire({
            icon: 'error',
            title: 'เกิดข้อผิดพลาด',
            text: result.status.errorMessage || "อัพเดทข้อมูลผู้ใช้งานไม่สำเร็จ",
        });
    }
} catch (error) {
    console.error("Error updating user:", error);
    // แสดง SweetAlert แจ้งข้อผิดพลาดที่ไม่คาดคิด
    Swal.fire({
        icon: 'error',
        title: 'Unexpected Error',
        text: 'An unexpected error occurred. Please try again later.',
    });
}
    });
});
</script>

@endsection