@extends('layouts.main')

@section('head')
    <style>
        /* styles.css */
        table {
            table-layout: fixed;
            width: 100%;
        }

        table th,
        table td {
            text-align: center;
            vertical-align: middle;
        }
    </style>
@endsection

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

            <div id="div_pasos">
                <div><a type="buttom" href="{{ route('loggedMenu') }}" class="btn btn-danger"><i class="fas fa-arrow-left"></i>
                        Menú</a></div>
                <div class="d-sm-flex align-items-center justify-content-center mb-4">
                    <h1 class="h3 mb-0 text-gray-800"><strong>Agendamiento de Cita</strong></h1>
                </div>

                {{-- PASO 0 --}}
                <div id="paso_0">
                    <h4 class="text-center mb-0 text-gray-800">Sr/a <span
                            class="span_nombre_usuario">{{ Session::get('name') }}</span>
                        <br>
                        Seleccione la sede en la que quiere ser atendido:
                    </h4>
                    <br>
                    <div>
                        <table class="table" id="agendaTablaSedes">
                            <thead>
                                <tr>
                                    <th scope="col" style="text-align: center">Nombre</th>
                                    <th scope="col" style="text-align: center">Seleccionar</th>
                                </tr>
                            </thead>
                            <tbody name="tbodySedes">

                            </tbody>
                        </table>
                    </div>
                    <br>

                    <div class="boton_sig">
                        <button type="button" id="btn_sig_paso_0" class="btn btn-danger">Siguiente <i
                                class="fas fa-arrow-right"></i></button>
                    </div>
                </div>

                {{-- PASO 1 --}}
                <div id="paso_1" style="display:none;">
                    <h4 class="text-center mb-0 text-gray-800">Sr/a <span
                            class="span_nombre_usuario">{{ Session::get('name') }}</span>
                        <br>
                        Elija su tipo de cita:
                    </h4>
                    <br>
                    <div class="container">
                        <div class="form-check">
                            <input class="form-check-input" style="width:15px;height:15px" value="1" name="tipo_cita"
                                type="radio">
                            <label class="form-check-label" style="font-size: 20px;">
                                Cita de control
                            </label>
                        </div>
                    </div>
                    <div class="container">
                        <div class="form-check">
                            <input class="form-check-input" style="width:15px;height:15px" value="2" name="tipo_cita"
                                type="radio">
                            <label class="form-check-label" style="font-size: 20px;">
                                Primera vez
                            </label>
                        </div>
                    </div>
                    <br>

                    <div class="row">
                        <div class="col-6" align="right">
                            <button type="button" class="btn btn-danger" id="btn_ant_paso_1"><i
                                    class="fas fa-arrow-left"></i> Anterior</button>
                        </div>
                        <div class="col-6">
                            <button type="button" id="btn_sig_paso_1" class="btn btn-danger">Siguiente <i
                                    class="fas fa-arrow-right"></i></button>
                        </div>
                    </div>
                </div>

                {{-- PASO 2 --}}
                <div id="paso_2" style="display:none;">
                    <h4 class="text-center mb-0 text-gray-800">Sr/a <span
                            class="span_nombre_usuario">{{ Session::get('name') }}</span>
                        <br>
                        Seleccione la especialidad de su cita:
                    </h4>
                    <br>
                    <div>
                        <table class="table" id="agendaTablaEspecialidades">
                            <thead>
                                <tr>
                                    <th scope="col" style="text-align: center">Nombre</th>
                                    <th scope="col" style="text-align: center">Seleccionar</th>
                                </tr>
                            </thead>
                            <tbody name="tbody_especialidad">

                            </tbody>
                        </table>
                    </div>
                    <br>

                    <div class="row">
                        <div class="col-6" align="right">
                            <button type="button" class="btn btn-danger" id="btn_ant_paso_2"><i
                                    class="fas fa-arrow-left"></i> Anterior</button>
                        </div>
                        <div class="col-6">
                            <button type="button" id="btn_sig_paso_2" class="btn btn-danger">Siguiente <i
                                    class="fas fa-arrow-right"></i></button>
                        </div>
                    </div>
                </div>

                {{-- PASO 2 AUTORIZACIONES --}}
                <div id="paso_auto" style="display:none;">
                    <h4 class="text-center mb-0 text-gray-800">Sr/a <span
                            class="span_nombre_usuario">{{ Session::get('name') }}</span>
                        <br>
                        Elija cual de las autorizaciones vigentes desea:
                    </h4>
                    <br>
                    <div>
                        <table class="table">
                            <thead>
                                <tr>
                                    <th scope="col" style="text-align: center">Codigo</th>
                                    <th scope="col" style="text-align: center">Especialidad</th>
                                    <th scope="col" style="text-align: center">Seleccionar</th>
                                </tr>
                            </thead>
                            <tbody name="tbody_auto">

                            </tbody>
                        </table>
                    </div>
                    <br>

                    <div class="row">
                        <div class="col-6" align="right">
                            <button type="button" class="btn btn-danger" id="btn_ant_paso_auto"><i
                                    class="fas fa-arrow-left"></i> Anterior</button>
                        </div>
                        <div class="col-6">
                            <button type="button" id="btn_sig_paso_auto" class="btn btn-danger">Siguiente <i
                                    class="fas fa-arrow-right"></i></button>
                        </div>
                    </div>
                </div>

                {{-- PASO 3 --}}
                <div id="paso_3" style="display:none;">
                    <h4 class="text-center mb-0 text-gray-800">Sr/a <span
                            class="span_nombre_usuario">{{ Session::get('name') }}</span>
                        <br>
                        Elija un médico para su cita:
                    </h4>
                    <br>
                    <div>
                        <table class="table">
                            <thead>
                                <tr>
                                    <th scope="col" style="text-align: center">Nombre</th>
                                    <th scope="col" style="text-align: center">Seleccionar</th>
                                </tr>
                            </thead>
                            <tbody name="tbody_medicos">

                            </tbody>
                        </table>
                    </div>
                    <br>
                    <div class="row">
                        <div class="col-6" align="right">
                            <button type="button" id="btn_ant_paso_3" class="btn btn-danger"><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 4 --}}
                <div id="paso_4" style="display:none;">
                    <h4 class="text-center mb-0 text-gray-800">Sr/a <span
                            class="span_nombre_usuario">{{ Session::get('name') }}</span>
                        <br>
                        En estas fechas tenemos horarios:
                    </h4>
                    <br>

                    <div>
                        <table class="table" id="agendaTabla">
                            <thead>
                                <tr>
                                    <th scope="col" style="text-align: center">Fechas posibles</th>
                                    <th scope="col" style="text-align: center">Seleccionar</th>
                                </tr>
                            </thead>
                            <tbody name="tbody_agenda">
                            </tbody>
                        </table>
                    </div>
                    <br>

                    <div class="row">
                        <div class="col-6" align="right">
                            <button type="button" id="btn_ant_paso_4" class="btn btn-danger"><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">{{ Session::get('name') }}</span>
                        <br>
                        El dia <span class="span_fecha_cita"></span> tenemos los siguientes horarios:
                    </h4>
                    <br>

                    <div>
                        <table class="table" id="agendaTablaHoras">
                            <thead>
                                <tr>
                                    <th scope="col" style="text-align: center">Horas posibles</th>
                                    <th scope="col" style="text-align: center">Seleccionar</th>
                                </tr>
                            </thead>
                            <tbody name="tbody_agenda_horas">
                            </tbody>
                        </table>
                    </div>
                    <br>

                    <div class="row">
                        <div class="col-6" align="right">
                            <button type="button" id="btn_ant_paso_5" class="btn btn-danger"><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">Agendar</button>
                        </div>
                    </div>
                </div>

                {{-- PASO 6 --}}
                <div id="paso_6" style="display:none;">
                    <h4 class="text-center mb-0 text-gray-800"><span id="messageCita"></span>
                    </h4>

                    <div class="boton_sig">
                        <a type="buttom" href="{{ route('loggedMenu') }}" class="btn btn-danger">Finalizar</a>
                    </div>
                </div>

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

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