@extends('layouts.main')

@section('content')
    <div class="card mb-4">
        <div class="card-body">

            <div id="div_pasos">
                <div class="d-sm-flex align-items-center justify-content-center mb-4">
                    <h1 class="h3 mb-0 text-gray-800"><strong>Autogestión de Citas</strong></h1>
                </div>

                {{-- PASO 1 --}}
                <div id="paso_1">
                    <h4 class="text-center mb-0 text-gray-800">Bienvenido a su asistente virtual, para nosotros es <br>
                        un gusto atenderlo. Para continuar, por favor, lea y acepte los <a
                            href="https://www.clinicageneraldelnorte.com/politica/">Términos y Condiciones</a></h4>
                    <br>
                    <div class="container">
                        <div class="form-check">
                            <input class="form-check-input" style="width:15px;height:15px" value="1"
                                name="terminos_condiciones" type="radio">
                            <label class="form-check-label" style="font-size: 20px;">
                                Acepto términos y condiciones
                            </label>
                        </div>
                    </div>
                    <div class="container">
                        <div class="form-check">
                            <input class="form-check-input" style="width:15px;height:15px" value="0"
                                name="terminos_condiciones" type="radio">
                            <label class="form-check-label" style="font-size: 20px;">
                                No acepto términos y condiciones
                            </label>
                        </div>
                    </div>
                    <br>
                    <div class="boton_sig">
                        <button type="button" id="btn_sig_paso_1" class="btn btn-danger">Siguiente <i
                                    class="fas fa-arrow-right"></i></button>
                    </div>
                </div>

                {{-- PASO 2 --}}
                <div id="paso_2" style="display:none;">
                    <h4 class="text-center mb-0 text-gray-800">Por favor, elija su tipo de documento:</h4>
                    <br>
                    <div class="container">
                        <select class="form-control col-6" id="select_documento">
                            <option value="" disabled selected>Seleccione su tipo de documento</option>
                            @foreach ($tipos_identificacion as $tpi)
                                <option value="{{ $tpi->id }}">{{ $tpi->text }}</option>
                            @endforeach
                        </select>
                    </div>
                    <br>
                    <div class="boton_sig">
                        <button type="button" id="btn_sig_paso_2" class="btn btn-danger">Siguiente <i
                                    class="fas fa-arrow-right"></i></button>
                    </div>
                </div>

                {{-- PASO 3 --}}
                <div id="paso_3" style="display:none;">
                    <h4 class="text-center mb-0 text-gray-800">Por favor, digite su número de documento <br>
                        sin puntos ni comas</h4>
                    <br>

                    <div class="container">
                        <div class="form-group col-6">
                            <input type="number" min="0" class="form-control" id="input_documento">
                        </div>
                    </div>

                    <div class="row">
                        <div class="col-6" align="right">
                            <button type="button" class="btn btn-danger btn_ant_paso" data-paso="2"><i
                                    class="fas fa-arrow-left"></i> Anterior</button>
                        </div>
                        <div class="col-6">
                            <button type="button" id="btn_sig_paso_3" class="btn btn-danger">Siguiente <i
                                    class="fas fa-arrow-right"></i></button>
                        </div>
                    </div>
                </div>

                {{-- PASO PREGUNTA --}}
                <div id="paso_pregunta" style="display:none;">
                    <h1 class="text-center h3 mb-0 text-gray-800">Sr/a <span class="span_nombre_usuario"></span>
                        Con cuál de estos desea autenticarse:</h1>
                    <h4 class="text-center h3 mb-0 text-gray-800">Correo: <span class="span_correo"></span></h4>
                    <h4 class="text-center h3 mb-0 text-gray-800">Teléfono: <span class="span_telefono"></span></h4>
                    <br>
                    <div class="container">
                        <div class="form-check">
                            <input class="form-check-input" style="width:15px;height:15px" value="1"
                                name="menu_opciones_pregunta" type="radio">
                            <label class="form-check-label" style="font-size: 20px;">
                                Teléfono
                            </label>
                        </div>
                    </div>
                    <div class="container">
                        <div class="form-check">
                            <input class="form-check-input" style="width:15px;height:15px" value="2"
                                name="menu_opciones_pregunta" type="radio">
                            <label class="form-check-label" style="font-size: 20px;">
                                Correo
                            </label>
                        </div>
                    </div>
                    <div class="container">
                        <div class="form-check">
                            <input class="form-check-input" style="width:15px;height:15px" value="3"
                                name="menu_opciones_pregunta" type="radio">
                            <label class="form-check-label" style="font-size: 20px;">
                                No es ninguno de los dos
                            </label>
                        </div>
                    </div>
                    <br>
                    <div class="row">
                        <div class="col-6" align="right">
                            <button type="button" class="btn btn-danger btn_ant_paso" data-paso="3"><i
                                    class="fas fa-arrow-left"></i> Anterior</button>
                        </div>
                        <div class="col-6">
                            <button type="button" id="btn_sig_paso_pregunta" class="btn btn-danger">Siguiente <i
                                    class="fas fa-arrow-right"></i></button>
                        </div>
                    </div>
                </div>

                {{-- PASO 4 --}}
                <div id="paso_4" style="display:none;">
                    <h4 class="text-center mb-0 text-gray-800">Sr/a <span class="span_nombre_usuario"></span> <br>, antes
                        de
                        continuar, enviamos un código al teléfono <span class="span_telefono"></span> registrado para verificar su identidad:
                        <br>
                        <span class="span_codigo"></span>
                    </h4>
                    <br>
                    <div class="container">
                        <div class="row">
                            <div class="col-12">
                                <div class="input-group">
                                    <input type="text" class="form-control" id="inputReSendCodTelefono"
                                        placeholder="Ingrese el codigo">
                                    <div class="input-group-append">
                                        <button class="btn btn-danger" id="buttonReSendCodTel" type="button">
                                            <i class="fas fa-redo-alt"></i>
                                        </button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <br>


                    <div class="boton_sig">
                        <button type="button" class="btn btn-danger" id="btnNoTel">No es mi número</button>
                    </div>
                    <br>
                    <div class="row">
                        <div class="col-6" align="right">
                            <button type="button" class="btn btn-danger btn_ant_paso" data-paso="pregunta"><i
                                    class="fas fa-arrow-left"></i> Anterior</button>
                        </div>
                        <div class="col-6">
                            <button type="button" id="btn_sig_paso_4" class="btn btn-danger">Siguiente <i
                                    class="fas fa-arrow-right"></i></button>
                        </div>
                    </div>

                </div>

                {{-- PASO 5 --}}
                <div id="paso_5" style="display:none;">
                    <h4 class="text-center mb-0 text-gray-800">Sr/a <span class="span_nombre_usuario"></span> antes de
                        continuar, enviamos un código al correo <span class="span_correo"></span> registrado para verificar su identidad: <br>
                        <span class="span_codigo"></span></h4>
                    <br>

                    <div class="container">
                        <div class="row">
                            <div class="col-12">
                                <div class="input-group">
                                    <input type="text" class="form-control" id="inputReSendCodEmail"
                                        placeholder="Ingrese el codigo">
                                    <div class="input-group-append">
                                        <button class="btn btn-danger" id="buttonReSendCodEmail" type="button">
                                            <i class="fas fa-redo-alt"></i>
                                        </button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <br>

                    <div class="boton_sig">
                        <button type="button" class="btn btn-danger" id="btnNoCorreo">No es mi correo</button>
                    </div>
                    <br>
                    <div class="row">
                        <div class="col-6" align="right">
                            <button type="button" class="btn btn-danger btn_ant_paso" data-paso="pregunta"><i
                                    class="fas fa-arrow-left"></i> Anterior</button>
                        </div>
                        <div class="col-6">
                            <button type="button" id="btn_sig_paso_5" class="btn btn-danger">Siguiente <i
                                    class="fas fa-arrow-right"></i></button>
                        </div>
                    </div>

                </div>

                {{-- PASO 6 --}}
                <div id="paso_6" style="display:none;">
                    <h1 class="text-center h3 mb-0 text-gray-800">Sr/a <span class="span_nombre_usuario"></span> en que
                        podemos ayudarle: </h1>
                    <br>
                    <form action="{{ route('redirectMenu') }}" method="GET" id="form_menu">
                        @csrf
                        <div class="container">
                            <div class="form-check">
                                <input class="form-check-input" style="width:15px;height:15px" value="1"
                                    name="menu_opciones" type="radio">
                                <label class="form-check-label" style="font-size: 20px;">
                                    Agendamiento de citas
                                </label>
                            </div>
                        </div>
                        <div class="container">
                            <div class="form-check">
                                <input class="form-check-input" style="width:15px;height:15px" value="2"
                                    name="menu_opciones" type="radio">
                                <label class="form-check-label" style="font-size: 20px;">
                                    Cancelación de citas
                                </label>
                            </div>
                        </div>
                        <div class="container">
                            <div class="form-check">
                                <input class="form-check-input" style="width:15px;height:15px" value="3"
                                    name="menu_opciones" type="radio">
                                <label class="form-check-label" style="font-size: 20px;">
                                    Reasignación de citas
                                </label>
                            </div>
                        </div>
                        {{-- <div class="container">
                            <div class="form-check">
                                <input class="form-check-input" style="width:15px;height:15px" value="4"
                                    name="menu_opciones" type="radio">
                                <label class="form-check-label" style="font-size: 20px;">
                                    Atención con un Agente
                                </label>
                            </div>
                        </div> --}}
                        <br>

                    </form>

                    <div class="row">
                        <div class="col-6" align="right">
                            <a type="button" href="{{ route('index') }}" class="btn btn-danger">Cancelar</a>
                        </div>
                        <div class="col-6">
                            <button type="button" id="btn_sig_paso_6" class="btn btn-danger">Siguiente <i
                                    class="fas fa-arrow-right"></i></button>
                        </div>
                    </div>

                </div>

            </div>

        </div>
    </div>
@endsection

@section('scripts')
    <script src="{{ asset('js/funciones/consultar_informacion.js') }}"></script>
@endsection