<div>
    @include('parts.overlay', ['target' => 'store, update, data.image'])

    <form wire:submit.prevent="{{ $form['action'] }}" autocomplete="off">
        <div class="row match-height mt-5">
            <div class="col-12">
                <div class="card">
                    <div class="card-header">
                        <h4 class="card-title">Datos del vehículo</h4>
                    </div>
                    <div class="card-content">
                        <div class="card-body">
                            <div class="row">
                                <div class="{{ $data['type_form'] == 'quote' ? 'col-6' : 'col-4' }}">
                                    <div class="form-group">
                                        <div class="d-flex justify-content-between align-items-center">
                                            <label for="vq_car_brand_id">Marca</label>
                                            <a  wire:click="$emit('showVqBrandsModal')" class="text-primary" style="cursor: pointer;">crear nuevo</a>
                                        </div>
                                        <select wire:model="data.vq_car_brand_id" class="form-control kt-select2 @error('data.vq_car_brand_id') is-invalid @enderror"
                                            id="vq_car_brand_id">
                                            <option value="">::. Seleccione .::</option>
                                            @foreach ($data['brands_items'] as $key => $value)
                                                <option value="{{ $value['id'] }}" {{ $data['vq_car_brand_id']==$value['id'] ? 'selected' : ''}}>{{ $value['name'] }}</option>
                                            @endforeach
                                        </select>
                                        @error('data.vq_car_brand_id') <span class="text-danger">{{ $message }}</span> @enderror
                                    </div>
                                </div>
                                <div class="{{ $data['type_form'] == 'quote' ? 'col-6' : 'col-4' }}">
                                    <div class="form-group">
                                        <div class="d-flex justify-content-between align-items-center">
                                            <label for="vq_car_model_id">Modelo</label>
                                            @if ($data['vq_car_brand_id'])
                                                <a  wire:click="$emit('showVqModelsModal', {{ $data['vq_car_brand_id'] }})" class="text-primary" style="cursor: pointer;">crear nuevo</a>
                                            @endif
                                        </div>
                                        <select wire:model="data.vq_car_model_id" class="form-control kt-select2 @error('data.vq_car_model_id') is-invalid @enderror" @if(!$data['vq_car_brand_id']) disabled @endif
                                            id="vq_car_model_id">
                                            <option value="">::. Seleccione .::</option>
                                            @foreach ($data['models_items'] as $key => $value)
                                                <option value="{{ $value['id'] }}" {{ $data['vq_car_model_id']==$value['id'] ? 'selected' : ''}}>{{ $value['name'] }}</option>
                                            @endforeach
                                        </select>
                                        @error('data.vq_car_model_id') <span class="text-danger">{{ $message }}</span> @enderror
                                    </div>
                                </div>
                                <div class="{{ $data['type_form'] == 'quote' ? 'col-6' : 'col-4' }}">
                                    <div class="form-group">
                                        <label for="year">Año</label>
                                        <input type="text" class="form-control" wire:model="data.year" placeholder="Año" id="year">
                                        @error('data.year') <span class="text-danger">{{ $message }}</span>@enderror
                                    </div>
                                </div>
                                <div class="{{ $data['type_form'] == 'quote' ? 'col-6' : 'col-4' }}">
                                    <div class="form-group">
                                        <label for="pax">Cantidad de pasajeros</label>
                                        <input type="number" class="form-control" wire:model="data.pax" placeholder="Cantidad de pasajeros" id="pax" min="1" max="50">
                                        @error('data.pax') <span class="text-danger">{{ $message }}</span>@enderror
                                    </div>
                                </div>
                                <div class="{{ $data['type_form'] == 'quote' ? 'col-6' : 'col-4' }}">
                                    <div class="form-group">
                                        <div class="d-flex justify-content-between align-items-center">
                                            <label for="name">Tipo de uso</label>
                                            <a  wire:click="$emit('showVqTypeUseModal')" class="text-primary" style="cursor: pointer;">crear nuevo</a>
                                        </div>
                                        <select wire:model="data.vq_car_use_type_id" class="form-control kt-select2 @error('data.vq_car_use_type_id') is-invalid @enderror"
                                            id="vq_car_use_type_id">
                                            <option value="">::. Seleccione .::</option>
                                            @foreach ($data['types_use_items'] as $key => $value)
                                                <option value="{{ $value['id'] }}" {{ $data['vq_car_use_type_id']==$value['id'] ? 'selected' : ''}}>{{ $value['name'] }}</option>
                                            @endforeach
                                        </select>
                                        @error('data.vq_car_use_type_id') <span class="text-danger">{{ $message }}</span> @enderror
                                    </div>
                                </div>
                                <div class="col-12">
                                    <div class="form-group">
                                        <input type="file" class="form-control d-none" wire:model="data.image" id="logo">
                                        <a class="preview-image" href="javascript:" wire:click="$emit('triggerPreview', '#logo')">
                                            @if (!empty($data['image']) || !empty($data['image_path']))
                                                @if (is_string($data['image_path']) && empty($data['image']))
                                                    <img src="{{ $data['image_path'] }}" class="img-fluid" style="max-height: 190px;">
                                                @else
                                                    <img src="{{ previewImg($data['image']->temporaryUrl()) }}" class="img-fluid" style="max-height: 190px;">
                                                @endif
                                            @else
                                                <span>Imagen de preferencia</span>
                                            @endif
                                        </a>
                                        @error('data.image') <span class="text-danger">{{ $message }}</span>@enderror
                                    </div>
                                </div>
                                <div class="col-12 d-flex justify-content-end">
                                    <button id="btn-submit" type="submit" class="btn btn-primary mr-1 mb-1" wire:loading.attr="disabled"
                                        wire:target="{{ $form['action'] }}">
                                        <i class="far fa-save"></i>
                                        {{ $form['label'] }}
                                    </button>
                                    @if ($data['type_form'] != 'quote')
                                        <a href="{{ route('vehicle-quote.manage-vehicle.index') }}" class="btn btn-light-secondary mr-1 mb-1">
                                            <i class="fas fa-ban"></i>
                                            Cancelar
                                        </a>
                                    @endif
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </form>

    <!--begin: Modal -->
    <div wire:ignore>
        @livewire('components.vq-model-modal')
    </div>
    <div wire:ignore>
        @livewire('components.vq-brands-modal')
    </div>
    <div wire:ignore>
        @livewire('components.vq-car-type-use-modal')
    </div>
    <!--end: Modal-->
</div>
@section('js')
    @include('parts.js-preview')
@endsection

