@extends('layoutsteacher.layouts')
@section('title', 'Manage Categories')
<style>
    /* Custom Styles */
    .table-container {
        background-color: #ffffff;
        padding: 20px;
        border-radius: 8px;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
        margin-top: 20px;
    }

    .table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0 12px;
    font-size: 16px;
    color: #3c3c3c;
}

.table th {
    font-weight: 600;
    color: #0D1B4C;
    font-size: 15px;
    background: none;
    border: none;
    padding-bottom: 12px;
}

.table td {
    background-color: #fff;
    padding: 16px 12px;
    vertical-align: middle;
    border-top: 1px solid #f0f0f0;
    border-bottom: 1px solid #f0f0f0;
    font-size: 15px;
    color: #5a5a89;
}

.table tr {
    transition: background 0.2s;
}

.table tr:hover td {
    /* background-color: #f9faff; */
}

    .action-btn {
        background-color: #007bff;
        color: white;
        padding: 6px 12px;
        border-radius: 4px;
        cursor: pointer;
        transition: background-color 0.3s;
    }

    .action-btn:hover {
        background-color: #0056b3;
    }

    .add-btn {
        background-color: #00b0ff;
        color: white;
        padding: 6px 12px;
        border-radius: 4px;
        border: none;
        transition: background-color 0.3s ease;
        cursor: pointer;
    }

    .add-btn:hover {
        background-color: #0091cc;
    }

    .pagination {
        display: flex;
        justify-content: center;
        padding: 10px;
        list-style-type: none;
    }

    .pagination li {
        margin: 0 5px;
    }

    .pagination a {
        color: #007bff;
        text-decoration: none;
        padding: 6px 12px;
        border-radius: 4px;
        border: 1px solid #ddd;
    }

    .pagination a:hover {
        background-color: #f1f1f1;
    }

    /* Select and Button Alignment */
    .select-category, .add-btn {
        margin-top: 15px;
        margin-bottom: 15px;
    }
/* Modal container */
.modal-content {
    border-radius: 16px !important;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.08) !important;
    border: none !important;
    padding: 24px 32px !important;
    background-color: #fff !important;
}

/* Modal header */
.modal-header {
    border-bottom: none !important;
    padding-bottom: 0 !important;
    align-items: center !important;
}

.modal-title {
    font-size: 20px !important;
    font-weight: 700 !important;
    color: #0D1B4C !important;
}

/* Close button */
.btn-close {
    font-size: 1.2rem !important;
    opacity: 1 !important;
}

/* Modal body */
.modal-body {
    padding-top: 0 !important;
}

/* Label */
.form-label {
    font-weight: 600 !important;
    color: #0D1B4C !important;
    margin-bottom: 8px !important;
}

/* Input field */
.form-control {
    border-radius: 8px !important;
    border: 1px solid #D6E4EC !important;
    padding: 12px 16px !important;
    font-size: 16px !important;
    color: #333 !important;
    transition: border-color 0.2s !important;
}

.form-control::placeholder {
    color: #AAB8C2 !important;
}

.form-control:focus {
    border-color: #00B0FF !important;
    box-shadow: none !important;
}

/* Modal footer */
.modal-footer {
    border-top: none !important;
    display: flex !important;
    justify-content: center !important;
    gap: 16px !important;
    padding-top: 24px !important;
}

/* Cancel button */
.btn-secondary {
    border: 2px solid #00B0FF !important;
    color: #00B0FF !important;
    background-color: #fff !important;
    border-radius: 12px !important;
    padding: 10px 24px !important;
    font-weight: bold !important;
    transition: 0.3s ease !important;
}

.btn-secondary:hover {
    background-color: #E0F7FF !important;
    color: #008ECF !important;
    border-color: #008ECF !important;
}

/* Save button */
.btn-primary {
    background-color: #00B0FF !important;
    color: #fff !important;
    border: none !important;
    border-radius: 12px !important;
    padding: 10px 32px !important;
    font-weight: bold !important;
    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.05) !important;
    transition: 0.3s ease !important;
}

.btn-primary:hover {
    background-color: #0095dd !important;
}
/* Action Link */
.action-link {
    color: #5a5a89; /* dark gray-blue or adjust to your theme */
    text-decoration: underline;
    font-weight: 500;
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    font-size: 16px;
}

.action-link:hover {
    color: #007bff; /* blue on hover */
}

/* Action Menu */
.action-menu {
    margin-top: 5px;
    background-color: #fff;
    border: 1px solid #ddd;
    border-radius: 5px;
    padding: 5px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    position: absolute;
    z-index: 1000;
}

