@extends('template.app')



@section('meta')

@endsection



@section('title')

Orders

@endsection



@section('styles')

<style>

     .highlight {

        background-color: #ffff99; /* Change to desired highlight color */

    }

    #data-table.dataTable tbody td {

        padding: 0px !important;

        height: 20px !important;

        line-height: 35px !important;

        font-size: 15px !important;

        text-align: center;

    }

    .form-group .custom_color {

        background-color: lightgrey !important;

    }

</style>

@endsection



@section('content')

<!-- Flatpickr CSS -->

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css">

<link href="https://cdn.jsdelivr.net/npm/select2@4.0.13/dist/css/select2.min.css" rel="stylesheet">

<link rel="stylesheet" href="https://cdn.datatables.net/1.13.7/css/jquery.dataTables.min.css">

<style>

    #data-table th, td { 

        white-space: nowrap;

        padding-bottom:0.50 rem !important;

    }
    
    .btn {
        display: inline-block !important;
    }

</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">Orders</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('order') }}" class="text-muted">Orders</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">

            </div>

        </div>

    </div>

</div>

<div class="container-fluid">

    <div class="row">

        <div class="col-12">

            <div class="card table-full" style="min-width:100% !important;">

                <div class="card-body">

                    <table class="table table-bordered data-table" id="data-table" style="text-align: center;">

                        <thead>

                            <tr>

                                <th>No</th>

                                <th>Date</th> 

                                <th>Branch</th>

                                <th>Customer Name</th>

                                <th>KEC Name</th>

                                <th>Vehicle Model </th>

                                <th>Varient </th>

                                <th>Allocation Count </th>

                                <th>Aging Days</th>

                                <th>VIN Number</th>

                                <th width="100">On Road Price</th>

                                <th width="100">Received Amount</th>

                                <th width="100">Due Amount</th>

                                <th>Invoice No.</th>

                                <th>Invoice Date</th>

                                <th>Status</th>

                                <th>Insurance Status</th>

                                <th>RTO Status</th>

                                <th>Municipal Tax Status</th>

                                <th>Action</th>

                            </tr>

                            <tr class="filterrow">

                                <th></th>

                                <th>

                                    <div class="search-box-container datatable-form-filter">

                                        <div class="form-group is-empty">

                                            <input type="text" name="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">

                                        <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">

                                        <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">

                                        <div class="form-group is-empty">

                                            <input type="text" name="kec_name" value="{{ request()->get('kec_name', '') }}" class="form-control text-capitalize custom_color" autocomplete="off" autofocus tabindex="4">

                                        </div>

                                    </div>

                                </th>

                                <th> 

                                    <div class="search-box-container datatable-form-filter">

                                        <div class="form-group is-empty">

                                            <input type="text" name="carmodel" value="{{ request()->get('carmodel', '') }}" class="form-control text-capitalize custom_color" autocomplete="off" autofocus tabindex="5">

                                        </div>

                                    </div>

                                </th>

                                <th> 

                                    <div class="search-box-container datatable-form-filter">

                                        <div class="form-group is-empty">

                                            <input type="text" name="carvarient" value="{{ request()->get('carvarient', '') }}" class="form-control text-capitalize custom_color" autocomplete="off" autofocus tabindex="6">

                                        </div>

                                    </div>

                                </th>

                                <th>

                                <div class="search-box-container datatable-form-filter">

                                        <div class="form-group is-empty">

                                            <input type="text" name="allocation_count" value="{{ request()->get('allocation_count', '') }}" class="form-control text-capitalize custom_color" autocomplete="off" autofocus tabindex="7">

                                        </div>

                                    </div>

                                </th>

                                <th>

                                    <div class="search-box-container datatable-form-filter">

                                        <div class="form-group is-empty">

                                            <input type="text" name="aging_days" value="{{ request()->get('aging_days', '') }}" class="form-control text-capitalize custom_color" autocomplete="off" autofocus tabindex="8">

                                        </div>

                                    </div>

                                </th>

                                <th>

                                    <div class="search-box-container datatable-form-filter">

                                        <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="9">

                                        </div>

                                    </div>

                                </th>

                                <th>

                                    <div class="search-box-container datatable-form-filter">

                                        <div class="form-group is-empty">

                                            <input type="text" name="on_road_price" value="{{ request()->get('on_road_price', '') }}" class="form-control text-capitalize custom_color" autocomplete="off" autofocus tabindex="10">

                                        </div>

                                    </div>

                                </th>

                                <th>

                                    <div class="search-box-container datatable-form-filter">

                                        <div class="form-group is-empty">

                                            <input type="text" name="received_amount" value="{{ request()->get('received_amount', '') }}" class="form-control text-capitalize custom_color" autocomplete="off" autofocus tabindex="11">

                                        </div>

                                    </div>

                                </th>

                                <th>

                                    <div class="search-box-container datatable-form-filter">

                                        <div class="form-group is-empty">

                                            <input type="text" name="due_amount" value="{{ request()->get('due_amount', '') }}" class="form-control text-capitalize custom_color" autocomplete="off" autofocus tabindex="12">

                                        </div>

                                    </div>

                                </th>

                                <th>

                                    <div class="search-box-container datatable-form-filter">

                                        <div class="form-group is-empty">

                                            <input type="text" name="invoice_no" value="{{ request()->get('invoice_no', '') }}" class="form-control text-capitalize custom_color" autocomplete="off" autofocus tabindex="13">

                                        </div>

                                    </div>

                                </th>

                                <th>

                                    <div class="search-box-container datatable-form-filter">

                                        <div class="form-group is-empty">

                                            <input type="text" name="invoice_date" value="{{ request()->get('invoice_date', '') }}" class="form-control text-capitalize custom_color" autocomplete="off" autofocus tabindex="14">

                                        </div>

                                    </div>

                                </th>

                                <th>

                                  <div class="search-box-container datatable-form-filter">

                                    <div class="form-group">

                                        <select name="status" class="form-control text-capitalize custom_color" tabindex="15">

                                            <option value="">-- Select Status --</option>

                                            <option value="waiting" {{ request()->get('status') == 'waiting' ? 'selected' : '' }}>Waiting</option>

                                            <option value="direct_delivery" {{ request()->get('status') == 'direct_delivery' ? 'selected' : '' }}>Direct Delivery</option>

                                            <option value="delivered" {{ request()->get('status') == 'delivered' ? 'selected' : '' }}>Delivered</option>

                                            <option value="cancled" {{ request()->get('status') == 'cancled' ? 'selected' : '' }}>Cancelled</option>

                                            <option value="finance_apporve" {{ request()->get('status') == 'finance_apporve' ? 'selected' : '' }}>Finance Approved</option>

                                            <option value="disbursement" {{ request()->get('status') == 'disbursement' ? 'selected' : '' }}>Disbursement</option>

                                            <option value="all_payment_done" {{ request()->get('status') == 'all_payment_done' ? 'selected' : '' }}>All Payment Done</option>

                                            <option value="ready_to_deliver" {{ request()->get('status') == 'ready_to_deliver' ? 'selected' : '' }}>Ready to Deliver</option>

                                            <option value="pdi_reject" {{ request()->get('status') == 'pdi_reject' ? 'selected' : '' }}>PDI Reject</option>

                                            <option value="pdi_approve" {{ request()->get('status') == 'pdi_approve' ? 'selected' : '' }}>PDI Approve</option>

                                            <option value="invoice_create" {{ request()->get('status') == 'invoice_create' ? 'selected' : '' }}>Invoice Created</option>

                                            <option value="deal_generated" {{ request()->get('status') == 'deal_generated' ? 'selected' : '' }}>Deal Generated</option>

                                            <option value="invoice_cancel" {{ request()->get('status') == 'invoice_cancel' ? 'selected' : '' }}>Invoice Cancelled</option>

                                            <option value="refund_process" {{ request()->get('status') == 'refund_process' ? 'selected' : '' }}>Refund Process</option>

                                        </select>

                                    </div>

                                  </div>

                                </th>

                                <th><div class="search-box-container datatable-form-filter">

                                        <div class="form-group is-empty">

                                            <input type="text" name="insurance_status" value="{{ request()->get('insurance_status', '') }}" class="form-control text-capitalize custom_color" autocomplete="off" autofocus tabindex="16">

                                        </div>

                                    </div>

                                </th>

                                <th><div class="search-box-container datatable-form-filter">

                                        <div class="form-group is-empty">

                                            <input type="text" name="rto_status" value="{{ request()->get('rto_status', '') }}" class="form-control text-capitalize custom_color" autocomplete="off" autofocus tabindex="17">

                                        </div>

                                    </div>

                                </th>

                                <th><div class="search-box-container datatable-form-filter">

                                        <div class="form-group is-empty">

                                            <input type="text" name="municipal_tax_status" value="{{ request()->get('municipal_tax_status', '') }}" class="form-control text-capitalize custom_color" autocomplete="off" autofocus tabindex="18">

                                        </div>

                                    </div>

                                </th>

                                <th></th>

                            </tr>

                        </thead>

                    </table>

                </div>

            </div>

        </div>

    </div>

