@extends('layouts.vertical', ["page_title"=> "Datatables"])

@section('css')
<!-- third party css -->
<link href="{{asset('assets/libs/datatables/datatables.min.css')}}" rel="stylesheet" type="text/css" />
<link href="{{asset('assets/libs/bootstrap-datepicker/bootstrap-datepicker.min.css')}}" rel="stylesheet" type="text/css" />
<!-- third party css end -->
@endsection

@section('content')
<!-- Start Content-->
<div class="container-fluid">

    <!-- start page title -->
    <div class="row">
        <div class="col-md-6 p-2">
            <h4 class="page-title">{{$title}} Management</h4>
        </div>
        <div class="col-md-6 p-2">
            @if(isset($buttons))
                @foreach($buttons as $button)
                    <a href="{{$button['link']}}" class="btn btn-{{$button['title']=='Add New'?'success':'dark'}} waves-effect waves-light float-end me-2" id="btn-{{strtolower(str_replace(' ', '-', $button['title']))}}">{{$button['title']}}</a>
                @endforeach
            @endif
        </div>
    </div>
    <!-- end page title -->
@if(session()->has('message'))
    <div class="alert alert-success">
        {{ session()->get('message') }}
    </div>
@endif
@if(session()->has('error'))
    <div class="alert alert-danger">
        {{ session()->get('error') }}
    </div>
@endif
    <div class="row">
        <div class="col-12">
            <div class="card">
                <div class="card-body">
                    <table id="list-page-datatable" class="table w-100 nowrap">
                        <thead>
                            <tr>
                                @foreach($fields as $field => $props)
                                <th>{{$props['title']}}</th>
                                @endforeach
                            </tr>
                        </thead>
                        <!-- <tfoot>
                            <tr>
                                @foreach($fields as $field => $props)
                                <th>
                                    @if($field != 'actions')
                                    <input type="text" placeholder="Search" class="form-control" />
                                    @endif
                                </th>
                                @endforeach
                            </tr>
                        </tfoot> -->
                        <tbody>
                            
                        </tbody>
                    </table>

                </div> <!-- end card body-->
            </div> <!-- end card -->
        </div><!-- end col-->
    </div>
    <!-- end row-->
</div> <!-- container -->

<!-- Right modal content -->
<div id="date_filter_modal" class="modal fade" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog modal-sm">
        <div class="modal-content">
            <div class="modal-header border-0">
                <h4 class="modal-title" id="standard-modalLabel">Filter results by date</h4>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <div class="row">
                    <form method="get" id="form-date-filter">
                    <div class="col-12">
                        <div class="mb-3">
                            <label class="form-label">From Date</label>
                            <input type="text" name="startdate" class="form-control" data-provide="datepicker" value="{{isset($startdate)?date("m/d/Y", strtotime($startdate)):''}}" data-date-autoclose="true">
                        </div>
                    </div>

                    <div class="col-12">
                        <div class="mb-3">
                            <label class="form-label">To Date</label>
                            <input type="text" name="enddate" class="form-control" data-provide="datepicker" value="{{isset($enddate)?date("m/d/Y", strtotime($enddate)):''}}" data-date-autoclose="true">
                        </div>
                    </div>
                </div>
                <button type="submit" class="btn btn-success btn-sm">Filter</button>
                <button type="button" class="btn btn-danger btn-sm" data-bs-dismiss="modal">Close</button>
                </form>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div><!-- /.modal -->


<style type="text/css">
    .img-thumbnail { max-width: 100px }
    thead {display: table-header-group;}
    tfoot {display: table-header-group;}
</style>
@endsection

@section('script')
<!-- third party js -->
<script src="{{asset('assets/libs/datatables/datatables.min.js')}}"></script>
<script src="{{asset('assets/libs/bootstrap-datepicker/bootstrap-datepicker.min.js')}}"></script>
<script type="text/javascript">
    jQuery(document).ready(function($){
        var table = $('#list-page-datatable').DataTable({
            //"stateSave": true,
            "scrollX": true,
            "language": {
                "paginate": {
                    "previous": "<i class='mdi mdi-chevron-left'>",
                    "next": "<i class='mdi mdi-chevron-right'>"
                }
            },
            "drawCallback": function () {
                $('.dataTables_paginate > .pagination').addClass('pagination-rounded');
            },

            fixedHeader: true,
            "pageLength": 50,
            "lengthMenu": [[50, 100, 250, 500], [50, 100, 250, 500]],
            'processing': true,
            'serverSide': true,
            'serverMethod': 'get',
            searchDelay: 2000,
            "order": [[ 1, "asc" ]],
            'searching': true,
            'info': true,
            
            "ajax": {
                url: '{{$base_url}}/ajaxlist',
                data:{
                     //'listfilters': listfilters
                },
                dataSrc: 'data'
            },
            columns: [
                @foreach($fields as $field => $props)
                    @if($field == 'actions')
                    {
                      data: null,
                      render: function ( data, type, row ) {
                        return data.actions.map(l => '<a href="{{$base_url}}'+l.link+'" class="action-icon"> <i class="mdi mdi-'+l.icon+'"></i></a>').join('')
                      }
                    },
                    @else
                    { "data": "{{$field}}" },
                    @endif
                @endforeach
            ],
             "initComplete": function(settings, json) {
                var api = this.api();
                var textBox = $('.dataTables_filter label input');
                textBox.unbind();
                textBox.bind('keyup input', function(e) {
                    if(e.keyCode == 8 && !textBox.val() || e.keyCode == 46 && !textBox.val()) {
                        // do nothing ¯\_(ツ)_/¯
                    } else if(e.keyCode == 13 || !textBox.val()) {
                        api.search(this.value).draw();
                    }
                });

                $searchButton = $('<button class="btn btn-success btn-xs p-1 m-2">')
                       .text('Search')
                       .click(function() {
                          api.search(textBox.val()).draw();
                       }),
                $clearButton = $('<button class="btn btn-warning btn-xs p-1">')
                           .text('Clear')
                           .click(function() {
                              textBox.val('');
                              $searchButton.click(); 
                           })
                $('.dataTables_filter').append($searchButton, $clearButton);

                 
            }
        });

        // table.columns().every( function (index) {
        //     var that = this;
        //     $( 'input', this.footer() ).on( 'keyup change clear', function () {
        //         console.log(this.value)
        //         that.search( this.value ).draw();
        //     });
        // });

        $('.dataTables_filter input')
        .unbind('keypress keyup')
        .bind('keypress keyup', function(e){
          if ($(this).val().length < 3 && e.keyCode != 13) return;
          table.fnFilter($(this).val());
        });

        $("#btn-date-filter").click(function(){
            $("#date_filter_modal").modal("show")
        })
    });

</script>
<!-- end demo js-->
@endsection