@extends('layouts.admin.app')
@section('title', __('trans.unit.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.unit.name') }}</th>
                        <th class="exp-col">{{ __('trans.unit.chapter_id') }}</th>
                        <th class="exp-col">{{ __('trans.unit.course_id') }}</th>
                        <th class="exp-col">{{ __('trans.unit.category_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.unit.name') }}</th>
                        <th class="exp-col">{{ __('trans.unit.chapter_id') }}</th>
                        <th class="exp-col">{{ __('trans.unit.course_id') }}</th>
                        <th class="exp-col">{{ __('trans.unit.category_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 = {
                lecturesIndex: "{{ url('admin/lectures') }}",
                unitsBaseURL: "{{ url('admin/units') }}",
                lecturesTitle: "{{ __('trans.lecture.title') }}",
                editText: "{{ __('trans.edit') }}",
                deleteText: "{{ __('trans.delete') }}",
                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.unit.add_new') }}",
                    "{{ url('admin/units/create') }}?chapter_id={{ request('chapter_id') }}"),
                ajax: window.location.href,
                columns: [{
                        data: 'id'
                    },
                    {
                        data: 'title'
                    },
                    {
                        data: 'chapter.title',
                    },
                    {
                        data: 'course.title',
                    },
                    {
                        data: 'category.name',
                    },
                    {
                        data: 'created_at'
                    },
                ],
                columnDefs: [{
                    targets: 6,
                    render: function(data, type, row, meta) {
                        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="${routeConfig.lecturesIndex}?unit_id=${row.id}"><i class="fa-solid fa-arrow-right text-success me-2"></i>${routeConfig.lecturesTitle}</a>
                                        <a class="dropdown-item" href="${routeConfig.unitsBaseURL}/${row.id}/edit" class=""><i class="fa-solid fa-pen-to-square text-info me-2"></i><span>${routeConfig.editText}</span></a>

                                        <form action="${routeConfig.unitsBaseURL}/${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.deleteText}</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