@extends('template.app')

@section('meta')
@endsection

@section('title')
Transit Inventories
@endsection

@section('styles')
    <style>
     .highlight {
        background-color: #ffff99; 
    }
    #data-table.dataTable tbody td {
        padding: 0px !important;
        height: 20px !important;
        line-height: 35px !important;
        font-size: 15px !important;
        text-align: center;
    }
    .form-group .custom_color {
        background-color: lightgrey !important;
    }
</style>
@endsection

@section('content')

<!-- 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 td {
        white-space: nowrap;
        padding: 0.5rem !important;
        font-size: 15px;
    }

    .select2-container .select2-selection--single
    {
     
      height: 30px;
    }
    .mt-2
    {
        font-size: 15px;
        margin-left: 15px;
    }
    
    .custom-select {
        width: 200px !important;
    }
    
    .custom-form-spacing {
      margin-bottom: -19px;
    }
    
    
    .width_150 {
        width: 150px;
    }
    .width_200 {
        width: 200px;
    }
    .width_250 {
        width: 250px;
    }
    .width_300 {
        width: 300px;
    }

</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">Transit Inventories</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('transit-inventory') }}" class="text-muted">Transit Inventories</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" href="{{url('/example-xlsx/example-inventory.xlsx')}}" download>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 -->

                 @canany(['transit_inventory-create'])
                    <a class="btn waves-effect waves-light btn-rounded btn-outline-primary pull-right" href="{{ route('transit-inventory.create') }}">Add New</a>
                @endcanany

                
            </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('transit-inventory.export') }}" method="get">
                        <div class="row">
                            <div class="form-group col-md-3 ">
                                <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>-->
                                    <!--<option value="pdi_hold">Pdi Hold</option>-->
                                    <!--<option value="sold">Sold</option>-->
                                </select>
                            </div>
                            <div class="form-group col-md-3">
                                <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">
                <div class="card-body table-responsive" id="datatable" style="text-align: center;">
                    <table class="table table-bordered data-table tables" id="data-table" cellspacing="0" width="100%">
                        <thead>
                            <tr>
                                <th>No</th>
                                <th>Date</th>
                                <th>Car Name</th>
                                <th>Variant</th>
                                <th>Branch</th>                                
                                <th>Ex Showroom Price</th>
                                <th>Purchase Price </th>
                                <th>Kin Margin </th>
                                <th>Fuel Type </th>
                                <th>VIN Number</th>
                                <th>Remarks</th>
                                <th>Aging Days</th>
                                <th>Inventory Type</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="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="car_name" value="{{ request()->get('car_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="varient_name" value="{{ request()->get('varient_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="branch" value="{{ request()->get('branch', '') }}" 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="ex_showroom_price" value="{{ request()->get('ex_showroom_price', '') }}" 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="purchase_price" value="{{ request()->get('purchase_price', '') }}" 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="kin_margin" value="{{ request()->get('kin_margin', '') }}" 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="fuel_type" value="{{ request()->get('fuel_type', '') }}" 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="remark" value="{{ request()->get('remark', '') }}" 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="aging_days" value="{{ request()->get('aging_days', '') }}" 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="inventory_type" value="{{ request()->get('inventory_type', '') }}" 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">
                                    <select name="status" class="form-control text-capitalize custom_color" tabindex="15">
                                        <option value="">-- Select Status --</option>
                                        <option value="active" {{ request()->get('status') == 'active' ? 'selected' : '' }}>Active</option>
                                        <option value="inactive" {{ request()->get('status') == 'inactive' ? 'selected' : '' }}>InActive</option>
                                        <option value="deleted" {{ request()->get('status') == 'deleted' ? 'selected' : '' }}>Deleted</option>
                                        <option value="pdi_hold" {{ request()->get('status') == 'pdi_hold' ? 'selected' : '' }}>PDI Hold</option>
                                        <option value="sold" {{ request()->get('status') == 'sold' ? 'selected' : '' }}>Sold</option>
                                        <option value="allocated" {{ request()->get('status') == 'allocated' ? 'selected' : '' }}>Allocated</option>
                                        <option value="invoice_create" {{ request()->get('status') == 'invoice_create' ? 'selected' : '' }}>Invoice Created</option>
                                    </select>
                                    </div>
                                    </div>
                                </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('transit-inventory.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 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">

</script>
<script type="text/javascript"> 
        window.change_status = function(object) {
            var id = $(object).data("id");
            var status = $(object).data("status");
    
            if (confirm('Are you sure?')) {
                $.ajax({
                    "url": "{!! route('transit-inventory.change.status') !!}",
                    "dataType": "json",
                    "type": "POST",
                    "data": {
                        id: id,
                        status: status,
                        _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');
                        }
                    }
                });
            }
        }
        $(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();
            });
            
        //     let rowCount = $("table tbody tr").length;
        // if (rowCount < 3) {
        //     $(".table").css("height", "600px");
        // }
            
        (function(window, $) {
            window.LaravelDataTables = window.LaravelDataTables || {};
            window.LaravelDataTables["dataTableBuilder"] = $("#data-table").DataTable({
                processing: true,
                serverSide: true,
                scrollY: "450px", 
                scrollX: true, 
                scrollCollapse: true, // Collapses empty space if rows are less
                autoWidth: false,  
                fixedHeader: {
                    header: true,
                    footer: true
                },
                fixedColumns: {
                    leftColumns: 1,  // Keeps the first column fixed
                    rightColumns: 1  // Optional: Keeps the last column fixed
                },
                paging: true,  
                searching: false,  
                bSortCellsTop: true,
                columnDefs: [
                    { width: "150px", targets: "_all" } // Ensures uniform column width
                ],
                ajax: {
                    url: '{!! route("transit-inventory") !!}',
                    data: function (d) {
                        d.booking_date = jQuery(".datatable-form-filter input[name='booking_date']").val();
                        d.car_name = $(".datatable-form-filter input[name='car_name']").val();
                        d.varient_name = $(".datatable-form-filter input[name='varient_name']").val();
                        d.branch = $(".datatable-form-filter input[name='branch']").val();
                        d.ex_showroom_price = $(".datatable-form-filter input[name='ex_showroom_price']").val();
                        d.purchase_price = $(".datatable-form-filter input[name='purchase_price']").val();
                        d.kin_margin = $(".datatable-form-filter input[name='kin_margin']").val();
                        d.fuel_type = $(".datatable-form-filter input[name='fuel_type']").val();
                        d.vin_number = $(".datatable-form-filter input[name='vin_number']").val();
                        d.remark = $(".datatable-form-filter input[name='remark']").val();
                        d.aging_days = $(".datatable-form-filter input[name='aging_days']").val();
                        d.inventory_type = $(".datatable-form-filter input[name='inventory_type']").val();
                        d.status = $(".datatable-form-filter select[name='status']").val();
                    }
                },
                columns: [
                    {data: 'DT_RowIndex', name: 'DT_RowIndex', class:'text-center DT_RowIndex', title: 'No.', orderable: false, width:100, default: true},
                    {data: 'booking_date', name: 'booking_date',class:'text-center booking_date',title: 'Date', orderable: false,default: true},
                    {data: 'car_name', name: 'car_name', class:'text-center car_name', title: 'Car Name', orderable: false, default: true},
                    {data: 'varient_name', name: 'varient_name', class:'text-center varient_name', title: 'Variant', orderable: false, default: true},
                    {data: 'branch', name: 'branch', class:'text-center branch', title: 'Branch', orderable: false, default: true},
                    {data: 'ex_showroom_price', name: 'ex_showroom_price', class:'text-center ex_showroom_price', title: 'Ex Showroom Price', orderable: false, default: true},
                    {data: 'purchase_price', name: 'purchase_price', class:'text-center purchase_price', title: 'Purchase Price', orderable: false, default: true},
                    {data: 'kin_margin', name: 'kin_margin', class:'text-center kin_margin', title: 'Kin Margin', orderable: false, default: true},
                    {data: 'fuel_type', name: 'fuel_type', class:'text-center fuel_type', title: 'Fuel Type', orderable: false, default: true},
                    {data: 'vin_number', name: 'vin_number', class:'text-center vin_number', title: 'VIN Number', orderable: false, default: true},
                    {data: 'remark',name: 'remark',class: 'text-center remark', title: 'Remarks',orderable: false,default: true,
                     render: function(data, type, row) {
                        if (!data) return '';
                        let shortText = data.length > 7 ? data.substr(0, 7) + '...' : data;
                        return '<span title="' + $('<div>').text(data).html() + '">' + shortText + '</span>';
                      }
                    },
                    {data: 'aging_days', name: 'aging_days', class:'text-center aging_days', title: 'Aging Days', orderable: false, default: true},
                    {data: 'inventory_type', name: 'inventory_type', class:'text-center inventory_type', title: 'Inventory Type', 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: false,  // Turn off responsive for better scroll handling
                colReorder: true,  
                dom: '<"top"f>rt<"bottom"ipl><"clear">',
                fnInitComplete: function(settings, json) {
                    $('table.table input:checkbox').each(function() {
                        if (!$(this).prop("checked")) {
                            var column = table.column($(this).attr('data-column'));
                            column.visible(false);
                        }
                    });
                },
                pageLength: 25,
                footerCallback: function (row, data, start, end, display) {
                }
            });
    
            // Ensure DataTable adjusts columns after initialization
            setTimeout(function() {
                window.LaravelDataTables["dataTableBuilder"].columns.adjust().draw();
            }, 500);
        })(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