@extends('template.app')

@section('meta') 
@endsection

@section('title')
    Sales Inquiry Form
@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')
<!-- Flatpickr CSS -->
<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;
    }
    
    .custom-label {
        color: #000 !important;
        font-weight: 600;
    }
    
    .width_150 {
        width: 150px;
    }
    .width_200 {
        width: 200px;
    }
    .width_250 {
        width: 250px;
    }
    .width_300 {
        width: 300px;
    }
    .table {
        min-height: 600px;
    }

</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">Sales Inquiry Form</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('form') }}" class="text-muted">Sales Inquiry Form</a></li>
                    </ol>
                </nav>
            </div>
        </div>
        <div class="col-5 align-self-center">
            <div class="customize-input float-right">
                <a class="btn btn-outline-primary btn-rounded" data-bs-toggle="modal" data-bs-target="#inquiryModal">
                    Add Inquiry
                </a>
            </div>
        </div>
        <!-- <div class="col-sm-8"></div>
        <div class="col-sm-4">
            <div class="col-md-12 align-self-center collapse" id="collapseExample">
                <div class="customize-input float-right">
                    <form action="{{ route('obf.export') }}" method="get">
                        <div class="row">
                            <div class="form-group col-md-6 ">
                                <select name="slug" class="form-control" required>
                                    <option value="">Select Status</option>
                                    <option value="all">All</option>
                                    <option value="pending">Pending</option>
                                    <option value="accepted">Accepted</option>
                                    <option value="obf_accepted">OBF Accepted</option>
                                    <option value="account_accepted">Account Accepted</option>
                                    <option value="obf_rejected">OBF Accepted</option>
                                    <option value="account_rejected">Account Accepted</option>
                                    <option value="rejected">Rejected</option>
                                    <option value="deleted">Deleted</option>
                                    <option value="completed">Completed</option>
                                </select>
                            </div>
                            <div class="form-group col-md-6">
                                <button class="btn btn-primary" type="submit">Submit</button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div> -->
    </div>