</div>



<!-- Modal -->

<div class="modal fade" id="DescModal" role="dialog">

    <div class="modal-dialog">

        <div class="modal-content">

            <div class="modal-header">

                <h3 class="modal-title">Import</h3>

                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>



            </div>

            <form action="">

                <div class="modal-body">

                    

                        <input type="hidden" name="id" id="id" value="">

                        <input type="hidden" name="status" id="status" value="">

                        <label for="">Enter Your Reason</label>

                        <textarea placeholder="Please Enter Your Reason" class="form-control" name="reason" id="reason" cols="30" rows="10"></textarea>

                    



                </div>

                <div class="modal-footer">

                    <button type="button" class="btn btn-default " onclick="status_reject(this);" >Apply!</button>

                    <button type="button" class="btn btn-primary" data-dismiss="modal">Close</button>

                </div>

            </form>

        </div>

        <!-- /.modal-content -->

        

    </div>

    <!-- /.modal-dialog -->

</div>



<!-- Modal For Cancel -->

<div class="modal fade" id="invoiceCancelReasonModal" role="dialog">

    <div class="modal-dialog">

        <div class="modal-content">

            <div class="modal-header">

                <h3 class="modal-title" id="Cancel_module_title">Invoice Cancellation Reason</h3> 

                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close">&times;</button>

            </div> 

            <div class="modal-body">

                <form id="invoiceCancelReasonForm">

                    @csrf

                    <input type="hidden" id="cancel_record_id" name="record_id">

                    <input type="hidden" id="status" name="status">

                    <div class="row">

                        <div class="form-group col-sm-2"></div>

                        <div class="form-group col-sm-8">

                            <textarea name="remark" id="remark" class="form-control" placeholder="Enter Remark"></textarea>

                        </div>

                        <div class="form-group col-sm-2"></div>

                    </div>

                </form>    

            </div>

            <div class="modal-footer">

                <button type="submit" id="invoiceCancelReasonSubmit" class="btn btn-outline-primary btn-sm pull-right">Submit</button>

                <button type="button" class="btn btn-outline-primary btn-sm pull-right" data-dismiss="modal">Close</button>

            </div>  

        </div>

        <!-- /.modal-content -->

    </div>

    <!-- /.modal-dialog -->

