    <div class="modal  fade" id="ModalHelpagenda"  role="dialog" aria-labelledby="myModalLabel" data-show="true" data-keyboard="true" data-backdrop="true">


      @include('modules.helps.headermodal')
      <div class="container-fluid">
        <div class="row">
            <div class="col-xs-12 col-md-6">
                <p class="lead">
                    <strong><i class="zmdi zmdi-alert-triangle"></i> &nbsp; ¡Importante! </strong>Para desplazarte por esta ventana debes de mantener pulsado el botón izquierdo del 
                    Mouse o Touchpad en la barra de scroll y desplazarla hacia abajo o hacia arriba según donde te encuentres.
                    <br><br>
                    Para <strong>cerrar la ventana</strong> pulsa el botón <button type="button" class="btn btn-primary btn-xs"><i class="zmdi zmdi-thumb-up"></i> &nbsp; De acuerdo</button> que se encuentra en la parte inferior.
                </p>
            </div>
            <div class="col-xs-12 col-md-6">
                <figure>
                    <img class="img-responsive center-box" src="">
                </figure>
            </div>
        </div>
        <hr>

    <div class="row">
        <div class="page-header">
          <h2 class="all-tittles">Ayuda <small>Inicio</small></h2>
      </div>

      <div class="col-xs-12">
        <p class="text-help">
            
            <table id="example2" class="table table-bordered table-hover table-striped" cellspacing="0" width="100%">
                <tr>
                    <H4 style="color:teal;">Pantalla principal del módulo.</H4>
                    <p>
                    La pantalla principal cuenta con una tabla que muestra un caledario donde se detallan los eventos ingresados al sistema en un módulo de agenda institucional, tiene tres formas de vista la primera es por mes y se detalla a continuación.</b><br></p>
                </tr>
                <tr>
                    <div class="col-sm-12">
                      <img class="img-responsive" src="{{ asset('/helpimages/tablaprincipalagenda.png') }}" alt="Photo">
                  </div><br><br>
              </tr>
          La segunda forma de vista es por semana y se detalla a continuación..</b><p><br>
            <div class="col-sm-12">
              <img class="img-responsive" src="{{ asset('/helpimages/tablaprincipalagendasemana.png') }}" alt="Photo">
          </div><br><br>
           La tercera forma de vista es por dia y se detalla a continuación..</b><p><br>
      </b><p><br>
        <div class="col-sm-12">
          <img class="img-responsive" src="{{ asset('/helpimages/tablaprincipalagendadia.png') }}" alt="Photo">
      </div><br><br><br>

      <H4 style="color:teal;">Acciones dentro del módulode Agenda.</H4>

  Los botones representan las opciones disponibles en el sistema, haz click en los botones para acceder a la opción que deseas.</b><p><br>
    <H4 style="color:teal;">Registro de un nuevo evento.</H4>
    <p class="text-help">
        Para hacer el registro de un nuevo evento de la agenda se deben seguir los siguientes pasos:
    </b><p><br>
        1- <button type="button" class="btn btn-primary btn-xs"><i class="zmdi zmdi-thumb-up"></i> &nbsp; Nuevo</button> Elegir el evento que desea agregar del panel de eventos.<br><br>
        2- Arrastrar el evento al dia en cual se desea añadir dicho evento por ejemplo Reunion de padres de familia.<br>
        <div class="col-sm-12">
          <img class="img-responsive" src="{{ asset('/helpimages/nuevoeventoagenda1.png') }}" alt="Photo">
      </div><br><br>
      3- Soltar el evento en el dia seleccionado con esta acción es suficiente para que se guarde el evento.<br><br>
      4-  Para ubicar la hora de realización del evento se necesita ir a la vista de día, luego se arrastra el evento a la hora de inicio del evento, por ultimo agenadamos el evento a la hora de finalización del evento y de esta forma queda guardado el evento en las horas de inicio y fin deseadas.<br><br>
      <div class="col-sm-12">
          <img class="img-responsive" src="{{ asset('/helpimages/nuevoeventoagenda2.png') }}" alt="Photo">
      </div><br><br>
     
      <H4 style="color:teal;">Crear evento no existente.</H4>
    <p class="text-help">
        Para crear un evento no existente de la agenda se deben seguir los siguientes pasos:
    </b><p><br>
        1- <button type="button" class="btn btn-primary btn-xs"><i class="zmdi zmdi-thumb-up"></i> &nbsp; Nuevo</button> Dirigirse al panel de crear eventos.<br><br>
        2- Seleccionar el color que desea colocar al evento.<br>
        <div class="col-sm-12">
          <img class="img-responsive" src="{{ asset('/helpimages/creareventonuevo1.png') }}" alt="Photo">
      </div><br><br>
      3- Llenar el formulario con el nombre del evento a crear.<br><br>
      4-  Dar clic en el boton agregar que cambia de color dependiendo del color elegido previamente, y de esta manera se ha creado un nuevo evento el cual puede ser arrastrado y agragarlo al calendario.<br><br>
      <div class="col-sm-12">
          <img class="img-responsive" src="{{ asset('/helpimages/creareventonuevo2.png') }}" alt="Photo">
      </div><br><br>
      
      <H4 style="color:teal;">Volver a menú principal.</H4>
      <p class="text-help">
        Para volver al menú principal se deben seguir los siguientes pasos:
    </b><p><br>
        1- <button type="button" class="btn btn-primary btn-xs"><i class="zmdi zmdi-thumb-up"></i> &nbsp; Inicio</button> Al acceder al botón Inicio el sistema nos mostrará un mensaje que nos indicará si deseamos volver a la pantalla principal del informático si aceptamos abandonaremos el módulo de tipo de activo, si deseamos anular la operacion damos clic en el botón cancelar.<br>
        <div class="col-sm-12">
          <img class="img-responsive" src="{{ asset('/helpimages/inicioperiodo1.png') }}" alt="Photo">
      </div><br><br>
  </p>
</table>
</div>
<div class="col-xs-12">
    <figure>
        <img class="img-responsive center-box" src="">
    </figure>
</div>
</div>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.bootstrapvalidator/0.5.0/js/bootstrapValidator.min.js" type="text/javascript"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery.bootstrapvalidator/0.5.0/js/bootstrapValidator.js"></script>
@include('modules.helps.footermodal')