@extends('layouts.app')

@section('content')

    <div class="container">
        <div class="row">
            <div class="col-12 text-center my-5 banner-participar">
                <img src="{{ secure_asset('assets/images/Banner-TegustariaParticipar.png')}}" class="img-fluid mx-auto">
            </div>
        </div>
        <!-- <img src="{{ secure_asset('assets/images/Banner-TegustariaParticipar.png')}}" class="img-fluid mx-auto no-img-desk"> -->
        <h1 style="font-size: 0px; line-height: 0; height: 0px;">Formulario de contacto participación ciudadana</h1>
    </div>
    
    <div class="container-fluid bg-x">
        <div class="container py-5" style="background-color: #FFF;">
            <div class="main">
                    @if ($errors->any())
                        <div class="col-12 alert alert-danger text-center">
                            Asegúrate de completar todos los datos obligatorios* y cumplir con los requisitos. <a href="#formulario">Ir al formulario</a>
                        </div>
                    @endif

                <p>La información a continuación se utilizará para ponerse en contacto contigo y para fines estadísticos. Al responder, se autoriza al Ministerio a hacer uso de los datos para estos efectos. </p>
                <p>¡Muchas gracias por participar! </p>
            </div>

        </div>
    </div>

    <div class="container-fluid bg-x" id="formulario">
        <div class="container">
            <h2 class="text-center"></h2>

            <div class="container">
                <div class="row">
                    @if ($errors->any())
                        <div class="col-12 alert alert-danger text-center">
                        Asegúrate de completar todos los datos obligatorios* y cumplir con los requisitos.
                        </div>
                    @endif
                </div>
            </div>
            
            <form class="col-12 needs-validation mt-5" novalidate action="{{route('formularios.store')}}" method="POST" enctype="multipart/form-data" files="true">
                @csrf
                
                <div class="col-12">
                    <h3 class="text-blue"> > Datos de Contacto:</h3>
                </div>

                <div class="col-12 col-md-12 my-2">
                    <div class="form-group validate-name">
                        <label class="bmd-label-floating mb-2">Nombre *:</label>
                        <input type="text" class="form-control" name="nombre" id="nombre" value="{{old('nombre')}}" >
                        @error('nombre')
                            <p class="invalid">El campo nombre es obligatorio.</p>
                        @enderror
                    </div>
                </div>

                <div class="col-12 col-md-12 my-2">
                    <div class="form-group validate-name">
                        <label class="bmd-label-floating mb-2">Apellido *:</label>
                        <input type="text" class="form-control" name="apellido" id="apellido" value="{{old('apellido')}}" >
                        @error('apellido')
                            <p class="invalid">El campo apellido es obligatorio.</p>
                        @enderror
                    </div>
                </div>

                <div class="col-12 col-md-12 my-2">
                    <div class="form-group validate-email">
                        <label class="bmd-label-floating mb-2">Correo electrónico *:</label>
                        <input type="email" class="form-control" name="email" id="email" value="{{old('email')}}">

                        <div class="col-12 alert-email">
                            @error('email')
                                <p class="invalid">El campo email es obligatorio.</p>
                            @enderror
                        </div>
                    </div>
                </div>

                <div class="col-12 col-md-12 my-2">
                    <div class="form-group">
                        <label class="bmd-label-floating mb-2">Teléfono:</label>
                        <input type="number" class="form-control" name="phone" id="phone" value="{{old('phone')}}" aria-describedby="phoneHelp">
                        <div id="phoneHelp" class="form-text mb-3">El campo teléfono, sólo debe llevar números. Ej:  56987654321</div>
                    </div>
                </div>

                <div class="col-12 col-md-12 my-2 d-none">
                    <div class="form-group validate-region">
                        <label class="bmd-label-floating mb-2">Lugar de residencia*:</label>
                        <select class="form-select js-example-basic-single" aria-label="Default select example" id="region" name="region">
                            <option value="0" disabled selected>Selecciona el lugar donde vives</option>
                            <option value="Extranjero" {{ old('region') == "Extranjero" ? 'selected' : '' }}>Extranjero</option>
                            <option value="Arica y Parinacota" {{ old('region') == "Arica y Parinacota" ? 'selected' : '' }}>Arica y Parinacota</option>
                            <option value="Tarapacá" {{ old('region') == "Tarapacá" ? 'selected' : '' }}>Tarapacá</option>
                            <option value="Antofagasta" {{ old('region') == "Antofagasta" ? 'selected' : '' }}>Antofagasta</option>
                            <option value="Atacama" {{ old('region') == "Atacama" ? 'selected' : '' }}>Atacama</option>
                            <option value="Coquimbo" {{ old('region') == "Coquimbo" ? 'selected' : '' }}>Coquimbo</option>
                            <option value="Valparaíso" {{ old('region') == "Valparaíso" ? 'selected' : '' }}>Valparaíso</option>
                            <option value="Metropolitana" {{ old('region') == "Metropolitana" ? 'selected' : '' }}>Metropolitana</option>
                            <option value="OHiggins" {{ old('region') == "OHiggins" ? 'selected' : '' }}>O'Higgins</option>
                            <option value="Maule" {{ old('region') == "Maule" ? 'selected' : '' }}>Maule</option>
                            <option value="Ñuble"{{ old('region') == "Ñuble" ? 'selected' : '' }}>Ñuble</option>
                            <option value="Biobío" {{ old('region') == "Biobío" ? 'selected' : '' }}>Biobío</option>
                            <option value="La Araucanía" {{ old('region') == "La Araucanía" ? 'selected' : '' }}>La Araucanía</option>
                            <option value="Los Ríos" {{ old('region') == "Los Ríos" ? 'selected' : '' }}>Los Ríos</option>
                            <option value="Los Lagos" {{ old('region') == "Los Lagos" ? 'selected' : '' }}>Los Lagos</option>
                            <option value="Aysén" {{ old('region') == "Aysén" ? 'selected' : '' }}>Aysén</option>
                            <option value="Magallanes" {{ old('region') == "Magallanes" ? 'selected' : '' }}>Magallanes</option>
                            
                        </select>

                        <div class="col-12 alert-region">
                            @error('region')
                                <p class="invalid">El campo región es obligatorio.</p>
                            @enderror
                        </div>
                    </div>
                </div>

                <div class="col-12 col-md-12 my-2">
                    <div class="form-group validate-name">
                        <label class="bmd-label-floating mb-2">Comuna de residencia (en caso de vivir en el extranjero, indicar la ciudad)*:</label>
                        <input type="text" class="form-control" name="comuna" id="comuna" value="{{old('comuna')}}" >
                        @error('comuna')
                            <p class="invalid">El campo comuna de residencia es obligatorio.</p>
                        @enderror
                    </div>
                </div>

                <div class="col-12 col-md-12 my-2 d-none">
                    <div class="form-group">
                        <label class="bmd-label-floating mb-2">Género:</label>
                        <select class="form-select form-control" aria-label="Default select example" id="sexo" name="sexo">
                            <option value="0" disabled selected>Selecciona</option>
                            <option value="Femenino" {{ old('sexo') == "Femenino" ? 'selected' : '' }}>Femenino</option>
                            <option value="Masculino" {{ old('sexo') == "Masculino" ? 'selected' : '' }}>Masculino</option>
                            <option value="Otro" {{ old('sexo') == "Otro" ? 'selected' : '' }}>Otro</option>
                            <option value="Prefiero no decirlo" {{ old('sexo') == "Prefiero no decirlo" ? 'selected' : '' }}>Prefiero no decirlo</option>
                        </select>
                    </div>
                </div>

                <div class="col-12 col-md-12 my-2">
                    <div class="form-group validate-pertenece">
                        <label class="bmd-label-floating mb-2">¿Representas a alguna institución u organización? *: <img src="{{ asset('assets/images/question.svg')}}" alt="" data-bs-toggle="tooltip" data-bs-title="Seleccione con qué grupo de pertenencia usted se identifica. Si ninguna de las categorías corresponde a su situación, seleccione “otro” o “ninguno”."> </label>
                        <select class="form-select form-control" aria-label="Default select example" id="pertenece" name="pertenece">
                            <option value="0" disabled selected>Selecciona</option>
                            <option value="Sí" {{ old('pertenece') == "Sí" ? 'selected' : '' }}>Sí</option>
                            <option value="No" {{ old('pertenece') == "No" ? 'selected' : '' }}>No</option>
                        </select>
                    
                        <div class="col-12 alert-pertenece">
                            @error('pertenece')
                                <p class="invalid">El campo Representas a alguna institución es obligatorio.</p>
                            @enderror
                        </div>
                    </div>
                </div>

                <div class="col-12 col-md-12 my-2 ">
                    <div class="form-group validate-name nameinstitucion d-none">
                        <label class="bmd-label-floating mb-2">Nombre de tu institución *:</label>
                        <input type="text" class="form-control" name="nombreinstitucion" id="nombreinstitucion" value="{{old('nombreinstitucion')}}" >
                        @error('nombreinstitucion')
                            <p class="invalid">El campo nombre de tu institucion es obligatorio.</p>
                        @enderror
                    </div>
                </div>

                <div class="col-12 col-md-12 my-2 d-none">
                    <div class="form-group validate-propuesta propuesta">
                        <label class="bmd-label-floating mb-2">Edad : <img src="{{ asset('assets/images/question.svg')}}" alt="" data-bs-toggle="tooltip" data-bs-title="Por favor indique si su propuesta es individual o si la envía en representación de alguna organización o colectivo."></label>
                        <select class="form-select form-control" aria-label="Default select example" id="edad" name="edad">
                            <option value="0" disabled selected>Seleccione el rango de edad</option>
                            <option value="15-18"  {{ old('edad') == "15-18" ? 'selected' : '' }}>15-18</option>
                            <option value="18-29"  {{ old('edad') == "18-29" ? 'selected' : '' }}>18-29</option>
                            <option value="30-39"  {{ old('edad') == "30-39" ? 'selected' : '' }}>30-39</option>
                            <option value="40-49"  {{ old('edad') == "40-49" ? 'selected' : '' }}>40-49</option>
                            <option value="50-59"  {{ old('edad') == "50-59" ? 'selected' : '' }}>50-59</option>
                            <option value="60-69"  {{ old('edad') == "60-69" ? 'selected' : '' }}>60-69</option>
                            <option value="70-79"  {{ old('edad') == "70-79" ? 'selected' : '' }}>70-79</option>
                            <option value="80 y más"  {{ old('edad') == "80 y más" ? 'selected' : '' }}>80 y más</option>
                        </select>

                        <div class="col-12 alert-propuesta">
                            @error('edad')
                                <p class="invalid">El campo a qué sector pertenece la institución es obligatorio.</p>
                            @enderror
                        </div>
                    </div>
                </div>
                <div class="col-12 col-md-12 my-4 d-none">
                    <div class="form-group validate-propuesta propuesta">
                        <label class="bmd-label-floating mb-2">¿Te identificas con algunos e los siguientes grupos? : <img src="{{ asset('assets/images/question.svg')}}" alt="" data-bs-toggle="tooltip" data-bs-title="Por favor indique si su propuesta es individual o si la envía en representación de alguna organización o colectivo."></label>

                        <div class="form-check">
                            <input class="form-check-input" type="checkbox" value="Niñeces, adolescentes y jóvenes" id="check" name="groups1">
                            <label class="form-check-label" for="check">
                                Niñeces, adolescentes y jóvenes
                            </label>
                        </div>
                            
                        <div class="form-check">
                            <input class="form-check-input" type="checkbox" value="Personas Mayores" id="check2" name="groups2">
                            <label class="form-check-label" for="check2">
                                Personas Mayores
                            </label>
                        </div>

                        <div class="form-check">
                            <input class="form-check-input" type="checkbox" value="Personas con discapacidad" id="check3" name="groups3" >
                            <label class="form-check-label" for="check3" >
                                Personas con discapacidad
                            </label>
                        </div>
                        <div class="form-check">
                            <input class="form-check-input" type="checkbox" value="Pueblos indígenas" id="check4" name="groups4" >
                            <label class="form-check-label" for="check4" >
                                Pueblos indígenas
                            </label>
                        </div>
                        <div class="form-check">
                            <input class="form-check-input" type="checkbox" value="Migrantes y refugiados" id="check5" name="groups5" >
                            <label class="form-check-label" for="check5">
                                Migrantes y refugiados
                            </label>
                        </div>
                        <div class="form-check">
                            <input class="form-check-input" type="checkbox" value="Diversidades y disidencias sexogenéricas" id="check6" name="groups6" >
                            <label class="form-check-label" for="check6">
                                Diversidades y disidencias sexogenéricas
                            </label>
                        </div>
                        <div class="form-check">
                            <input class="form-check-input" type="checkbox" value="Personas en situación de pobreza" id="check7" name="groups7">
                            <label class="form-check-label" for="check7" >
                                Personas en situación de pobreza
                            </label>
                        </div>
                        <div class="form-check">
                            <input class="form-check-input" type="checkbox" value="Población rural" id="check8" name="groups8" >
                            <label class="form-check-label" for="check8" >
                                Población rural
                            </label>
                        </div>

                        <div class="col-12 alert-propuesta">
                            @error('grupo')
                                <p class="invalid">El campo identificación de grupo es obligatorio.</p>
                            @enderror
                        </div>
                    </div>
                </div>

                <div class="col-12 my-5 d-none">
                    <h3 class="text-blue"> > Temas de interés:</h3>
                </div>

                <div class="col-12 col-md-12 my-2 d-none">
                    <div class="form-group validate-name">
                        <label class="bmd-label-floating mb-2">Marca los temas que te interesan *:</label>

                        <div class="form-check">
                            <input class="form-check-input" type="checkbox" value="Integridad, probidad y transparencia" id="themes" name="themes1">
                            <label class="form-check-label" for="themes">
                                Integridad, probidad y transparencia
                            </label>
                        </div>

                        <div class="form-check">
                            <input class="form-check-input" type="checkbox" value="Gobierno Abierto / Estado Abierto" id="themes1" name="themes2">
                            <label class="form-check-label" for="themes1">
                                Gobierno Abierto / Estado Abierto
                            </label>
                        </div>

                        <div class="form-check">
                            <input class="form-check-input" type="checkbox" value="Relacionamiento con pueblos indígenas de la macrozona sur y/o la oferta programática para pueblos indígenas en dichos territorios" id="themes2" name="themes3">
                            <label class="form-check-label" for="themes2">
                                Relacionamiento con pueblos indígenas de la macrozona sur y/o la oferta programática para pueblos indígenas en dichos territorios
                            </label>
                        </div>
                        <div class="form-check">
                            <input class="form-check-input" type="checkbox" value="Asuntos religiosos" id="themes3" name="themes4">
                            <label class="form-check-label" for="themes3">
                                Asuntos religiosos
                            </label>
                        </div>
                        <div class="form-check">
                            <input class="form-check-input" type="checkbox" value="Gobierno digital" id="themes4" name="themes5" >
                            <label class="form-check-label" for="themes4">
                                Gobierno digital
                            </label>
                        </div>
                        <div class="form-check">
                            <input class="form-check-input" type="checkbox" value="Tramitación legislativa y leyes aprobadas" id="themes5" name="themes6">
                            <label class="form-check-label" for="themes5">
                                Tramitación legislativa y leyes aprobadas
                            </label>
                        </div>
                        <div class="form-check">
                            <input class="form-check-input" type="checkbox" value="Otro" id="themes6" name="themes7">
                            <label class="form-check-label" for="themes6">
                                Otro
                            </label>
                        </div>

                        @error('temas')
                            <p class="invalid">El campo tema de interés es obligatorio.</p>
                        @enderror
                    </div>
                </div>

                <div class="col-12 col-md-12 my-2 d-none">
                    <div class="form-group validate-name">
                        <label class="bmd-label-floating mb-2"> ¿Qué otro tema de interés?, indica cuál:</label>
                        <input type="text" class="form-control" name="otrocual" id="otrocual" value="{{old('otrocual')}}" >
                        @error('otrocual')
                            <p class="invalid"></p>
                        @enderror
                    </div>
                </div>

                <div class="col-12 col-md-12 my-2 organizacion d-none">
                    <div class="form-group validate-organizacion">
                        <label class="bmd-label-floating mb-2">¿Tienes alguna idea, duda, comentario?: <img src="{{ asset('assets/images/question.svg')}}" alt="" data-bs-toggle="tooltip" data-bs-title="Por favor indique el nombre de la organización o colectivo que representa (comunidad mapuche, asociación, empresa, iglesia, etc)."> </label>
                        <textarea class="form-control" name="idea" id="idea" value="{{old('idea')}}"></textarea>
                    </div>
                </div>

                <div class="col-12 alert01">
                    <div class="invalid-feedback">
                        Las casillas marcadas con asterisco (*) son obligatorias. Por favor, para continuar completa todos los campos requeridos.
                    </div>
                </div>

                <div class="col-12 text-right my-5 ">
                    <div class="btn-form d-flex align-items-center justify-content-center">
                        <button type="submit" class="btn btn-primary btn-fill pull-right">Enviar Formulario</button>
                    </div>
                </div>
                
            </form>

            <p class="text-white">-</p>
        </div>
    </div>

@endsection