@extends('template.app')

@section('meta')
@endsection

@section('title')
RTO Master
@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;
    }
</style>
@endsection

@section('content')
<style>
    #data-table th, td { 
        white-space: nowrap;
        padding-bottom:0.50 rem !important;
    }
    .form-group .custom_color {
        background-color: lightgrey !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">RTO Master</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('rto_master') }}" class="text-muted">RTO Master</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">
                     <a href="{{url('/example-xlsx/sample_RTO_master.xlsx')}}" class="btn waves-effect waves-light btn-rounded btn-outline-primary pull-right" >Example Excel</a> 

                   

                    <!-- Import -->
                        <a class="btn waves-effect waves-light btn-rounded btn-outline-primary pull-right" data-toggle="modal" data-target="#exampleModal" href="Javascript:void(0)">Import</a>
                    <!-- Import -->
                    <!-- Export -->
                        <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>
                    <!-- Export -->

                     <a class="btn waves-effect waves-light btn-rounded btn-outline-primary pull-right" href="{{ route('rto_master.create') }}">Add New</a>
                    
            </div>
        </div> 
        <div class="col-sm-8"></div>
         <div class="col-sm-4">
            <div class="col-md-12 align-self-center collapse" id="collapseExample">
                <div class="customize-input float-right">
                    <form action="{{ route('rto_master.export') }}" 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>
                                    <option value="active">Active</option>
                                    <option value="inactive">Inactive</option>
                                    <option value="deleted">Deleted</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" style="min-width:100% !important;">
                <div class="card-body">
                    <table class="table table-bordered data-table" id="data-table">
                        <thead>
                            <tr>
                                <th>No</th>
                               <!-- <th>Amount</th> -->
                                <!-- <th>Percentage</th> -->
                                <!--<th>Car Model</th>
                                <th>Car Varient</th>
                                <th>Pricelist Name</th> !-->
                                <th>RTO Type</th>
                                <th>RTO Indeveidual</th>
                                 <th> Indeveidual Charges</th>
                                <th>RTO Company</th>
                                 <th>Company Charges</th>
                                <th>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="rto_type" value="{{ request()->get('rto_type', '') }}" class="form-control text-capitalize custom_color" autocomplete="off" autofocus tabindex="1">
                                        </div>
                                    </div>
                                </th>
                                <th>
                                    <div class="search-box-container datatable-form-filter">
                                        <div class="form-group is-empty">
                                            <input type="number" name="rto_tax_individual" value="{{ request()->get('rto_tax_individual', '') }}" class="form-control text-capitalize custom_color" autocomplete="off" autofocus tabindex="1">
                                        </div>
                                    </div>
                                </th>
                                <th>
                                    <div class="search-box-container datatable-form-filter">
                                        <div class="form-group is-empty">
                                            <input type="number" name="totali_individual_charges" value="{{ request()->get('totali_individual_charges', '') }}" class="form-control text-capitalize custom_color" autocomplete="off" autofocus tabindex="1">
                                        </div>
                                    </div>
                                </th>
                                <th>
                                    <div class="search-box-container datatable-form-filter">
                                        <div class="form-group is-empty">
                                            <input type="text" name="rto_tax_company" value="{{ request()->get('rto_tax_company', '') }}" class="form-control text-capitalize custom_color" autocomplete="off" autofocus tabindex="1">
                                        </div>
                                    </div>
                                </th>
                                <th>
                                    <div class="search-box-container datatable-form-filter">
                                        <div class="form-group is-empty">
                                            <input type="text" name="totalcharges" value="{{ request()->get('totalcharges', '') }}" class="form-control text-capitalize custom_color" autocomplete="off" autofocus tabindex="1">
                                        </div>
                                    </div>
                                </th>
                                <th></th>
                                <th></th>
                            </tr>
                        </thead>
                    </table>
                </div>
            </div>
        </div>
       

        <!-- Modal -->
         <div class="modal fade" id="exampleModal" 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="{{ route('rto_master.import') }}" name="form" id="form" method="post" enctype="multipart/form-data">
                       @csrf
                       <div class="modal-body">
                           <div class="row">
                               <div class="form-group col-sm-12">
                                   <label for="first_name">Upload File Here</label>
                                   <input type="file" name="file" id="file" class="form-control" placeholder="Plese upload file here" required>
                                   <span class="kt-form__help error file"></span>
                               </div>
                           </div>
                       </div>
                       <div class="modal-footer">
                           <button type="submit" class="btn btn-default">Submit!</button>
                           <button type="button" class="btn btn-primary" data-dismiss="modal">Close</button>
                       </div>
                   </form>
               </div>
               <!-- /.modal-content -->
           </div>
           <!-- /.modal-dialog -->
       </div> 
       <!-- Modal -->
    </div>
</div>
@endsection

@section('scripts')
<!--<script type="text/javascript">-->
<!--    var datatable;-->

<!--    $(document).ready(function() {-->
<!--                if ($('#data-table').length > 0) {-->
<!--                    datatable = $('#data-table').DataTable({-->
<!--                            processing: true,-->
<!--                            serverSide: true,-->

<!--                            "pageLength": 25,-->
<!--                            "iDisplayLength": 25,-->
<!--                            "responsive": true,-->
<!--                            "aaSorting": [],-->
                                // "order": [], //Initial no order.
                                //     "aLengthMenu": [
                                //     [5, 10, 25, 50, 100, -1],
                                //     [5, 10, 25, 50, 100, "All"]
                                // ],

<!--                                 "scrollX": true,-->
                                // "scrollY": '',
                                // "scrollCollapse": false,
                                // scrollCollapse: true,

                                // lengthChange: false,

<!--                                "ajax": {-->
<!--                                    "url": "{{ route('rto_master') }}",-->
<!--                                    "type": "POST",-->
<!--                                    "dataType": "json",-->
<!--                                    "data": {-->
<!--                                        _token: "{{csrf_token()}}"-->
<!--                                    }-->
<!--                                },-->
<!--                                "columnDefs": [{-->
                                    //"targets": [0, 5], //first column / numbering column
                                    "orderable": true, //set not orderable
<!--                                }, ],-->
<!--                                columns: [{-->
<!--                                        data: 'DT_RowIndex',-->
<!--                                        name: 'DT_RowIndex'-->
<!--                                    },-->
                                /*    {
                                        data: 'amount',
                                        name: 'amount'
                                    }, 
                                    {
                                        data: 'car_model_name',
                                        name: 'car_model.name'
                                    },
                                    {
                                        data: 'name',
                                        name: 'car_varient.name'
                                    },
                                    {
                                        data: 'price_list_name',
                                        name: 'pricelist_master.price_list_name'
                                    },*/
                                   /* {
                                        data: 'percentage',
                                        name: 'percentage'
                                    },*/
<!--                                     {-->
<!--                                        data: 'rto_type',-->
<!--                                        name: 'rto_type'-->
<!--                                    },-->
<!--                                     {-->
<!--                                        data: 'rto_tax_individual',-->
<!--                                        name: 'rto_tax_individual'-->
<!--                                    },-->
<!--                                    {-->
<!--                                        data: 'totali_individual_charges',-->
<!--                                        name: 'totali_individual_charges'-->
<!--                                    },-->
<!--                                     {-->
<!--                                        data: 'rto_tax_company',-->
<!--                                        name: 'rto_tax_company'-->
<!--                                    },-->
<!--                                    {-->
<!--                                        data: 'totalcharges',-->
<!--                                        name: 'totalcharges'-->
<!--                                    },-->
<!--                                    {-->
<!--                                        data: 'status',-->
<!--                                        name: 'status'-->
<!--                                    },-->
<!--                                    {-->
<!--                                        data: 'action',-->
<!--                                        name: 'action',-->
<!--                                        orderable: false,-->
<!--                                    },-->
<!--                                ]-->
<!--                            });-->
<!--                    }-->
                    // Highlight row on mouseover
<!--            $('#data-table tbody').on('mouseover', 'tr', function() {-->
<!--                $(this).addClass('highlight');-->
<!--            });-->

            // Remove highlight on mouseout
<!--            $('#data-table tbody').on('mouseout', 'tr', function() {-->
<!--                $(this).removeClass('highlight');-->
<!--            });-->
<!--                });-->

<!--            function change_status(object) {-->
<!--                var id = $(object).data("id");-->
<!--                var status = $(object).data("status");-->

<!--                if (confirm('Are you sure?')) {-->
<!--                    $.ajax({-->
<!--                        "url": "{!! route('rto_master.change.status') !!}",-->
<!--                        "dataType": "json",-->
<!--                        "type": "POST",-->
<!--                        "data": {-->
<!--                            id: id,-->
<!--                            status: status,-->
<!--                            _token: "{{ csrf_token() }}"-->
<!--                        },-->
<!--                        success: function(response) {-->
<!--                            if (response.code == 200) {-->
<!--                                datatable.ajax.reload();-->
<!--                                toastr.success('Status changed successfully', 'Success');-->
<!--                            } 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,
                    ajax: {
                        url: '{!! route("rto_master") !!}',
                        data: function (d) {
                            d.rto_type = jQuery(".datatable-form-filter input[name='rto_type']").val();
                            d.rto_tax_individual = jQuery(".datatable-form-filter input[name='rto_tax_individual']").val();
                            d.totali_individual_charges = jQuery(".datatable-form-filter input[name='totali_individual_charges']").val();
                            d.rto_tax_company = jQuery(".datatable-form-filter input[name='rto_tax_company']").val();
                            d.totalcharges = jQuery(".datatable-form-filter input[name='totalcharges']").val();
                        },
                        error : function(d) {}
                    },
                    columns: [
                        {data: 'DT_RowIndex', name: 'DT_RowIndex',class:'text-center DT_RowIndex',title: 'No.', orderable: false, width:100,default: true},
                        {data: 'rto_type', name: 'rto_type',class:'text-center rto_type',title: 'RTO Type', orderable: false,default: true},
                        {data: 'rto_tax_individual', name: 'rto_tax_individual',class:'text-center rto_tax_individual',title: 'RTO Individual', orderable: false,default: true},
                        {data: 'totali_individual_charges', name: 'totali_individual_charges',class:'text-center totali_individual_charges',title: 'Individual Charges', orderable: false,default: true},
                        {data: 'rto_tax_company', name: 'rto_tax_company',class:'text-center rto_tax_company',title: 'RTO Company', orderable: false,default: true},
                        {data: 'totalcharges', name: 'totalcharges',class:'text-center totalcharges',title: 'Company Charges', orderable: false,default: true},
                        {data: 'status', name: 'status',class:'text-center status',title: 'Status', orderable: false,default: true},
                        {data: 'action', name: 'action',title: 'Action', orderable: false, searchable: false, width:50,class:'text-center action_column',default: true}
                    ],
                    lengthMenu: [
                        [25, 50,100, -1 ],['25', '50','100', 'Show all' ]
                    ],
                    order: [],
                    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);
            
            //function change_status(object) {
                $(document).on('click', '.change-status', function () {
                    var id = $(this).data("id");
                    var status = $(this).data("status");

                    if (confirm('Are you sure?')) {
                        $.ajax({
                            "url": "{!! route('colortone.change.status') !!}",
                            "dataType": "json",
                            "type": "POST",
                            "data": {
                                id: id,
                                status: status,
                                _token: "{{ csrf_token() }}" 
                            },
                            success: function(response) {
                                if (response.code == 200) {
                                    $('#datatable').DataTable().ajax.reload();
                                    toastr.success('Status changed successfully', 'Success');
                                } else {
                                    toastr.error('Failed to change status', 'Error');
                                }
                            }
                        });
                    }
                });    
            //}
        });  
        
        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