@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: 300px;
        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">

            <!-- 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>


            <!-- Approve -->
            <div class="mb-3">
                <label for="approve" class="form-label">Approve</label>
                <select class="form-select" id="approve" name="approved" required>
                    <option value="" disabled selected>เลือกสถานะการอนุมัติ</option>
                    <option value="Y">ยืนยัน</option>
                    <option value="N">ไม่ยืนยัน</option>
                </select>
            </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>
    document.addEventListener("DOMContentLoaded", async function () {
 
    // Initialize Quill editor with additional options
    var quill = new Quill('#description', {
        theme: 'snow',
        modules: {
            toolbar: [
                [{ 'header': '1' }, { 'header': '2' }, { 'font': [] }],
                [{ 'list': 'ordered' }, { 'list': 'bullet' }],
                [{ 'indent': '-1' }, { 'indent': '+1' }],
                [{ 'align': [] }],
                ['bold', 'italic', 'underline'],
                ['code-block']
            ]
        },
        height: 300 // Set height for the editor
    });
    const token = localStorage.getItem("jwtToken");

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

    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;


    } catch (error) {
        console.error("Error fetching content details:", error);
        alert("An error occurred while fetching content details.");
    }
}

    
        // Update content
        const form = document.getElementById('updateForm');
        form.addEventListener('submit', async function (event) {
        event.preventDefault();
        const approved = document.getElementById("approve").value;

        try {
            const apiUrl = `{{ env('APP_URL') }}/api/contents/approve/${id}`;
            const response = await fetch(apiUrl, {
                method: 'PUT',
                headers: {
                    "Content-Type": "application/json",
                    "Authorization": "Bearer " + token, // Add token to headers for authorization
                },
                body: JSON.stringify({ approved }) // Send JSON body instead of FormData
            });

            const result = await response.json();

            if (result.status.statusType === 'S') {
                alert("Content Approve successfully!");
                // window.location.href = "{{ env('APP_URL') }}/content"; // Redirect to content list after success
            } else {
                alert("Error: " + result.status.errorMessage); // Display error message
            }

            return result;
        } catch (error) {
            console.error("Error occurred while updating the content:", error);
            alert("An error occurred while updating the content.");
        }
    });

    // Fetch content details on page load
    fetchContentDetails();
});
</script>

@endsection