@extends('template.app')

@section('meta')
@endsection

@section('title')
OBF Requisition
@endsection

@section('styles')
    <style>
        .highlight {
            background-color: #ffff99; 
        }
        #data-table.dataTable tbody td {
            padding: 0px !important;
            height: 20px !important;
            line-height: 35px !important;
            font-size: 15px !important;
            text-align: center;
        }
        .form-group .custom_color {
            background-color: lightgrey !important;
        }
    </style>    
@endsection

@section('content')
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css">
    <link href="https://cdn.jsdelivr.net/npm/select2@4.0.13/dist/css/select2.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdn.datatables.net/1.13.7/css/jquery.dataTables.min.css">
    <style>
        #data-table td {
            white-space: nowrap;
            padding: 0.5rem !important;
            font-size: 15px;
        }
    
        .select2-container .select2-selection--single
        {
         
          height: 30px;
        }
        .mt-2
        {
            font-size: 15px;
            margin-left: 15px;
        }
        
        .custom-select {
            width: 200px !important;
        }
        
        .custom-form-spacing {
          margin-bottom: -19px;
        }
        
        
        /*.width_150 {*/
        /*    width: 150px;*/
        /*}*/
        /*.width_200 {*/
        /*    width: 200px;*/
        /*}*/
        /*.width_250 {*/
        /*    width: 250px;*/
        /*}*/
        /*.width_300 {*/
        /*    width: 300px;*/
        /*}*/
        /*.table {*/
        /*    min-height: 600px;*/
        /*}*/
        
        .form-label{
            color: #000;
        }
        
        .danger{
            color: red;
        }
        .table {
            min-height: 800px;
        }
    </style>

    <div class="page-breadcrumb">
        <div class="row">
            <div class="col-7 align-self-center">
                <h4 class="page-title text-truncate text-dark font-weight-medium mb-1">OBF Requisition</h4>
                <div class="d-flex align-items-center">
                    <nav aria-label="breadcrumb">
                        <ol class="breadcrumb m-0 p-0">
                            <li class="breadcrumb-item"><a href="{{ route('dashboard') }}" class="text-muted">Dashboard</a></li>
                            <li class="breadcrumb-item"><a href="{{ route('liquidation') }}" class="text-muted">OBF Requisition</a></li>
                            <li class="breadcrumb-item text-muted active" aria-current="page">List</li>
                        </ol>
                    </nav>
                </div>
            </div>
        </div>
    </div>
    
    <div class="container-fluid">
        <div class="row">
            <div class="col-12">
                <div class="card">
                    <div class="card-body table-responsive">
                        <table class="table table-bordered data-table" id="data-table">
                            <thead>
                                <tr>
                                    <th> No </th>
                                    <th> Customer Name </th>
                                    <th> Location </th>
                                    <th> KEC Name </th>
                                    <th> Team Leader </th>
                                    <th> Model </th>
                                    <th> Variant </th>
                                    <th> On Road Price </th>
                                    <th> Total Received Amount </th>
                                    <th> Due Amount </th>
                                    <th> Liquidation Amount </th>
                                    <th> Approval Status </th>
                                    <th> Refund By </th>
                                    <th> Action </th>
                                </tr>
                                <tr class="filterrow">
                                    <th></th>
                                    <th>
                                        <div class="search-box-container datatable-form-filter">
                                            <div class="form-group is-empty">
                                                <input type="text" name="customer_name" value="{{ request()->get('customer_name', '') }}" class="form-control text-capitalize" autocomplete="off" tabindex="1">
                                            </div>
                                        </div>
                                    </th>
                                    <th>
                                        <div class="search-box-container datatable-form-filter">
                                            <div class="form-group is-empty">
                                                <input type="text" name="branch_name" value="{{ request()->get('branch_name', '') }}" class="form-control text-capitalize" autocomplete="off" tabindex="2">
                                            </div>
                                        </div>
                                    </th>
                                    <th>
                                        <div class="search-box-container datatable-form-filter">
                                            <div class="form-group is-empty">
                                                <input type="text" name="sales_person_name" value="{{ request()->get('sales_person_name', '') }}" class="form-control text-capitalize" autocomplete="off" tabindex="3">
                                            </div>
                                        </div>
                                    </th>
                                    <th>
                                        <div class="search-box-container datatable-form-filter">
                                            <div class="form-group is-empty">
                                                <input type="text" name="team_name" value="{{ request()->get('team_name', '') }}" class="form-control text-capitalize" autocomplete="off" tabindex="4">
                                            </div>
                                        </div>
                                    </th>
                                    <th>
                                        <div class="search-box-container datatable-form-filter">
                                            <div class="form-group is-empty">
                                                <input type="text" name="product" value="{{ request()->get('product', '') }}" class="form-control text-capitalize" autocomplete="off" tabindex="5">
                                            </div>
                                        </div>
                                    </th>
                                    <th>
                                        <div class="search-box-container datatable-form-filter">
                                            <div class="form-group is-empty">
                                                <input type="text" name="car_varient_name" value="{{ request()->get('car_varient_name', '') }}" class="form-control text-capitalize" autocomplete="off" tabindex="6">
                                            </div>
                                        </div>
                                    </th>
                                    <th>
                                        <div class="search-box-container datatable-form-filter">
                                            <div class="form-group is-empty">
                                                <input type="text" name="on_road_price" value="{{ request()->get('on_road_price', '') }}" class="form-control text-capitalize" autocomplete="off" tabindex="7">
                                            </div>
                                        </div>
                                    </th>
                                    <th>
                                        <div class="search-box-container datatable-form-filter">
                                            <div class="form-group is-empty">
                                                <input type="text" name="total_received_amount" value="{{ request()->get('total_received_amount', '') }}" class="form-control text-capitalize" autocomplete="off" tabindex="8">
                                            </div>
                                        </div>
                                    </th>
                                    <th>
                                        <div class="search-box-container datatable-form-filter">
                                            <div class="form-group is-empty">
                                                <input type="text" name="due_amount" value="{{ request()->get('due_amount', '') }}" class="form-control text-capitalize" autocomplete="off" tabindex="9">
                                            </div>
                                        </div>
                                    </th>
                                    <th>
                                        <div class="search-box-container datatable-form-filter">
                                            <div class="form-group is-empty">
                                                <input type="text" name="refund_amount" value="{{ request()->get('refund_amount', '') }}" class="form-control text-capitalize" autocomplete="off" tabindex="10">
                                            </div>
                                        </div>
                                    </th>
                                    <th>
                                        <div class="search-box-container datatable-form-filter">
                                            <div class="form-group">
                                                <select name="approval_status" class="form-control text-capitalize custom_color" tabindex="11">
                                                    <option value=""> -- Select Status -- </option>
                                                    <option value="pending" {{ request()->get('approval_status') == 'pending' ? 'selected' : '' }}>Pending</option>
                                                    <option value="liquidation_tl_accepted" {{ request()->get('approval_status') == 'liquidation_tl_accepted' ? 'selected' : '' }}>Liquidation TL Accepted</option>
                                                    <option value="liquidation_tl_rejected" {{ request()->get('approval_status') == 'liquidation_tl_rejected' ? 'liquidation_tl_rejected' : '' }}>Liquidation TL Rejected</option>
                                                    <option value="liquidation_sm_accepted" {{ request()->get('approval_status') == 'liquidation_sm_accepted' ? 'liquidation_sm_accepted' : '' }}>Liquidation SM Accepted</option>
                                                    <option value="liquidation_gm_accepted" {{ request()->get('approval_status') == 'liquidation_gm_accepted' ? 'liquidation_gm_accepted' : '' }}>Liquidation GM Accepted</option>
                                                    <option value="liquidation_gm_rejected" {{ request()->get('approval_status') == 'liquidation_gm_rejected' ? 'liquidation_gm_rejected' : '' }}>Liquidation GM Rejected</option>
                                                    <option value="liquidation_bh_accepted" {{ request()->get('approval_status') == 'liquidation_bh_accepted' ? 'liquidation_gm_accepted' : '' }}>Liquidation BH Accepted</option>
                                                    <option value="liquidation_bh_rejected" {{ request()->get('approval_status') == 'liquidation_bh_rejected' ? 'liquidation_gm_rejected' : '' }}>Liquidation BH Rejected</option>
                                                    <option value="liquidation_accountant_accepted" {{ request()->get('approval_status') == 'liquidation_accountant_accepted' ? 'liquidation_accountant_accepted' : '' }}>Liquidation Accountant Accepted</option>
                                                    <option value="liquidation_accountant_rejected" {{ request()->get('approval_status') == 'liquidation_accountant_rejected' ? 'liquidation_accountant_rejected' : '' }}>Liquidation Accountant Rejected</option>
                                                    <option value="cheque_ready" {{ request()->get('approval_status') == 'cheque_ready' ? 'cheque_ready' : '' }}>Cheque Ready</option>
                                                </select>
                                            </div>
                                        </div>
                                    </th>
                                    <th>
                                        <div class="search-box-container datatable-form-filter">
                                            <div class="form-group is-empty">
                                                <input type="text" name="refund_by_name" value="{{ request()->get('refund_by_name', '') }}" class="form-control text-capitalize" autocomplete="off" tabindex="12">
                                            </div>
                                        </div>
                                    </th>
                                    <th></th>
                                </tr>
                            </thead>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
    
    <div id="DescModal" class="modal fade" tabindex="-1" role="dialog">
        <div class="modal-dialog modal-lg" role="document"> <!-- Small modal size -->
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">Enter Remark</h5>
                    <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close">&times;</button>
                </div>
                <div class="modal-body">
                    <input type="hidden" id="id">
                    <input type="hidden" id="status">
                    <input type="hidden" id="remark">
                    <div class="form-group">
                        <label for="reason"><strong>Reason Remark:</strong></label>
                        <textarea id="reason" class="form-control" rows="3" placeholder="Enter remark..." required></textarea>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-outline-primary btn-sm pull-right" data-bs-dismiss="modal">Cancel</button>
                    <button type="button" class="btn btn-outline-primary btn-sm pull-right" onclick="status_route()">Submit</button>
                </div>
            </div>
        </div>
    </div>
    
    <div class="modal fade" id="refundModal" tabindex="-1" aria-labelledby="refundModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <form id="refundForm" enctype="multipart/form-data">
                    @csrf
                    <input type="hidden" id="refund_encoded_id" name="encoded_id" />
    
                    <div class="modal-header">
                        <h5 class="modal-title" id="refundModalLabel">Refund Request Form</h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                    </div>
    
                    <div class="modal-body">
                        <div class="form-group col-md-6 mb-3">
                            <label class="control-label">Upload Documents</label>
                            <input type="file" name="refund_image[]" id="refund_image" class="form-control dropify" data-max-file-size-preview="2M" multiple onchange="previewMultiple(event, 'refund_image_multi', 'refund_image')">
                            <span class="kt-form__help error refund_image"></span>
                        </div>
    
                        <!-- Preview container if you want to show previews -->
                        <div id="refund_image_multi" class="mb-3"></div>
    
                        <div class="mb-3">
                            <a href="#" id="refundFormDownloadLink" target="_blank" class="btn btn-link">
                                Click here to download Refund Form
                            </a>
                        </div>
                    </div>
    
                    <div class="modal-footer">
                        <button type="submit" id="refundSubmit" class="btn btn-primary">Submit Refund Request</button>
                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
    
    <!-- Cheque Status Modal -->
    <div class="modal fade" id="chequeStatusModal" tabindex="-1" aria-labelledby="chequeStatusModalLabel" aria-hidden="true">
      <div class="modal-dialog">
        <form id="chequeStatusForm">
          <div class="modal-content">
            <div class="modal-header">
              <h5 class="modal-title" id="chequeStatusModalLabel">Cheque Status</h5>
              <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close">&times;</button>
            </div>
    
            <div class="modal-body">
              <input type="hidden" id="liquidation_id" name="liquidation_id" />
    
              <div class="mb-3">
                <label for="approval_status" class="form-label">Check Status</label>
                <select class="form-control" id="approval_status" name="approval_status" required>
                  <option value="">Select Status</option>
                  <option value="cheque_ready">Cheque Ready</option>
                </select>
              </div>
    
              <div class="mb-3">
                <label for="cheque_remark" class="form-label">Remarks</label>
                <textarea class="form-control" id="cheque_remark" name="cheque_remark" rows="3" placeholder="Enter remarks"></textarea>
                <span class="danger">( Also insert cheque number for record )</span>
              </div>
            </div>
    
            <div class="modal-footer">
              <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
              <button type="submit" class="btn btn-primary">Submit</button>
            </div>
          </div>
        </form>
      </div>
    </div>