</div>

<!-- Modal -->





 <div class="row justify-content-center">

  <div class="col-md-6">

    <div class="card">

      <div class="card-header text-center">

        <h5 class="card-title mb-0">Branch Wise</h5>

      </div>

      <div class="card-body">

        <div class="chart-container d-flex justify-content-center">

          <canvas id="pieChart1" width="500" height="250"></canvas>

        </div>

      </div>

    </div>

  </div>

  <div class="col-md-6">

    <div class="card">

      <div class="card-header text-center">

        <h5 class="card-title mb-0">Model Wise</h5>

      </div>

      <div class="card-body">

        <div class="chart-container d-flex justify-content-center">

          <canvas id="pieChart2" width="500" height="250"></canvas>

        </div>

      </div>

    </div>

  </div>

   <div class="col-md-6">

    <div class="card">

      <div class="card-header text-center">

        <h5 class="card-title mb-0">Status Wise</h5>

      </div>

      <div class="card-body">

        <div class="chart-container d-flex justify-content-center">

          <canvas id="pieChart3" width="500" height="250"></canvas>

        </div>

      </div>

    </div>

  </div>

  <div class="col-md-6">

    <div class="card">

      <div class="card-header text-center">

        <h5 class="card-title mb-0">Varient Wise</h5>

      </div>

      <div class="card-body">

        <div class="chart-container d-flex justify-content-center">

          <canvas id="pieChart4" width="500" height="1000"></canvas>

        </div>

      </div>

    </div>

  </div>

