@extends('backend.layout.app')
<!-- title go hear -->
@section('title' , 'appointment ' )
<!-- content go hear -->
@section('content')
<div class="card  ">
<div class="card-header d-flex pb-2  bg-light">
     <a href="{{ route('backend.appointment.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">
        <div class="row mb-3">
            <div class="col-md-2">
                <div class="form-group">
                    <input type="date" id="minDate" class="form-control" placeholder="From date">
                    <label class="form-label">From Date</label>
                </div>
            </div>
            <div class="col-md-2">
                <div class="form-group">
                    <input type="date" id="maxDate" class="form-control" placeholder="To date">
                    <label class="form-label">To Date</label>
                </div>
            </div>
            <div class="col-md-2 d-flex align-items-baseline">
                <button id="clearDateFilter" class="btn btn-secondary">Clear</button>
            </div>
        </div>
    </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>  date</th>
                    <th>  name</th>
                     <th>email</th>
                    <th>phone</th>
                     <th>nearest_exprenza_office</th>
                     <th>message</th>
                    <th>created_at</th>
                    <th> </th>
                </tr>
            </thead>
            <tbody>
            </tbody>
        </table>

    </div>
</div>
@endsection

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

    // Date range filter
    $('#minDate, #maxDate').on('change', function () {
        table.draw();
    });
    
    // Clear filter button
    $('#clearDateFilter').on('click', function(e) {
        e.preventDefault();
        $('#minDate').val('');
        $('#maxDate').val('');
        table.draw();
    });

    // Multiple check box select
    $('#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());
        });

        if (allVals.length === 0) {
            toastr.info('Oops!.. please select first..');
            return;
        }

        var data = {
            id: allVals.toString(),
            url: "{{ route('backend.appointment.destroy') }}",
            table: "table1"
        };

        deleteMe(data);
        $('#all_check').prop('checked', false); // uncheck main checkbox after delete
    });
});
</script>

@endpush