@extends('layouts.regna.regna')


@section('content')
    
    <!-- ======= About Section ======= -->
    <section id="about">
        <div class="container" data-aos="fade-up">
          <div class="row about-container">
  
            <div class="col-lg-6 content order-lg-1 order-2">
              <h2 class="title">Acerca de Nosotros</h2>
              <p style="color: black; text-align: justify;">
                Nuestros servicios de asesoría fiscal, contable y administrativa se prestan a   empresas, profesionales y particulares, a medida y de forma personalizada, según los requerimientos de cada cliente.
              </p>
              <p style="color: black; text-align: justify;">
                Somos una empresa especialista  en asesorías financieras , tributaria, contable y Laboral. Como empresa de consultoría de gestión para compañías, prestamos un servicio altamente profesionalizado, orientado al área económico-financiera, gerencial y de organización. 
              </p>
  
              <div class="icon-box" data-aos="fade-up" data-aos-delay="100">
                <div class="icon"><i class="fa fa-comments"></i></div>
                <h4 class="title"><a href="">CONSULTORÍA DE GESTIÓN ONLINE</a></h4>
                <p class="description" style="color: black; text-align: justify;">
                  Te asesoramos en cualquier área de gestión: Finanzas, Tributación, Presupuesto, Contabilidad, Organización, RRHH, Operaciones, Estrategia, Plan de Ventas, Mejora de Procesos y más.
                </p>
              </div>
  
              <div class="icon-box" data-aos="fade-up" data-aos-delay="200">
                <div class="icon"><i class="fa fa-handshake-o" aria-hidden="true"></i></div>
                <h4 class="title"><a href="">CONSULTORES SENIOR EXPERTOS EN CADA AREA</a></h4>
                <p class="description" style="color: black; text-align: justify;">Nuestros Consultores tienen amplia experiencia como Directivos y Consultores de Empresas</p>
              </div>
  
              <div class="icon-box" data-aos="fade-up" data-aos-delay="300">
                <div class="icon"><i class="fa fa-id-card-o" aria-hidden="true"></i></div>
                <h4 class="title"><a href="">CONTACTO &Aacute;GIL</a></h4>
                <p class="description" style="color: black; text-align: justify;">A través de email, chat, teléfono o videoconferencia</p>
              </div>
  
            </div>
  
            <div class="col-lg-6 background order-lg-2 order-1" data-aos="fade-left" data-aos-delay="100" style="background-size: 100%;"></div>
          </div>
  
        </div>
      </section><!-- End About Section -->
  
      <!-- ======= Facts Section ======= -->
      <section id="facts">
        <div class="container" data-aos="fade-up">
          <div class="section-header">
            <h3 class="section-title">Misión</h3>
            <p class="section-description" style="color: black; text-align: justify;">
              Apoyar en la gestión de crecimiento y desarrollo de las pequeñas,
              medianas empresas, personas naturales y profesionales que generan emprendimientos en el Ecuador. Ser no solo un asesor sino un constante soporte y aliados estratégicos, a través del desempeño directo de un grupo de profesionales con un alto grado profesionalismo, compromiso, excelencia y calidad humana.

            </p>
          </div>
          <div class="row d-flex justify-content-center">
            <img src="../regna/assets/img/mision-vision.jpg" alt="">
          </div>
          <br><br>
          <div class="section-header">
            <h3 class="section-title">Visión</h3>
            <p class="section-description" style="color: black; text-align: justify;">
              Consolidarnos como líder y referente para el mercado de las asesorías administrativas e integradas a empresas, con un marcado énfasis en la calidad de servicio y en la innovación, tanto para nuestro desarrollo como para nuestros clientes.
            
            </p>
          </div>
  
        </div>
      </section><!-- End Facts Section -->
  
      <!-- ======= Services Section ======= -->
      <section id="services">
        <div class="container" data-aos="fade-up">
          <div class="section-header">
            <h3 class="section-title">Nuestros Servicios</h3>
            <p class="section-description"></p>
          </div>
          <div class="row">
            <div class="col-lg-6 col-md-8" data-aos="zoom-in">
              <div class="box">
                <div class="icon"><a href=""><i class="fa fa-bar-chart"></i></a></div>
                <h4 class="title"><a href="">CONTABILIDAD</a></h4>
                <p class="description">
                  <ul class="lista-servicios">
                      <li class="">Sistematización de la Información en dispositivos móviles</li>
                      <li class="">Ingreso de anexo transaccional</li>
                      <li class="">Actualización de datos</li>
                      <li class="">Aumento y disminución de actividades</li>
                      <li class="">Crear, Modificar y Suspender RUC</li>
                      <li class="">Facturación Electrónica</li>
                      <li class="">Asesoría Contable </li>
                      <!--li class="">Elaboraci&oacute;n del Balance anual al <img class="img-fluid" style="width: 2rem;" src="images/icons/sri_icon.png"></li-->
                  </ul>
                </p>
              </div>
            </div>
            <br>
            <div class="col-lg-6 col-md-8" data-aos="zoom-in">
              <div class="box">
                <div class="icon"><a href=""><i class="fa fa-money"></i></a></div>
                <h4 class="title"><a href="">FINANCIERO</a></h4>
                <p class="description">
                  <ul class="lista-servicios">
                      <li class="">Elaboración de Estados Financieros con NIIF</li>
                      <li class="">Estados de Situación Financiera</li>
                      <li class="">Estados de resultados</li>
                      <li class="">Indicadores de Ratios Financieros</li>
                      <li class="">Análisis de situación de la empresa</li>
                      <li class="">Evaluación de Indicadores por departamento</li>
                      <li class="">Asesorías Financieras</li>
                  </ul>

                </p>
              </div>
            </div>
      
          </div>
          <br>
          <div class="row">
            <div class="col-lg-6 col-md-8" data-aos="zoom-in">
              <div class="box">
                <div class="icon"><a href=""><i class="fa fa-users" aria-hidden="true"></i></a></div>
                <h4 class="title"><a href="">RECURSOS HUMANOS</a></h4>
                <p class="description">
                  <ul class="lista-servicios">
                      <li class="">Avisos de entradas y salidas</li>
                      <li class="">Actas de finiquito</li>
                      <li class="">Creación de contratos</li>
                      <li class="">Calculo y elaboración de roles</li>
                      <li class="">Asesoría de especialistas de RRHH</li>
                      <!--li class="">Elaboraci&oacute;n del Balance anual al <img class="img-fluid" style="width: 2rem;" src="images/icons/sri_icon.png"></li-->
                  </ul>
                </p>
              </div>
            </div>
  
            <div class="col-lg-6 col-md-8" data-aos="zoom-in">
              <div class="box">
                <div class="icon"><a href=""><i class="fa fa-address-card-o" aria-hidden="true"></i></a></div>
                <h4 class="title"><a href="">TRIBUTACIÓN</a></h4>
                <p class="description">
                  <ul class="lista-servicios">
                      <li class="">Declaración de Anual 102, Proyección y Declaración de Impuesto a la Renta</li>
                      <li class="">Elaboración de anexos de Gastos Personales</li>
                      <li class="">Declaración de 104 IVA mensual y semestral</li>
                      <li class="">Ingreso de anexos transaccional</li>
                      <li class="">Asesorías tributarias</li>
                  </ul>
                </p>
              </div>
            </div>
          </div>

          <br>
          <div class="row">
            <div class="col-lg-6 col-md-8" data-aos="zoom-in">
              <div class="box">
                <div class="icon"><a href=""><i class="fa fa-bullhorn" aria-hidden="true"></i></a></div>
                <h4 class="title"><a href="">MARKETING</a></h4>
                <p class="description">
                  <ul class="lista-servicios">
                      <li class="">Creación de logo</li>
                      <li class="">Creación de Post</li>
                      <li class="">Catalogo de productos o servicios</li>
                      <li class="">Asesorías de Marketing</li>
                  </ul>
                </p>
              </div>
            </div>
            <br>
            <div class="col-lg-6 col-md-8" data-aos="zoom-in">
              <div class="box">
                <div class="icon"><a href=""><i class="fa fa-gavel" aria-hidden="true"></i></a></div>
                <h4 class="title"><a href="">LEGAL</a></h4>
                <p class="description">
                  <ul class="lista-servicios">
                      <li class="">Creación de empresas SAS</li>
                      <li class="">Creación de compañías S.A. (SOCIEDAD ANONIMA)</li>
                      <li class="">Firmas Electrónicas de Archivos</li>
                      <li class="">Consultorías y Asesorías legales</li>
                  </ul>
                </p>
              </div>
            </div>
          </div>
  
        </div>
      </section><!-- End Services Section -->
  
      <!-- ======= Call To Action Section ======= -->
      <section id="call-to-action">
        <div class="container">
          <div class="row" data-aos="zoom-in">
            <div class="col-lg-9 text-center text-lg-left">
              <h3 class="cta-title">Accede a Nuestros Servicios</h3>
              <p class="cta-text"> </p>
            </div>
            <div class="col-lg-3 cta-btn-container text-center">
              <a class="cta-btn align-middle" href="{{ url('tienda/tienda-solution') }}">Comenzar</a> 
          

            </div>
          </div>
  
        </div>
      </section><!-- End Call To Action Section -->
  
      <!-- ======= Portfolio Section ======= -->
      {{-- <section id="portfolio" class="portfolio">
        <div class="container" data-aos="fade-up">
          <div class="section-header">
            <h3 class="section-title">Portfolio</h3>
            <p class="section-description">Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque</p>
          </div>
  
          <div class="row" data-aos="fade-up" data-aos-delay="100">
            <div class="col-lg-12 d-flex justify-content-center">
              <ul id="portfolio-flters">
                <li data-filter="*" class="filter-active">All</li>
                <li data-filter=".filter-app">App</li>
                <li data-filter=".filter-card">Card</li>
                <li data-filter=".filter-web">Web</li>
              </ul>
            </div>
          </div>
  
          <div class="row portfolio-container" data-aos="fade-up" data-aos-delay="200">
  
            <div class="col-lg-4 col-md-6 portfolio-item filter-app">
              <img src="assets/img/portfolio/portfolio-1.jpg" class="img-fluid" alt="">
              <div class="portfolio-info">
                <h4>App 1</h4>
                <p>App</p>
                <a href="assets/img/portfolio/portfolio-1.jpg" data-gall="portfolioGallery" class="venobox preview-link" title="App 1"><i class="bx bx-plus"></i></a>
                <a href="portfolio-details.html" class="details-link" title="More Details"><i class="bx bx-link"></i></a>
              </div>
            </div>
  
            <div class="col-lg-4 col-md-6 portfolio-item filter-web">
              <img src="assets/img/portfolio/portfolio-2.jpg" class="img-fluid" alt="">
              <div class="portfolio-info">
                <h4>Web 3</h4>
                <p>Web</p>
                <a href="assets/img/portfolio/portfolio-2.jpg" data-gall="portfolioGallery" class="venobox preview-link" title="Web 3"><i class="bx bx-plus"></i></a>
                <a href="portfolio-details.html" class="details-link" title="More Details"><i class="bx bx-link"></i></a>
              </div>
            </div>
  
            <div class="col-lg-4 col-md-6 portfolio-item filter-app">
              <img src="assets/img/portfolio/portfolio-3.jpg" class="img-fluid" alt="">
              <div class="portfolio-info">
                <h4>App 2</h4>
                <p>App</p>
                <a href="assets/img/portfolio/portfolio-3.jpg" data-gall="portfolioGallery" class="venobox preview-link" title="App 2"><i class="bx bx-plus"></i></a>
                <a href="portfolio-details.html" class="details-link" title="More Details"><i class="bx bx-link"></i></a>
              </div>
            </div>
  
            <div class="col-lg-4 col-md-6 portfolio-item filter-card">
              <img src="assets/img/portfolio/portfolio-4.jpg" class="img-fluid" alt="">
              <div class="portfolio-info">
                <h4>Card 2</h4>
                <p>Card</p>
                <a href="assets/img/portfolio/portfolio-4.jpg" data-gall="portfolioGallery" class="venobox preview-link" title="Card 2"><i class="bx bx-plus"></i></a>
                <a href="portfolio-details.html" class="details-link" title="More Details"><i class="bx bx-link"></i></a>
              </div>
            </div>
  
            <div class="col-lg-4 col-md-6 portfolio-item filter-web">
              <img src="assets/img/portfolio/portfolio-5.jpg" class="img-fluid" alt="">
              <div class="portfolio-info">
                <h4>Web 2</h4>
                <p>Web</p>
                <a href="assets/img/portfolio/portfolio-5.jpg" data-gall="portfolioGallery" class="venobox preview-link" title="Web 2"><i class="bx bx-plus"></i></a>
                <a href="portfolio-details.html" class="details-link" title="More Details"><i class="bx bx-link"></i></a>
              </div>
            </div>
  
            <div class="col-lg-4 col-md-6 portfolio-item filter-app">
              <img src="assets/img/portfolio/portfolio-6.jpg" class="img-fluid" alt="">
              <div class="portfolio-info">
                <h4>App 3</h4>
                <p>App</p>
                <a href="assets/img/portfolio/portfolio-6.jpg" data-gall="portfolioGallery" class="venobox preview-link" title="App 3"><i class="bx bx-plus"></i></a>
                <a href="portfolio-details.html" class="details-link" title="More Details"><i class="bx bx-link"></i></a>
              </div>
            </div>
  
            <div class="col-lg-4 col-md-6 portfolio-item filter-card">
              <img src="assets/img/portfolio/portfolio-7.jpg" class="img-fluid" alt="">
              <div class="portfolio-info">
                <h4>Card 1</h4>
                <p>Card</p>
                <a href="assets/img/portfolio/portfolio-7.jpg" data-gall="portfolioGallery" class="venobox preview-link" title="Card 1"><i class="bx bx-plus"></i></a>
                <a href="portfolio-details.html" class="details-link" title="More Details"><i class="bx bx-link"></i></a>
              </div>
            </div>
  
            <div class="col-lg-4 col-md-6 portfolio-item filter-card">
              <img src="assets/img/portfolio/portfolio-8.jpg" class="img-fluid" alt="">
              <div class="portfolio-info">
                <h4>Card 3</h4>
                <p>Card</p>
                <a href="assets/img/portfolio/portfolio-8.jpg" data-gall="portfolioGallery" class="venobox preview-link" title="Card 3"><i class="bx bx-plus"></i></a>
                <a href="portfolio-details.html" class="details-link" title="More Details"><i class="bx bx-link"></i></a>
              </div>
            </div>
  
            <div class="col-lg-4 col-md-6 portfolio-item filter-web">
              <img src="assets/img/portfolio/portfolio-9.jpg" class="img-fluid" alt="">
              <div class="portfolio-info">
                <h4>Web 3</h4>
                <p>Web</p>
                <a href="assets/img/portfolio/portfolio-9.jpg" data-gall="portfolioGallery" class="venobox preview-link" title="Web 3"><i class="bx bx-plus"></i></a>
                <a href="portfolio-details.html" class="details-link" title="More Details"><i class="bx bx-link"></i></a>
              </div>
            </div>
  
          </div>
  
        </div>
      </section><!-- End Portfolio Section --> --}}
  
      <!-- ======= Team Section ======= -->
      <section id="team">
        <div class="container" data-aos="fade-up">
          <div class="section-header">
            <h3 class="section-title">NUESTRO EQUIPO</h3>
            <p class="section-description" style="color: black; text-align: center; ">El compromiso, la eficiencia, la oportunidad y la integridad son los valores que nos sustentan.​</p>
          </div>
          <div class="row">
            <div class="col-lg-4 col-md-6">
              <div class="member" data-aos="fade-up" data-aos-delay="100">
                <div class="pic"><img src="regna/assets/img/equipo/portfolio1.jpg" alt=""></div>
                <h4>ECONOMISTAS</h4>
             
              </div>
            </div>
  
            <div class="col-lg-4 col-md-6">
              <div class="member" data-aos="fade-up" data-aos-delay="200">
                <div class="pic"><img src="regna/assets/img/equipo/portfolio2.jpg" alt=""></div>
                <h4>FINANCIERO</h4>
               
              </div>
            </div>
  
            <div class="col-lg-4 col-md-6">
              <div class="member" data-aos="fade-up" data-aos-delay="300">
                <div class="pic"><img src="regna/assets/img/equipo/portfolio4.jpg" alt=""></div>
                <h4>CONTADORES</h4>
               
               
              </div>
            </div>
  
            <div class="col-lg-4 col-md-6">
              <div class="member" data-aos="fade-up" data-aos-delay="400">
                <div class="pic"><img src="regna/assets/img/equipo/portfolio3.jpg" alt=""></div>
                <h4>ABOGADOS</h4>
              
             
              </div>
            </div>
            <div class="col-lg-4 col-md-6">
                <div class="member" data-aos="fade-up" data-aos-delay="400">
                  <div class="pic"><img src="regna/assets/img/equipo/portfolio5.jpg" alt=""></div>
                  <h4>AUDITORES</h4>
                
                
                </div>
              </div>
              <div class="col-lg-4 col-md-6">
                <div class="member" data-aos="fade-up" data-aos-delay="400">
                  <div class="pic"><img src="regna/assets/img/equipo/portfolio6.jpg" alt=""></div>
                  <h4>ING. MARKETING</h4>
                 
                 
                </div>
              </div>
              
          </div>
  
        </div>
      </section><!-- End Team Section -->

      <div class="container">
        <div class="row" data-aos="zoom-in">
          <div class="col-lg-6 text-center text-lg-center">
            <h3 class="cta-title">Instala nuestra aplicaci&oacute;n <i class="fa fa-hand-o-right" aria-hidden="true"></i></h3>
            <p class="cta-text"> </p>
          </div>
          <div class="col-lg-6 cta-btn-container text-center">
            <a class="btn btn-inicio" role="button" aria-pressed="true" style="background: #2dc997; color: white"
            id="descargar-aplicacion-modal" data-toggle="modal" data-target="#exampleModal">
                <i class="fa fa-cloud-download" style="font-size: 18px"></i>&nbsp;&nbsp;Descargar aplicaci&oacute;n
            </a>
          </div>
        </div>
      </div>
  
      <!-- ======= Contact Section ======= -->
      {{-- <section id="contact">
        <div class="container">
          <div class="section-header">
            <h3 class="section-title">Contact</h3>
            <p class="section-description">Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque</p>
          </div>
        </div>
  
        <!-- Uncomment below if you wan to use dynamic maps -->
        <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d22864.11283411948!2d-73.96468908098944!3d40.630720240038435!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x89c24fa5d33f083b%3A0xc80b8f06e177fe62!2sNew+York%2C+NY%2C+USA!5e0!3m2!1sen!2sbg!4v1540447494452" width="100%" height="380" frameborder="0" style="border:0" allowfullscreen></iframe>
  
        <div class="container mt-5">
          <div class="row justify-content-center">
  
            <div class="col-lg-3 col-md-4">
  
              <div class="info">
                <div>
                  <i class="fa fa-map-marker"></i>
                  <p>A108 Adam Street<br>New York, NY 535022</p>
                </div>
  
                <div>
                  <i class="fa fa-envelope"></i>
                  <p>info@example.com</p>
                </div>
  
                <div>
                  <i class="fa fa-phone"></i>
                  <p>+1 5589 55488 55s</p>
                </div>
              </div>
  
              <div class="social-links">
                <a href="#" class="twitter"><i class="fa fa-twitter"></i></a>
                <a href="#" class="facebook"><i class="fa fa-facebook"></i></a>
                <a href="#" class="instagram"><i class="fa fa-instagram"></i></a>
                <a href="#" class="google-plus"><i class="fa fa-google-plus"></i></a>
                <a href="#" class="linkedin"><i class="fa fa-linkedin"></i></a>
              </div>
  
            </div>
  
            <div class="col-lg-5 col-md-8">
              <div class="form">
                <form action="forms/contact.php" method="post" role="form" class="php-email-form">
                  <div class="form-group">
                    <input type="text" name="name" class="form-control" id="name" placeholder="Your Name" data-rule="minlen:4" data-msg="Please enter at least 4 chars" />
                    <div class="validate"></div>
                  </div>
                  <div class="form-group">
                    <input type="email" class="form-control" name="email" id="email" placeholder="Your Email" data-rule="email" data-msg="Please enter a valid email" />
                    <div class="validate"></div>
                  </div>
                  <div class="form-group">
                    <input type="text" class="form-control" name="subject" id="subject" placeholder="Subject" data-rule="minlen:4" data-msg="Please enter at least 8 chars of subject" />
                    <div class="validate"></div>
                  </div>
                  <div class="form-group">
                    <textarea class="form-control" name="message" rows="5" data-rule="required" data-msg="Please write something for us" placeholder="Message"></textarea>
                    <div class="validate"></div>
                  </div>
                  <div class="mb-3">
                    <div class="loading">Loading</div>
                    <div class="error-message"></div>
                    <div class="sent-message">Your message has been sent. Thank you!</div>
                  </div>
                  <div class="text-center"><button type="submit">Send Message</button></div>
                </form>
              </div>
            </div>
  
          </div>
  
        </div>
      </section><!-- End Contact Section --> --}}
  

       <!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-lg" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Instalar Aplicaci&oacute;n</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div id="modal-body-content-install" style="display: none">
        <div class="modal-body">
            ¿ Desea instalar la web app?
            <br><br><br>
            <button class="btn" type="button" style="background: #8130b4; color: white" data-toggle="collapse" data-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
                <b><i class="fa fa-exclamation-circle menu-icon" aria-hidden="true"></i>&nbsp;Si presenta inconvenientes al instalar la web app, revisar nuestra guía de instalación (click aquí)</b>
            </button>
        </div>
        <div class="collapse" id="collapseExample">
            <div class="modal-body">
                <div class="alert alert-dark" role="alert">
                    <p><b>Para instalar la web app, tener en cuenta los siguientes puntos:</b><p>
                    <ul>
                        <li>Comprueba tu conexión a internet</li>
                        <li>Navegadores permitidos</li>
                        <img height="30" src="digital/images/Google-Chrome-icon.png" alt="GoogleChrome">
                        <img height="30" src="digital/images/Edge-icon.png" alt="MicrosoftEdge">
                        <img height="30" src="digital/images/Firefox-icon.png" alt="Firefox">
                        <img height="30" src="digital/images/Opera-icon.png" alt="Opera">
                        <li>Actualizar el navegador a su versión mas reciente</li>
                        <li>Comprobar que su navegador no se encuentre en modo incógnito o secreto</li>
                        <li>Revisar permisos de su navegador (Notificaciones push)</li>
                        <li>Esperar a la instalación, sólo debería tardar un momento</li>
                        <li>Revisar si no ha sido previamente instalada</li>
                    </ul>
                    <p><b>Para instalar la web app de forma manual desde su navegador, siga estos pasos:</b><p>
                    <ul class="nav nav-pills mb-3" id="pills-tab" role="tablist">
                        <li class="nav-item" role="presentation">
                            <button class="nav-link active" id="pill-chrome-tab" data-toggle="pill" data-target="#pill-chrome" type="button" role="tab"
                            aria-controls="pill-chrome" aria-selected="true">
                                <img height="30" src="digital/images/Google-Chrome-icon.png" alt="GoogleChrome">&nbsp;Google Chrome
                            </button>
                        </li>
                        <li class="nav-item" role="presentation">
                            <button class="nav-link" id="pill-edge-tab" data-toggle="pill" data-target="#pill-edge" type="button" role="tab"
                            aria-controls="pill-edge" aria-selected="false">
                                <img height="30" src="digital/images/Edge-icon.png" alt="MicrosoftEdge">&nbsp;Microsoft Edge
                            </button>
                        </li>
                        <li class="nav-item" role="presentation">
                            <button class="nav-link" id="pill-firefox-tab" data-toggle="pill" data-target="#pill-firefox" type="button" role="tab"
                            aria-controls="pill-firefox" aria-selected="false">
                                <img height="30" src="digital/images/Firefox-icon.png" alt="Firefox">&nbsp;Mozilla Firefox
                            </button>
                        </li>
                        <li class="nav-item" role="presentation">
                            <button class="nav-link" id="pill-opera-tab" data-toggle="pill" data-target="#pill-opera" type="button" role="tab"
                            aria-controls="pill-opera" aria-selected="false">
                                <img height="30" src="digital/images/Opera-icon.png" alt="Opera">&nbsp;Opera
                            </button>
                        </li>
                    </ul>
                    <div class="tab-content" id="pills-tabContent">
                        <div class="tab-pane fade show active" id="pill-chrome" role="tabpanel" aria-labelledby="pill-chrome-tab">
                            <ol>
                                <li>Normalmente, Chrome mostrará un mensaje de instalación en la barra de direcciones o un icono en la barra de herramientas.</li>
                                <img src="digital/images/Google-Chrome-install-pwa.PNG" alt="ChromeInstall">
                                <li>Haz clic en el icono de instalación.</li>
                                <li>Si se le solicita, confirme la instalación haciendo clic en "Instalar" o "Añadir".</li>
                                <li>Seleccione dónde desea instalar la Web App, como el escritorio o el menú de aplicaciones.</li>
                                <li>Una vez instalado, puedes encontrar y utilizar el web app en su dispositivo.</li>
                            </ol>
                        </div>
                        <div class="tab-pane fade" id="pill-edge" role="tabpanel" aria-labelledby="pill-edge-tab">
                            <ol>
                                <li>Edge mostrará normalmente un mensaje de instalación en la barra de direcciones o un icono en la barra de herramientas.</li>
                                <img src="digital/images/Edge-install-pwa.PNG" alt="EdgeInstall">
                                <li>Haz clic en el icono de instalación.</li>
                                <li>Si se le solicita, confirme la instalación haciendo clic en "Instalar".</li>
                                <li>Seleccione dónde desea instalar la Web App, como el escritorio o el menú de aplicaciones.</li>
                                <li>Una vez instalado, puedes encontrar y utilizar el web app en su dispositivo.</li>
                            </ol>
                        </div>
                        <div class="tab-pane fade" id="pill-firefox" role="tabpanel" aria-labelledby="pill-firefox-tab">
                            <ol>
                                <li>Firefox suele mostrar un aviso de instalación en la barra de direcciones u ofrecer un icono en la barra de herramientas.</li>
                                <img src="digital/images/Firefox-install-pwa.PNG" alt="FirefoxInstall">
                                <li>Haz clic en el icono de instalación.</li>
                                <li>Si se le solicita, confirme la instalación haciendo clic en "Instalar".</li>
                                <li>Seleccione dónde desea instalar la Web App, como el escritorio o el menú de aplicaciones.</li>
                                <li>Una vez instalado, puedes encontrar y utilizar el web app en su dispositivo.</li>
                            </ol>
                        </div>
                        <div class="tab-pane fade" id="pill-opera" role="tabpanel" aria-labelledby="pill-opera-tab">
                            <ol>
                                <li>Opera mostrará normalmente un aviso de instalación en la barra de direcciones o un icono en la barra de herramientas.</li>
                                <img src="digital/images/Opera-install-pwa.PNG" alt="OperaInstall">
                                <li>Haz clic en el icono de instalación.</li>
                                <li>Si se le solicita, confirme la instalación haciendo clic en "Instalar".</li>
                                <li>Seleccione dónde desea instalar la Web App, como el escritorio o el menú de aplicaciones.</li>
                                <li>Una vez instalado, puedes encontrar y utilizar el web app en su dispositivo.</li>
                            </ol>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="modal-footer">
            <button type="button" class="btn btn-secondary" data-dismiss="modal">Salir</button>
            <button type="button" class="btn btn-primary"  id="descargarPwa">Instalar</button>
        </div>
      </div>
      <div id="modal-body-content-ios" style="display: none">
        <div class="modal-body">
            <div class="alert alert-dark" role="alert">
                <div class="row" style="margin-left: 45%"><img src="digital/images/Safari-icon.png" height="45" alt="Safari"></div>
                <p>Para instalar la aplicación web, toca el botón <b>Compartir</b> y selecciona <b>"Añadir a pantalla de inicio"</b>.</p>
                <p>To install the web app, tap the <b>Share</b> button and select <b>"Add to Home Screen"</b>.</p>
                <div class="row" style="margin-left: 25%">
                    <img src="digital/images/Safari-install-pwa-1.PNG" alt="SafariInstall-1">
                </div>
                <div class="row" style="margin-left: 25%">
                    <img src="digital/images/Safari-install-pwa-2.PNG" alt="SafariInstall-2">
                </div>
                <div class="row" style="margin-left: 25%">
                    <img src="digital/images/Safari-install-pwa-3.PNG" alt="SafariInstall-3">
                </div>
            </div>
        </div>
        <div class="modal-footer">
            <button type="button" class="btn btn-secondary" data-dismiss="modal">Salir</button>
        </div>
      </div>
    </div>
  </div>