</div>



<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>



<script>

$(document).ready(function () {

    $.ajax({

        url: "{{ route('order.getOrderData') }}",

        method: "GET",

        success: function (data) {

            // Correctly assign the labels and counts

            let branchLabels = data.branch.branchLabels;

            let branchCounts = data.branch.branchCounts;

            let modelLabels = data.model.modelLabels;

            let modelCounts = data.model.modelCounts;

            let statusLabels = data.status.statusLabels;

            let statusCounts = data.status.statusCounts;

            let varientLabels = data.varient.varientLabels;

            let varientCounts = data.varient.varientCounts;

            

            // Render Pie chart for Branch Wise data

            if (branchLabels.length && branchCounts.length) {

                let ctx1 = document.getElementById('pieChart1').getContext('2d');

                new Chart(ctx1, {

                    type: 'pie',

                    data: {

                        labels: branchLabels,

                        datasets: [{

                            label: 'Branch Wise',

                            data: branchCounts,

                            backgroundColor: ['#FF6384', '#36A2EB', '#FFCE56', '#4BC0C0', '#9966FF', '#FF9F40'],

                            borderWidth: 1

                        }]

                    },

                    options: {

                        responsive: true,

                        plugins: {

                            legend: { 

                                position: 'top',

                                labels: {

                                    color: '#fff' // Set legend font color to white

                                } 

                            },

                            tooltip: {

                                callbacks: {

                                    label: function (context) {

                                        const total = context.dataset.data.reduce((a, b) => a + b, 0);

                                        const value = context.raw;

                                        const percentage = ((value / total) * 100).toFixed(2);

                                        return `${context.label}: (${percentage}%)`;

                                    }

                                }

                            }

                        }

                    }

                });

            } else {

                console.log('No branch data available for the pie chart');

            }



            // Render Pie chart for Model Wise data

            if (modelLabels.length && modelCounts.length) {

                let ctx2 = document.getElementById('pieChart2').getContext('2d');

                new Chart(ctx2, {

                    type: 'pie',

                    data: {

                        labels: modelLabels,

                        datasets: [{

                            label: 'Model Wise',

                            data: modelCounts,

                            backgroundColor: ['#FF6384', '#36A2EB', '#FFCE56', '#4BC0C0', '#9966FF', '#FF9F40'],

                            borderWidth: 1

                        }]

                    },

                    options: {

                        responsive: true,

                        plugins: {

                            legend: { 

                                position: 'top',

                                labels: {

                                    color: '#fff' // Set legend font color to white

                                }

                            },

                            tooltip: {

                                callbacks: {

                                    label: function (context) {

                                        const total = context.dataset.data.reduce((a, b) => a + b, 0);

                                        const value = context.raw;

                                        const percentage = ((value / total) * 100).toFixed(2);

                                        return `${context.label}: (${percentage}%)`;

                                    }

                                }

                            }

                        }

                    }

                });

            } else {

                console.log('No model data available for the pie chart');

            }

            // Render Pie chart for Status Wise data

            if (statusLabels.length && statusCounts.length) {

                let ctx3 = document.getElementById('pieChart3').getContext('2d');

                new Chart(ctx3, {

                    type: 'pie',

                    data: {

                        labels: statusLabels,

                        datasets: [{

                            label: 'Status Wise',

                            data: statusCounts,

                            backgroundColor: ['#FF6384', '#36A2EB', '#FFCE56', '#4BC0C0', '#9966FF', '#FF9F40'],

                            borderWidth: 1

                        }]

                    },

                    options: {

                        responsive: true,

                        plugins: {

                            legend: { 

                                position: 'top',

                                labels: {

                                    color: '#fff' // Set legend font color to white

                                } 

                            },

                            tooltip: {

                                callbacks: {

                                    label: function (context) {

                                        const total = context.dataset.data.reduce((a, b) => a + b, 0);

                                        const value = context.raw;

                                        const percentage = ((value / total) * 100).toFixed(2);

                                        return `${context.label}: (${percentage}%)`;

                                    }

                                }

                            }

                        }

                    }

                });

            } else {

                console.log('No status data available for the pie chart');

            }



            // Render Pie chart for Varient Wise data

            if (varientLabels.length && varientCounts.length) {

                let ctx4 = document.getElementById('pieChart4').getContext('2d');

                new Chart(ctx4, {

                    type: 'pie',

                    data: {

                        labels: varientLabels,

                        datasets: [{

                            label: 'Varient Wise',

                            data: varientCounts,

                            backgroundColor: ['#FF6384', '#36A2EB', '#FFCE56', '#4BC0C0', '#9966FF', '#FF9F40'],

                            borderWidth: 1

                        }]

                    },

                    options: {

                        responsive: true,

                        plugins: {

                            legend: { 

                                position: 'top',

                                labels: {

                                    color: '#fff' // Set legend font color to white

                                } 

                            },

                            tooltip: {

                                callbacks: {

                                    label: function (context) {

                                        const total = context.dataset.data.reduce((a, b) => a + b, 0);

                                        const value = context.raw;

                                        const percentage = ((value / total) * 100).toFixed(2);

                                        return `${context.label}: (${percentage}%)`;

                                    }

                                }

                            }

                        }

                    }

                });

            } else {

                console.log('No varient data available for the pie chart');

            }

        },

        error: function (xhr, status, error) {

            console.error("Error fetching data:", error);

        }

    });

});