.action-menu .action-link {
    display: block;
    padding: 5px 10px;
    color: #007bff;
    text-decoration: none;
    font-size: 14px;
}

.action-menu .action-link:hover {
    background-color: #f0f0f0;
    color: #0056b3;
}

.action-menu .action-link:active {
    background-color: #e0e0e0;
    color: #004085;
}



</style>
<!-- Add this before any other script files -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>


@section('content')
    <div class="table-container">
        <h3>หมวดหมู่</h3>
        <div class="d-flex justify-content-end align-items-center">
            <!-- <div class="px-3">
                <select class="select-category">
                    <option>เลือกหมวดหมู่</option>
                    @foreach($categories as $category)
                        <option value="{{ $category->id }}">{{ $category->name }}</option>
                    @endforeach
                </select>
            </div> -->
        <button class="add-btn px-3" data-bs-toggle="modal" data-bs-target="#addCategoryModal">เพิ่มหมวดหมู่</button>
    </div>
        @if($categories->isEmpty())
        <table class="table table-borderless align-middle mb-0">
                <thead>
                    <tr>
                        <th>หมวดหมู่</th>
                        <th>คอร์ส</th>
                        <th>แก้ไข</th>
                    </tr>
                </thead>
                <tbody>
                   
                </tbody>
            </table>
            <p class="text-muted text-center">ไม่มีหมวดหมู่ในขณะนี้</p>
        @else
            <!-- <div class="d-flex justify-content-between align-items-center">
                <select class="select-category">
                    <option>เลือกหมวดหมู่</option>
                    @foreach($categories as $category)
                        <option value="{{ $category->id }}">{{ $category->name }}</option>
                    @endforeach
                </select>
                <button class="add-btn px-3" data-bs-toggle="modal" data-bs-target="#addCategoryModal">เพิ่มหมวดหมู่</button>
            </div> -->

            <table class="table table-borderless align-middle mb-0">
                <thead>
                    <tr>
                        <th>หมวดหมู่</th>
                        <th>คอร์ส</th>
                        <th>แก้ไข</th>
                    </tr>
                </thead>
                <tbody>
                    @foreach($categories as $category)
                        <tr>
                            <td>{{ $category->name }}</td>
                            <td>{{ $category->course_count }} คอร์ส</td>
                            <td>
                                <!-- Add the category ID and name as data attributes for the edit button -->
                               <a href="javascript:void(0);" 
                                    class="action-link" 
                                    data-id="{{ $category->id }}" 
                                    data-name="{{ $category->name }}" 
                                    onclick="toggleActionMenu(this)">
                                    แก้ไข
                                </a>
                                <div class="action-menu" style="display: none;">
                                    <a href="javascript:void(0);" 
                                    class="action-link" 
                                    data-id="{{ $category->id }}" 
                                    data-name="{{ $category->name }}" 
                                    onclick="editCategory(this)">แก้ไข</a>
                                    <a href="javascript:void(0);" 
                                    class="action-link" 
                                    data-id="{{ $category->id }}" 
                                    data-name="{{ $category->name }}" 
                                    onclick="deleteCategory(this)">ลบ</a>
                                </div>

                            </td>
                        </tr>
                    @endforeach
                </tbody>
            </table>

            <!-- Pagination -->
            <ul class="pagination">
                {{ $categories->links() }}
            </ul>
        @endif
    </div>
    <!-- <div class="modal fade" id="addCategoryModal" tabindex="-1" aria-labelledby="addCategoryModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered" style="max-width:600px;">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="addCategoryModalLabel">เพิ่มหมวดหมู่</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body pt-5">
                    <form action="" method="POST">
                        @csrf
                        <div class="mb-3">
                            <label for="category_name" class="form-label">ชื่อหมวดหมู่</label>
                            <input type="text" class="form-control" id="category_name" name="category_name" required>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">ยกเลิก</button>
                            <button type="submit" class="btn btn-primary">บันทึก</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div> -->
    <div class="modal fade" id="addCategoryModal" tabindex="-1" aria-labelledby="addCategoryModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered" style="max-width:600px;">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="addCategoryModalLabel">เพิ่มหมวดหมู่</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body pt-5">
                    <form id="categoryForm" method="POST" enctype="multipart/form-data">
                        <!-- @csrf -->
                         <input type="hidden" id="category_id" name="id"> 
                        <div class="mb-3">
                            <label for="category_name" class="form-label">ชื่อหมวดหมู่</label>
                            <input type="text" class="form-control" id="category_name" name="name" required>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">ยกเลิก</button>
                            <button type="submit" class="btn btn-primary">บันทึก</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
    <!-- Delete Confirmation Modal -->
    <div class="modal fade" id="deleteCategoryModal" tabindex="-1" aria-labelledby="deleteCategoryModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered" style="max-width:600px;">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title text-center" id="deleteCategoryModalLabel"></h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <h3 class="text-center">คุณยืนยันที่จะลบหมวดหมู่นี้หรือไม่?</h3>
                    <p class="text-center">โปรดทราบว่าเมื่อดำเนินการ คอร์สทั้งหมดที่อยู่ในหมวดหมู่นี้จะถูกลบออกอย่างถาวร</p>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">ยกเลิก</button>
                    <button type="button" class="btn btn-primary" id="confirmDeleteButton">ยืนยัน</button>
                </div>
            </div>
        </div>
    </div>


