@extends('layouts.admin.app')
@section('title', __('trans.lecture.title'))


@section('datatableCSS')
    @include('layouts.admin.datatables-css')
@endsection

@section('datatablesJS')
    @include('layouts.admin.datatables-js')
@endsection

@section('content')

    <div class="card">
        <h5 class="card-header">@yield('title')</h5>
        <div class="card-datatable">
            <table class="dt-complex-header table table-bordered table-hover table-responsive">
                <thead>
                    <tr>
                        <th class="exp-col">{{ __('trans.id') }}</th>
                        <th class="exp-col">{{ __('trans.lecture.name') }}</th>
                        <th class="exp-col">{{ __('trans.lecture.unit_id') }}</th>
                        <th class="exp-col">{{ __('trans.lecture.chapter_id') }}</th>
                        <th class="exp-col">{{ __('trans.lecture.course_id') }}</th>
                        <th class="exp-col">{{ __('trans.created_at') }}</th>
                        <th>{{ __('trans.actions') }}</th>
                    </tr>
                </thead>
                <tfoot>
                    <tr>
                        <th class="exp-col">{{ __('trans.id') }}</th>
                        <th class="exp-col">{{ __('trans.lecture.name') }}</th>
                        <th class="exp-col">{{ __('trans.lecture.unit_id') }}</th>
                        <th class="exp-col">{{ __('trans.lecture.chapter_id') }}</th>
                        <th class="exp-col">{{ __('trans.lecture.course_id') }}</th>
                        <th class="exp-col">{{ __('trans.created_at') }}</th>
                        <th>{{ __('trans.actions') }}</th>
                    </tr>
                </tfoot>
            </table>
        </div>
    </div>


@endsection

@section('js')
    <script>
        $(document).ready(function() {

            const routeConfig = {
                lecturesBaseURL: "{{ url('admin/lectures') }}",
                examsBaseURL: "{{ url('admin/exams') }}",
                editLectureText: "{{ __('trans.lecture.edit_lecture') }}",
                editExamText: "{{ __('trans.exam.edit_exam') }}",
                addExamText: "{{ __('trans.exam.add_new') }}",
                deleteLectureText: "{{ __('trans.lecture.delete_lecture') }}",
                CSRFToken: "{{ csrf_token() }}",

            };
            var table = $('.table').DataTable({
                processing: true,
                serverSide: true,
                orderCellsTop: true,
                // scrollY: '400px',
                scrollCollapse: true,
                order: [
                    [0, 'desc']
                ],
                lengthMenu: lengthMenu("{{ __('trans.all') }}"),
                language: getlang(),
                dom: dom(),
                buttons: buttons("{{ __('trans.lecture.add_new') }}",
                    "{{ url('admin/lectures/create') }}?unit_id={{ request('unit_id') }}"),
                ajax: window.location.href,
                columns: [{
                        data: 'id'
                    },
                    {
                        data: 'title'
                    },
                    {
                        data: 'unit.title',
                    },
                    {
                        data: 'chapter.title',
                    },
                    {
                        data: 'course.title',
                    },
                    {
                        data: 'created_at'
                    },
                ],
                columnDefs: [{
                    targets: 6,
                    render: function(data, type, row, meta) {
                        if (row.exam !== null) {

                            return `<div class="dropdown">
                                
                                <button class="btn btn-text-secondary rounded-pill text-muted border-0 p-2 me-n1" type="button"
                                id="actionDropdown" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                <i class="ti ti-dots-vertical ti-md text-muted"></i>
                                </button>
                                <div class="dropdown-menu dropdown-menu-end" aria-labelledby="actionDropdown">
                                    
                            <a class="dropdown-item" href="/admin/lecture/${row.id}/exam"><i class="fa-solid fa-pen text-info me-2"></i>${routeConfig.editExamText}</a>

                            <a class="dropdown-item" href="${routeConfig.lecturesBaseURL}/${row.id}/edit" class=""><i class="fa-solid fa-pen-to-square text-info me-2"></i><span>${routeConfig.editLectureText}</span></a>
                            
                            <form action="${routeConfig.lecturesBaseURL}/${row.id}" method="post">
                                <input type="hidden" name="_token" value="${routeConfig.CSRFToken}">
                                <input type="hidden" name="_method" value="DELETE">
                                <button class="dropdown-item btn-delete"><i class="fa-solid fa-trash text-danger me-2"></i><span>${routeConfig.deleteLectureText}</span></button>
                                </form>
                                
                                </div>
                                </div>`;
                        } else {

                            return `<div class="dropdown">
                                
                                <button class="btn btn-text-secondary rounded-pill text-muted border-0 p-2 me-n1" type="button"
                                id="actionDropdown" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                <i class="ti ti-dots-vertical ti-md text-muted"></i>
                                </button>
                                <div class="dropdown-menu dropdown-menu-end" aria-labelledby="actionDropdown">
                                    
                            <a class="dropdown-item" href="/admin/lecture/${row.id}/exam"><i class="fa-solid fa-plus text-success me-2"></i>${routeConfig.addExamText}</a>

                            <a class="dropdown-item" href="${routeConfig.lecturesBaseURL}/${row.id}/edit" class=""><i class="fa-solid fa-pen-to-square text-info me-2"></i><span>${routeConfig.editLectureText}</span></a>
                            
                            <form action="${routeConfig.lecturesBaseURL}/${row.id}" method="post">
                                <input type="hidden" name="_token" value="${routeConfig.CSRFToken}">
                                <input type="hidden" name="_method" value="DELETE">
                                <button class="dropdown-item btn-delete"><i class="fa-solid fa-trash text-danger me-2"></i><span>${routeConfig.deleteLectureText}</span></button>
                                </form>
                                
                                </div>
                                </div>`;
                        }
                    }
                }, ],

                initComplete: function() {
                    this.api().columns().every(function() {
                        var that = this;
                        $('input', this.footer()).on('keyup change input clear', function() {
                            if (that.search() !== this.value) {
                                that.search(this.value).draw();
                            }
                        });
                    });
                },
            });

            $('.table tfoot th').each(function() {
                var title = $(this).text();
                var dataName = $(this).data('name');

                if ($(this).hasClass('exp-col')) {
                    $(this).html('<input type="text" class="form-control ' + dataName +
                        '" placeholder="{{ __('trans.search') }}: ' + title + '" />');
                }
            });
        });
    </script>
@endsection