</div>

<script>

window.addEventListener('beforeinstallprompt', (event) => {
    event.preventDefault(); // Prevent automatic prompting
    const installButton = document.getElementById('descargarPwa');
    installButton.disabled = false;
    installButton.addEventListener('click', () => {
        event.prompt(); // Show install prompt
        event.userChoice.then((choiceResult) => {
            if (choiceResult.outcome === 'accepted') {
                console.log('Web app Instalado');
            } else {
                console.log('Web app Instalación cancelada');
            }
        });
    });
});


function showInstallBanner() {
    const isIOS = /iPad|iPhone|iPod/.test(navigator.userAgent);
    const isSafari = /^((?!chrome|android).)*safari/i.test(navigator.userAgent);

    if (isIOS && isSafari) {
    const webAppBanner = document.createElement('meta');
    webAppBanner.name = 'apple-mobile-web-app-capable';
    webAppBanner.content = 'yes';
    document.head.appendChild(webAppBanner);
    document.getElementById("modal-body-content-ios").style.display = "block";
    //alert('Para instalar la aplicación web, toca el botón Compartir y selecciona "Añadir a pantalla de inicio".\n\n\nTo install the web app, tap the Share button and select "Add to Home Screen".');
    }else{
    document.getElementById("modal-body-content-install").style.display = "block";
    }
}

// Attach the function to a button click event
const installButton = document.getElementById('descargar-aplicacion-modal');
installButton.addEventListener('click', showInstallBanner);

</script>
@endsection