@endsection

@section('scripts')
<script>
    const API_BASE_URL = "{{ env('APP_URL') }}/api";
    function toggleActionMenu(button) {
        const menu = button.nextElementSibling; // Get the action menu (next sibling of the button)

        // Toggle the visibility of the action menu
        if (menu.style.display === "none" || menu.style.display === "") {
            menu.style.display = "block";  // Show the menu
        } else {
            menu.style.display = "none";   // Hide the menu
        }
    }

    function editCategory(button) {
        const categoryId = button.getAttribute('data-id');
        const categoryName = button.getAttribute('data-name');
        console.log("Editing category:", categoryId, categoryName);
        // Open the edit modal (optional: pre-fill form with the category data)
        document.getElementById('category_id').value = categoryId;
        document.getElementById('category_name').value = categoryName;
        $('#addCategoryModal').modal('show'); // Show the modal using Bootstrap
    }

    function deleteCategory(button) {
        const categoryId = button.getAttribute('data-id');
        const categoryName = button.getAttribute('data-name');

        // Set the category ID on the confirm button so we can use it to delete the category
        document.getElementById('confirmDeleteButton').setAttribute('data-id', categoryId);
        document.getElementById('confirmDeleteButton').setAttribute('data-name', categoryName);

        // Open the delete confirmation modal
        $('#deleteCategoryModal').modal('show');
    }
    
    document.getElementById('confirmDeleteButton').addEventListener('click', function() {
        const categoryId = this.getAttribute('data-id');
        const categoryName = this.getAttribute('data-name');

        // Perform the delete operation (AJAX request)
        fetch(`${API_BASE_URL}/categories/${categoryId}`, {
            method: 'DELETE',
            headers: {
                // 'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content, // CSRF token for protection
                'Accept': 'application/json'
            }
        })
        .then(response => response.json())
        .then(data => {
            if (data.status === 'deleted') {
                alert(data.message); // Show success message
                location.reload(); // Reload the page to reflect the changes
            }
        })
        .catch(error => console.error('Error:', error));

        // Close the modal
        $('#deleteCategoryModal').modal('hide');
    });
    document.addEventListener('click', function(event) {
        if (!event.target.closest('.action-link')) {
            // If the clicked target is not within the action button or menu, close the menu
            const menus = document.querySelectorAll('.action-menu');
            menus.forEach(menu => {
                menu.style.display = 'none';
            });
        }
    });

    function editCategory(button) {
        // Get the category data from the clicked link
        const categoryId = button.getAttribute('data-id');
        const categoryName = button.getAttribute('data-name');

        // Set the form data in the modal
        document.getElementById('category_id').value = categoryId;
        document.getElementById('category_name').value = categoryName;

        // Show the modal (using Bootstrap modal, change if you're using something else)
        $('#addCategoryModal').modal('show');
    }
const teacherToken = "{{ session('teacher_token') }}";
    document.getElementById('categoryForm').addEventListener('submit', function(event) {
        event.preventDefault(); // Prevent the form from submitting normally

        let formData = new FormData(this);  // Capture the form data

        // Sending the form data via AJAX
        fetch(`${API_BASE_URL}/categories`, { // The route to the store method
            method: 'POST',
            body: formData,
            headers: {
                'Authorization': `Bearer ${teacherToken}`
            }
        })
        .then(response => response.json())
        .then(data => {
            if (data.status === 'created') {
                alert('Category created successfully!');
                // Close the modal
                 location.reload(); 
                $('#addCategoryModal').modal('hide');
            } else if (data.status === 'updated') {
                alert('Category updated successfully!');
                 location.reload(); 
                $('#addCategoryModal').modal('hide');
            }
        })
        .catch(error => {
            console.error('Error:', error);
        });
    });


    // You can add your JavaScript or JQuery code for interactivity here.
</script>
@endsection