@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">
<link href="https://cdn.quilljs.com/1.3.7/quill.snow.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">อัปเดตบทความ</h2>
        <form action="javascript:void(0);" method="POST" enctype="multipart/form-data" id="updateForm">
            <input type="hidden" id="type_id" name="type_id">

            <!-- Category -->
            <div class="mb-3">
                <label for="category" class="form-label">Category</label>
                <select class="form-select" id="category" name="category_id" required>
                    <option value="" disabled selected>เลือก Category</option>
                </select>
            </div>

            <!-- Title -->
            <div class="mb-3">
                <label for="title" class="form-label">Title</label>
                <input type="text" class="form-control" id="title" name="title" required>
            </div>

            <!-- Description -->
            <div class="mb-3">
                <label for="description" class="form-label">Description</label>
                <div id="description" name="description" style="height: 300px;"></div>
            </div>

            <!-- Schedules -->
            <div class="row mb-3">
                <div class="col-md-6">
                    <label for="start_date" class="form-label">Start Date</label>
                    <input type="date" class="form-control" id="start_date" name="start_date" required>
                </div>
                <div class="col-md-6">
                    <label for="end_date" class="form-label">End Date</label>
                    <input type="date" class="form-control" id="end_date" name="end_date" required>
                </div>
            </div>

            <!-- Upload File Image -->
            <div class="mb-3">
                <label for="cover_image" class="form-label">Cover Image</label>
                <input type="file" class="form-control" id="cover_image" name="file_cover_img_name" accept="image/png, image/jpeg">
            </div>

            <!-- Image Files -->
            <div class="mb-3">
                <label for="image_files" class="form-label">Image Files</label>
                <input type="file" class="form-control" id="image_files" name="image_files[]" accept="image/png, image/jpeg" multiple>
                <div id="image_previews"></div> <!-- Preview container for images -->
            </div>
            <!-- Submit Button -->
            <div class="d-flex justify-content-between">
                <button type="reset" class="btn btn-light w-50">Reset</button>
                <button type="submit" id="submit-button" class="btn btn-primary w-50">Update</button>
            </div>
        </form>
    </div>
</div>

<script src="https://cdn.quilljs.com/1.3.7/quill.min.js"></script>
<script>
    // Initialize Quill editor with additional options
    var quill = new Quill('#description', {
        theme: 'snow',
        modules: {
            toolbar: {
                container: [
                    [{ 'header': [1, 2, 3, false] }],
                    [{ 'font': [] }],
                    [{ 'size': ['small', false, 'large', 'huge'] }],
                    [{ 'list': 'ordered' }, { 'list': 'bullet' }],
                    [{ 'indent': '-1' }, { 'indent': '+1' }],
                    [{ 'align': [] }],
                    ['bold', 'italic', 'underline', 'strike'],
                    [{ 'color': [] }, { 'background': [] }],
                    [{ 'script': 'sub' }, { 'script': 'super' }],
                    ['blockquote', 'code-block'],
                    ['image', 'video'],
                    ['clean']
                ],       
            }
        },
        placeholder: 'Write something here...',
        height: 300 // Set height for the editor
    });