</script>

<style>

  .chart-container {

    display: flex;

    justify-content: center;

    align-items: center;

    height: 100%;

  }



  canvas {

    max-width: 100%;

    max-height: 100%;

  }

  /*.card-body {

      margin-right: 40px;

      margin-left: 40px;

  }

  .card-header{

      margin-right: 40px;

      margin-left: 40px;

  }

  .card.mt-4 {

        margin-right: 40px;

        margin-left: 40px;

    }

  .card {

        margin-right: 40px;

        margin-left: 40px;

        margin-top: 20px;

        margin-bottom: 20px;

    }
*/


</style>



<script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-datalabels@2.0.0"></script>

@endsection



@section('scripts')

<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://code.jquery.com/jquery-3.6.0.min.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">

    window.change_status = function(object){

        var id = $(object).data("id");

        var obf_id = $(object).data("obf-id") || 0;

        var status = $(object).data("status");

        if(status == 'delete'){

            status = 'deleted';

        }

        if (confirm('Are you sure you want to change Status ?')) {

            $.ajax({

                "url": "{!! route('order.change_status') !!}",

                "dataType": "json",

                "type": "POST",

                "data":{

                    id: id,

                    obf_id: obf_id,

                    status: status,

                    _token: "{{ csrf_token() }}"

                },

                success: function (response){

    

                    if (response.code == 200){

                        if(response.obf_id != undefined){

                            window.location.href="{{url('order/payment_pending_detail')}}?obf_id="+response.obf_id;

                        }else{

                            window.LaravelDataTables["dataTableBuilder"].ajax.reload();

                            toastr.success('Status chagned successfully', 'Success');

                        }                        

                    }else{

                        toastr.error('Failed to change status', 'Error');

                    }

                }

            });

        }

    }



    window.change_status_reject = function() {

        var id = $(object).data("id");

        var status = $(object).data("status");

        $('#DescModal').modal("show");

        $('#id').val(id);

        $('#status').val(status);

    } 





     window.status_reject = function() {

        var id = $('#id').val();

        var status = $('#status').val();

        var reason = $('#reason').val();

        $('#DescModal').modal("hide");

        $('#id').val('');

        $('#status').val('');

        $.ajax({

            "url": "{!! route('order.change_status') !!}",

            "dataType": "json",

            "type": "POST",

            "data": {

                id: id,

                status: status,

                reason: reason,

                _token: "{{ csrf_token() }}"

            },

            success: function(response) {

                if (response.code == 200) {

                    window.LaravelDataTables["dataTableBuilder"].ajax.reload();

                    toastr.success('Status changed successfully', 'Success');

                } else {

                    toastr.error('Failed to change status', 'Error');

                }

            }

        });

    }

    

    window.payment_details = function(object) {

        var id = $(object).data("id");

        var obf_id = $(object).data("obf-id") || 0;

        var status = $(object).data("status");

        

        $('#id').val('');

        $('#status').val('');

        window.location.href = "{{ url('order/payment_pending_detail') }}" + 

        "?id=" + id + 

        "&obf_id=" + obf_id + 

        "&status=" + encodeURIComponent(status);

    }

    

    function invoice_cancel_status(object) {

        var modalElement = document.getElementById('invoiceCancelReasonModal');

        var recordId = $(object).data("id"); 

        var status = $(object).data("status");

        

        $("#cancel_record_id").val(recordId); // Store record ID

        $("#status").val(status);

        

        if (modalElement) {

            var myModal = new bootstrap.Modal(modalElement);

            myModal.show(); // Open modal

        } else {

            console.error("Modal element not found in DOM!");

        }

    }

    

    $(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();

        });

        

        $("#invoiceCancelReasonSubmit").on("click", function () {

            var recordId = $("#cancel_record_id").val();

            var cancelRemark = $("#remark").val();

            var status = $("#status").val();



            $.ajax({

                url: "{{ route('order.invoice_cancel') }}",  // Change this to your actual route

                method: "POST",

                data: {

                    _token: "{{ csrf_token() }}", // CSRF token for Laravel

                    record_id: recordId,

                    cancel_remark: cancelRemark,

                    status: status

                },

                success: function (response) {

                    if(response.success === true){

                        window.LaravelDataTables["dataTableBuilder"].ajax.reload();

                        toastr.success('Status changed successfully', 'Success');

                        $("#invoiceCancelReasonModal").find('show').removeClass('show').addClass('hide');

                        location.reload();

                    } else {

                        toastr.error('Failed to change status', 'Error');

                    }

                    

                    

                },

            });

        });

    });