</div>
<div class="container-fluid">
    <div class="row">
        <div class="col-12">
            <div class="card">
                <div class="card-body table-responsive" id="datatable" style="text-align: center;">
                    <table class="table table-bordered data-table tables" id="data-table" cellspacing="0" width="100%">
                        <thead>
                            <tr>
                                <th class="width_100">No</th>
                                <th class="width_150">Date</th>
                                <th class="width_200">Customer Name</th>
                                <th class="width_200">Email</th>
                                <th class="width_150">Contact</th>
                                <th class="width_150">State</th>
                                <th class="width_150">City</th>
                                <th class="width_150">Lead Source</th>
                                <th class="width_200">Sub Lead Source</th>
                                <th class="width_150">Model</th>
                                <th class="width_200">Location</th>
                                <th class="width_200">Team Leader</th>
                                <th class="width_200">KEC</th>
                                <th class="width_150">Action</th>
                            </tr>
                            <tr class="filterrow">
                            <th></th>
                            <th>
                                <div class="search-box-container datatable-form-filter width_150">
                                    <div class="form-group is-empty">
                                        <input type="text" name="date" value="{{ request()->get('date', '') }}" class="form-control text-capitalize" autocomplete="off" tabindex="1" id="date" placeholder="DD-MM-YYYY to DD-MM-YYYY">
                                    </div>
                                </div>
                            </th>
                        
                            <th>
                                <div class="search-box-container datatable-form-filter width_250">
                                    <div class="form-group is-empty">
                                        <input type="text" name="customer_name" value="{{ request()->get('customer_name', '') }}" class="form-control text-capitalize custom_color" id="customer_name" autocomplete="off" autofocus tabindex="2">
                                    </div>
                                </div>
                            </th>
                            <th>
                                <div class="search-box-container datatable-form-filter width_300">
                                    <div class="form-group is-empty">
                                        <input type="text" name="email" value="{{ request()->get('email', '') }}" class="form-control text-capitalize custom_color" autocomplete="off" id="email" autofocus tabindex="3">
                                    </div>
                                </div>
                            </th>
                            <th>
                                <div class="search-box-container datatable-form-filter width_150">
                                    <div class="form-group is-empty">
                                        <input type="text" name="contact" value="{{ request()->get('contact', '') }}" class="form-control text-capitalize custom_color" autocomplete="off" id="contact" autofocus tabindex="4">
                                    </div>
                                </div>
                            </th>
                            <th>
                                <div class="search-box-container datatable-form-filter width_200">
                                    <div class="form-group is-empty">
                                        <input type="text" name="state" value="{{ request()->get('state', '') }}" class="form-control text-capitalize custom_color" autocomplete="off" id="state" autofocus tabindex="5">
                                    </div>
                                </div>
                            </th>
                            <th>
                                <div class="search-box-container datatable-form-filter width_200">
                                    <div class="form-group is-empty">
                                        <input type="text" name="city" value="{{ request()->get('city', '') }}" class="form-control text-capitalize custom_color" autocomplete="off" id="city" autofocus tabindex="6">
                                    </div>
                                </div>
                            </th>
                            <th>
                                <div class="search-box-container datatable-form-filter width_150">
                                    <div class="form-group is-empty">
                                        <input type="text" name="lead_source" value="{{ request()->get('lead_source', '') }}" class="form-control text-capitalize custom_color" autocomplete="off" id="lead_source" autofocus tabindex="7">
                                    </div>
                                </div>
                            </th>
                            <th>
                                <div class="search-box-container datatable-form-filter width_250">
                                    <div class="form-group is-empty">
                                        <input type="text" name="sub_lead_source" value="{{ request()->get('sub_lead_source', '') }}" class="form-control text-capitalize custom_color" autocomplete="off" id="sub_lead_source" autofocus tabindex="8">
                                    </div>
                                </div>
                            </th>
                            <th>
                                <div class="search-box-container datatable-form-filter width_200">
                                    <div class="form-group is-empty">
                                        <input type="text" name="model" value="{{ request()->get('model', '') }}" class="form-control text-capitalize custom_color" autocomplete="off" id="model" autofocus tabindex="9">
                                    </div>
                                </div>
                            </th>
                            <th>
                                <div class="search-box-container datatable-form-filter width_200">
                                    <div class="form-group is-empty">
                                        <input type="text" name="location" value="{{ request()->get('location', '') }}" class="form-control text-capitalize custom_color" autocomplete="off" id="location" autofocus tabindex="10">
                                    </div>
                                </div>
                            </th>
                            <th>
                                <div class="search-box-container datatable-form-filter width_150">
                                    <div class="form-group is-empty">
                                        <input type="text" name="team_name" value="{{ request()->get('team_name', '') }}" class="form-control text-capitalize custom_color" autocomplete="off" id="team_name" autofocus tabindex="11">
                                    </div>
                                </div>
                            </th>
                            <th>
                                <div class="search-box-container datatable-form-filter width_150">
                                    <div class="form-group is-empty">
                                        <input type="text" name="sales_person_name" value="{{ request()->get('sales_person_name', '') }}" class="form-control text-capitalize custom_color" id="sales_person_name" autocomplete="off" autofocus tabindex="12">
                                    </div>
                                </div>
                            </th>
                            <th></th>
                        </tr>
                        </thead>
                    </table>
                </div>
            </div>
        </div>
        

        <!-- Inquiry Modal -->
        <div class="modal fade" id="inquiryModal" role="dialog">
            <div class="modal-dialog modal-lg">
                <div class="modal-content">
                    <!-- Modal Header -->
                    <div class="modal-header">
                        <h3 class="modal-title">Sales Inquiry</h3>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close">&times;</button>
                    </div>
    
                    <!-- Modal Body -->
                    <div class="modal-body">
                        <form id="inquiryForm">
                            @csrf
                            <input type="hidden" id="inquiry_encoded_id" name="encoded_id"> 
    
                            <div class="row g-3">
                                <!-- Left Column -->
                                <div class="col-md-6">
                                    <label for="date" class="form-label custom-label">Date</label>
                                    <input type="date" name="date" id="modal_date" class="form-control" placeholder="Date">
                                </div>
                                <div class="col-md-6">
                                    <label for="customer_name" class="form-label custom-label">Customer Name</label>
                                    <input type="text" name="customer_name" id="modal_customer_name" class="form-control" placeholder="Customer Name">
                                </div>
                                <div class="col-md-6">
                                    <label for="email" class="form-label custom-label">Email</label>
                                    <input type="email" name="email" id="modal_email" class="form-control" placeholder="Email">
                                </div>
                                <div class="col-md-6">
                                    <label for="contact" class="form-label custom-label">Contact</label>
                                    <input type="text" name="contact" id="modal_contact" class="form-control" placeholder="Contact">
                                </div>
                                <div class="col-md-6">
                                    <label for="state_id" class="form-label custom-label">State</label>
                                    <select name="state_id" id="modal_state_id" class="form-control">
                                        <option value="">Select State</option>
                                        @foreach($states as $state)
                                            <option value="{{ $state->id }}">{{ $state->state_name }}</option>
                                        @endforeach
                                    </select>
                                </div>
                                <div class="col-md-6">
                                    <label for="city_id" class="form-label custom-label">City</label>
                                    <select name="city_id" id="modal_city_id" class="form-control">
                                        <option value="">Select City</option>
                                        @foreach($cities as $city)
                                            <option value="{{ $city->id }}">{{ $city->city_name }}</option>
                                        @endforeach
                                    </select>
                                </div>
                                <div class="col-md-6">
                                    <label for="model" class="form-label custom-label">Model</label>
                                    <select name="model" id="modal_model" class="form-control">
                                        <option value="">Select Model</option>
                                        @foreach($product as $item)
                                            <option value="{{ $item->id }}">{{ $item->name }}</option>
                                        @endforeach
                                    </select>
                                </div>
                                
                                <div class="col-md-6">
                                    <label for="lead_source" class="form-label custom-label">Lead Source</label>
                                    <select name="lead_source" id="modal_lead_source" class="form-control">
                                        <option value="">Select Lead Source</option>
                                        @foreach($lead as $item)
                                            <option value="{{ $item->id }}">{{ $item->name }}</option>
                                        @endforeach
                                    </select>
                                </div>
                                
                                <div class="col-md-6">
                                    <label for="sub_lead_source" class="form-label custom-label">Sub Lead Source</label>
                                    <select name="sub_lead_source" id="modal_sub_lead_source" class="form-control">
                                        <option value="">Select Sub Lead Source</option>
                                        @foreach($sublead as $item)
                                            <option value="{{ $item->id }}">{{ $item->name }}</option>
                                        @endforeach
                                    </select>
                                </div>
                                
                                <div class="col-md-6">
                                    <label for="location" class="form-label custom-label">Location</label>
                                    <select name="location" id="modal_location" class="form-control">
                                        <option value="">Select Location</option>
                                        @foreach($branch as $item)
                                            <option value="{{ $item->id }}">{{ $item->name }}</option>
                                        @endforeach
                                    </select>
                                </div>
                                <div class="col-md-6">
                                    <label for="assigned_tl" class="form-label custom-label">Team Name</label>
                                    <select name="assigned_tl" id="modal_assigned_tl" class="form-control">
                                        <option value="">Select Team</option>
                                        @foreach($teams as $team)
                                            <option value="{{ $team->id }}">{{ $team->team_name }}</option>
                                        @endforeach
                                    </select>
                                </div>
                            
                                <div class="col-md-6">
                                    <label for="assigned_kec" class="form-label custom-label">KEC Name</label>
                                    <select name="assigned_kec" id="modal_assigned_kec" class="form-control">
                                        <option value="">Select KEC</option>
                                        @foreach($kecs as $kec)
                                            <option value="{{ $kec->id }}">{{ $kec->kec_name }}</option>
                                        @endforeach
                                    </select>
                                </div>
                            </div>
                        </form>
                    </div>
    
                    <!-- Modal Footer -->
                    <div class="modal-footer">
                        <button type="submit" id="inquirySubmit" class="btn btn-outline-primary btn-sm">Submit</button>
                        <button type="button" class="btn btn-outline-secondary btn-sm" data-bs-dismiss="modal">Close</button>
                    </div>
                </div>
            </div>
        </div>
        <!-- Modal -->
        
        <!-- Follow-Up Modal -->
        <div class="modal fade" id="followUpModal" tabindex="-1">
            <div class="modal-dialog">
                <div class="modal-content">
                    <form id="followUpForm" method="POST" action="{{ route('form.followup') }}">
                        @csrf
                        <div class="modal-header">
                            <h3 class="modal-title">FollowUp Inquiry</h3>
                            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close">&times;</button>
                        </div>
        
                        <div class="modal-body">
                            <input type="hidden" name="inquiry_id" id="followup_inquiry_id">
                            
                            <div class="mb-3">
                                <label for="follow_up_date" id="follow_up_date" class="form-label custom-label">Follow-Up Date</label>
                                <input type="datetime-local" name="follow_up_date" class="form-control">
                            </div>
        
                            <div class="mb-3">
                                <label for="next_follow_up_date" id="next_follow_up_date" class="form-label custom-label">Next Follow-Up Date</label>
                                <input type="datetime-local" name="next_follow_up_date" class="form-control">
                            </div>
        
                            <div class="mb-3">
                                <label for="remark" class="form-label custom-label">Remark</label>
                                <textarea name="remark" class="form-control"></textarea>
                            </div>
                        </div>
        
                        <div class="modal-footer">
                            <button class="btn btn-primary btn-sm" type="submit">Submit</button>
                            <button class="btn btn-secondary btn-sm" data-bs-dismiss="modal" type="button">Close</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </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 src="https://cdn.jsdelivr.net/momentjs/latest/moment.min.js"></script>

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.css" />
<script src="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/flatpickr"></script>
<script type="text/javascript">
    $.ajaxSetup({
        headers: {
            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
        }
    });
