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

        .cke_bottom {
            display: none !important;
        }
    </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">
                <!-- Category -->
                <div class="mb-3">
                    <label for="category" class="form-label">Category</label>
                    <select class="form-select" id="category" name="category" required>
                        <option value="" disabled selected>เลือก Category</option>
                        <!-- Categories will be populated here dynamically -->
                    </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>
                
                <div class="mb-3 text-primary">
                    <label for="Schedules" class="form-label"><img src="{{ asset('icon/icon-schedule.png') }}" alt="icon" width="20" height="20"> Schedules</label>
                </div>

                <!-- Schedules (Start Date and End Date in the same row) -->
                <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 text-primary">
                    <label for="upload_image" class="form-label"><img src="{{ asset('icon/icon-uploadblue.png') }}" alt="icon" width="20" height="20"> Upload Image</label>
                </div>

                <!-- Cover 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 (Upload ได้มากสุด 6 รูป และไม่เกิน 2 MB)</label>
                    <input type="file" class="form-control" id="image_files" name="image_files[]" accept="image/png, image/jpeg" multiple>
                </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" id="submit-button" class="btn btn-primary w-50">Submit</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 () {
            const token = localStorage.getItem("jwtToken");

            // Get type_id from the URL query parameter
            const urlParams = new URLSearchParams(window.location.search);
            const type_id = urlParams.get('type'); // Retrieve 'type' from the URL

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

            // Fetch and display categories
            async function fetchCategories() {
                try {
                    if (!token) {
                        alert("No token found. Please log in.");
                        return;
                    }

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

                    // Populate the select dropdown with categories
                    result.data.forEach(category => {
                        const option = document.createElement("option");
                        option.value = category.id;  // Set the 'id' as value
                        option.textContent = category.category_name;  // Use 'category_name' as text
                        categorySelect.appendChild(option);
                    });
                } catch (error) {
                    console.error("Error fetching categories:", error);
                    alert("An error occurred while fetching categories.");
                }
            }

            // Call the function to fetch categories when the page loads
            fetchCategories();

            // Form submission
            const form = document.querySelector('form');
            form.addEventListener('submit', async function (event) {
                event.preventDefault(); // Prevent form from submitting normally

                const title = document.getElementById("title").value;
                const description = quill.root.innerHTML
                const start_date = document.getElementById("start_date").value;
                const end_date = document.getElementById("end_date").value;
                const cover_image = document.getElementById("cover_image").files[0]; // Correct field
                const image_files = document.getElementById("image_files").files;
                const category = document.getElementById("category").value; // Retrieve the selected category ID

                if (!category) {
                    alert("Please select a category.");
                    return;
                }

                const formData = new FormData();
                formData.append('title', title);
                formData.append('description', description);
                formData.append('start_date', start_date);
                formData.append('end_date', end_date);
                formData.append('category_id', category); // Append category_id to formData
                formData.append('type_id', type_id); // Append type_id from URL
                formData.append('file_cover_img_name', cover_image); // Correct field name

                // Append all selected images
                Array.from(image_files).forEach(file => {
                    formData.append('images[]', file); // Same as expected by server
                });

                try {
                    // แสดง Loading ระหว่างการส่งข้อมูล
                    Swal.fire({
                        title: 'Submitting...',
                        text: 'Please wait while the content is being added.',
                        allowOutsideClick: false,
                        didOpen: () => {
                            Swal.showLoading();
                        },
                    });

                    const response = await fetch("{{ env('APP_URL') }}/api/contents", {
                        method: 'POST',
                        headers: {
                            "Authorization": "Bearer " + token,
                        },
                        body: formData
                    });

                    const result = await response.json();

                    if (result.status.statusType === 'S') {
                        // แสดงข้อความสำเร็จ
                        Swal.fire({
                            icon: 'success',
                            title: 'Success!',
                            text: 'Content added successfully!',
                        }).then(() => {
                            form.reset(); // รีเซ็ตฟอร์มหลังจากเพิ่มข้อมูลสำเร็จ
                            // Redirect to the content list page with the same type_id
                            window.location.href = `{{ env('APP_URL') }}/content?type=${type_id}`; // Redirect to the content list
                        });
                    } else {
                        // แสดงข้อความข้อผิดพลาดจาก API
                        Swal.fire({
                            icon: 'error',
                            title: 'Error',
                            text: result.status.errorMessage || 'Failed to add content.',
                        });
                    }
                } catch (error) {
                    console.error("Error occurred while submitting the form:", error);

                    // แสดงข้อความข้อผิดพลาดทั่วไป
                    Swal.fire({
                        icon: 'error',
                        title: 'Unexpected Error',
                        text: 'An error occurred while submitting the form. Please try again later.',
                    });
                }
            });
        });
        </script>

    @endsection