@extends('template.app')

@section('meta') @endsection

@section('title') Used Car Report @endsection

@section('styles')
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css">
    <link href="https://cdn.jsdelivr.net/npm/select2@4.0.13/dist/css/select2.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdn.datatables.net/1.13.7/css/jquery.dataTables.min.css">
@endsection



@section('content')

<div class="page-breadcrumb">

    <div class="row">

        <div class="col-7 align-self-center">

            <h4 class="page-title text-truncate text-dark font-weight-medium mb-1">User Car Report</h4>

            <div class="d-flex align-items-center">

                <nav aria-label="breadcrumb">

                    <ol class="breadcrumb m-0 p-0">

                        <li class="breadcrumb-item"><a href="{{ route('dashboard') }}" class="text-muted">Dashboard</a></li>
                        <li class="breadcrumb-item"><a href="{{ route('allReport') }}" class="text-muted">Mis Report</a></li>
                        <li class="breadcrumb-item text-muted active" aria-current="page">Used Car Report</li>

                    </ol>

                </nav>

            </div>

        </div>

        <div class="col-5 align-self-center">

            <div class="customize-input float-right">

                <button class="btn waves-effect waves-light btn-rounded btn-outline-primary pull-right" type="button" data-toggle="collapse" data-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample">

                    Export

                </button>

            </div>

        </div>

        <div class="col-sm-8"></div>

        <div class="col-sm-4">

            <div class="col-md-12 align-self-center collapse" id="collapseExample">

                <div class="customize-input float-right">

                    <form action="{{ route('UsedCarReportExport') }}" method="get">

                        @csrf

                        <div class="row">

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

                                <select name="slug" class="form-control" required>

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

                                    <option value="all">All</option>

                                </select>

                            </div>

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

                                <button class="btn btn-primary" type="submit">Submit</button>

                            </div>

                        </div>

                    </form>

                </div>

            </div>

        </div>

    </div>

</div>



<div class="container-fluid">

    <div class="row">

        <div class="col-12">

            <div class="card mt-4">

                <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>Seller Name</th>

                                <th>Model</th>

                                <th>Varient</th>

                                <th>Manufacturing Year</th>

                                <th>Registration Number</th>

                                <th>Chassis Number</th>

                                <th>Engine Number</th>

                                <th>Color</th>

                                <th>Date of Registration</th>

                                <th>Purchase Date</th>

                                <th>Purchase Amount</th>

                                <th>HPA</th>

                                <th>Remarks</th>

                            </tr>

                            <tr class="filterrow">

                                <th>

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

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

                                            <input type="text" name="seller_name" value="{{ request()->get('seller_name', '') }}" class="form-control text-capitalize" id="seller_name" autocomplete="off" tabindex="1">

                                        </div>

                                    </div>

                                </th>

                                <th>

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

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

                                            <input type="text" name="company_name" value="{{ request()->get('company_name', '') }}" class="form-control text-capitalize" id="company_name" autocomplete="off" tabindex="2">

                                        </div>

                                    </div>

                                </th>



                                <th>

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

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

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

                                        </div>

                                    </div>

                                </th>

                                <th>

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

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

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

                                        </div>

                                    </div>

                                </th>

                                <th>

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

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

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

                                        </div>

                                    </div>

                                </th>

                                <th>

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

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

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

                                        </div>

                                    </div>

                                </th>

                                <th>

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

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

                                            <input type="text" name="engine_number" value="{{ request()->get('engine_number', '') }}" class="form-control text-capitalize custom_color" id="engine_number" 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="colour" value="{{ request()->get('colour', '') }}" class="form-control text-capitalize custom_color" id="colour" autocomplete="off" autofocus tabindex="8">

                                        </div>

                                    </div>

                                </th>

                                <th>

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

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

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

                                        </div>

                                    </div>

                                </th>

                                <th>

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

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

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

                                        </div>

                                    </div>

                                </th>

                                <th>

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

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

                                            <input type="text" name="total_exchange_amount" value="{{ request()->get('total_exchange_amount', '') }}" class="form-control text-capitalize custom_color" id="total_exchange_amount" 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="HPA" value="{{ request()->get('HPA', '') }}" class="form-control text-capitalize custom_color" id="HPA" 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="remarks" value="{{ request()->get('remarks', '') }}" class="form-control text-capitalize custom_color" id="remarks" autocomplete="off" autofocus tabindex="13">

                                        </div>

                                    </div>

                                </th>

                            </tr>

                        </thead>

                    </table>

                </div>

            </div>

        </div>

@endsection



@section('scripts')

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

<script src="https://cdn.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')

        }

    });

</script>

<script type="text/javascript">

    



    $(document).ready(function() {

        

        let rowCount = $("table tbody tr").length;

        if (rowCount < 3) {

            $(".table").css("height", "600px");

        }



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



        var tableColumns = [

            { data: 'seller_name' },

            { data: 'company_name' },

            { data: 'variant' },

            { data: 'manufacturing_year'},

            { data: 'registration_number'},

            { data: 'chassis_number' },

            { data: 'engine_number' },

            { data: 'colour'},

            { data: 'date_of_registration'},

            { data: 'purchase_date'},

            { data: 'total_exchange_amount'},

            { data: 'HPA'},

            { data: 'remarks'}

        ];



        (function(window, $) {

            window.LaravelDataTables = window.LaravelDataTables || {};

            window.LaravelDataTables["dataTableBuilder"] = $("#data-table").DataTable({

                processing: true,

                serverSide: true,

                language: {

                    "info": "_START_ - _END_ of _TOTAL_",

                    "lengthMenu": "_MENU_ ",

                    "infoFiltered": ""

                },

                // scrollY: '400px',

                scrollCollapse: true,

                paging: true,

                searching: false,



                bSortCellsTop : true,

                ajax: {

                    url: '{!! route("getUsedCarReport") !!}',

                    method: "POST",

                    data: function (d) {

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

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

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

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

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

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

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

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

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

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

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

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

                        d.remarks = jQuery(".datatable-form-filter input[name='remarks']").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();

        });

        

        $('#submit-btn').on('click', function () {

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

        });





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

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

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

            e.preventDefault();

        }

    });



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

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

        e.preventDefault();

    });



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

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

        e.preventDefault();

    });

}); 

</script>

@endsection