@php $brands = @$brands??App\Traits\TraitInventory\InventoryDropDownTrait::getBrands(); @endphp

<div class="d-flex justify-content-end">
    <button type="button" class="btn btn-success btn-sm" id="add_vehicle" onclick="addVehicle()"><i
            class="fas fa-plus"></i></button>
</div>

@if ($is_customer_hide == false)
    <div class="row">
        <div class="col-lg-2">
            <div class="form-group">
                <label>Customer</label>
                <select name="customer_id" nsmodelbind="customerObj.customer_id" id="customer_id"
                    class="form-control select_search">
                    <option value="">Choose One</option>
                    @foreach ($parties as $party)
                        <option value="{{ $party->id }}" data-phone="{{ $party->mobile }}">{{ $party->name_eng }}</option>
                    @endforeach
                </select>
            </div>
        </div>
    </div>
@endif

<div id="vehicleContainer" class="mt-4">

</div>

<script>
    let years = @json(@$years);
    let models = @json(@$models);
    let isModal = @json(@$is_modal);
    let existingData = @json(@$existing_data);

    $(document).ready(function() {
        $('.select_search').select2();
        if (existingData == null) {
            addVehicle();
        } else {
            addVehicle();

            customerObj = deepClone({
                customer_id: existingData.customer_id,
                vehicle: [{
                    id: existingData.id,
                    brand_id: existingData.brand_id,
                    model_id: existingData.model_id,
                    year: existingData.year,
                    vehicle_number: existingData.vehicle_number,
                    engine_number: existingData.engine_number,
                    chassis_number: existingData.chassis_number
                }]
            });
            viewSetter(customerObj, 'customerObj');
            loadModel(0);
            viewSetter(customerObj, 'customerObj');
            loadYear(0);
            viewSetter(customerObj, 'customerObj');
        }
    });

    function loadYear(row_id) {
        let brand_id = $('#brand_id' + row_id).val();
        let model_id = $('#model_id' + row_id).val();

        let yearOptions = '<option value="">Choose One</option>';
        $.each(years, function(key, val) {
            if (val.brand_id == brand_id && val.model_id == model_id) {
                let yearList = [];
                $.each(val.year.split(','), function(index, value) {
                    yearOptions += `<option value="${value}">${value}</option>`;
                })
            }
        });
        $('#year' + row_id).html(yearOptions);
    }

    function loadModel(row_id) {
        let brand_id = $('#brand_id' + row_id).val();
        let modelOptions = '<option value="">Choose One</option>';
        $.each(models, function(key, val) {
            if (val.brand_id == brand_id) {
                let modelList = [];
                modelOptions += `<option value="${val.id}">${val.name}</option>`;
            }
        });
        $('#model_id' + row_id).html(modelOptions);
    }

    let index = 0;

    function addVehicle() {
        let html = "";
        let removeBtn = '';

        if(existingData == null){
            removeBtn = `<button type="button" class="btn btn-danger w-100" onclick="removeVehicle(${index})">
                            <i class="fas fa-minus"></i></button>`
        }
        let customerDiv = ``;
        html += `
            <div class="row mt-4 gy-2 gx-2 gx-lg-4 vehicle_form${index}">
                <div class="col-lg-3">
                    <div class="form-group">
                        <input type="hidden" name="row_id" value="" />
                        <label class="w-100">Brand</label>
                        <select name="brand_id" nsmodelbind="customerObj.vehicle[${index}].brand_id" onchange="loadYear(${index});loadModel(${index});" id="brand_id${index}" class="form-control select_2" style="width: 100%">
                            <option value="">Choose One</option>
                            @foreach ($brands as $brand)
                                <option value="{{ $brand->id }}">{{ $brand->name_eng }}</option>
                            @endforeach
                        </select>
                    </div>
                </div>
                <div class="col-lg-3">
                    <div class="form-group">
                        <label class="w-100">Model</label>
                        <select name="model_id" nsmodelbind="customerObj.vehicle[${index}].model_id" onchange="loadYear(${index})" id="model_id${index}" class="form-control select_2" style="width: 100%">
                            <option value="">Choose One</option>
                        </select>
                    </div>
                </div>
                <div class="col-lg-3">
                    <div class="form-group">
                        <label class="w-100">Year</label>
                        <select name="year" nsmodelbind="customerObj.vehicle[${index}].year" id="year${index}" class="form-control select_2" style="width: 100%">
                            <option value="">Choose One</option>
                        </select>
                    </div>
                </div>
                <div class="col-lg-3">
                    <div class="form-group">
                        <label>Vehicle Number</label>
                        <input type="text" name="vehicle_number" nsmodelbind="customerObj.vehicle[${index}].vehicle_number"  id="vehicle_number${index}" class="form-control" />
                    </div>
                </div>
                <div class="col-lg-3">
                    <div class="form-group">
                        <label>Engine Number</label>
                        <input type="text" name="engine_number" nsmodelbind="customerObj.vehicle[${index}].engine_number" id="engine_number${index}" class="form-control" />
                    </div>
                </div>
                <div class="col-lg-3">
                    <div class="form-group">
                        <label>Chassis Number</label>
                        <input type="text" name="chassis_number" nsmodelbind="customerObj.vehicle[${index}].chassis_number" onkeyup="validateChassisNumber(${index})"  id="chassis_number${index}" class="form-control" />
                        <div id="chassis_number_error${index}" class="d-flex justify-content-end"></div>
                        <input type="hidden" id="chassis_number_status${index}" value="0" class="chassis_number_status" />
                    </div>
                </div>

                <div class="col-lg-1">
                    <div class="form-group">
                        <label class="w-100">&nbsp;</label>
                        ${removeBtn}
                    </div>
                </div>
            </div>
        `;

        $('#vehicleContainer').append(html);

        if (isModal) {
            select2('select_2', 'Select', true, 'customerModal');
        } else {
            select2('select_2', 'Select', true);
        }

        customerObj.vehicle.push(deepClone(vehicleInit));
        index++;
    }

    function removeVehicle(row_id) {
        $('.vehicle_form' + row_id).remove();
        customerObj.vehicle[row_id] = vehicleInit;
    }

    function resetVehicle() {
        customerObj.vehicle = [];
        index = 0;
        $('#vehicleContainer').html('');
        for (let i = 0; i <= 2; i++) {
            addVehicle();
        }
    }

    function debounceValidateVehicle(func, delay) {
        let timeout;
        return function (...args) {
            const context = this;
            clearTimeout(timeout);
            timeout = setTimeout(() => func.apply(context, args), delay);
        };
    }

    const validateChassisNumberDebounce = debounceValidateVehicle(function (chassis_number, index, id) {
            ajaxCall("{{ route('inventory.vehicle.validate_chessis_number') }}", 'GET', { 'chassis_number': chassis_number, 'id': id}, function (res) {
                $('#loader').hide();
                if (res.status == true) {
                    $('#chassis_number_error' + index).html('<p><i class="fa fa-check text-success text-right"></i> Available</p>');
                    $('#chassis_number_status' + index).val(1);
                } else {
                    $('#chassis_number_error' + index).html('<p><i class="fa fa-times text-danger"></i> Not Available</p>');
                    $('#chassis_number_status' + index).val(0);
                }
                // handleSubmitButton();
            });
        }, 300);

    function validateChassisNumber(index) {
        let chassis_number = $('#chassis_number' + index).val();
        if(chassis_number == '') {
            $('#chassis_number_error' + index).html('');
            $('#chassis_number_status' + index).val(0);
            return;
        }
        let id = typeof customerObj.vehicle[index] !== 'undefined' ? customerObj.vehicle[index].id : '';
        validateChassisNumberDebounce(chassis_number, index, id);
    }

    function handleSubmitButton(){
        let available = true;
        $('.chassis_number_status').each(function () {
            if ($(this).val() == 0) {
                available = false;
            }
        });
        
        // if (available) $('#save').prop('disabled', false);
        // else $('#save').prop('disabled', true);
    }
</script>