@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('Projects')</h6>
                        <a href="{{ route('projects.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">
                                            Image
                                        </th>
                                        <th class="text-uppercase text-secondary text-xxs font-weight-bolder text-center">
                                            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="text-uppercase text-secondary text-xxs  font-weight-bolder text-center no-search">
                                            Image
                                        </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,
            responsive: true,
            lengthMenu: [
                    [10, 20, 50, 100, 150],
                    [10, 20, 50, 100, 150] // change per page values here
                ],
            pageLength: 10,
            ajax: {
                url: "{{ route('projects.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: 'image', name: 'image'},
                {data: 'status', name: 'status'},
                {data: 'action', name: 'action', orderable: false, searchable: false},
            ], "search": {
    "regex": true
  },
            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();
                if($(this).hasClass('status')){
                    let html = '<select class="form-control" id="status" 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.trim() ) {
                    that.search( this.value.trim() ).draw();
                }
            } );
          
          $('select', this.footer() ).on( 'keyup change', function () {
                if( this.value == " ")
                    that.search(" ").draw();
              else if ( that.search() !== this.value ) {
                    var val = $.fn.dataTable.util.escapeRegex(
                        $(this).val()
                    );
                    var searchTerm = this.value.trim(),
                    regex ='\\b' + searchTerm + '\\b'

                    that.search( regex, true, false ).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