<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 encuesta</h4>
                    </div>
                    @if ($errors->any())
                        <div class="alert alert-danger">
                            <ul>
                                @foreach ($errors->all() as $error)
                                    <li>{{ $error }}</li>
                                @endforeach
                            </ul>
                        </div>
                    @endif
                    <div class="card-content">
                        <div class="card-body">
                            <div class="row">
                                <div class="col-6">
                                    <div class="form-group">
                                        <label for="subject">Asunto</label>
                                        <input type="text" class="form-control" wire:model="data.subject" placeholder="Asunto" id="subject">
                                        @error('data.subject') <span class="text-danger">{{ $message }}</span>@enderror
                                    </div>
                                </div>
                                <div class="col-6">
                                    <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-12">
                                    <h4 class="card-title mt-3">Opciones de la encuesta</h4>
                                        @if (!count($details))
                                            <div class="wrapper-errors">
                                                @error('details') <span class="text-danger error">Debe
                                                    agregar por lo menos 1 opción</span>@enderror
                                            </div>
                                        @endif
                                        <div class="row">
                                            @foreach ($details as $key => $value)
                                            <div class="col-12 col-md-6">
                                                <div class="mb-4">
                                                            <b>Opcion <span
                                                                class="badge badge-dark">#{{ $key + 1 }}</span></b>

                                                            <div class="form-group mb-0">
                                                                <label for="">Pregunta</label>
                                                                <input type="text" class="form-control"
                                                                    wire:model="detail_data.{{ $key }}.question">
                                                                @error('detail_data.'.$key.'.question') <span
                                                                    class="text-danger error">{{ $message }}</span>@enderror
                                                            </div>
                                                            <div class="text-right">
                                                                <button type="button"
                                                                    class="btn btn-danger btn-link btn-link2 text-danger"
                                                                    wire:click="removeItem({{ $key }})">
                                                                    <i class="far fa-trash-alt"></i>
                                                                    Quitar
                                                                </button>
                                                            </div>
                                                        </div>
                                                </div>
                                            @endforeach
                                        </div>
                                    </div>
                                    <div class="card-footer text-center">
                                        <button wire:click.prevent="addItem()" class="btn">
                                            <i class="fas fa-plus"></i>
                                            Agregar opción
                                        </button>
                                    </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('polls.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
