<div>
    @include('parts.overlay', ['target' => '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 de la aseguradora</h4>
                    </div>
                    <div class="card-content">
                        <div class="card-body">
                            <div class="row">
                                <div class="col-4">
                                    <div class="form-group">
                                        <label for="name">Nombre</label>
                                        <input type="text" class="form-control" wire:model="data.name" placeholder="Nombre" id="name">
                                        @error('data.name') <span class="text-danger">{{ $message }}</span>@enderror
                                    </div>
                                </div>
                                <div class="col-4">
                                    <div class="form-group">
                                        <label for="order">Orden para mostrar</label>
                                        <input type="number" class="form-control" wire:model="data.order" placeholder="Order para mostrar" id="order" min="1">
                                        @error('data.order') <span class="text-danger">{{ $message }}</span>@enderror
                                    </div>
                                </div>
                                <div class="col-4">
                                    <div class="form-group">
                                        <label for="status">Estatus</label>
                                        <select wire:model="data.status" class="form-control @error('data.status') is-invalid @enderror"
                                            id="status">
                                            @foreach (config('const.vq-insurers-status') as $key => $value)
                                                <option value="{{ $key }}">{{ $value }}</option>
                                            @endforeach
                                        </select>
                                        @error('data.status') <span class="text-danger">{{ $message }}</span> @enderror
                                    </div>
                                </div>
                                <div class="col-2">
                                    <div class="form-group">
                                        <label for="order">Seleccione un color</label>
                                        <input type="color" class="form-control" wire:model="data.color" placeholder="Color"  style="width: 50px;">
                                        @error('data.color') <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>
                                    <a href="{{ route('vehicle-quote.manage-insurers.index') }}" class="btn btn-light-secondary mr-1 mb-1">
                                        <i class="fas fa-ban"></i>
                                        Cancelar
                                    </a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </form>
</div>

{{-- Script para user_main --}}
@section('js')
    @include('parts.js-preview')
@endsection

@push('scripts')
    <script>
        $(document).ready(function() {
            const element = $('#mydiv');
            element.animate({
                scrollTop: element.prop("scrollHeight")
            }, 400);
        });
    </script>
@endpush
