@extends('template.app')

@section('meta') @endsection
@section('title') Booking Cancel & Refund Report @endsection

@section('styles')
    <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>
        .table-responsive {
            overflow-x: auto;
            max-width: 100%;
        }
        
        .dataTables_scrollHeadInner,
        .dataTables_scrollBody table {
            width: 100% !important;
        }
        
        .dataTables_scrollHead {
            overflow: hidden;
        }
        .dataTables_scrollBody {
            max-height: 400px; 
            overflow-y: auto;
        }
        
        
        #data-table {
            width: 100% !important;
            border-collapse: collapse;
        }
        
        #data-table thead th {
            white-space: nowrap;
        }
       
        #data-table_wrapper {
            width: 100%;
            overflow-x: auto;
        }
        
        td, th {
            border: 1px solid #dddddd;
            text-align: left;
            padding: 8px;
        }
        
        tr:nth-child(even) {
            background-color: #313762;
        }
        .daterangepicker {
            background-color: #fff !important;
            color: #000 !important;
            border: 1px solid #ccc;
            z-index: 9999;
        }
        
        .daterangepicker .calendar-table,
        .daterangepicker td,
        .daterangepicker th {
            background-color: #fff !important;
            color: #000 !important;
        }
        
        .daterangepicker td.active,
        .daterangepicker td.active:hover {
            background-color: #007bff !important;
            color: #fff !important;
        }
        
        .daterangepicker .drp-buttons .btn {
            background-color: #007bff;
            color: #fff;
        }
        
        .daterangepicker .drp-buttons .btn:hover {
            background-color: #0056b3;
        }
        
        .width_150 {
            width: 150px;
        }
        .width_200 {
            width: 200px;
        }
        .width_250 {
            width: 250px;
        }
        .width_300 {
            width: 300px;
        }
        
        tr:nth-child(even) {
         background-color: rgba(0,0,0,0.24) !important;
    }
            
    </style>
@endsection

