@extends('template.app')

@section('meta')
@endsection

@section('title')
DMS Invoice Details
@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;
    }
    #data-table th {
        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">
<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">DMS Invoice Details</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('dms') }}" class="text-muted">DMS Invoice Details</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 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>
            <a class="btn waves-effect waves-light btn-rounded btn-outline-primary pull-right" href="{{ route('dms.create') }}">Add New</a>
            <a class="btn waves-effect waves-light btn-rounded btn-outline-primary pull-right" href="{{ url('/example-xlsx/dms_excel.xlsx') }}">Example Excel</a>
        </div>
        </div>
        <div class="col-sm-8"></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>Date</th>
                                <th>Invoice Number</th>
                                <th>VIN Number</th>
                                <th>Basic Amount</th>
                                <th>GST Amount</th>
                                <th>Total Amount</th>
                                <th>Get Pass Closing Date</th>
                                <th>Scheme</th>
                                <th>Remark</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="date" value="{{ request()->get('date', '') }}" 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="dms_invoice_no" value="{{ request()->get('dms_invoice_no', '') }}" 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="vin_number" value="{{ request()->get('vin_number', '') }}" 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="basic_amount" value="{{ request()->get('basic_amount', '') }}" 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="gst_amount" value="{{ request()->get('gst_amount', '') }}" 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="total_amount" value="{{ request()->get('total_amount', '') }}" 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="getpass_closing_date" value="{{ request()->get('getpass_closing_date', '') }}" 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="scheme" value="{{ request()->get('scheme', '') }}" 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="remark" value="{{ request()->get('remark', '') }}" class="form-control text-capitalize custom_color" autocomplete="off" autofocus tabindex="4">
                                        </div>
                                    </div>
                                </th>
                                <th></th>
                            </tr>
                        </thead>
                    </table>
                </div>
            </div>
        </div>
        <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('dms.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>
        <div class="modal fade" id="sampleExcelModal" tabindex="-1" role="dialog" aria-labelledby="sampleExcelModalLabel" aria-hidden="true">
          <div class="modal-dialog" role="document">
            <div class="modal-content">
              <div class="modal-header">
                <h5 class="modal-title" id="sampleExcelModalLabel">Download Sample Excel</h5>
                <button type="button" class="btn-close btn-close-white close" data-bs-dismiss="modal" aria-label="Close">&times;</button>
              </div>
              <div class="modal-body custom_height">
                <p><b>Click the button below to download a sample Excel file.</b></p>
              </div>
              <div class="modal-footer">
                <div class="row col-sm-12">
                    <div class="col-sm-2"></div>
                    <div class="col-sm-4">
                        <a href="{{ url('/example-xlsx/dms_excel.xlsx') }}" class="btn btn-outline-primary btn-bg">Download</a>
                    </div>
                    <div class="col-sm-1"></div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <!-- Modal -->
    </div>
</div>
@endsection

@section('scripts')
<script src="https://cdn.datatables.net/1.13.6/js/jquery.dataTables.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/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 type="text/javascript">-->
<!--        var datatable;-->
        
<!--        $(document).ready(function() {-->
<!--        if ($('#data-table')) {-->
<!--            datatable = $('#data-table').DataTable({-->
<!--                processing: true,-->
<!--                serverSide: true,-->
<!--                "pageLength": 25,-->
<!--                "iDisplayLength": 25,-->
<!--                "responsive": true,-->
<!--                "aaSorting": [],-->
<!--                "ajax": {-->
<!--                    "url": "{{ route('dms') }}",-->
<!--                    "type": "POST",-->
<!--                    "dataType": "json",-->
<!--                    "data": {-->
<!--                        _token: "{{csrf_token()}}"-->
<!--                    }-->
<!--                },-->
<!--                "columnDefs": [{-->
<!--                    "orderable": true,-->
<!--                }],-->
<!--                columns: [{-->
<!--                    data: 'DT_RowIndex',-->
<!--                    name: 'DT_RowIndex'-->
<!--                    },-->
<!--                    {-->
<!--                        data: 'date',-->
<!--                        name: 'date'-->
<!--                    },-->
<!--                    {-->
<!--                        data: 'dms_invoice_no',-->
<!--                        name: 'dms_invoice_no'-->
<!--                    },-->
<!--                    {-->
<!--                        data: 'vin_number',-->
<!--                        name: 'vin_number'-->
<!--                    },-->
<!--                    {-->
<!--                        data: 'engine_number',-->
<!--                        name: 'engine_number'-->
<!--                    },-->
<!--                    {-->
<!--                        data: 'basic_amount',-->
<!--                        name: 'basic_amount'-->
<!--                    },-->
<!--                    {-->
<!--                        data: 'gst_amount',-->
<!--                        name: 'gst_amount'-->
<!--                    },-->
<!--                    {-->
<!--                        data: 'total_amount',-->
<!--                        name: 'total_amount'-->
<!--                    },-->
<!--                    {-->
<!--                        data: 'getpass_closing_date',-->
<!--                        name: 'getpass_closing_date'-->
<!--                    },-->
<!--                    {-->
<!--                        data: 'scheme',-->
<!--                        name: 'scheme'-->
<!--                    },-->
<!--                    {-->
<!--                        data: 'remark',-->
<!--                        name: 'remark'-->
<!--                    },-->
<!--                    {-->
<!--                        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');-->
<!--            });-->
<!--        }-->
<!--    });-->
<!--</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("dms") !!}',
                        data: function (d) {
                            d.date = jQuery(".datatable-form-filter input[name='date']").val();
                            d.dms_invoice_no = jQuery(".datatable-form-filter input[name='dms_invoice_no']").val();
                            d.vin_number = jQuery(".datatable-form-filter input[name='vin_number']").val();
                            d.basic_amount = jQuery(".datatable-form-filter input[name='basic_amount']").val();
                            d.gst_amount = jQuery(".datatable-form-filter input[name='gst_amount']").val();
                            d.total_amount = jQuery(".datatable-form-filter input[name='total_amount']").val();
                            d.getpass_closing_date = jQuery(".datatable-form-filter input[name='getpass_closing_date']").val();
                            d.remark = jQuery(".datatable-form-filter input[name='remark']").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: 'date', name: 'date',class:'text-center date',title: 'Date', orderable: false,default: true},
                        {data: 'dms_invoice_no', name: 'dms_invoice_no',class:'text-center dms_invoice_no',title: 'Invoice Number', orderable: false,default: true},
                        {data: 'vin_number', name: 'vin_number',class:'text-center vin_number',title: 'VIN Number', orderable: false,default: true},
                        {data: 'basic_amount', name: 'basic_amount',class:'text-center basic_amount',title: 'Basic Amount', orderable: false,default: true},
                        {data: 'gst_amount', name: 'gst_amount',class:'text-center gst_amount',title: 'GST Amount', orderable: false,default: true},
                        {data: 'total_amount', name: 'total_amount',class:'text-center total_amount',title: 'Total Amount', orderable: false,default: true},
                        {data: 'getpass_closing_date', name: 'getpass_closing_date',class:'text-center getpass_closing_date',title: 'Get Pass Closing Date', orderable: false,default: true},
                        {data: 'scheme', name: 'scheme',class:'text-center scheme',title: 'Scheme', orderable: false,default: true},
                        {data: 'remark', name: 'remark',class:'text-center remark',title: 'Remark', 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: [],
                    scrollY: "450px", 
                    scrollX: true, 
                    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('products.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();
        });
        
        $('#export_excel_model').on('click', function (e) {
            e.preventDefault();
            var modal = new bootstrap.Modal(document.getElementById('sampleExcelModal'));
            modal.show();
        });
    </script>
@endsection