@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>
            <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="password" class="form-label">Confirm Password</label>
                <input type="password" class="form-control" id="password" name="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", () => {
    const form = document.querySelector("form");
    const token = localStorage.getItem("jwtToken"); // ดึง Token จาก localStorage

    if (!token) {
        alert("No token found. Please log in.");
        return;
    }

    form.addEventListener("submit", async (event) => {
        event.preventDefault(); // ป้องกันการโหลดหน้าใหม่

        // ดึงข้อมูลจากฟอร์ม
        const fullName = document.getElementById("fullname").value.trim();
        const email = document.getElementById("username").value.trim();
        const password = document.getElementById("password").value.trim();
        const confirmPassword = document.querySelectorAll("[name='password']")[1].value.trim();
        const userRole = document.getElementById("user_role").value;

        // ตรวจสอบรูปแบบ E-mail
        const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
        if (!emailRegex.test(email)) {
            alert("Invalid email format. Please enter a valid email address.");
            return;
        }

        // ตรวจสอบการกรอกฟิลด์ Confirm Password
        if (password !== confirmPassword) {
            alert("Passwords do not match. Please try again.");
            return;
        }

        const userData = {
            fullName: fullName,
            email: email,
            password: password,
            user_role: userRole,
            status: "Y", // กำหนดสถานะเริ่มต้น
        };

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

            const result = await response.json();

            if (response.status === 201 && 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 creating user:", error);
            // แสดง SweetAlert แจ้งข้อผิดพลาดที่ไม่คาดคิด
            Swal.fire({
                icon: 'error',
                title: 'Unexpected Error',
                text: 'An unexpected error occurred. Please try again later.',
            });
        }
    });
});
    </script>
@endsection