@extends('layouts.app') <!-- Extending the master layout -->

@section('content') <!-- Defining the content section -->
<div class="page-container">
<div class="row">
                    <div class="col-12">
                        <div class="page-title-head d-flex align-items-sm-center flex-sm-row flex-column">
                            <div class="flex-grow-1">
                                <h4 class="fs-18 text-uppercase fw-bold m-0">Course Categories</h4>
                            </div>
                          
                        </div><!-- end card header -->
                    </div>
                    <!--end col-->
                </div> <!-- end row-->
                <div class="row">
                    <div class="col-xl-12">
                        <div class="card">
                            <div class="card-header border-bottom border-dashed d-flex align-items-center">
                                <h4 class="header-title">All Course Categories</h4>
                            </div>
                            <!-- end card header -->
                             <!-- Success Message -->
                        @if (session('success'))
                            <div class="alert alert-success alert-dismissible fade show col-xl-6" role="alert">
                                {{ session('success') }}
                                <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
                            </div>
                        @endif

                            <div class="card-body">
                            <div class="d-flex flex-wrap gap-2">
                                    <button type="button" class="btn btn-outline-primary"  data-bs-toggle="modal" data-bs-target="#top-modal">Add Course Category</button>
                                </div>
                                <div class="table-responsive-sm">
                    <table class="table mb-0">
                        <thead>
                            <tr>
                                <th>Name</th>
                                <th>Active?</th>
                            </tr>
                        </thead>
                        <tbody>
                         @if($categories->isEmpty())
                            <tr>
                                <td colspan="2" class="text-center">No categories found.</td>
                            </tr>
                        @endif   
                        @foreach($categories as $category)
                            <tr>
                                <td>{{ $category->category_name }}</td>
                                <td>
                                    <!-- Edit Button -->
                                    <button type="button" class="btn btn-sm btn-warning" 
                                            data-bs-toggle="modal" 
                                            data-bs-target="#top-modal" 
                                            onclick="editCategory('{{ $category->id }}', '{{ $category->category_name }}')">
                                        Edit
                                    </button>
                                    
                                    <!-- Delete Button -->
                                    <form action="{{ route('course.deletecategory', $category->id) }}" method="POST" style="display:inline-block;">
                                        @csrf
                                        @method('DELETE')
                                        <button type="submit" class="btn btn-sm btn-danger" onclick="return confirm('Are you sure you want to delete this category?')">Delete</button>
                                    </form>
                                </td>
                            </tr>
                            @endforeach
                        </tbody>
                    </table>
                                </div> <!-- end table-responsive-->
                            </div> <!-- end card body-->
                        </div> <!-- end card -->
                    </div><!-- end col-->

               
                </div>
</div>


<div id="top-modal" class="modal fade" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog modal-top">
        <form id="category-form" action="{{ route('course.addcategory') }}" method="POST" enctype="multipart/form-data">
            @csrf
            <div class="modal-content">
                <div class="modal-header">
                    <h4 class="modal-title" id="topModalLabel">Add Course Category</h4>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <div class="row">
                        <div class="col-lg-12">
                            <div class="mb-3">
                                <label for="simpleinput" class="form-label">Category Name</label>
                                <input type="text" id="category_name" name="category_name" class="form-control">
                            </div>
                        </div> <!-- end col -->
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                    <button type="submit" class="btn btn-primary">Save changes</button>
                </div>
            </div><!-- /.modal-content -->
        </form>
    </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

    <script>
    function editCategory(id, name) {
        // Update the form action for editing
        const form = document.getElementById('category-form');
        form.action = `/course/editcategory/${id}`;
        
        // Populate the modal fields
        document.getElementById('category_name').value = name;

        // Update the modal title
        document.getElementById('topModalLabel').innerText = 'Edit Course Category';
    }

    // Reset modal for adding a new category
    document.getElementById('top-modal').addEventListener('hidden.bs.modal', function () {
        const form = document.getElementById('category-form');
        form.action = "{{ route('course.addcategory') }}";
        form.reset();
        document.getElementById('topModalLabel').innerText = 'Add Course Category';
    });
</script>
@endsection