</script>

<script type="text/javascript"> 

    $(document).ready(function() {

    (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": ""

            },

            paging: true,

            searching: false,

            bSortCellsTop: true,

            scrollX: true, 

            scrollY: "600px", 

            scrollCollapse: true, 

            ajax: {

                url: "{{ route('order') }}",

                data: function (d) {

                    d.booking_date = jQuery(".datatable-form-filter input[name='booking_date']").val();

                    d.branch_name = $(".datatable-form-filter input[name='branch_name']").val();

                    d.customer_name = $(".datatable-form-filter input[name='customer_name']").val();

                    d.kec_name = $(".datatable-form-filter input[name='kec_name']").val();

                    d.carmodel = $(".datatable-form-filter input[name='carmodel']").val();

                    d.carvarient = $(".datatable-form-filter input[name='carvarient']").val();

                    d.allocation_count = $(".datatable-form-filter input[name='allocation_count']").val();

                    d.aging_days = $(".datatable-form-filter input[name='aging_days']").val();

                    d.vin_number = $(".datatable-form-filter input[name='vin_number']").val();

                    d.on_road_price = $(".datatable-form-filter input[name='on_road_price']").val();

                    d.received_amount = $(".datatable-form-filter input[name='received_amount']").val();

                    d.due_amount = $(".datatable-form-filter input[name='due_amount']").val();

                    d.invoice_no = jQuery(".datatable-form-filter input[name='invoice_no']").val();

                    d.invoice_date = jQuery(".datatable-form-filter input[name='invoice_date']").val();

                    d.status = $(".datatable-form-filter select[name='status']").val();

                    d.insurance_status = $(".datatable-form-filter input[name='insurance_status']").val();

                    d.rto_status = $(".datatable-form-filter input[name='rto_status']").val();

                    d.municipal_tax_status = $(".datatable-form-filter input[name='municipal_tax_status']").val();

                },

                error: function(d) {}

            },

            columns: [

                {data: 'DT_RowIndex', name: 'DT_RowIndex', class:'text-center DT_RowIndex', title: 'No.', orderable: false, width:100},

                {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: 'Branch', orderable: false},

                {data: 'customer_name', name: 'customer_name', class:'text-center customer_name', title: 'Customer Name', orderable: false},

                {data: 'kec_name', name: 'kec_name', class:'text-center kec_name', title: 'KEC Name', orderable: false},

                {data: 'carmodel', name: 'carmodel', class:'text-center carmodel', title: 'Vehicle Model', orderable: false},

                {data: 'carvarient', name: 'carvarient', class:'text-center carvarient', title: 'Varient', orderable: false},

                {data: 'allocation_count', name: 'allocation_count', class:'text-center allocation_count', title: 'Allocation Count', orderable: false},

                {data: 'aging_days', name: 'aging_days', class:'text-center aging_days', title: 'Aging Days', orderable: false},

                {data: 'vin_number', name: 'vin_number', class:'text-center vin_number', title: 'VIN Number', orderable: false},

                {data: 'on_road_price', name: 'on_road_price', class:'text-center on_road_price', title: 'On Road Price', orderable: false},

                {data: 'received_amount', name: 'received_amount', class:'text-center received_amount', title: 'Received Amount', orderable: false},

                {data: 'due_amount', name: 'due_amount', class:'text-center due_amount', title: 'Due Amount', orderable: false},

                {data: 'invoice_no', name: 'invoice_no',class:'text-center invoice_no',title: 'Invoice No.', orderable: true,default: true},

                {data: 'invoice_date', name: 'invoice_date',class:'text-center invoice_date',title: 'Invoice Date', orderable: true,default: true},

                {data: 'status', name: 'status', class:'text-center status', title: 'Status', orderable: false},

                {data: 'insurance_status', name: 'insurance_status', class:'text-center insurance_status', title: 'Insurance Status', orderable: false},

                {data: 'rto_status', name: 'rto_status', class:'text-center rto_status', title: 'RTO Status', orderable: false},

                {data: 'municipal_tax_status', name: 'municipal_tax_status', class:'text-center municipal_tax_status', title: 'Municipal Tax Status', orderable: false},

                {data: 'action', name: 'action', title: 'Action', orderable: false, searchable: false, width:50, class:'text-center action_column'}

            ],

            lengthMenu: [

                [25, 50, 100, -1], ['25', '50', '100', 'Show all']

            ],

            order: [],

            responsive: false, 

            colReorder: {

                enable: false,

            },

            dom: '<"top"f>rt<"bottom"ipl><"clear">',

            fnInitComplete: function(settings, json) {

                $('table.table input:checkbox').map(function() {

                    if(!$(this).prop("checked")) {

                        var column = table.column($(this).attr('data-column'));

                        column.visible(false);

                    }

                });

            },

            pageLength: 25,

        });

    })(window, jQuery);



    $('.datatable-form-filter input').on('keyup', function (e) {

        if($(this).val().length >= 3 || e.keyCode == 13 || !$(this).val()) {

            window.LaravelDataTables["dataTableBuilder"].draw();

            e.preventDefault();

        }

    });



    $('.datatable-form-filter select').on('change', function (e) {

        window.LaravelDataTables["dataTableBuilder"].draw();

        e.preventDefault();

    });



    $('input:checkbox[name="name_sort_asc"],input:checkbox[name="name_sort_desc"]').on('click', function (e) {

        window.LaravelDataTables["dataTableBuilder"].draw();

        e.preventDefault();

    });

});

</script>



@endsection