</script>
<script>
document.addEventListener("DOMContentLoaded", async function () {
    // Initialize Quill editor
    const token = localStorage.getItem("jwtToken");

    // Get ID from URL
    const urlParams = new URLSearchParams(window.location.search);
    const id = urlParams.get('id');
    const type_id = urlParams.get('type');

    if (!id) {
        alert("ID is missing from the URL.");
        return;
    }

    // Fetch content details
    async function fetchContentDetails() {
        try {
            if (!token) {
                alert("No token found. Please log in.");
                return;
            }

            const apiUrl = `{{ env('APP_URL') }}/api/contents/${id}`;
            const response = await fetch(apiUrl, {
                method: "GET",
                headers: {
                    "Content-Type": "application/json",
                    Authorization: "Bearer " + token,
                },
            });

            if (!response.ok) {
                throw new Error("Failed to fetch content details");
            }

            const result = await response.json();

            if (result.status.statusType !== "S") {
                alert("Error: " + result.status.errorMessage);
                return;
            }

            // Populate form fields
            const data = result.data;
            document.getElementById("title").value = data.title;
            document.getElementById("type_id").value = data.type_id;
            quill.root.innerHTML = data.description;

            // ฟังก์ชันแปลงวันที่จาก dd/mm/yyyy hh:mm เป็น yyyy-mm-dd
            function formatDateToInput(dateString) {
                const [day, month, yearAndTime] = dateString.split('/');
                const year = yearAndTime.split(' ')[0]; // ตัดเวลาออก เหลือแค่ปี
                return `${year}-${month.padStart(2, '0')}-${day.padStart(2, '0')}`;
            }

            // ใช้ฟังก์ชันเพื่อแสดงผลวันที่ใน input
            document.getElementById("start_date").value = formatDateToInput(data.start_date);
            document.getElementById("end_date").value = formatDateToInput(data.end_date);

            // Fetch categories and set the selected category
            await fetchCategories(data.category_id);
        } catch (error) {
            console.error("Error fetching content details:", error);
            alert("An error occurred while fetching content details.");
        }
    }

    // Fetch and populate categories
    async function fetchCategories(selectedCategoryId) {
        try {
            const apiUrl = "{{ env('APP_URL') }}/api/contents/category";
            const categorySelect = document.getElementById("category");

            const response = await fetch(apiUrl, {
                method: "GET",
                headers: {
                    "Content-Type": "application/json",
                    Authorization: "Bearer " + token,
                },
            });

            if (!response.ok) {
                throw new Error("Failed to fetch categories");
            }

            const result = await response.json();

            if (result.status.statusType !== "S") {
                alert("Error: " + result.status.errorMessage);
                return;
            }

            result.data.forEach(category => {
                const option = document.createElement("option");
                option.value = category.id;
                option.textContent = category.category_name;
                if (category.id === selectedCategoryId) {
                    option.selected = true;
                }
                categorySelect.appendChild(option);
            });
        } catch (error) {
            console.error("Error fetching categories:", error);
            alert("An error occurred while fetching categories.");
        }
    }

    // ฟังก์ชันที่ใช้แปลงวันที่
    function formatDate(date) {
        const d = new Date(date);
        const day = String(d.getDate()).padStart(2, '0');
        const month = String(d.getMonth() + 1).padStart(2, '0');
        const year = d.getFullYear();
        const hours = String(d.getHours()).padStart(2, '0');
        const minutes = String(d.getMinutes()).padStart(2, '0');
        return `${day}/${month}/${year} ${hours}:${minutes}`;
    }

    const form = document.getElementById("updateForm");
    form.addEventListener("submit", async (event) => {
        event.preventDefault();

        const updateData = {
            title: document.getElementById("title").value.trim(),
            description: quill.root.innerHTML.trim(),
            start_date: document.getElementById("start_date").value,
            end_date: document.getElementById("end_date").value,
            cover_image: document.getElementById("cover_image").value, // Assuming a string path
            image_files: Array.from(document.getElementById("image_files").files).map(file => file.name),
            category_id: document.getElementById("category").value,
            type_id,
        };

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

        const result = await response.json();

        if (response.ok && result.status.statusType === "S") {
            Swal.fire({
                icon: "success",
                title: "สำเร็จ!",
                text: "อัพเดทข้อมูลเนื้อหาสำเร็จ",
                confirmButtonText: "OK",
            }).then(() => {
                window.location.href = `{{ env('APP_URL') }}/content?type=${type_id}`;
            });
        } else {
            Swal.fire({
                icon: "error",
                title: "เกิดข้อผิดพลาด",
                text: result.status.errorMessage || "อัพเดทเนื้อหาไม่สำเร็จ",
            });
        }
    } catch (error) {
        console.error("Error updating content:", error);
        Swal.fire({
            icon: "error",
            title: "Unexpected Error",
            text: "An unexpected error occurred. Please try again later.",
        });
    }
    });
    // Fetch content details on page load
    fetchContentDetails();
});
</script>

@endsection