<div>
    @include('parts.overlay', ['target' => 'setCarBrand'])

    @livewire('components.vq-vehicle-form')
</div>

{{-- Script para user_main --}}
@push('styles')
    <link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
    <link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.2.0/css/datepicker.min.css" rel="stylesheet">
    <style>
        .select2-container .select2-selection--single {height: 37px !important;}
        .select2-container--default .select2-selection--single .select2-selection__arrow { height: 37px; }
        .select2-container--default .select2-selection--single .select2-selection__rendered { line-height: 37px; }
        .select2-container--default .select2-selection--single .select2-selection__clear { line-height: 35px; }
    </style>
@endpush
@push('scripts')
<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.2.0/js/bootstrap-datepicker.min.js"></script>
<script type="text/javascript">
    $(document).ready(function() {

            $("#year").datepicker({
                format: "yyyy",
                viewMode: "years",
                minViewMode: "years",
                autoclose:true
            });

            function init_vq_vehicle_form() {

                 // Not STYLES
                $('.kt-select2').select2({
                    placeholder: "::. Seleccione .::",
                    allowClear: true
                });

                // FORM VEHICLE BRAND ID
                $('#vq_car_brand_id').off('change');
                $('#vq_car_brand_id').on('change', function (e) {
                    $("#vq_car_brand_id").select2({
                        placeholder: "Seleccione",
                        allowClear: true
                    });
                    @this.call('setCarBrand', $(this).val());
                });

                // FORM VEHICLE MODEL ID
                $('#vq_car_model_id').off('change');
                $('#vq_car_model_id').on('change', function (e) {
                    $("#vq_car_model_id").select2({
                        placeholder: "Seleccione",
                        allowClear: true
                    });
                    @this.call('setCarModel', $(this).val());
                });

                // TYPE USE
                $('#vq_car_use_type_id').off('change');
                $('#vq_car_use_type_id').on('change', function (e) {
                    $("#vq_car_use_type_id").select2({
                        placeholder: "Seleccione",
                        allowClear: true
                    });
                    @this.call('setCarUseType', $(this).val());
                });

                // TYPE YEAR
                $('#year').off('changeDate');
                $('#year').on('changeDate', function (e) {
                    @this.call('setYear', $(this).val());
                });
            }

            init_vq_vehicle_form()

            Livewire.hook('message.processed', (message, component) => { init_vq_vehicle_form(); });

            const element = $('#mydiv');
            element.animate({
                scrollTop: element.prop("scrollHeight")
            }, 500);

        });
</script>
@endpush


