@extends('layouts.app')

@section('content')
<section class="portada consulta col-12 my-4">
    <div class="container">
        <div class="row">
            <div class="col-12 text-justify my-5">
                <div class="title">
                    <h1 class="text-blue text-center my-5">Consultas</h1>
                </div>

                @if (session('status'))
					<div class="col-12 alert alert-success mb-5 text-center">
						{{ session('status') }}
					</div>
            	@endif

                <p class="description">Todas las consultas ingresadas a través de este portal, serán contestadas por la Coordinación del Sistema de Integridad y resguardan la confidencialidad de quien consulta.</p>
                <p class="description">Si no desea realizar su consulta a través de este medio, los otros canales disponibles para consultas sobre el Código de Ética y su aplicación, son: Por correo electrónico dirigido a la jefatura de la Unidad de Gestión y Desarrollo de las Personas.</p>
                <p class="description">Por medio de una carta escrita dirigida al Jefe del Unidad de Gestión y Desarrollo de las Personas, que debe ser enviada a través de la Oficina de Partes del Ministerio.</p>
                <p class="description">Si desea ingresar una Consulta, pero quiere hacerlo de forma confidencial, debe acercarse a la Asociación de Funcionarios MINSEGPRES para que ellos la efectúen en su nombre.</p>


                <form action="{{route('consultas.store')}}" class="shadow-lg" method="POST" enctype="multipart/form-data" >
                    @csrf

                    <div class="tab tab-01 show-me">
                        <p>El procedimiento para realizar una consulta es sencillo. Los pasos consisten en los siguientes:</p>
                        <p>
                            <ul>
                                <li>Aceptar las condiciones de uso.</li>
                                <li>Indicar la información de contacto.</li>
                                <li>Completar el formulario de consulta.</li>
                                <li>Guardar la clave de seguimiento que se proporciona al finalizar la consulta, con la cual podrá ver la respuesta a la consulta presentada.</li>
                            </ul>
                        </p>

                        <div class="mb-3 form-check acepto">
                            <input type="checkbox" class="form-check-input acepto-condiciones" name="acepto-consulta" id="acepto-consulta">
                            <label class="form-check-label" for="acepto-consulta">Sí, estoy de acuerdo con los términos y condiciones</label>

                            <div class="invalid-feedback">
                                Para continuar debe aceptar los términos y condiciones
                            </div>
                        </div>
                        
                        <div class="box-botonera">
                            <div class="step step-01 active next-btn" data-step="step02">
                                Siguiente
                            </div>
                        </div>

                    </div>	

                    <div class="tab tab-02 d-none campos-personales">
                        <h2 class="text-blue">Privacidad</h2>

                        <p>Por favor, ingrese los siguientes datos.</p>
                        <p class="small text-center alert alert-warning">Los datos proporcionados serán utilizados para enviar la clave de seguimiento.</p>
                        

                        <div class="mb-3">
                            <label for="name" class="form-label">Nombre Completo</label>
                            <input type="text" id="name" name="name" class="form-control name">
                        </div>

                        <div class="mb-3">
                            <label for="correo" class="form-label">E-mail</label>
                            <input type="email" class="form-control" id="correo" name="correo" placeholder="name@example.com">
                            <small>Institucional o Personal</small>
                        </div>

                        <div class="mb-3">
                            <label for="tel" class="form-label">Teléfono</label>
                            <input type="number" class="form-control" id="tel" name="tel"  placeholder="56987654321">
                            <small>Institucional o Personal</small>
                        </div>

                        <div class="campos-personales invalid-feedback alert alert-danger text-center">Complete todos los campos para continuar.</div>

                        <div class="box-botonera">
                            <div class="step backBtn" data-step="step01">
                                Volver
                            </div>

                            <div class="step active next-btn" data-step="step03">
                                Siguiente
                            </div>
                        </div>

                    </div>

                    <div class="tab tab-03 d-none ingrese-consulta">
                        <h2 class="text-blue">Información</h2>

                        <p>Ingrese su consulta</p>

                        <div class="my-3">
                            <textarea class="form-control" name="consulta" id="consulta" aria-label="consulta"></textarea>
                            <small>Sea lo más preciso posible en su consulta, para que sea respondida de la mejor forma.</small>
                        </div>

                        <div class="invalid-feedback alert alert-danger text-center">Ingrese una consulta para continuar.</div>

                        <div class="box-botonera">
                            <div class="step backBtn" data-step="step02">
                                Volver
                            </div>

                            <div class="step active next-btn" data-step="step04">
                                Siguiente
                            </div>
                        </div>

                    </div>
                    

                    <div class="tab tab-04 d-none">
                        <h2 class="text-blue">Confirmación:</h2>

                        <p class="mt-3">Ha terminado de ingresar los datos para su consulta. Se generará un identificador y una clave, las cuales serán enviadas al correo que ingresó en el formulario, para que pueda hacer seguimiento de la consulta una vez pulse el botón de enviar.</p>
                        <p>Tenga presente que estos datos son la única forma de acceder a su consulta y conocer la respuesta.</p>
                        <p>Muchas gracias.</p>


                        <div class="box-botonera">
                            <div class="step backBtn" data-step="step-04">
                                Volver
                            </div>

                            <button type="submit" class="step active nextBtn" data-step="step-end">Enviar</button>
                        </div>
                    </div>

                    <div class="botonera-steps">
                        <ul>
                            <li class="step-01 active"></li>
                            <li class="step-02"></li>
                            <li class="step-03"></li>
                            <li class="step-04"></li>
                        </ul>
                    </div>


                </form>

            </div>
        </div>
    </div>
</section>
@endsection