@extends('backend.layout.app')
<!-- title go hear -->
@section('title' , 'Index Page' )
<!-- content go hear -->
@section('content')
<div class="callout callout-warning  ">
    <h5> warning </h5>
    <p>"Only one published data item is displayed on the page."</p>
</div>

<div class="card  ">
    <div class="card-header d-flex pb-2  bg-light">
        <a href="{{ route('backend.indexPage.createOrupdate') }}"
            class="btn  btn-r  "><i class="fas fa-plus"></i>
        </a>
        <a id="multi_delete" class="btn btn-r  text-secondary"><i class='fas fa-trash-alt'></i> </a>
        <a class="btn btn-r  text-secondary" onclick="reloadTable('table1')">
            <i class="fas fa-sync-alt"></i>
        </a>
    </div>
    <div class="card-body">

        <table id="table1" class="table table-bordered table-hover">
            <thead>
                <tr>
                    <th class="text-white text-center">
                        <input type='checkbox' id='all_check'>
                    </th>
                    <th>id</th>
                    <th>footer_content</th>
                    <th>status</th>
                    <th>created_at</th>
                    <th> </th>
                </tr>
            </thead>
            <tbody>
            </tbody>
        </table>

    </div>
</div>
@endsection

@push('footer-script')
<script type="text/javascript">
    //  dataTable
    $(document).ready(function() {
        $("#table1").DataTable({
            "responsive": true,
            "lengthChange": false,
            "processing": true,
            "serverSide": true,
            "autoWidth": false,
            "dom": 'lBfrtip',
            "buttons": ["copy", "csv", "excel", "colvis"],
            ajax: {
                url: "{{route('backend.indexPage.result')}}",
                type: "post",
                headers: {
                    'X-CSRF-TOKEN': '{{ csrf_token() }}'
                }
            },
            columns: [{
                    data: "check",
                    name: "check",
                    orderable: false,
                    searchable: false,
                    sWidth: '6%'
                },
                {
                    data: "id"
                },
                {
                    data: "footer_content",
                },
                {
                    data: "is_published"
                },
                {
                    data: "created_at",
                    visible: false
                },
                {
                    data: "action",
                    orderable: false,
                    searchable: false,
                    sWidth: '6%'
                },
            ],
            order: [
                [1, 'desc']
            ],
            "columnDefs": [{
                "targets": '_all',
                "defaultContent": ""
            }],
        });

        //  multiple check box
        $('#all_check').click(function() {
            $('.check_box').prop('checked', $(this).prop('checked'));

        });

        // multiple delete 
        $('#multi_delete').on('click', function(e) {
            var allVals = [];
            $('.check_box:checked').each(function() {
                allVals.push($(this).val());
            });
            data = [];
            data["id"] = allVals.toString();
            data["url"] = "{{ route('backend.indexPage.destroy') }}";
            data["table"] = "table1";
            if (allVals.length === 0) {
                toastr.info('Oops!.. please select first.. ');

            } else {
                deleteMe(data);
                $('#all_check').prop('checked', false); // after delete uchek main

            }
        });

    });
</script>

@endpush