@extends('admin.layouts.master')

@section('title') {{__('classrooms.classrooms')}} @endsection
@section('css')

    <link rel="stylesheet" href="{{asset('backend/assets/vendor/libs/datatables-bs5/datatables.bootstrap5.css')}}" />
    <link rel="stylesheet" href="{{asset('backend/assets/vendor/libs/datatables-responsive-bs5/responsive.bootstrap5.css')}}" />
    <link rel="stylesheet" href="{{asset('backend/assets/vendor/libs/datatables-buttons-bs5/buttons.bootstrap5.css')}}" />

@endsection
@section('content')


    <div class="container-xxl flex-grow-1 container-p-y">

        <!-- Products List Table -->
        <div class="card">
            <div class="card-header border-bottom">
                <h5 class="card-title mb-3">{{__('classrooms.classrooms')}}</h5>
            </div>
            <div class="card-datatable table-responsive">
                <table class="datatables-records table">
                    <thead class="border-top">
                    <tr>
                        <th>{{__('general.fields.name')}}</th>
                        <th>{{__('general.actions.control')}}</th>
                    </tr>
                    </thead>
                </table>
            </div>
            <!-- Offcanvas to add new Expense -->
            <div
                    class="offcanvas offcanvas-end"
                    tabindex="-1"
                    id="offcanvasAddRecord"
                    aria-labelledby="offcanvasAddRecordLabel">
                <div class="offcanvas-header">
                    <h5 id="offcanvasAddRecordLabel" class="offcanvas-title"> {{__('general.actions.add')}} {{__('classrooms.classrooms')}}</h5>
                    <button
                            type="button"
                            class="btn-close text-reset"
                            data-bs-dismiss="offcanvas"
                            aria-label="Close"></button>
                </div>
                <div class="offcanvas-body mx-0 flex-grow-0 pt-0 h-100">
                    <form class="add-new-Brand pt-0 form-block" id="addNewRecordForm"  method="POST" action="{{route('admin.classrooms.store')}}">
                        @csrf
                        <div class="mb-3">
                            <label class="form-label" for="name">{{__('general.fields.name')}}</label>
                            <input
                                    type="text"
                                    class="form-control"
                                    placeholder="{{__('general.fields.name')}}"
                                    name="name"
                                    id="name"
                                    required
                                    aria-label="" />
                        </div>

                        <div class="mb-3">
                            <label class="form-label" for="description">{{__('general.fields.description')}}</label>
                            <textarea name="description" class="form-control" id="description"></textarea>
                        </div>

                        <button type="submit" class="btn btn-primary me-sm-3 me-1 data-submit btn-form-block-spinner">{{__('general.actions.submit')}} </button>
                        <button type="reset" class="btn btn-label-secondary" data-bs-dismiss="offcanvas">{{__('general.actions.cancel')}} </button>
                    </form>
                </div>
            </div>
            <!-- Offcanvas to add new Expense -->
            <div
                    class="offcanvas offcanvas-end"
                    tabindex="-1"
                    id="offcanvasUpdateRecord"
                    aria-labelledby="offcanvasUpdateRecordLabel">
                <div class="offcanvas-header">
                    <h5 id="offcanvasUpdateRecordLabel" class="offcanvas-title">{{__('general.actions.edit')}} {{__('classrooms.classrooms')}} </h5>
                    <button
                            type="button"
                            class="btn-close text-reset"
                            data-bs-dismiss="offcanvas"
                            aria-label="Close"></button>
                </div>
                <div class="offcanvas-body mx-0 flex-grow-0 pt-0 h-100" id="updateRecordDiv">

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

@endsection
@section('script')
    <script src="{{asset('backend/assets/vendor/libs/datatables-bs5/datatables-bootstrap5.js')}}"></script>


    <script>
        var table = $('.datatables-records').DataTable({

            processing: true,
            serverSide: true,

            ajax: "{{ route('admin.classrooms') }}",
            columns: [

                { data: 'name', name: 'name' },
                { data: 'action', name: 'action', orderable: false, searchable: false }

            ],
            order: [[1, 'desc']],
            dom:
                '<"row me-2"' +
                '<"col-md-2"<"me-3"l>>' +
                '<"col-md-10"<"dt-action-buttons text-xl-end text-lg-start text-md-end text-start d-flex align-items-center justify-content-end flex-md-row flex-column mb-3 mb-md-0"fB>>' +
                '>t' +
                '<"row mx-2"' +
                '<"col-sm-12 col-md-6"i>' +
                '<"col-sm-12 col-md-6"p>' +
                '>',
            language: {
                sLengthMenu: '_MENU_',
                search: '',
                searchPlaceholder: '{{__('general.search')}}...'
            },
            // Buttons with Dropdown
            buttons: [
                {
                    extend: 'collection',
                    className: 'btn btn-label-secondary dropdown-toggle mx-3 waves-effect waves-light',
                    text: '<i class="ti ti-screen-share me-1 ti-xs"></i>{{__('general.actions.export')}}',
                    buttons: [
                        {
                            extend: 'print',
                            text: '<i class="ti ti-printer me-2" ></i>Print',
                            className: 'dropdown-item',
                        },
                        {
                            extend: 'csv',
                            text: '<i class="ti ti-file-text me-2" ></i>Csv',
                            className: 'dropdown-item',
                        },
                        {
                            extend: 'excel',
                            text: '<i class="ti ti-file-spreadsheet me-2"></i>Excel',
                            className: 'dropdown-item',
                        },
                        {
                            extend: 'pdf',
                            text: '<i class="ti ti-file-code-2 me-2"></i>Pdf',
                            className: 'dropdown-item',
                        },
                        {
                            extend: 'copy',
                            text: '<i class="ti ti-copy me-2" ></i>Copy',
                            className: 'dropdown-item',
                        }
                    ]
                },
                {
                    text: '<i class="ti ti-plus me-0 me-sm-1 ti-xs"></i><span class="d-none d-sm-inline-block">{{__('general.actions.add')}} {{__('classrooms.classrooms')}}</span>',
                    className: 'add-new btn btn-primary waves-effect waves-light',
                    attr: {
                        'data-bs-toggle': 'offcanvas',
                        'data-bs-target': '#offcanvasAddRecord'
                    }
                }
            ],

            aLengthMenu: [
                [10, 25, 50, 100, 200, -1],
                [10, 25, 50, 100, 200, "All"]
            ],

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

    </script>
@endsection