@extends('layouts.sidenav')

@section('title', 'เพิ่มหมวดหมู่วิดิโอ')
<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: 300px;
        margin: 0;
    }
</style>

<div class="content" id="mainContent">
    <div class="container form-container">
        <h2 class="mb-4">เพิ่มหมวดหมู่วิดิโอ</h2>
        <form id="articleForm" enctype="multipart/form-data">

            <!-- Title -->
            <div class="mb-3">
                <label for="category_name" class="form-label">Title</label>
                <input type="text" class="form-control" id="category_name" name="category_name" required>
            </div>
            <!-- Submit and Reset Buttons -->
            <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 ms-2">Submit</button>
            </div>
        </form>
    </div>
</div>

<script>
    document.getElementById("articleForm").addEventListener("submit", function(e) {
        e.preventDefault(); // Prevent form from submitting normally

        // Get form data
        const category_name = document.getElementById("category_name").value;
        
        // Get JWT Token from localStorage
        const token = localStorage.getItem("token");

        // Check if the token exists
        if (!token) {
            alert("Authentication token not found.");
            return;
        }

        // Prepare data for the API request
        const data = {
            category_name: category_name,
        };

        // Set up the API URL
        const apiUrl = "{{ env('APP_URL') }}/api/videos/category";

        // Make API request using Fetch
        fetch(apiUrl, {
            method: "POST",
            headers: {
                "Content-Type": "application/json",
                "Authorization": `Bearer ${token}`, // Add the token to the Authorization header
            },
            body: JSON.stringify(data),
        })
        .then(response => response.json())
        .then(responseData => {
            // Check if statusType is 'S' which means success
            if (responseData.status.statusType === "S") {
                Swal.fire({
                    icon: 'success',
                    title: 'สำเร็จ!',
                    text: 'เพิ่มหมวดวิดิโอสำเร็จ!',
                }).then(() => {
                    document.getElementById("articleForm").reset(); // รีเซ็ตฟอร์มหลังจากเพิ่มสำเร็จ
                    window.location.href = "{{ env('APP_URL') }}/video_category"; // Redirect หลังจากการเพิ่มสำเร็จ
                });
            } else {
                Swal.fire({
                    icon: 'error',
                    title: 'เกิดข้อผิดพลาด',
                    text: responseData.status.errorMessage || 'ไม่สามารถเพิ่มหมวดหมู่วิดิโอได้.',
                });
            }
        })
        .catch(error => {
            console.error("Error:", error);
            alert("เกิดข้อผิดพลาดในการเชื่อมต่อกับเซิร์ฟเวอร์");
        });
    });
</script>


@endsection