{{-- @extends('layouts.app')

@section('title', 'Courses List ')

@section('content') --}}
@extends('layouts.app')
@section('title', __('lang_v1.my_profile'))

@section('content')
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">

<section class="no-print">
    <nav
        class="navbar-default tw-transition-all tw-duration-5000 tw-shrink-0 tw-rounded-2xl tw-m-[16px] tw-border-2 !tw-bg-white">
        <div class="container-fluid">
            <!-- Brand and toggle get grouped for better mobile display -->
            <div class="navbar-header">
                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse"
                    data-target="#bs-example-navbar-collapse-1" aria-expanded="false"
                    style="margin-top: 3px; margin-right: 3px;">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a class="navbar-brand" href="{{action([App\Http\Controllers\CourseController::class, 'index'])}}"><i
                        class="fas fa fa-broadcast-tower"></i> Driving School</a>
            </div>

            <!-- Collect the nav links, forms, and other content for toggling -->
            <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                <ul class="nav navbar-nav">

                    @if(auth()->user()->can('accounting.manage_accounts'))
                    <li @if(request()->segment(2) == 'chart-of-accounts') class="active" @endif><a
                            href="{{action([App\Http\Controllers\CourseController::class, 'index'])}}"> Course</a>
                    </li>
                    @endif

                    @if(auth()->user()->can('accounting.manage_accounts'))
                    <li @if(request()->segment(2) == 'chart-of-accounts') class="active" @endif><a
                            href="{{action([App\Http\Controllers\CourseController::class, 'create'])}}">Add Course</a>
                    </li>
                    @endif

                    @if(auth()->user()->can('accounting.view_journal'))
                    <li @if(request()->segment(2) == 'journal-entry') class="active" @endif><a
                            href="{{action([App\Http\Controllers\CourseCategoryController::class, 'index'])}}">Course
                            Category</a>
                    </li>
                    @endif

                    @if(auth()->user()->can('accounting.view_transfer'))
                    <li @if(request()->segment(2) == 'transfer') class="active" @endif>
                        <a href="{{action([App\Http\Controllers\CourseCategoryController::class, 'create'])}}">
                            Add Course Category
                        </a>
                    </li>
                    @endif

                </ul>

            </div><!-- /.navbar-collapse -->
        </div><!-- /.container-fluid -->
    </nav>
</section>

    <!-- Content Header -->
    <section class="content-header">
        <h1 class="tw-text-xl md:tw-text-3xl tw-font-bold tw-text-black">
            Courses List
        </h1>
    </section>

    <!-- Main Content -->
    <section class="content">
        <div class="row">
            <div class="col-md-12">
                <div class="box box-primary">
                    <div class="box-header with-border">
                        <h3 class="box-title">All Course </h3>
                        <a href="{{ route('courses.create') }}" class="btn btn-success pull-right">
                            <i class="fa fa-plus"></i> Add Course
                        </a>
                    </div>

                    <div class="box-body">
                        <div class="table-responsive">
                            <table class="table table-bordered table-striped" id="courses_table">
                                <thead>
                                    <tr>
                                        <th>Course Name</th>
                                        <th>Course Categorty</th>
                                        <th>Course Type</th>
                                        <th>File</th>
                                        <th>Actions</th>
                                    </tr>
                                </thead>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

@endsection

@section('javascript')
    <script>
        $(document).ready(function() {
            $('#courses_table').DataTable({
                processing: true,
                serverSide: true,
                ajax: '{{ route('courses.data') }}',
                columns: [
                    {
                        data: 'course_name',
                        name: 'course_name'
                    },
                    {
                        data: 'category_name',
                        name: 'category_name'
                    },
                    {
                        data: 'course_type',
                        name: 'course_type'
                    },
                    {
                    data: 'upload_content',
                    name: 'upload_content',
                    },
                    {
                        data: 'actions',
                        name: 'actions',
                        orderable: false,
                        searchable: false
                    }
                ]
            });
        });
    </script>
@endsection


<!-- SweetAlert2 CDN -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>


<script>
    function confirmDelete(courseId) {
        if (confirm('Are you sure you want to delete this course?')) {
            document.getElementById('delete-course-form-' + courseId).submit();
        }
    }


    $(document).on('click', '.delete-btn', function() {
        var deleteUrl = $(this).data('url'); // Get delete URL
        Swal.fire({
            title: "Are you sure?",
            text: "This action cannot be undone!",
            icon: "warning",
            showCancelButton: true,
            confirmButtonColor: "#d33",
            cancelButtonColor: "#3085d6",
            confirmButtonText: "Yes, delete it!"
        }).then((result) => {
            if (result.isConfirmed) {
                $.ajax({
                    url: deleteUrl,
                    type: 'DELETE',
                    data: {
                        _token: '{{ csrf_token() }}' // Include CSRF token
                    },
                    // alert(response),
                    success: function(response) {
                        Swal.fire("Deleted!", "The course has been deleted.", "success");
                        $('#courses_table').DataTable().ajax.reload(); // Reload DataTable
                    },
                    error: function() {
                        Swal.fire("Error!", "There was an issue deleting the course.",
                            "error");
                    }
                });
            }
        });
    });
</script>