@extends('backend.layout.app')
<!-- title go hear -->
@section('title' , 'Enquiry Form' )
<!-- content go hear -->
@section('content')
<div class="card  ">
<div class="card-header d-flex pb-2  bg-light">
     <a href="{{ route('backend.enquiryForm.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>  name</th>
                     <th>email</th>
                    <th>phone</th>
                    <th>country</th>
                    <th>nearest_exprenza_office</th>
                    <th>service_looking_for</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({   // ✅ Added variable
        responsive: true,
        lengthChange: false,
        processing: true,
        serverSide: true,
        autoWidth: false,
        dom: 'lBfrtip',
        buttons: ["copy", "csv", "excel", "colvis"],
        ajax: {
            url: "{{route('backend.enquiryForm.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: "name" },
            { data: "email" },
            { data: "phone" },
            { data: "country" },
            { data: "nearest_exprenza_office" },
            { data: "service_looking_for" },
            { 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();  // ✅ Works now
    });

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

    // ✅ Multiple checkbox
    $('#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.enquiryForm.destroy') }}";
        data["table"] = "table1";
        if (allVals.length === 0) {
            toastr.info('Oops!.. please select first.. ');
        } else {
            deleteMe(data);
            $('#all_check').prop('checked', false);  // after delete uncheck main
        }
    });
});


</script>

@endpush