@endsection

@section('scripts')
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
    <script src="https://cdn.datatables.net/1.13.6/js/jquery.dataTables.min.js"></script>
    <script src="https://cdn.datatables.net/1.13.6/js/dataTables.bootstrap5.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/flatpickr"></script>
    <script src="https://cdn.datatables.net/1.13.7/js/jquery.dataTables.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/select2@4.0.13/dist/js/select2.min.js"></script>
    
    
    <script type="text/javascript">
        $('#DescModal').on('hidden.bs.modal', function () {
            $(this).attr('inert', 'true');
            $('#id, #status, #reason').val('');
        });
        
        $('#DescModal').on('shown.bs.modal', function () {
            $(this).removeAttr('inert'); 
            $('#reason').focus(); 
        });
        
        window.change_status_reject = function(object) {
            var id = $(object).data("id");
            var status = $(object).data("status");
    
            $('#DescModal').modal("show");
            $('#id').val(id);
            $('#status').val(status);
            $('#remark').val(status);
        };
        
        window.status_route = function() {
            var remark = $('#remark').val().toLowerCase();
            if (remark.includes('accepted')) {
                window.change_status();
            } else if (remark.includes('rejected')) {
                window.status_reject();
            }
        }
        
        window.change_status = function(object) {
            var id = $('#id').val();
            var status = $('#status').val();
            var reason = $('#reason').val().trim();
    
            if (!reason) {
                toastr.warning('Please enter a reason.', 'Warning');
                return;
            }
    
            $('#DescModal').modal("hide");
    
            $.ajax({
                url: "{!! route('liquidation.change.status') !!}",
                type: "POST",
                dataType: "json",
                data: {
                    id: id,
                    status: status,
                    reason: reason,
                    _token: "{{ csrf_token() }}"
                },
                success: function(response) {
                    if (response.code == 200) {
                        window.LaravelDataTables["dataTableBuilder"].ajax.reload();
                        toastr.success('Status changed successfully', 'Success');
                        // location.reload();
                    } else {
                        toastr.error('Failed to change status', 'Error');
                    }
                },
                error: function(xhr) {
                    toastr.error('An error occurred. Please try again.', 'Error');
                }
            });
        };
        
        window.status_reject = function() {
            var id = $('#id').val();
            var status = $('#status').val();
            var reason = $('#reason').val().trim();
    
            if (!reason) {
                toastr.warning('Please enter a reason for rejection.', 'Warning');
                return;
            }
    
            $('#DescModal').modal("hide");
    
            $.ajax({
                url: "{!! route('liquidation.change.status') !!}",
                type: "POST",
                dataType: "json",
                data: {
                    id: id,
                    status: status,
                    reason: reason,
                    _token: "{{ csrf_token() }}"
                },
                success: function(response) {
                    if (response.code == 200) {
                        window.LaravelDataTables["dataTableBuilder"].ajax.reload();
                        window.location.reload();
                        toastr.success('Status changed successfully', 'Success');
                    } else {
                        toastr.error('Failed to change status', 'Error');
                    }
                },
                error: function(xhr) {
                    toastr.error('An error occurred. Please try again.', 'Error');
                }
            });
        };
        
        function openRefundPopup(element) {
            var encodedId = $(element).data("id");
            $("#refund_encoded_id").val(encodedId);
            $("#refundForm")[0].reset();  
        
            var url = "{{ route('liquidation.refund_form') }}";
            url += "?id=" + encodeURIComponent(encodedId);
            $("#refundFormDownloadLink").attr("href", url);
        
            var refundModal = new bootstrap.Modal(document.getElementById('refundModal'));
            refundModal.show();
        }
        
        window.change_status_cheque = function (el) {
            const recordId = $(el).data('liquidation_id');
            $('#liquidation_id').val(recordId);
        };
    
        // Handle form submission
        $('#chequeStatusForm').on('submit', function (e) {
            e.preventDefault();
    
            const liquidation_id = $('#liquidation_id').val();
            const approval_status = $('#approval_status').val();
            const cheque_remark = $('#cheque_remark').val();
    
            $.ajax({
                url: "{{ route('cheque.status.update') }}",
                method: 'POST',
                contentType: 'application/json',
                data: JSON.stringify({
                    liquidation_id: liquidation_id,
                    approval_status: approval_status,
                    cheque_remark: cheque_remark
                }),
                headers: {
                    'X-CSRF-TOKEN': '{{ csrf_token() }}'
                },
                success: function (data) {
                    if (data.success) {
                        window.LaravelDataTables["dataTableBuilder"].ajax.reload();
                        window.location.reload();
                        toastr.success('Status changed successfully', 'Success');
                    } else {
                        alert('Failed: ' + data.message);
                    }
                },
                error: function (xhr, status, error) {
                    console.error('Error:', error);
                    alert('An error occurred.');
                }
            });
        });
        
        $(document).ready(function() {
            $("#refundForm").on("submit", function(e) {
                e.preventDefault();
        
                var formData = new FormData(this);
        
                $.ajax({
                    url: "{{ route('liquidation.refund_form') }}",
                    method: "POST",
                    data: formData,
                    processData: false,
                    contentType: false,
                    beforeSend: function() {
                        $("#refundSubmit").prop("disabled", true).text("Submitting...");
                    },
                    success: function(response) {
                        if(response.success) {
                            alert(response.message || "Refund request submitted successfully.");
                            $("#refundModal").modal("hide");
                            location.reload();
                        } else {
                            alert(response.message || "Failed to submit refund request.");
                        }
                    },
                    error: function(xhr) {
                        alert("Error occurred. Please try again.");
                    },
                    complete: function() {
                        $("#refundSubmit").prop("disabled", false).text("Submit Refund Request");
                    }
                });
            });
        });
        
        function previewMultiple(event,idnamediv,id_name){
        
            var saida = document.getElementById(id_name);
            var quantos = saida.files.length;
            var container = document.getElementById(idnamediv);
        
            container.innerHTML = ""; 
        
            for (let i = 0; i < quantos; i++) {
                let file = saida.files[i];
                let fileType = file.type;
                let fileURL = URL.createObjectURL(file);
        
                let previewHTML = "";
        
                if (fileType.startsWith("image/")) {
                    previewHTML = '<img src="' + fileURL + '" style="height:100px; margin-right:10px;">';
                } else if (fileType === "application/pdf") {
                    previewHTML = '<a href="' + fileURL + '" target="_blank" style="display:block; margin-bottom:8px;">View PDF ' + (i + 1) + '</a>';
                } else {
                    previewHTML = '<p>Unsupported file type: ' + file.name + '</p>';
                }
        
                container.innerHTML += previewHTML;
            }
    
        }
    
        $.ajaxSetup({
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            }
        });
        
        $(document).ready(function() {
            var tableColumns = [
                {data: 'id', name: 'id',class:'text-center id',title: 'No.', orderable: false, width:100,default: true},
                {data: 'customer_name', name: 'customer_name',class:'text-center customer_name',title: 'Customer Name', orderable: false,default: true},
                {data: 'branch_name', name: 'branch_name',class:'text-center branch_name',title: 'Location', orderable: true,default: true},
                {data: 'sales_person_name', name: 'sales_person_name',class:'text-center sales_person_name',title: 'KEC Name', orderable: true,default: true},
                {data: 'team_name', name: 'team_name',class:'text-center team_name',title: 'Team Leader', orderable: true,default: true},
                {data: 'product', name: 'product',class:'text-center product',title: 'Model', orderable: true,default: true},
                {data: 'car_varient_name', name: 'car_varient_name',class:'text-center car_varient_name',title: 'Variant', orderable: true,default: true},
                {data: 'on_road_price', name: 'on_road_price',class:'text-center on_road_price',title: 'On Road Price', orderable: true,default: true},
                {data: 'total_received_amount', name: 'total_received_amount',class:'text-center total_received_amount',title: 'Total Received Amount', orderable: true,default: true},
                {data: 'due_amount', name: 'due_amount',class:'text-center due_amount',title: 'Due Amount', orderable: true,default: true},
                {data: 'refund_amount', name: 'refund_amount',class:'text-center refund_amount',title: 'Liquidation Amount', orderable: false,default: true},
                {data: 'approval_status', name: 'approval_status',class:'text-center approval_status',title: 'Approval Status', orderable: true,default: true},
                {data: 'refund_by_name', name: 'refund_by_name',class:'text-center refund_by_name',title: 'Refund By', orderable: true,default: true}, 
            ];
            tableColumns.push({
                data: 'action',
                name: 'action',
                orderable: false,
                searchable: true,
            });
            
            (function(window, $) {
                window.LaravelDataTables = window.LaravelDataTables || {};
                window.LaravelDataTables["dataTableBuilder"] = $("#data-table").DataTable({
                    processing: true,
                    serverSide: true,
                    language: {
                        "info": "_START_ - _END_ of _TOTAL_",
                        "lengthMenu": "_MENU_ ",
                        "infoFiltered": ""
                    },
                    // scrollY: '350px',
                    // scrollX: true,
                    scrollCollapse: true,
                    paging: true,
                    searching: false,
    
                    bSortCellsTop : true,
                    ajax: {
                        url: '{!! route("liquidation") !!}',
                        data: function (d) {
                            d.customer_name = jQuery(".datatable-form-filter input[name='customer_name']").val();
                            d.branch_name = jQuery(".datatable-form-filter input[name='branch_name']").val();
                            d.sales_person_name = jQuery(".datatable-form-filter input[name='sales_person_name']").val();
                            d.team_name = jQuery(".datatable-form-filter input[name='team_name']").val();
                            d.product = jQuery(".datatable-form-filter input[name='product']").val();
                            d.car_varient_name = jQuery(".datatable-form-filter input[name='car_varient_name']").val();
                            d.on_road_price = jQuery(".datatable-form-filter input[name='on_road_price']").val();
                            d.total_received_amount = jQuery(".datatable-form-filter input[name='total_received_amount']").val();
                            d.due_amount = jQuery(".datatable-form-filter input[name='due_amount']").val();
                            d.refund_amount = jQuery(".datatable-form-filter input[name='refund_amount']").val();
                            d.approval_status = jQuery(".datatable-form-filter select[name='approval_status']").val();
                            d.refund_by_name = jQuery(".datatable-form-filter input[name='refund_by_name']").val();
                        },
                        error : function(d) {}
                    },
                    columns: tableColumns,
                    lengthMenu: [
                        [25, 50,100, -1 ],['25', '50','100', 'Show all' ]
                    ],
                    order: [ [0,'DESC'] ],
                    responsive: true,
                    colReorder:{
                        enable: false,
                    },
                    dom: '<"top"f>rt<"bottom"ipl><"clear">',
                    fnInitComplete: function(settings, json) {
                        jQuery('table.table input:checkbox').map(function() {
                            if(jQuery(this).prop("checked") != true){
                                var column = table.column( jQuery(this).attr('data-column') );
                                column.visible(false);
                            }
                        });
                    },
                    pageLength: 25,
                });
            })(window, jQuery);
            
        });
        
        jQuery('.datatable-form-filter input').on('keyup', function (e) {
            if(jQuery(this).val().length >= 3 || e.keyCode == 13 || !jQuery(this).val()) {
                window.LaravelDataTables["dataTableBuilder"].draw();
                e.preventDefault();
            }
        });
    
        jQuery('.datatable-form-filter select').on('change', function (e) {
            window.LaravelDataTables["dataTableBuilder"].draw();
            e.preventDefault();
        });
    
        jQuery('input:checkbox[name="name_sort_asc"],input:checkbox[name="name_sort_desc"]').on('click', function (e) {
            window.LaravelDataTables["dataTableBuilder"].draw();
            e.preventDefault();
        });
        
    </script>
@endsection