@extends('template.app')

@section('meta') 
@endsection

@section('title')
    Leasing OBF
@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-form-spacing {
          margin-bottom: -19px;
        }
        .width_150 {
            width: 150px;
        }
        .width_200 {
            width: 200px;
        }
        .width_250 {
            width: 250px;
        }
        .width_300 {
            width: 300px;
        }
        .table {
            min-height: 800px;
        }
        .custom_color_btn{
            color:black!important;
        }
        /* Hide up/down arrows in Chrome, Safari, Edge */
        .hide-arrow::-webkit-outer-spin-button,
        .hide-arrow::-webkit-inner-spin-button {
            -webkit-appearance: none;
            margin: 0;
        }
        
        /* Hide up/down arrows in Firefox */
        .hide-arrow {
            -moz-appearance: textfield;
        }
    </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">Leasing OBF - Leasing Order Booking Forms</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('obf_leasing') }}" class="text-muted">Leasing OBF</a></li>
                            <li class="breadcrumb-item text-muted active" aria-current="page">List</li>
                        </ol>
                    </nav>
                </div>
            </div>
            <div class="col-5 align-self-center">
                <div class="customize-input float-right">
                    @canany(['obf-leasing-create'])
                        <a class="btn waves-effect waves-light btn-rounded btn-outline-primary pull-right" href="{{ route('obf_leasing.create') }}">Add New</a>
                    @endcanany
                </div>
            </div>
            <div class="col-sm-8"></div>
            <div class="col-sm-4"></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>No</th>
                                    <th> Date</th>
                                    <th> Location</th>
                                    <th> Customer Name (Bill To)</th>
                                    <th> GST No </th>
                                    <th> Customer Name (Ship To)</th>
                                    <th> Team Leader </th>
                                    <th> KEC Name </th>
                                    <th> Model </th>
                                    <th> Variant </th>
                                    <th> Exterior Color </th>
                                    <th> VIN Number </th>
                                    <th width="100"> On Road Price(A) </th>
                                    <th> Booking Amount (B(+)) </th>
                                    <!--<th> DP Amount Received (C(+)) </th>-->
                                    <th> Total received amount (B+C = F) </th>
                                    <th> Discount (G(-)) </th>
                                    <th width="100"> Net Amount Received (F-G=H) </th>
                                    <th width="100"> Access / Sort Amount </th>
                                    <th width="100"> Due Amount  (A-H=I) </th>
                                    <th> No. of Cash Receipt </th>
                                    <th> Invoice No.</th>
                                    <th> Invoice Date </th>
                                    <th> Insurance Status </th>
                                    <th> RTO Status </th>
                                    <th>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="booking_date" value="{{ request()->get('booking_date', '') }}" class="form-control text-capitalize" autocomplete="off" tabindex="1" id="booking_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="branch_name" value="{{ request()->get('branch_name', '') }}" class="form-control text-capitalize custom_color" 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="customer_name" value="{{ request()->get('customer_name', '') }}" class="form-control text-capitalize custom_color" autocomplete="off" 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="gst" value="{{ request()->get('gst', '') }}" class="form-control text-capitalize custom_color" autocomplete="off" autofocus tabindex="4">
                                            </div>
                                        </div>
                                    </th>
    
                                    <th>
                                        <div class="search-box-container datatable-form-filter width_300">
                                            <div class="form-group is-empty">
                                                <input type="text" name="ship_to_customer_name" value="{{ request()->get('ship_to_customer_name', '') }}" class="form-control text-capitalize custom_color" autocomplete="off" 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="team_name" value="{{ request()->get('team_name', '') }}" class="form-control text-capitalize custom_color" autocomplete="off" autofocus tabindex="6">
                                            </div>
                                        </div>
                                    </th>
    
                                    <th>
                                        <div class="search-box-container datatable-form-filter width_200">
                                            <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" autocomplete="off" autofocus tabindex="7">
                                            </div>
                                        </div>
                                    </th>
    
                                    <th>
                                        <div class="search-box-container datatable-form-filter width_150">
                                            <div class="form-group is-empty">
                                                <input type="text" name="product" value="{{ request()->get('product', '') }}" class="form-control text-capitalize custom_color" autocomplete="off" autofocus tabindex="8">
                                            </div>
                                        </div>
                                    </th>
    
    
                                    <th>
                                        <div class="search-box-container datatable-form-filter width_250">
                                            <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" autocomplete="off" 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="exterior_color" value="{{ request()->get('exterior_color', '') }}" class="form-control text-capitalize custom_color" autocomplete="off" autofocus tabindex="10">
                                            </div>
                                        </div>
                                    </th>
    
                                    <th>
                                        <div class="search-box-container datatable-form-filter width_200">
                                            <div class="form-group is-empty">
                                                <input type="text" name="vin_number" value="{{ request()->get('vin_number', '') }}" class="form-control text-capitalize custom_color" autocomplete="off" 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="on_road_price" value="{{ request()->get('on_road_price', '') }}" class="form-control text-capitalize custom_color" autocomplete="off" autofocus tabindex="12">
                                            </div>
                                        </div>
                                    </th>
    
                                    <th>
                                        <div class="search-box-container datatable-form-filter width_150">
                                            <div class="form-group is-empty">
                                                <input type="text" name="booking_amount" value="{{ request()->get('booking_amount', '') }}" class="form-control text-capitalize custom_color" autocomplete="off" autofocus tabindex="13">
                                            </div>
                                        </div>
                                    </th>
    
                                    <!--<th>
                                        <div class="search-box-container datatable-form-filter width_150">
                                            <div class="form-group is-empty">
                                                <input type="text" name="dp_amount" value="{{ request()->get('dp_amount', '') }}" class="form-control text-capitalize custom_color" autocomplete="off" autofocus tabindex="14">
                                            </div>
                                        </div>
                                    </th>-->
    
                                    <th>
                                        <div class="search-box-container datatable-form-filter width_150">
                                            <div class="form-group is-empty">
                                                <input type="text" name="final_total" value="{{ request()->get('final_total', '') }}" class="form-control text-capitalize custom_color" autocomplete="off" autofocus tabindex="18">
                                            </div>
                                        </div>
                                    </th>
    
                                    <th>
                                        <div class="search-box-container datatable-form-filter width_150">
                                            <div class="form-group is-empty">
                                                <input type="text" name="finance_discount" value="{{ request()->get('finance_discount', '') }}" class="form-control text-capitalize custom_color" autocomplete="off" autofocus tabindex="19">
                                            </div>
                                        </div>
                                    </th>
    
                                    <th>
                                        <div class="search-box-container datatable-form-filter width_150">
                                            <div class="form-group is-empty">
                                                <input type="text" name="net_total" value="{{ request()->get('net_total', '') }}" class="form-control text-capitalize custom_color" autocomplete="off" autofocus tabindex="20">
                                            </div>
                                        </div>
                                    </th>
    
                                    <th>
                                        <div class="search-box-container datatable-form-filter width_150">
                                            <div class="form-group is-empty">
                                                <input type="text" name="access_sort_amount" value="{{ request()->get('access_sort_amount', '') }}" class="form-control text-capitalize custom_color" autocomplete="off" autofocus tabindex="21">
                                            </div>
                                        </div>
                                    </th>
    
                                    <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" autocomplete="off" autofocus tabindex="22">
                                            </div>
                                        </div>
                                    </th>
                                    
                                    <th>
                                        <div class="search-box-container datatable-form-filter width_150">
                                            <div class="form-group is-empty">
                                                <input type="text" name="total_receipt_count" value="{{ request()->get('total_receipt_count', '') }}" class="form-control text-capitalize custom_color" autocomplete="off" autofocus tabindex="23">
                                            </div>
                                        </div>
                                    </th>
    
                                    <th>
                                        <div class="search-box-container datatable-form-filter width_150">
                                            <div class="form-group is-empty">
                                                <input type="text" name="tax_invoice_no" value="{{ request()->get('tax_invoice_no', '') }}" class="form-control text-capitalize custom_color" autocomplete="off" autofocus tabindex="24">
                                            </div>
                                        </div>
                                    </th>
    
                                    <th>
                                        <div class="search-box-container datatable-form-filter width_150"> 
                                            <div class="form-group is-empty">
                                                <input type="text" name="tax_invoice_date" value="{{ request()->get('tax_invoice_date', '') }}" class="form-control text-capitalize custom_color" autocomplete="off" autofocus tabindex="25">
                                            </div>
                                        </div>
                                    </th>
                                    
                                    <th>
                                        <div class="search-box-container datatable-form-filter width_150">
    	                                    <div class="form-group">
    		                                    <select name="insurance_status" class="form-control text-capitalize custom_color" tabindex="15">
    		                                        <option value=""> -- Select Status -- </option>
    		                                        <option value="Not Completed" {{ request()->get('insurance_status') == 'Not Completed' ? 'selected' : '' }}>Not Completed</option>
    		                                        <option value="Completed" {{ request()->get('insurance_status') == 'Completed' ? 'selected' : '' }}>Completed</option>
    		                                    </select>
    	                                    </div>
                                        </div>
                                    </th>
                                    
                                    <th>
                                        <div class="search-box-container datatable-form-filter width_150">
    	                                    <div class="form-group">
    		                                    <select name="rto_status" class="form-control text-capitalize custom_color" tabindex="15">
    		                                        <option value=""> -- Select Status -- </option>
    		                                        <option value="Not Completed" {{ request()->get('rto_status') == 'Not Completed' ? 'selected' : '' }}>Not Completed</option>
    		                                        <option value="Completed" {{ request()->get('rto_status') == 'Completed' ? 'selected' : '' }}>Completed</option>
    		                                    </select>
    	                                    </div>
                                        </div>
                                    </th>
                                    
                                    <th><div class="search-box-container datatable-form-filter width_150"></div></th>
                                </tr>
                            </thead>
                        </table>
                        
                        <!-- Upload Document Modal -->
                        <div class="modal fade" id="uploadDocumentModal" tabindex="-1">
                            <div class="modal-dialog">
                                <div class="modal-content">
                                    
                                    <div class="modal-header">
                                        <h5 class="modal-title">Upload Document</h5>
                                        <button type="button" class="btn btn-seconday btn-sm custom_color_btn" data-bs-dismiss="modal">
                                            ✖
                                        </button>
                                    </div>
                        
                                    <div class="modal-body">
                                        
                                        <form id="uploadDocumentForm">
                                            <input type="hidden" name="obf_id" id="obf_id">
                        
                                            <div class="mb-3">
                                                <input type="file" name="document" class="form-control" required>
                                            </div>
                        
                                            <button type="submit" class="btn btn-primary">Upload</button>
                                        </form>
                        
                                        <hr>
                        
                                        <!-- Uploaded Documents List -->
                                        <div id="uploadedDocumentsList"></div>
                        
                                    </div>
                        
                                </div>
                            </div>
                        </div>
                        
                        <!-- Debit Note  Modal -->
                        <div class="modal fade" id="debitNoteModal" tabindex="-1">
                            <div class="modal-dialog">
                                <div class="modal-content">
                                    
                                    <div class="modal-header">
                                        <h5 class="modal-title">Debit Note</h5>
                                        <button type="button" class="btn btn-seconday btn-sm custom_color_btn" data-bs-dismiss="modal">
                                            ✖
                                        </button>
                                    </div>
                        
                                    <div class="modal-body">
                                        
                                        <form id="debitNotetForm">
                                            <input type="hidden" name="obf_id" id="debit_obf_id">
                                            
                                            <div class="form-group col-md-12">
                                                <label class="control-label">Invoice No.</label>
                                                <input type="text" name="debit_invoice_no" id="debit_invoice_no" class="form-control" placeholder="Enter Invoice No.">
                                                <span class="kt-form__help error debit_invoice_no"></span>
                                            </div>
                                            
                                            <div class="form-group col-md-12">
                                                <label class="control-label">Invoice Date</label>
                                                <input type="text" name="debit_invoice_date" id="debit_invoice_date" class="form-control" placeholder="Enter Invoice Date">
                                                <span class="kt-form__help error debit_invoice_date"></span>
                                            </div>
                                            
                                            <div class="form-group col-md-12">
                                                <label class="control-label">Registration Charges Payable</label>
                                                <input type="number" name="debit_note_rto" id="debit_note_rto" class="form-control hide-arrow" placeholder="Enter Amount" min="0" onkeydown="return event.key !== '-'">
                                                <span class="kt-form__help error debit_note_rto"></span>
                                            </div>
                                            
                                            <div class="form-group col-md-12">
                                                <label class="control-label">Fastag Payable</label>
                                                <input type="number" name="debit_fastag_amount" id="debit_fastag_amount" class="form-control hide-arrow" placeholder="Enter Amount"  min="0" onkeydown="return event.key !== '-'">
                                                <span class="kt-form__help error debit_fastag_amount"></span>
                                            </div>
                        
                                            <button type="submit" class="btn btn-primary">Submit</button>
                                        </form>
                                    </div>
                                </div>
                            </div>
                        </div>
                        
                        <!-- Tax Invoice  Modal -->
                        <div class="modal fade" id="taxInvoiceModal" tabindex="-1">
                            <div class="modal-dialog">
                                <div class="modal-content">
                                    
                                    <div class="modal-header">
                                        <h5 class="modal-title">Tax Invoice</h5>
                                        <button type="button" class="btn btn-seconday btn-sm custom_color_btn" data-bs-dismiss="modal">
                                            ✖
                                        </button>
                                    </div>
                        
                                    <div class="modal-body">
                                        
                                        <form id="taxInvoiceForm">
                                            <input type="hidden" name="obf_id" id="invoice_obf_id">
                        
                                            <div class="form-group col-md-12">
                                                <label class="control-label">Invoice No.</label>
                                                <input type="text" name="tax_invoice_no" id="tax_invoice_no" class="form-control" placeholder="Enter Invoice No.">
                                                <span class="kt-form__help error tax_invoice_no"></span>
                                            </div>
                                            
                                            <div class="form-group col-md-12">
                                                <label class="control-label">Invoice Date</label>
                                                <input type="text" name="tax_invoice_date" id="tax_invoice_date" class="form-control" id="tax_invoice_date" placeholder="Enter Invoice Date">
                                                <span class="kt-form__help error tax_invoice_date"></span>
                                            </div>
                        
                                            <button type="submit" class="btn btn-primary">Submit</button>
                                        </form>
                                    </div>
                                </div>
                            </div>
                        </div>
                        
                        <!-- Accessories Tax Invoice  Modal -->
                        <div class="modal fade" id="accessoriesTaxInvoiceModal" tabindex="-1">
                            <div class="modal-dialog">
                                <div class="modal-content">
                                    
                                    <div class="modal-header">
                                        <h5 class="modal-title">Accessories Tax Invoice</h5>
                                        <button type="button" class="btn btn-seconday btn-sm custom_color_btn" data-bs-dismiss="modal">
                                            ✖
                                        </button>
                                    </div>
                        
                                    <div class="modal-body">
                                        
                                        <form id="accessoriesTaxInvoiceForm">
                                            <input type="hidden" name="obf_id" id="acc_invoice_obf_id">
                        
                                            <div class="form-group col-md-12">
                                                <label class="control-label">Invoice No.</label>
                                                <input type="text" name="acc_tax_invoice_no" id="acc_tax_invoice_no" class="form-control" placeholder="Enter Invoice No.">
                                                <span class="kt-form__help error acc_tax_invoice_no"></span>
                                            </div>
                                            
                                            <div class="form-group col-md-12">
                                                <label class="control-label">Invoice Date</label>
                                                <input type="text" name="acc_tax_invoice_date" id="acc_tax_invoice_date" class="form-control" id="acc_tax_invoice_date" placeholder="Enter Invoice Date">
                                                <span class="kt-form__help error acc_tax_invoice_date"></span>
                                            </div>
                        
                                            <button type="submit" class="btn btn-primary">Submit</button>
                                        </form>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </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 type="text/javascript">
        $.ajaxSetup({
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            }
        });
        
        $(document).ready(function() {
            $('#booking_date').daterangepicker({
                autoUpdateInput: false,
                locale: {
                    format: 'DD-MM-YYYY',
                    cancelLabel: 'Clear'
                }
            });
        
            $('#booking_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').on('cancel.daterangepicker', function(ev, picker) {
                $(this).val('');
                $('#data-table').DataTable().draw();
            });
            
            $('#tax_invoice_date,#acc_tax_invoice_date').daterangepicker({
                singleDatePicker: true,
                showDropdowns: true,
                autoUpdateInput: false,
                locale: {
                    format: 'DD-MM-YYYY'
                }
            });
            
            $('#tax_invoice_date,#acc_tax_invoice_date').on('apply.daterangepicker', function (ev, picker) {
                $(this).val(picker.startDate.format('DD-MM-YYYY'));
            });
            
            $('.js-example-basic-single').select2();
    
            var tableColumns = [
                {data: 'id', name: 'id',class:'text-center id',title: 'No.', orderable: false, width:100,default: true},
                {data: 'booking_date', name: 'booking_date',class:'text-center booking_date',title: 'Date', orderable: false,default: true},
                {data: 'branch_name', name: 'branch_name',class:'text-center branch_name',title: 'Location', orderable: true,default: true},
                {data: 'customer_name', name: 'customer_name',class:'text-center customer_name',title: 'Customer Name (Bill To)', orderable: true,default: true},
                {data: 'gst', name: 'gst',class:'text-center gst',title: 'GST No. (Bill To)', orderable: true,default: true},
                {data: 'ship_to_customer_name', name: 'ship_to_customer_name',class:'text-center ship_to_customer_name',title: 'Customer Name (Ship To)', orderable: true,default: true},
                {data: 'team_name', name: 'team_name',class:'text-center team_name',title: 'Team Leader', 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: '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: 'exterior_color', name: 'exterior_color',class:'text-center exterior_color',title: 'Exterior Color', orderable: true,default: true},
                {data: 'vin_number', name: 'vin_number',class:'text-center vin_number',title: 'VIN No.', orderable: true,default: true},
                {data: 'on_road_price', name: 'on_road_price',class:'text-center on_road_price',title: 'On Road Price (A)', orderable: false,default: true},
                {data: 'booking_amount', name: 'booking_amount',class:'text-center booking_amount',title: 'Booking Amount (B(+))', orderable: false,default: true},
                // {data: 'dp_amount', name: 'dp_amount',class:'text-center dp_amount',title: 'DP Amount Received (C(+))', orderable: false,default: true},
                {data: 'final_total', name: 'final_total',class:'text-center final_total',title: 'Total received amount (B+C+D+E = F)', orderable: false,default: true},
                {data: 'finance_discount', name: 'finance_discount',class:'text-center finance_discount',title: 'Total Discount (G(-))', orderable: false,default: true},
                {data: 'net_total', name: 'net_total',class:'text-center net_total',title: 'Total Amount Receivable (A-G = H)', orderable: false,default: true},
                {data: 'access_sort_amount', name: 'access_sort_amount',class:'text-center access_sort_amount',title: 'Access / Sort Amount', orderable: false,default: true},
                {data: 'due_amount', name: 'due_amount',class:'text-center due_amount',title: 'Due Amount  (H-F=J)', orderable: false,default: true},
                {data: 'total_receipt_count', name: 'total_receipt_count',class:'text-center total_receipt_count',title: 'No. of Cash Receipt', orderable: true,default: true},
                {data: 'tax_invoice_no', name: 'tax_invoice_no',class:'text-center tax_invoice_no',title: 'Invoice No.', orderable: true,default: true},
                {data: 'tax_invoice_date', name: 'tax_invoice_date',class:'text-center tax_invoice_date',title: 'Invoice Date', orderable: true,default: true},
                {data: 'insurance_status', name: 'insurance_status',class:'text-center insurance_status',title: 'Insurance Status', orderable: true,default: true},
                {data: 'rto_status', name: 'rto_status',class:'text-center rto_status',title: 'RTO Status', 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": ""
                    },
                    // scrollX: true,
                    // scrollY: "400px", 
                    scrollCollapse: true,
                    paging: true,
                    searching: false,
        
                    bSortCellsTop : true,
                    ajax: {
                        url: '{!! route("obf_leasing") !!}',
                        method: "POST",
                        data: function (d) {
                            d.booking_date = jQuery(".datatable-form-filter input[name='booking_date']").val();
                            d.branch_name = jQuery(".datatable-form-filter input[name='branch_name']").val();
                            d.customer_name = jQuery(".datatable-form-filter input[name='customer_name']").val();
                            d.gst = jQuery(".datatable-form-filter input[name='gst']").val();
                            d.ship_to_customer_name = jQuery(".datatable-form-filter input[name='ship_to_customer_name']").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();
                            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.exterior_color = jQuery(".datatable-form-filter input[name='exterior_color']").val();
                            d.vin_number = jQuery(".datatable-form-filter input[name='vin_number']").val();
                            d.on_road_price = jQuery(".datatable-form-filter input[name='on_road_price']").val();
                            d.booking_amount = jQuery(".datatable-form-filter input[name='booking_amount']").val();
                            // d.dp_amount = jQuery(".datatable-form-filter input[name='dp_amount']").val();
                            d.final_total = jQuery(".datatable-form-filter input[name='final_total']").val();
                            d.finance_discount = jQuery(".datatable-form-filter input[name='finance_discount']").val();
                            d.net_total = jQuery(".datatable-form-filter input[name='net_total']").val();
                            d.access_sort_amount = jQuery(".datatable-form-filter input[name='access_sort_amount']").val();
                            d.due_amount = jQuery(".datatable-form-filter input[name='due_amount']").val();
                            d.total_receipt_count = jQuery(".datatable-form-filter select[name='total_receipt_count']").val();
                            d.tax_invoice_no = jQuery(".datatable-form-filter input[name='tax_invoice_no']").val();
                            d.tax_invoice_date = jQuery(".datatable-form-filter input[name='tax_invoice_date']").val();
                            d.insurance_status = jQuery(".datatable-form-filter select[name='insurance_status']").val();
                            d.rto_status = jQuery(".datatable-form-filter select[name='rto_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();
        });
        
        /** Upload Document Jquery Code */
        $(document).on('click', '.upload-doc-btn', function () {
            var id = $(this).data('id');
        
            $('#obf_id').val(id);
        
            // Open modal
            $('#uploadDocumentModal').modal('show');
        
            // Load existing documents
            loadDocuments(id);
        });
        
        function loadDocuments(id) {
            $.ajax({
                url: "{{ route('obf_leasing.get.documents') }}",
                type: "POST",
                data: { id: id },
                success: function (res) {
                    $('#uploadedDocumentsList').html(res.html);
                }
            });
        }
        
        $('#uploadDocumentForm').submit(function (e) {
            e.preventDefault();
        
            var formData = new FormData(this);
        
            $.ajax({
                url: "{{ route('obf_leasing.upload.document') }}",
                type: "POST",
                data: formData,
                processData: false,
                contentType: false,
                success: function (res) {
        
                    alert('Uploaded Successfully');
                    
                    location.reload();
        
                    // Reload documents
                    loadDocuments($('#obf_id').val());
        
                    // Reset form
                    $('#uploadDocumentForm')[0].reset();
                }
            });
        });
        
        /** Debit Note Jquery Code */
        $(document).on('click', '.debit-note-btn', function () {
            var id      = $(this).data('id');
            var rto     = $(this).data('rto');
            var fastag  = $(this).data('fastag');
            var d_invoice_no  = $(this).data('debit_invoice_no');
            var d_invoice_date  = $(this).data('debit_invoice_date');
        
            $('#debit_obf_id').val(id);
        
            // Set existing values
            $('#debit_invoice_no').val(d_invoice_no ?? '');
            $('#debit_invoice_date').val(d_invoice_date ?? '');
            $('#debit_note_rto').val(rto ?? '');
            $('#debit_fastag_amount').val(fastag ?? '');
        
            // Open modal
            $('#debitNoteModal').modal('show');
        });
        
        $(document).on('wheel', '.hide-arrow', function () {
            $(this).blur();
        });
        
        $('#debitNotetForm').submit(function (e) {
            e.preventDefault();
        
            var formData = new FormData(this);
        
            $.ajax({
                url: "{{ route('obf_leasing.debit_note') }}",
                type: "POST",
                data: formData,
                processData: false,
                contentType: false,
                success: function (res) {
        
                    // Close modal
                    $('#debitNoteModal').modal('hide');
        
                    // Reset form
                    $('#debitNotetForm')[0].reset();
        
                    // Redirect to blade page
                    if (res.redirect_url) {
                        window.open(res.redirect_url);
                    }
                }
            });
        });
        
        
        /** Tax Invoice Jquery Code */
        $(document).on('click', '.tax-invoice-btn', function () {
            var id      = $(this).data('id');
            var invoice     = $(this).data('tax_invoice_no');
            var invoice_date  = $(this).data('tax_invoice_date');
        
            $('#invoice_obf_id').val(id);
        
            // Set existing values
            $('#tax_invoice_no').val(invoice ?? '');
            
            let formattedDate = '';

            if (invoice_date) {
                let dateObj = new Date(invoice_date);
            
                let day   = String(dateObj.getDate()).padStart(2, '0');
                let month = String(dateObj.getMonth() + 1).padStart(2, '0');
                let year  = dateObj.getFullYear();
            
                formattedDate = day + '-' + month + '-' + year;
            }
            
            $('#tax_invoice_date').val(formattedDate);
        
            // Open modal
            $('#taxInvoiceModal').modal('show');
        });
        
        $('#taxInvoiceForm').submit(function (e) {
            e.preventDefault();
        
            var formData = new FormData(this);
        
            $.ajax({
                url: "{{ route('obf_leasing.tax-invoice-no-update') }}",
                type: "POST",
                data: formData,
                processData: false,
                contentType: false,
                success: function (res) {
        
                    // Close modal
                    $('#taxInvoiceModal').modal('hide');
        
                    // Reset form
                    $('#taxInvoiceForm')[0].reset();
        
                    // Redirect to blade page
                    if (res.redirect_url) {
                        window.open(res.redirect_url);
                    }
                }
            });
        });
        
        /**Accessories Tax Invoice Jquery Code */
        $(document).on('click', '.acc-tax-invoice-btn', function () {
            var id      = $(this).data('id');
            var invoice     = $(this).data('acc_tax_invoice_no');
            var invoice_date  = $(this).data('acc_tax_invoice_date');
        
            $('#acc_invoice_obf_id').val(id);
        
            // Set existing values
            $('#acc_tax_invoice_no').val(invoice ?? '');
            let formattedDate = '';

            if (invoice_date) {
                let dateObj = new Date(invoice_date);
            
                let day   = String(dateObj.getDate()).padStart(2, '0');
                let month = String(dateObj.getMonth() + 1).padStart(2, '0');
                let year  = dateObj.getFullYear();
            
                formattedDate = day + '-' + month + '-' + year;
            }
            
            $('#acc_tax_invoice_date').val(formattedDate);
        
            // Open modal
            $('#accessoriesTaxInvoiceModal').modal('show');
        });
        
        $('#accessoriesTaxInvoiceForm').submit(function (e) {
            e.preventDefault();
        
            var formData = new FormData(this);
        
            $.ajax({
                url: "{{ route('obf_leasing.acc-tax-invoice-no-update') }}",
                type: "POST",
                data: formData,
                processData: false,
                contentType: false,
                success: function (res) {
        
                    // Close modal
                    $('#accessoriesTaxInvoiceModal').modal('hide');
        
                    // Reset form
                    $('#accessoriesTaxInvoiceForm')[0].reset();
        
                    // Redirect to blade page
                    if (res.redirect_url) {
                        window.open(res.redirect_url);
                    }
                }
            });
        });
    </script>
@endsection