@extends('layoutsteacher.layouts')

@section('title', 'หมวดหมู่วิดิโอ')
@section('content')
<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>
                <button class="btn btn-primary text-light" data-bs-toggle="modal" data-bs-target="#addModal">+ Add new</button>
            </div>
        </div>
        <span class="text-muted ms-2">ข้อมูลหมวดหมู่วิดิโอ</span>
        <table class="table">
            <thead>
                <tr>
                    <th><input type="checkbox" id="checkAll" /></th>
                    <th>หมวดหมู่</th>
                    <th>สร้างวันที่</th>
                    <th>อัพเดทวันที่</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>

<div class="modal fade" id="editModal" tabindex="-1" aria-labelledby="editModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <form id="editForm">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title" id="editModalLabel">Edit Category</h5>
          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
        </div>
        <div class="modal-body">
          <input type="hidden" id="editId" name="id" />
          <div class="mb-3">
            <label for="editCategoryName" class="form-label">Category Name</label>
            <input type="text" class="form-control" id="editCategoryName" name="category_name" required />
          </div>
        </div>
        <div class="modal-footer">
          <button type="submit" class="btn btn-primary">Save Changes</button>
        </div>
      </div>
    </form>
  </div>
</div>

<div class="modal fade" id="addModal" tabindex="-1" aria-labelledby="addModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <form id="addForm">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title" id="addModalLabel">Add New Category</h5>
          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
        </div>
        <div class="modal-body">
          <div class="mb-3">
            <label for="addCategoryName" class="form-label">Category Name</label>
            <input type="text" class="form-control" id="addCategoryName" name="category_name" required />
          </div>
        </div>
        <div class="modal-footer">
          <button type="submit" class="btn btn-success">Add</button>
        </div>
      </div>
    </form>
  </div>
</div>

<!-- Set this before the script to make APP_URL available in JS -->
<script>
    const APP_URL = "{{ env('APP_URL') }}";
</script>

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

        if (!token) {
            alert("No token found. Please log in.");
            return;
        }

        // ADD NEW CATEGORY
        document.getElementById("addForm").addEventListener("submit", function (e) {
            e.preventDefault();

            const categoryName = document.getElementById("addCategoryName").value.trim();
            if (!categoryName) {
                alert("กรุณากรอกชื่อหมวดหมู่");
                return;
            }

            const data = { category_name: categoryName };
            const apiUrl = `${APP_URL}/api/videos/category`;

            fetch(apiUrl, {
                method: "POST",
                headers: {
                    "Content-Type": "application/json",
                    "Authorization": `Bearer ${token}`,
                },
                body: JSON.stringify(data),
            })
                .then(response => response.json())
                .then(responseData => {
                    if (responseData.status.statusType === "S") {
                        Swal.fire({
                            icon: 'success',
                            title: 'สำเร็จ!',
                            text: 'เพิ่มหมวดวิดิโอสำเร็จ!',
                        }).then(() => {
                            document.getElementById("addForm").reset();
                            bootstrap.Modal.getInstance(document.getElementById("addModal")).hide();
                            window.location.reload();
                        });
                    } else {
                        Swal.fire({
                            icon: 'error',
                            title: 'เกิดข้อผิดพลาด',
                            text: responseData.status.errorMessage || 'ไม่สามารถเพิ่มหมวดหมู่วิดิโอได้.',
                        });
                    }
                })
                .catch(error => {
                    console.error("Error:", error);
                    alert("เกิดข้อผิดพลาดในการเชื่อมต่อกับเซิร์ฟเวอร์");
                });
        });

        // HANDLE EDIT BUTTON CLICK
       let currentEditId = null; // Store current editing ID globally

// Handle edit button click
document.addEventListener("click", async function (e) {
    if (e.target && e.target.classList.contains("btn-edit")) {
        const id = e.target.getAttribute("data-id");
        currentEditId = id; // Save it for use in the submit handler

        const modal = new bootstrap.Modal(document.getElementById("editModal"));
        modal.show();

        const apiUrl = `${APP_URL}/api/videos/category/${id}`;

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

            const responseData = await response.json();

            if (responseData.status.statusType === "S") {
                const { category_name } = responseData.data;
                document.getElementById("editId").value = id;
                document.getElementById("editCategoryName").value = category_name;
            } else {
                Swal.fire("Error", responseData.status.errorMessage, "error");
            }
        } catch (error) {
            console.error("Fetch Error:", error);
            Swal.fire("Error", "เกิดข้อผิดพลาดในการดึงข้อมูล", "error");
        }
    }
});

// Handle edit form submission (once)
document.getElementById("editForm").addEventListener("submit", async function (e) {
    e.preventDefault();

    const categoryName = document.getElementById("editCategoryName").value;
    const apiUrl = `${APP_URL}/api/videos/category/${currentEditId}`;

    try {
        const response = await fetch(apiUrl, {
            method: "PUT",
            headers: {
                "Content-Type": "application/json",
                "Authorization": `Bearer ${token}`,
            },
            body: JSON.stringify({ category_name: categoryName }),
        });

        const responseData = await response.json();

           if (responseData.status.statusType === "S") {
    Swal.fire("สำเร็จ", "แก้ไขหมวดหมู่เรียบร้อยแล้ว", "success").then(() => {
        bootstrap.Modal.getInstance(document.getElementById("editModal")).hide();
        window.location.href = `${APP_URL}/video_category`; // 🔁 Redirect here
    });
}else {
            Swal.fire("Error", responseData.status.errorMessage, "error");
        }
    } catch (error) {
        console.error("Submit Error:", error);
        Swal.fire("Error", "เกิดข้อผิดพลาดในการส่งข้อมูล", "error");
    }
});
        // FETCH CONTENT
        async function fetchContent() {
            try {
                const apiUrl = `${APP_URL}/api/videos/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 = "";

                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>${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><button class="dropdown-item btn-edit" data-id="${item.id}">Edit</button></li>
                                </ul>
                            </div>
                        </td>
                    `;
                    tableContent.appendChild(row);
                });

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

        // CHECK ALL FUNCTION
        document.getElementById("checkAll").addEventListener("change", function () {
            document.querySelectorAll(".checkItem").forEach((checkbox) => {
                checkbox.checked = this.checked;
            });
        });

        // DELETE SELECTED
        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 = `${APP_URL}/api/videos/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((res) => res.ok);

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

        // Initial content load
        await fetchContent();
    });
</script>



@endsection