@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('Service Categories')</h6>
                    <a href="{{ route('service_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 ps-2">
                                        Status
                                    </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="status">
                                        Status
                                    </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('service_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: 'status', name: 'status'},
                {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 () {
            if(!$(this).hasClass('no-search')){
                let title = $(this).text();
                if($(this).hasClass('status')){
                    let html = '<select class="form-control" name="status">'
                        +'<option value=" ">select</option>'
                        +'<option value="published">published</option>'
                        +'<option value="unpublished">unpublished</option>'
                        +'<option value="draft">draft</option>'
                        +'</select>';
                        $(this).html(html);
                }
                else
                    $(this).html('<input class="form-control" type="text" placeholder="search for '+title.trim()+'" />');
            }
        });
        tableSearching.columns().every( function () {
            let that = this;
             that.search(" ").draw();
            $( 'input', this.footer() ).on( 'keyup change', function () {
                if ( that.search() !== this.value ) {
                    that.search( this.value ).draw();
                }
            } );
            $('select', this.footer() ).on( 'keyup change', function () {
                if( this.value == " ")
                    that.search(" ").draw();
                else if ( that.search() !== this.value ) {
                    var searchTerm = this.value.trim(),
                    regex ='\\b' + searchTerm + '\\b';
                    that.search(regex,true,false).draw();
                }
            });
        });
        $(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