@section('content')
<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">Booking Cancel & Refund Report</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('allReport') }}" class="text-muted">Mis Report</a></li>
                        <li class="breadcrumb-item text-muted active" aria-current="page">Refund Report</li>
                    </ol>
                </nav>
            </div>
        </div>
        <div class="col-5 align-self-center">
            <div class="customize-input float-right">
                <button class="btn waves-effect waves-light btn-rounded btn-outline-primary pull-right" type="button" data-toggle="collapse" data-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
                    Export
                </button>
            </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('refundReportExport') }}" method="get">
                        @csrf
                        <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>
                                </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" style="text-align: center;">
                    <table class="table table-bordered data-table tables" id="data-table"> 
                        <thead>
                            <tr>
                                <th>No</th>
                                <th>Customer Name</th>
                                <th>Branch</th>
                                <th>KEC Name</th>
                                <th>Team Leader</th>
                                <th>Model</th>
                                <th>Varient</th>
                                <th>On Road Price</th>
                                <th>Total Received Amount</th>
                                <th>Due Amount</th>
                                <th>Liquidation Amount</th>
                                <th>Booking Date & Time</th>
                                <th>Booking Receipt No.</th>
                                <th>Payment Type / Mode</th>
                                <th>Booking Refund Amt</th>
                                <th>Reason for Cancellation - KEC</th>
                                <th>Reason for Cancellation - GM</th>
                                <th>KEC Accepted Date & Time</th>
                                <th>TL Accepted Date & Time</th>
                                <th>SM Accepted Date & Time</th>
                                <th>GM Accepted Date & Time</th>
                                <th>BH Accepted Date & Time</th>
                                <th>Account Accepted Date & Time</th>
                                <th>Cheque Amount</th>
                                <th>Cheque Number</th>
                                <th>Cheque Date</th>
                                <th>Bank Account Number</th>
                                <th>Account Remark</th>
                                <th>Approval Status</th>
                            </tr>
                            <tr class="filterrow">
                                <th></th>

                                <!-- Customer Name -->
                                <th>
                                    <div class="search-box-container datatable-form-filter width_300">
                                        <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="1">
                                        </div>
                                    </div>
                                </th>
                                
                                <!-- Branch -->
                                <th>
                                    <div class="search-box-container datatable-form-filter width_300">
                                        <div class="form-group is-empty">
                                            <input type="text" name="branch" value="{{ request()->get('branch', '') }}" class="form-control text-capitalize custom_color" id="branch" autocomplete="off" autofocus tabindex="2">
                                        </div>
                                    </div>
                                </th>
                                
                                <!-- KEC -->
                                <th>
                                    <div class="search-box-container datatable-form-filter width_300">
                                        <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="3">
                                        </div>
                                    </div>
                                </th>
                                
                                <!-- Team Leader -->
                                <th>
                                    <div class="search-box-container datatable-form-filter width_300">
                                        <div class="form-group is-empty">
                                            <input type="text" name="team_leader" value="{{ request()->get('team_leader', '') }}" class="form-control text-capitalize custom_color" id="team_leader" autocomplete="off" autofocus tabindex="4">
                                        </div>
                                    </div>
                                </th>
                                
                                <!-- Model -->
                                <th>
                                    <div class="search-box-container datatable-form-filter width_300">
                                        <div class="form-group is-empty">
                                            <input type="text" name="model" value="{{ request()->get('model', '') }}" class="form-control text-capitalize custom_color" id="model" autocomplete="off" autofocus tabindex="5">
                                        </div>
                                    </div>
                                </th>
                                
                                <!-- Varient -->
                                <th>
                                    <div class="search-box-container datatable-form-filter width_300">
                                        <div class="form-group is-empty">
                                            <input type="text" name="car_varient_name" value="{{ request()->get('car_varient_name', '') }}" class="form-control text-capitalize custom_color" id="car_varient_name" autocomplete="off" autofocus tabindex="6">
                                        </div>
                                    </div>
                                </th>
                                
                                <!-- On Road Price -->
                                <th>
                                    <div class="search-box-container datatable-form-filter width_150">
                                        <div class="form-group is-empty">
                                            <input type="text" name="on_road_price" value="{{ request()->get('on_road_price', '') }}" class="form-control text-capitalize custom_color" id="on_road_price" autocomplete="off" autofocus tabindex="7">
                                        </div>
                                    </div>
                                </th>
                                
                                <!-- Received Amount -->
                                <th>
                                    <div class="search-box-container datatable-form-filter width_150">
                                        <div class="form-group is-empty">
                                            <input type="text" name="total_received_amount" value="{{ request()->get('total_received_amount', '') }}" class="form-control text-capitalize custom_color" id="total_received_amount" autocomplete="off" autofocus tabindex="8">
                                        </div>
                                    </div>
                                </th>
                                
                                <!-- Due Amount -->
                                <th>
                                    <div class="search-box-container datatable-form-filter width_150">
                                        <div class="form-group is-empty">
                                            <input type="text" name="due_amount" value="{{ request()->get('due_amount', '') }}" class="form-control text-capitalize custom_color" id="due_amount" autocomplete="off" autofocus tabindex="9">
                                        </div>
                                    </div>
                                </th>
                                
                                <!-- Liquidation Amount -->
                                <th>
                                    <div class="search-box-container datatable-form-filter width_150">
                                        <div class="form-group is-empty">
                                            <input type="text" name="liquidation_amount" value="{{ request()->get('liquidation_amount', '') }}" class="form-control text-capitalize custom_color" id="liquidation_amount" autocomplete="off" autofocus tabindex="10">
                                        </div>
                                    </div>
                                </th>
                                
                                <!-- Booking Date -->
                                <th>
                                    <div class="search-box-container datatable-form-filter width_150">
                                        <div class="form-group is-empty">
                                            <input type="text" name="booking_date" value="{{ request()->get('booking_date', '') }}" class="form-control text-capitalize custom_color" id="booking_date" autocomplete="off" autofocus tabindex="11">
                                        </div>
                                    </div>
                                </th>
                                
                                <!-- Booking Receipt No. -->
                                <th>
                                    <div class="search-box-container datatable-form-filter width_150">
                                        <div class="form-group is-empty">
                                            <input type="text" name="booking_receipt_no" value="{{ request()->get('booking_receipt_no', '') }}" class="form-control text-capitalize custom_color" id="booking_receipt_no" autocomplete="off" autofocus tabindex="12">
                                        </div>
                                    </div>
                                </th>
                                
                                <!-- Payment Type -->
                                <th>
                                    <div class="search-box-container datatable-form-filter width_150">
                                        <div class="form-group is-empty">
                                            <input type="text" name="payment_type" value="{{ request()->get('payment_type', '') }}" class="form-control text-capitalize custom_color" id="payment_type" autocomplete="off" autofocus tabindex="13">
                                        </div>
                                    </div>
                                </th>
                                
                                <!-- Booking Refund Amount -->
                                <th>
                                    <div class="search-box-container datatable-form-filter width_150">
                                        <div class="form-group is-empty">
                                            <input type="text" name="booking_refund_amount" value="{{ request()->get('booking_refund_amount', '') }}" class="form-control text-capitalize custom_color" id="booking_refund_amount" autocomplete="off" autofocus tabindex="14">
                                        </div>
                                    </div>
                                </th>
                                
                                <!-- Cancellation Reason - KEC -->
                                <th>
                                    <div class="search-box-container datatable-form-filter width_300">
                                        <div class="form-group is-empty">
                                            <input type="text" name="cancellation_reason_kec" value="{{ request()->get('cancellation_reason_kec', '') }}" class="form-control text-capitalize custom_color" id="cancellation_reason_kec" autocomplete="off" autofocus tabindex="15">
                                        </div>
                                    </div>
                                </th>
                                
                                <!-- Cancellation Reason - GM -->
                                <th>
                                    <div class="search-box-container datatable-form-filter width_300">
                                        <div class="form-group is-empty">
                                            <input type="text" name="cancellation_reason_gm" value="{{ request()->get('cancellation_reason_gm', '') }}" class="form-control text-capitalize custom_color" id="cancellation_reason_gm" autocomplete="off" autofocus tabindex="16">
                                        </div>
                                    </div>
                                </th>
                                
                                <!-- Accepted_date_time - KEC -->
                                <th>
                                    <div class="search-box-container datatable-form-filter width_200">
                                        <div class="form-group is-empty">
                                            <input type="text" name="Accepted_date_time_kec" value="{{ request()->get('Accepted_date_time_kec', '') }}" class="form-control text-capitalize custom_color" id="Accepted_date_time_kec" autocomplete="off" autofocus tabindex="17">
                                        </div>
                                    </div>
                                </th>
                                
                                <!-- Accepted_date_time - TL -->
                                <th>
                                    <div class="search-box-container datatable-form-filter width_200">
                                        <div class="form-group is-empty">
                                            <input type="text" name="Accepted_date_time_tl" value="{{ request()->get('Accepted_date_time_tl', '') }}" class="form-control text-capitalize custom_color" id="Accepted_date_time_tl" autocomplete="off" autofocus tabindex="18">
                                        </div>
                                    </div>
                                </th>
                                
                                <!-- Accepted_date_time - SM -->
                                <th>
                                    <div class="search-box-container datatable-form-filter width_200">
                                        <div class="form-group is-empty">
                                            <input type="text" name="Accepted_date_time_sm" value="{{ request()->get('Accepted_date_time_sm', '') }}" class="form-control text-capitalize custom_color" id="Accepted_date_time_sm" autocomplete="off" autofocus tabindex="19">
                                        </div>
                                    </div>
                                </th>
                                
                                <!-- Accepted_date_time - GM -->
                                <th>
                                    <div class="search-box-container datatable-form-filter width_200">
                                        <div class="form-group is-empty">
                                            <input type="text" name="Accepted_date_time_gm" value="{{ request()->get('Accepted_date_time_gm', '') }}" class="form-control text-capitalize custom_color" id="Accepted_date_time_gm" autocomplete="off" autofocus tabindex="20">
                                        </div>
                                    </div>
                                </th>
                                
                                <!-- Accepted_date_time - BH -->
                                <th>
                                    <div class="search-box-container datatable-form-filter width_200">
                                        <div class="form-group is-empty">
                                            <input type="text" name="Accepted_date_time_bh" value="{{ request()->get('Accepted_date_time_bh', '') }}" class="form-control text-capitalize custom_color" id="Accepted_date_time_bh" autocomplete="off" autofocus tabindex="21">
                                        </div>
                                    </div>
                                </th>
                                
                                <!-- Accepted_date_time - Account -->
                                <th>
                                    <div class="search-box-container datatable-form-filter width_200">
                                        <div class="form-group is-empty">
                                            <input type="text" name="Accepted_date_time_account" value="{{ request()->get('Accepted_date_time_account', '') }}" class="form-control text-capitalize custom_color" id="Accepted_date_time_account" autocomplete="off" autofocus tabindex="22">
                                        </div>
                                    </div>
                                </th>
                                
                                <!-- Cheque Amount -->
                                <th>
                                    <div class="search-box-container datatable-form-filter width_150">
                                        <div class="form-group is-empty">
                                            <input type="text" name="cheque_amount" value="{{ request()->get('cheque_amount', '') }}" class="form-control text-capitalize custom_color" id="cheque_amount" autocomplete="off" autofocus tabindex="23">
                                        </div>
                                    </div>
                                </th>
                                
                                <!-- Cheque Number -->
                                <th>
                                    <div class="search-box-container datatable-form-filter width_150">
                                        <div class="form-group is-empty">
                                            <input type="text" name="cheque_number" value="{{ request()->get('cheque_number', '') }}" class="form-control text-capitalize custom_color" id="cheque_number" autocomplete="off" autofocus tabindex="24">
                                        </div>
                                    </div>
                                </th>
                                
                                <!-- Cheque Date -->
                                <th>
                                    <div class="search-box-container datatable-form-filter width_150">
                                        <div class="form-group is-empty">
                                            <input type="text" name="cheque_date" value="{{ request()->get('cheque_date', '') }}" class="form-control text-capitalize custom_color" id="cheque_date" autocomplete="off" autofocus tabindex="25">
                                        </div>
                                    </div>
                                </th>
                                
                                <!-- Bank Account Number -->
                                <th>
                                    <div class="search-box-container datatable-form-filter width_150">
                                        <div class="form-group is-empty">
                                            <input type="text" name="bank_account_number" value="{{ request()->get('bank_account_number', '') }}" class="form-control text-capitalize custom_color" id="bank_account_number" autocomplete="off" autofocus tabindex="26">
                                        </div>
                                    </div>
                                </th>
                                
                                <!-- Account Remark -->
                                <th>
                                    <div class="search-box-container datatable-form-filter width_150">
                                        <div class="form-group is-empty">
                                            <input type="text" name="account_remark" value="{{ request()->get('account_remark', '') }}" class="form-control text-capitalize custom_color" id="account_remark" autocomplete="off" autofocus tabindex="27">
                                        </div>
                                    </div>
                                </th>
                                
                                <!-- Approval Status -->
                                <th>
                                    <div class="search-box-container datatable-form-filter width_150">
                                        <div class="form-group">
                                            <select name="approval_status" class="form-control text-capitalize custom_color" tabindex="28">
                                                <option value=""> -- Select Status -- </option>
                                                <option value="liquidation_bh_accepted" {{ request()->get('approval_status') == 'liquidation_bh_accepted' ? 'liquidation_bh_accepted' : '' }}>Liquidation BH Accepted</option>
                                                <option value="liquidation_bh_rejected" {{ request()->get('approval_status') == 'liquidation_bh_rejected' ? 'liquidation_bh_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>
                            </tr>
                        </thead>
                    </table>
                </div>
            </div>
        </div>
@endsection

@section('scripts')
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="https://cdn.datatables.net/1.13.7/js/jquery.dataTables.min.js"></script>
    <script src="https://cdn.datatables.net/1.13.7/js/dataTables.bootstrap5.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.jsdelivr.net/npm/chart.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/flatpickr"></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 type="text/javascript">
        $.ajaxSetup({
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            }
        });
    </script>
    
    <script type="text/javascript">
        $(document).ready(function() {
            $('#booking_date,#Accepted_date_time_kec,#Accepted_date_time_tl,#Accepted_date_time_sm,#Accepted_date_time_gm,#Accepted_date_time_bh,#Accepted_date_time_account,#cheque_date').daterangepicker({
                autoUpdateInput: false,
                locale: {
                    format: 'DD-MM-YYYY',
                    cancelLabel: 'Clear'
                }
            });
            
            $('#booking_date,#Accepted_date_time_kec,#Accepted_date_time_tl,#Accepted_date_time_sm,#Accepted_date_time_gm,#Accepted_date_time_bh,#Accepted_date_time_account,#cheque_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();
            });
            
            $('#booking_date,#Accepted_date_time_kec,#Accepted_date_time_tl,#Accepted_date_time_sm,#Accepted_date_time_gm,#Accepted_date_time_bh,#Accepted_date_time_account,#cheque_date').on('cancel.daterangepicker', function(ev, picker) {
                $(this).val('');
                $('#data-table').DataTable().draw();
            });
    
            $('.js-example-basic-single').select2();
    
            var tableColumns = [
                {data: null, title: 'No.', class: 'text-center', orderable: false, width: 100,
                    render: function (data, type, row, meta) {
                        return meta.row + meta.settings._iDisplayStart + 1;
                    }
                },
                {data: 'customer_name', name: 'customer_name', class: 'text-center', title: 'Customer Name', orderable: true,default: true},
                {data: 'branch', name: 'branch', class: 'text-center', title: 'Branch', orderable: true,default: true},
                {data: 'sales_person_name', name: 'sales_person_name', class: 'text-center', title: 'KEC Name', orderable: true,default: true},
                {data: 'team_leader', name: 'team_leader', class: 'text-center', title: 'Team Leader', orderable: true,default: true},
                {data: 'model', name: 'model', class: 'text-center', title: 'Model', orderable: true,default: true},
                {data: 'car_varient_name', name: 'car_varient_name', class: 'text-center', title: 'Varient', orderable: true,default: true},
                {data: 'on_road_price', name: 'on_road_price', class: 'text-center', title: 'On Road Price', orderable: true,default: true},
                {data: 'total_received_amount', name: 'total_received_amount', class: 'text-center', title: 'Total Received Amount', orderable: true,default: true},
                {data: 'due_amount', name: 'due_amount', class: 'text-center', title: 'Due Amount', orderable: true,default: true},
                {data: 'liquidation_amount', name: 'liquidation_amount', class: 'text-center', title: 'Liquidation Amount', orderable: true,default: true},
                {data: 'booking_date', name: 'booking_date', class: 'text-center', title: 'Booking Date & Time', orderable: true,default: true},
                {data: 'booking_receipt_no', name: 'booking_receipt_no', class: 'text-center', title: 'Booking Receipt No.', orderable: true,default: true},
                {data: 'payment_type', name: 'payment_type', class: 'text-center', title: 'Payment Type / Mode', orderable: true,default: true},
                {data: 'booking_refund_amount', name: 'booking_refund_amount', class: 'text-center', title: 'Booking Refund Amt', orderable: true,default: true},
                {data: 'cancellation_reason_kec', name: 'cancellation_reason_kec', class: 'text-center', title: 'Reason for Cancellation - KEC', orderable: true,default: true},
                {data: 'cancellation_reason_gm', name: 'cancellation_reason_gm', class: 'text-center', title: 'Reason for Cancellation - GM', orderable: true,default: true},
                {data: 'Accepted_date_time_kec', name: 'Accepted_date_time_kec', class: 'text-center', title: 'KEC Accepted Date & Time', orderable: true,default: true},
                {data: 'Accepted_date_time_tl', name: 'Accepted_date_time_tl', class: 'text-center', title: 'TL Accepted Date & Time', orderable: true,default: true},
                {data: 'Accepted_date_time_sm', name: 'Accepted_date_time_sm', class: 'text-center', title: 'SM Accepted Date & Time', orderable: true,default: true},
                {data: 'Accepted_date_time_gm', name: 'Accepted_date_time_gm', class: 'text-center', title: 'GM Accepted Date & Time', orderable: true,default: true},
                {data: 'Accepted_date_time_bh', name: 'Accepted_date_time_bh', class: 'text-center', title: 'BH Accepted Date & Time', orderable: true,default: true},
                {data: 'Accepted_date_time_account', name: 'Accepted_date_time_account', class: 'text-center', title: 'Account Accepted Date & Time', orderable: true,default: true},
                {data: 'cheque_amount', name: 'cheque_amount', class: 'text-center', title: 'Cheque Amount', orderable: true,default: true},
                {data: 'cheque_number', name: 'cheque_number', class: 'text-center', title: 'Cheque Number', orderable: true,default: true},
                {data: 'cheque_date', name: 'cheque_date', class: 'text-center', title: 'Cheque Date', orderable: true,default: true},
                {data: 'bank_account_number', name: 'bank_account_number', class: 'text-center', title: 'Bank Account Number', orderable: true,default: true},
                {data: 'account_remark', name: 'account_remark', class: 'text-center', title: 'Account Remark', orderable: true,default: true},
                {data: 'approval_status', name: 'approval_status', class: 'text-center', title: 'Approval Status', orderable: true,default: 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": ""
                    },
                    scrollCollapse: true,
                    paging: true,
                    searching: false,
    
                    bSortCellsTop : true,
                    ajax: {
                        url: '{!! route("refundReportfetch") !!}',
                        method: "POST",
                        data: function (d) {
                            d.customer_name = jQuery(".datatable-form-filter input[name='customer_name']").val();
                            d.branch = jQuery(".datatable-form-filter input[name='branch']").val();
                            d.sales_person_name = jQuery(".datatable-form-filter input[name='sales_person_name']").val();
                            d.team_leader = jQuery(".datatable-form-filter input[name='team_leader']").val();
                            d.model = jQuery(".datatable-form-filter input[name='model']").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.liquidation_amount = jQuery(".datatable-form-filter input[name='liquidation_amount']").val();
                            d.booking_date = jQuery(".datatable-form-filter input[name='booking_date']").val();
                            d.booking_receipt_no = jQuery(".datatable-form-filter input[name='booking_receipt_no']").val();
                            d.payment_type = jQuery(".datatable-form-filter input[name='payment_type']").val();
                            d.booking_refund_amount = jQuery(".datatable-form-filter input[name='booking_refund_amount']").val();
                            d.cancellation_reason_kec = jQuery(".datatable-form-filter input[name='cancellation_reason_kec']").val();
                            d.cancellation_reason_gm = jQuery(".datatable-form-filter input[name='cancellation_reason_gm']").val();
                            d.Accepted_date_time_kec = jQuery(".datatable-form-filter input[name='Accepted_date_time_kec']").val();
                            d.Accepted_date_time_tl = jQuery(".datatable-form-filter input[name='Accepted_date_time_tl']").val();
                            d.Accepted_date_time_sm = jQuery(".datatable-form-filter input[name='Accepted_date_time_sm']").val();
                            d.Accepted_date_time_gm = jQuery(".datatable-form-filter input[name='Accepted_date_time_gm']").val();
                            d.Accepted_date_time_bh = jQuery(".datatable-form-filter input[name='Accepted_date_time_bh']").val();
                            d.Accepted_date_time_account = jQuery(".datatable-form-filter input[name='Accepted_date_time_account']").val();
                            d.cheque_amount = jQuery(".datatable-form-filter input[name='cheque_amount']").val();
                            d.cheque_number = jQuery(".datatable-form-filter input[name='cheque_number']").val();
                            d.cheque_date = jQuery(".datatable-form-filter input[name='cheque_date']").val();
                            d.bank_account_number = jQuery(".datatable-form-filter input[name='bank_account_number']").val();
                            d.account_remark = jQuery(".datatable-form-filter input[name='account_remark']").val();
                            d.approval_status = jQuery(".datatable-form-filter select[name='approval_status']").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();
            });
    
    
    
        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