@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.addEventListener("DOMContentLoaded", function () {
    // Extract the 'id' parameter from the URL
    const urlParams = new URLSearchParams(window.location.search);
    const id = urlParams.get("id"); // Get the 'id' value from the query string

    // Validate the extracted ID
    if (!id) {
        alert("Invalid content type ID.");
        return;
    }

    // Get JWT Token from localStorage
    const token = localStorage.getItem("jwtToken");

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

    // Set up the API URL with the extracted ID for fetching existing data
    const apiUrl = `{{ env('APP_URL') }}/api/videos/category/${id}`;

    // Fetch existing data
    fetch(apiUrl, {
        method: "GET", // Use GET to retrieve data
        headers: {
            "Content-Type": "application/json",
            "Authorization": `Bearer ${token}`, // Add the token to the Authorization header
        },
    })
        .then((response) => response.json())
        .then((responseData) => {
            if (responseData.status.statusType === "S") {
                // Prefill the type_name input field with the fetched data
                const { category_name } = responseData.data; // Adjust to match the API response structure
                document.getElementById("category_name").value = category_name;
            } else {
                alert("เกิดข้อผิดพลาด: " + responseData.status.errorMessage);
            }
        })
        .catch((error) => {
            console.error("Error:", error);
            alert("เกิดข้อผิดพลาดในการดึงข้อมูลจากเซิร์ฟเวอร์");
        });
});

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;
    }

    // Extract the 'id' parameter from the URL
    const urlParams = new URLSearchParams(window.location.search);
    const id = urlParams.get("id"); // Get the 'id' value from the query string

    // Validate the extracted ID
    if (!id) {
        alert("Invalid content type ID.");
        return;
    }

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

    // Set up the API URL with the extracted ID
    const apiUrl = `{{ env('APP_URL') }}/api/videos/category/${id}`;

    // Make API request using Fetch
    fetch(apiUrl, {
        method: "PUT", // Use PUT for updating data
        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