@extends('backend.layout.app')

@section('content')
    <div class="page-content">
        <div class="row">
            <div class="col-md-12">

                <div class="card">
                    <div class="card-header bg-white">

                        <div class="row row-cols-auto g-3 justify-content-between align-items-center mb-3">
                            <form class="col d-flex align-items-center  gap-3">
                                <h5 class="mb-0 text-nowrap fw-semibold">Filter</h5>

                                <select name="course_id" class="form-select form-select-sm select2" style="width: 400px;"
                                    id="courseSelect">
                                    <option value="" disabled selected >Select Course </option>
                                    @foreach ($courses as $course)
                                        <option value="{{$course->id}}" {{ request('course_id') == $course->id ? 'selected' :'' }} >{{ $course->title }} </option>
                                    @endforeach
                                </select>
                                         <a href="{{route('admin.module.index')}}" class="btn btn-primary btn-sm">Reset</a>

                            </form>
                            <a href="{{ route('admin.module.create') }}" class="btn btn-success px-3 btn-sm">
                                <i class="bi bi-plus-circle me-1"></i> Add New Module
                            </a>
                        </div>


                    </div>

                    <div class="card-body">
                        <div id="datatable_internal_wrapper" class="dataTables_wrapper dt-bootstrap5 no-footer">
                            <div class="row">
                                <div class="col-sm-12">
                                    <table class="table table-striped my-table2 dataTable no-footer yajraDataDelete"
                                        id="moduleTable">
                                        <thead>
                                            <tr>
                                                <th>#ID</th>
                                                <th style="max-width: 250px">Module Title</th>
                                                <th>Course</th>
                                                <th>Status</th>
                                                  <th>Module Content</th>
                                                <th width="180">Actions</th>
                                            </tr>
                                        </thead>
                                        <tbody>

                                        </tbody>

                                    </table>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    @push('js')
        <script>
            $(function() {
                let table = $('#moduleTable').DataTable({
                    processing: true,
                    serverSide: true,
                    pageLength: 25,
                    ajax: {
                        url: "{{ route('admin.module.index') }}",
                        data: function(d) {
                            d.course_id = $('#courseSelect').val(); 
                        }
                    },
                    columns: [{
                            data: 'DT_RowIndex',
                            name: 'DT_RowIndex'
                        },
                        {
                            data: 'title',
                            name: 'title'
                        },
                        {
                            data: 'course_title',
                            name: 'course.title'
                        },
                        {
                            data: 'status',
                            name: 'status'
                        },
                         {
                            data: 'module_content',
                            name: 'module_content'
                        },
                        {
                            data: 'action',
                            name: 'action',
                            orderable: true,
                            searchable: true
                        },
                    ],
                });

                $('#courseSelect').on('change', function() {
                    table.ajax.reload();
                });

            });



          function updateStatus(el) {
            var status = el.value;
            var id = el.getAttribute('data-id');

            Swal.fire({
                title: 'Are you sure?',
                html: 'This action will update the status to ' + (el.value == 1 ?
                    '<strong style="color:green">Active</strong>' :
                    '<strong style="color:red">Inactive</strong>') + '.',
                icon: 'warning',
                showCancelButton: true,
                confirmButtonText: 'Yes, update it!',
                cancelButtonText: 'No, cancel'
            }).then((result) => {
                if (result.isConfirmed) {

                    // Confirm করলে loader দেখাবে
                    Swal.fire({
                        title: 'Updating...',
                        text: 'Please wait while the status is being updated.',
                        allowOutsideClick: false,
                        didOpen: () => {
                            Swal.showLoading();
                        }
                    });

                    $.ajax({
                        url: "{{ route('admin.module.update-status') }}",
                        method: 'PATCH',
                        data: {
                            _token: "{{ csrf_token() }}",
                            id: id,
                            status: status
                        },
                        success: function(response) {
                            Swal.close();
                            if (response.status) {
                                Swal.fire({
                                    icon: 'success',
                                    title: 'Success!',
                                    text: response.message,
                                    timer: 4000,
                                    showConfirmButton: true
                                });

                                // Style update
                                if (status == 1) {
                                    el.style.backgroundColor = 'rgb(222 248 251)';
                                    el.style.color = '#166534';
                                } else {
                                    el.style.backgroundColor = '#FEF2F2';
                                    el.style.color = '#B91C1C';
                                }
                            }
                        },
                        error: function(xhr) {
                            Swal.close();
                            Swal.fire({
                                icon: 'error',
                                title: 'Error!',
                                text: xhr.responseJSON?.message ||
                                    'Something Went Wrong'
                            });
                        }
                    });
                }else{
                  el.value = (status == "1") ? "0" : "1";
                }
            });
        }
        </script>
    @endpush
@endsection