</script>
<script type="text/javascript">
    

    $(document).ready(function() {
        flatpickr("#follow_up_date", {
                enableTime: true,
                time_24hr: true,
                enableSeconds: true,
                dateFormat: "d-m-Y H:i:s",
                defaultDate: new Date(),
            });
        flatpickr("#next_follow_up_date", {
                enableTime: true,
                time_24hr: true,
                enableSeconds: true,
                dateFormat: "d-m-Y H:i:s",
                defaultDate: new Date(),
            });
        $('#date').daterangepicker({
            autoUpdateInput: false,
            locale: {
                format: 'DD-MM-YYYY',
                cancelLabel: 'Clear'
            }
        });
    
        $('#date').on('apply.daterangepicker', function(ev, picker) {
            $(this).val(picker.startDate.format('DD-MM-YYYY') + ' to ' + picker.endDate.format('DD-MM-YYYY'));
            $('#data-table').DataTable().draw();
        });
    
        $('#date').on('cancel.daterangepicker', function(ev, picker) {
            $(this).val('');
            $('#data-table').DataTable().draw();
        });
        
        let rowCount = $("table tbody tr").length;
        if (rowCount < 3) {
            $(".table").css("height", "600px");
        }

        $('.js-example-basic-single').select2();

        var tableColumns = [
            { data: 'id', name: 'id', class: 'text-center width_100' },
            { data: 'formatted_date', name: 'date', class: 'width_150' },
            { data: 'customer_name', name: 'customer_name', class: 'width_200' },
            { data: 'email', name: 'email', class: 'width_200' },
            { data: 'contact', name: 'contact', class: 'width_150' },
            { data: 'state', name: 'state', class: 'width_150' },
            { data: 'city', name: 'city', class: 'width_150' },
            { data: 'lead_source_name', name: 'lead_source_name', class: 'width_150' },
            { data: 'sub_lead_source_name', name: 'sub_lead_source_name', class: 'width_200' },
            { data: 'model_name', name: 'model_name', class: 'width_150' },
            { data: 'location_name', name: 'location_name', class: 'width_200' },
            { data: 'team_name', name: 'team_name', class: 'width_200' },
            { data: 'sales_person_name', name: 'sales_person_name', class: 'width_200' },
        ];

        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: '400px',
                scrollCollapse: true,
                paging: true,
                searching: false,

                bSortCellsTop : true,
                ajax: {
                    url: '{!! route("form") !!}',
                    method: "POST",
                    data: function (d) {
                        d.date = jQuery(".datatable-form-filter input[name='date']").val();
                        d.customer_name = jQuery(".datatable-form-filter input[name='customer_name']").val();
                        d.email = jQuery(".datatable-form-filter input[name='email']").val();
                        d.contact = jQuery(".datatable-form-filter input[name='contact']").val();
                        d.state = jQuery(".datatable-form-filter input[name='state']").val();
                        d.city = jQuery(".datatable-form-filter input[name='city']").val();
                        d.lead_source = jQuery(".datatable-form-filter input[name='lead_source']").val();
                        d.sub_lead_source = jQuery(".datatable-form-filter input[name='sub_lead_source']").val();
                        d.model = jQuery(".datatable-form-filter input[name='model']").val();
                        d.location = jQuery(".datatable-form-filter input[name='location']").val();
                        d.team_name = jQuery(".datatable-form-filter input[name='team_name']").val();
                        d.sales_person_name = jQuery(".datatable-form-filter input[name='sales_person_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);

        $("#min").flatpickr({ onSelect: function () { window.LaravelDataTables["dataTableBuilder"].draw(); }, changeMonth: true, changeYear: true });

        $(document).on("change", "#min", function () {
            window.LaravelDataTables["dataTableBuilder"].draw();
        });
    });
    
    $(document).on('click', '#inquirySubmit', function (e) {
        e.preventDefault();
    
        let form = $('#inquiryForm')[0];
        let formData = new FormData(form);
    
        $.ajax({
            url: '{{ route("form.insert") }}', 
            method: 'POST',
            data: formData,
            processData: false,
            contentType: false,
    
            success: function (response) {
                if (response.success) {
                    // Close modal
                    $('#inquiryModal').modal('hide');
    
                    // Reset form
                    $('#inquiryForm')[0].reset();
    
                    // Refresh DataTable
                    window.LaravelDataTables["dataTableBuilder"].ajax.reload(null, false);
    
                    // Success toast (optional)
                    toastr.success(response.message || "Inquiry submitted successfully!");
                } else {
                    toastr.error(response.message || "Submission failed.");
                }
            },
            error: function (xhr) {
                if (xhr.responseJSON && xhr.responseJSON.errors) {
                    $.each(xhr.responseJSON.errors, function (key, messages) {
                        toastr.error(messages[0]);
                    });
                } else {
                    toastr.error("Something went wrong.");
                }
            }
        });
    });

    $(document).on('click', '.editInquiry', function () {
        let encodedId = $(this).data('id');
    
        $.ajax({
            url: '/sales/edit/' + encodedId,
            method: 'GET',
            success: function (response) {
                if (response.success) {
                    let data = response.data;
    
                    const rawDate = data.date;
                    const formattedDate = rawDate ? rawDate.split(' ')[0] : '';
                    $('#modal_date').val(formattedDate);
                        
                    $('#inquiry_encoded_id').val(encodedId);
                    $('#modal_customer_name').val(data.customer_name);
                    $('#modal_email').val(data.email);
                    $('#modal_contact').val(data.contact);
                    $('#modal_state_id').val(data.state_id).trigger('change');
                    $('#modal_city_id').val(data.city_id).trigger('change');
                    $('#modal_model').val(data.model);
                    $('#modal_lead_source').val(data.lead_source);
                    $('#modal_sub_lead_source').val(data.sub_lead_source);
                    $('#modal_location').val(data.location);
                    $('#modal_assigned_tl').val(data.assigned_tl).trigger('change');
                    $('#modal_assigned_kec').val(data.assigned_kec).trigger('change');
    
                    $('#inquiryModal').modal('show');
                } else {
                    toastr.error('Failed to fetch inquiry data.');
                }
            },
            error: function () {
                toastr.error('An error occurred while fetching inquiry data.');
            }
        });
    });

    $(document).on('click', '.follow-up', function () {
        const inquiryId = $(this).data('id');
        $('#followup_inquiry_id').val(inquiryId);
    
        // Show modal (Bootstrap 5)
        const modal = new bootstrap.Modal(document.getElementById('followUpModal'));
        modal.show();
    });


    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