@extends('layouts.app')

@section('content')
    <div class="container-fluid py-4">
        <div class="row">
            <div class="col-12">
                <div class="card mb-4">
                    <div class="card-header pb-0 d-flex justify-content-between">
                        <h6>@lang('Blog Categories')</h6>
                        <a href="{{ route('blog_categories.create') }}" class="btn btn-info btn-sm">
                            <i class="fa fa-plus-circle"></i>
                            Add
                        </a>
                    </div>
                    <div class="card-body px-0 pt-0 pb-2">
                        <div class="table-responsive p-0">
                            <table class="table align-items-center justify-content-center mb-0 text-inputs-searching " id="datatable_ajax">
                                <thead>
                                    <tr>
                                        <th class="text-uppercase text-secondary text-center">
                                            #
                                        </th>
                                        <th
                                            class="text-uppercase text-secondary text-xxs font-weight-bolder text-center ps-2">
                                            Name
                                        </th>
                                        <th
                                            class="text-uppercase text-secondary text-xxs font-weight-bolder text-center text-center ps-2">
                                            Action
                                        </th>
                                    </tr>
                                </thead>
                                <tbody class="text-center">
                                </tbody>
                                <tfoot>
                                    <tr>
                                        <th class="text-uppercase text-secondary text-center no-search">
                                            #
                                        </th>
                                        <th>
                                            Name
                                        </th>
                                        <th class="text-uppercase text-secondary text-xxs font-weight-bolder text-center text-center ps-2 no-search">
                                            Action
                                        </th>
                                    </tr>
                                </tfoot>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('scripts')
    <script type="module">
    $(document).ready(function () {
        var token = "{{ csrf_token() }}";
        let tableSearching = $("#datatable_ajax").DataTable({
             serverSide: true,
            processing: true,
            loadingMessage: '{{ Lang::get('main.loading') }}',
            bStateSave: false,
            lengthMenu: [
                    [10, 20, 50, 100, 150],
                    [10, 20, 50, 100, 150] // change per page values here
                ],
            pageLength: 10,
            ajax: {
                url: "{{ route('blog_categories.search') }}",
                dataType: 'json',
                type: 'POST',
                data: {
                    "_token" : token
                }
            },
            @if( app()->getLocale() == 'ar' ) "language": {"url": "{{ asset('assets/locals/ar.json') }}"},@endif
            "columnDefs": [{
                "targets": [0], // column or columns numbers
                "orderable": true  // set orderable for selected columns
            }],
            "order": [
                [0, "desc"]
            ],
            dom: 'Blfrtip',
            columns: [
                {data: 'id', name: 'id'},
                {data: 'name', name: 'name'},
                {data: 'action', name: 'action', orderable: false, searchable: false},
            ],
            buttons: [
                {
                    extend: 'colvis',
                    text: 'colvis',
                    exportOptions: {
                        columns: 'th:not(:last-child)'
                    },
                },
                {
                    extend: 'copy',
                    text: 'copy',
                    className: 'btn btn-default',
                    exportOptions: {
                        columns: 'th:not(:last-child)'
                    },
                },
                {
                    extend: 'csv',
                    text: 'csv',
                    className: 'btn btn-default',
                    exportOptions: {
                        columns: 'th:not(:last-child)'
                    },
                },
                {
                    extend: 'excel',
                    text: 'excel',
                    className: 'btn btn-default',
                    exportOptions: {
                        columns: 'th:not(:last-child)'
                    },
                },
                {
                    extend: 'pdf',
                    text: 'pdf',
                    className: 'btn btn-default',
                    exportOptions: {
                        columns: 'th:not(:last-child)'
                    },
                },
                {
                    extend: 'print',
                    text: 'print',
                    className: 'btn btn-default',
                    exportOptions: {
                        columns: 'th:not(:last-child)'
                    },
                },
            ],
        });
        $('.text-inputs-searching tfoot th').each( function () {
           console.log(this)
            if(!$(this).hasClass('no-search')){
                let title = $(this).text();
                $(this).html( '<input class="form-control" type="text" placeholder="search for '+title.trim()+'" />' );
            }
        } );
        tableSearching.columns().every( function () {
            let that = this;

            $( 'input', this.footer() ).on( 'keyup change', function () {
                if ( that.search() !== this.value ) {
                    that.search( this.value ).draw();
                }
            } );
        } );
            $(document).on("click", ".image-link", function () {
                $("#image-modal .modal-body img").attr('src', $(this).find('img').attr('src') );
            });
        });
        $(document).on('click','.delete',function(e){
        e.preventDefault() // Don't post the form, unless confirmed
        if (confirm('Are you sure?')) {
            // Post the form
            $(e.target).closest('form').submit() // Post the surrounding form
        }


    });
</script>
@endsection