@extends('template.app')

@section('meta')
@endsection

@section('title')
Inventories
@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">
<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;
    }
</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">Car allocate Delearlist</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('inventory.car_allocate_delearlist') }}" class="text-muted">Car allocate Delearlist</a></li>
                    </ol>
                </nav>
            </div>
        </div>
        <div class="col-5 align-self-center">
        
        <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('inventory.export') }}" method="get">
                        <div class="row">
                            <div class="form-group col-md-12 ">
                                <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">
                    <table class="table table-bordered data-table" id="data-table" style="text-align: center;">
                        <thead>
                            <tr>
                                <th>No</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>Delear Name </th>
                                <th>Aging Days</th>
                                <th>Inventory Type</th>
                                <th>Invoice No</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="car_name" value="{{ request()->get('car_name', '') }}" 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="varient_name" value="{{ request()->get('varient_name', '') }}" 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="branch" value="{{ request()->get('branch', '') }}" 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="ex_showroom_price" value="{{ request()->get('ex_showroom_price', '') }}" 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="purchase_price" value="{{ request()->get('purchase_price', '') }}" 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="kin_margin" value="{{ request()->get('kin_margin', '') }}" 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="fuel_type" value="{{ request()->get('fuel_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="text" name="vin_number" value="{{ request()->get('vin_number', '') }}" 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="delear_name" value="{{ request()->get('delear_name', '') }}" 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="aging_days" value="{{ request()->get('aging_days', '') }}" 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="inventory_type" value="{{ request()->get('inventory_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="text" name="invoice_no" value="{{ request()->get('invoice_no', '') }}" class="form-control text-capitalize custom_color" autocomplete="off" autofocus tabindex="24">
                                        </div>
                                    </div>
                                </th>
                                <th>
                                    <div class="search-box-container datatable-form-filter">
                                        <div class="form-group is-empty">
                                            <input type="text" name="status" value="{{ request()->get('status', '') }}" class="form-control text-capitalize custom_color" autocomplete="off" autofocus tabindex="1">
                                        </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('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">
    // var datatable;

    // $(document).ready(function()
    // {
    //     if ($('#data-table').length > 0) 
    //     {
    //         datatable = $('#data-table').DataTable({
    //         processing: true,
    //         serverSide: true,
            
    //         "ajax": {
    //             "url": "{{ route('inventory.car_allocate_delearlist') }}",
    //             "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: 'car_name',
    //                 name: 'car_name'
    //             },
    //             {
    //                 data: 'varient_name',
    //                 name: 'varient_name'
    //             },
    //             {
    //                 data: 'branch',
    //                 name: 'branch'
    //             },
    //             {
    //                 data: 'ex_showroom_price',
    //                 name: 'ex_showroom_price'
    //             },
    //             {
    //                 data: 'purchase_price',
    //                 name: 'purchase_price'
    //             },
    //             {
    //                 data: 'kin_margin',
    //                 name: 'kin_margin'
    //             },
    //             {
    //                 data: 'fuel_type',
    //                 name: 'fuel_type'
    //             },
    //             {
    //                 data: 'vin_number',
    //                 name: 'vin_number'
    //             },
    //             {
    //                 data: 'delear_name',
    //                 name: 'delear_name'
    //             },
    //             {
    //                 data: 'aging_days',
    //                 name: 'aging_days'
    //             },
    //             {
    //                 data: 'inventory_type',
    //                 name: 'inventory_type'
    //             },
    //             {
    //                 data: 'invoice_no',
    //                 name: 'invoice_no'
    //             },
    //             {
    //                 data: 'status',
    //                 name: 'status'
    //             },
                
    //             {
    //                 data: 'action',
    //                 name: 'action',
    //                 orderable: false,
    //             },
    //         ],
    //         pageLength: 25,
    //         iDisplayLength: 25,
    //         responsive: true,
    //         aaSorting: [],
    //         scrollX: true,
    //         scrollY: '400px',
    //         scrollCollapse: true,
    //         paging: true,
    //         searching: 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(window, $) {
    window.LaravelDataTables = window.LaravelDataTables || {};
    window.LaravelDataTables["dataTableBuilder"] = $("#data-table").DataTable({
        processing: true,
        serverSide: true,
        scrollY: "500px",  // Enables vertical scrolling
        scrollX: true,  // Ensures horizontal scrolling
        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("inventory.car_allocate_delearlist") !!}',
            data: function (d) {
                d.car_name = jQuery(".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.delear_name = $(".datatable-form-filter input[name='delear_name']").val();
                d.aging_days = $(".datatable-form-filter input[name='aging_days']").val();
                d.inventory_type = $(".datatable-form-filter input[name='inventory_type']").val();
                d.invoice_no = $(".datatable-form-filter input[name='invoice_no']").val();
                d.status = $(".datatable-form-filter input[name='status']").val();
            }
        },
        columns: [
            {data: 'DT_RowIndex', name: 'DT_RowIndex', class:'text-center DT_RowIndex', title: 'No.', orderable: false, width:100, 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: 'delear_name', name: 'delear_name', class:'text-center obf', title: 'Delear Name', orderable: false, default: true},
            {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: 'invoice_no', name: 'invoice_no',class:'text-center invoice_no',title: 'Invoice No.', orderable: true,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();
});

    window.change_status = function(object) {
        var id = $(object).data("id");
        var status = $(object).data("status");

        if (confirm('Are you sure?')) {
            $.ajax({
                "url": "{!! route('inventory.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');
                        location.reload();
                    } else {
                        toastr.error('Failed to change status', 'Error');
                    }
                }
            });
        }
    }
</script>
@endsection