@extends('layouts.sidenav')

@section('title', 'Content Category')
<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>
    .table-container {
        padding: 20px;
    }
    .table th, .table td {
        vertical-align: middle;
    }
    .table-actions {
        display: flex;
        gap: 10px;
    }
    body {
        margin: 0;
        padding: 0;
    }
    .status-indicator {
        width: 10px;
        height: 10px;
        border-radius: 50%;
        display: inline-block;
        margin-right: 5px;
    }
    .online {
        background-color: #28a745; /* Green for online */
    }
    .offline {
        background-color: #6c757d; /* Gray for offline */
    }
</style>

<div class="content" id="mainContent">
    <div class="container table-container">
        <div class="d-flex justify-content-between mb-3">
            <h4>หมวดหมู่ บทความ</h4>

            <div class="d-flex gap-2">
                <button class="btn btn-light text-black" id="deleteSelectedBtn">
                    <img src="{{ asset('icon/icon-trash.png') }}" width="25" height="25"> Delete
                </button>
                <a class="btn btn-primary text-light" href="{{ url('/content_category_add') }}">+ Add new</a>
            </div>
        </div>
        <span class="text-muted ms-2">ข้อมูลหมวดหมู่บทความ</span>
        <table class="table">
            <thead>
                <tr>
                    <th><input type="checkbox" id="checkAll" /></th>
                    <th>Category Name</th>
                    <th>Create By</th>
                    <th>Create Date</th>
                    <th>Update Date</th>
                    <th></th>
                </tr>
            </thead>
            <tbody id="tableContent">
                <!-- Rows will be dynamically injected here via JavaScript -->
            </tbody>
        </table>

        <div class="d-flex justify-content-between">
            <div>
                <span id="itemCount">Loading...</span>
            </div>
            <div>
                <button class="btn btn-secondary btn-sm">Previous</button>
                <button class="btn btn-secondary btn-sm">Next</button>
            </div>
        </div>
    </div>
</div>

<script>
    document.addEventListener("DOMContentLoaded", async function () {
        const token = localStorage.getItem("jwtToken");

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

                const apiUrl = "{{ env('APP_URL') }}/api/contents/category";
                const tableContent = document.getElementById("tableContent");
                const itemCount = document.getElementById("itemCount");

                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 types");
                }

                const result = await response.json();

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

                const data = result.data;
                tableContent.innerHTML = ""; // Clear existing content

                // Populate the table
                data.forEach((item) => {
                    const row = document.createElement("tr");
                    row.innerHTML = `
                        <td><input type="checkbox" class="checkItem" data-id="${item.id}" /></td>
                        <td>${item.category_name}</td>
                        <td>${item.create_by}</td>
                        <td>${new Date(item.create_time).toLocaleDateString()}</td>
                        <td>${new Date(item.update_time).toLocaleDateString()}</td>
                        <td class="table-actions">
                            <div class="btn-group">
                                <button class="btn btn-sm" type="button" id="dropdownMenuButton3" data-bs-toggle="dropdown" aria-expanded="false">
                                    <b>:</b>
                                </button>
                                <ul class="dropdown-menu" aria-labelledby="dropdownMenuButton3">
                                    <li><a class="dropdown-item" href="/content_category_edit?id=${item.id}">Edit</a></li>
                                </ul>
                            </div>
                        </td>
                    `;
                    tableContent.appendChild(row);
                });

                // Update item count
                itemCount.textContent = `1 - ${data.length} of ${data.length} items`;
            } catch (error) {
                console.error("Error fetching content types:", error);
                itemCount.textContent = "Failed to load items";
            }
        }

        // Handle "Check All" functionality
        document.getElementById("checkAll").addEventListener("change", function () {
            const checkboxes = document.querySelectorAll(".checkItem");
            checkboxes.forEach((checkbox) => {
                checkbox.checked = this.checked;
            });
        });

        // Delete selected items
            document.getElementById("deleteSelectedBtn").addEventListener("click", async function () {
                const selectedIds = Array.from(
                    document.querySelectorAll(".checkItem:checked")
                ).map((checkbox) => checkbox.dataset.id);

                if (selectedIds.length === 0) {
                    Swal.fire({
                        icon: "warning",
                        title: "กรุณาเลือกหมวดหมู่",
                        text: "โปรดเลือกอย่างน้อย 1 รายการเพื่อลบ.",
                    });
                    return;
                }

                const confirmation = await Swal.fire({
                    icon: "warning",
                    title: "ยืนยันการลบ",
                    text: "คุณแน่ใจหรือไม่ว่าต้องการลบรายการที่เลือก?",
                    showCancelButton: true,
                    confirmButtonText: "ลบ",
                    cancelButtonText: "ยกเลิก",
                });

                if (!confirmation.isConfirmed) {
                    return;
                }

                try {
                    const promises = selectedIds.map((id) => {
                        const deleteUrl = `{{ env('APP_URL') }}/api/contents/category/${id}`;
                        return fetch(deleteUrl, {
                            method: "DELETE",
                            headers: {
                                "Content-Type": "application/json",
                                Authorization: `Bearer ${token}`,
                            },
                        });
                    });

                    const responses = await Promise.all(promises);
                    const allSucceeded = responses.every((response) => response.ok);

                    if (allSucceeded) {
                        Swal.fire({
                            icon: "success",
                            title: "สำเร็จ",
                            text: "ลบรายการที่เลือกสำเร็จแล้ว.",
                        }).then(() => {
                            fetchContent(); // Refresh the content list after deletion
                        });
                    } else {
                        Swal.fire({
                            icon: "error",
                            title: "ข้อผิดพลาด",
                            text: "ไม่สามารถลบบางรายการได้. โปรดลองอีกครั้ง.",
                        });
                    }
                } catch (error) {
                    console.error("Error deleting items:", error);
                    Swal.fire({
                        icon: "error",
                        title: "เกิดข้อผิดพลาด",
                        text: "เกิดข้อผิดพลาดระหว่างการลบรายการ.",
                    });
                }
            });

        // Fetch content on page load
        await fetchContent();
    });
</script>


@endsection