<!--Header-->
<%- include("../template_user/heder.ejs") %>
<link rel="stylesheet" href="../registro/css/style2.css">
<head>
  <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
      <!-- Bootstrap CDN -->
  <!-- Bootstrap CSS -->
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet">
  <!-- Bootstrap 5 Dark Mode -->
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.dark.min.css" rel="stylesheet">

  <style>

    .contenedor{
      text-align: center;
      height: auto;
    }

    .progreso-contenedor{
        background-color: transparent;/*#fff;*/
        display: flex;
        justify-content: space-between;
        position: relative;
        margin-bottom: 30px;
        max-width: 80%;
        width: 350px;
        min-width: 95%;
        /*border:1px solid red*/
    }

    .progreso {
      background-color: #3498db;
      position: absolute;
      top: 50%;
      left: 0;
      transform: translateY(-50%);
      height: 4px;
      width: 30%;
      /*z-index: -1;*/
      transition: 0.4s ease;
    }

    .circulo{
      background-color: #fff;
      color: #999;
      border-radius: 50%;
      height: 30px;
      width: 30px;    
      display: flex;
      align-items: center;
      justify-content: center;
      border: 3px solid #e0e0e0;
      z-index: 1;
      transition: 0.4s ease;
    }

    .circulo.active{
      border-color: #3498db;
      color: #3498db
    }
    
    a {
      text-decoration: none;  /* Elimina el subrayado */
      color: inherit;  /* Hereda el color del texto del elemento padre */
    }
    .div-shadow{
      /*border: 0.5px solid #bcbcbc; */
      box-shadow: 0 0 20px #bcbcbc; 
    }

    .button_colors {
      background: linear-gradient(to right, #25ACDE, #A0C045);
      border: none;
      color: white;
      padding: 5px;
      text-align: center;
      text-decoration: none;
      display: inline-block;
      border-radius: 8px;
    }
    /****************************************************/
    
      #chartContainer {
        max-width: 120px; /* Establece el ancho máximo deseado */
        /*border:1px solid yellow*/
      }
      #chartContainer2 {
        max-width: 120px; /* Establece el ancho máximo deseado */
        /*border:1px solid yellowgreen*/
      } 
      .letraSize{
        width: 100%;
        text-align: left;
        font-size: 18px; 
        font-weight: normal; 
      }

      .btn-custom {
          background-color: #fff;  /* Cambia #yourColor por el color de fondo que desees */
          border-color: #191A1A;  /* Cambia #yourBorderColor por el color de borde que desees */
          color: #191A1A;  /* Cambia #yourTextColor por el color de texto que desees */
      }

    /**/
    @media screen and (max-width: 375px){
      /*
      .contenedor {
        background-color: lightgreen;
      }
      */
      #chartContainer {
        max-width: 100%; 
        /*border:1px solid blueviolet*/
      }
      #chartContainer2 {
        max-width: 100%; 
        /*border:1px solid purple*/
      }


      /*
      .contenedor {
        background-color: lightblue;
      }
      */

      .letraSize{
        font-size: 14px; 
        font-weight: normal; 
      }
      
    }
/**Carrouysel****************************************************************/
    /* Controla la opacidad de las diapositivas durante el cambio */
    .carousel-fade .carousel-item {
      transition-property: opacity;
    }
    
    .carousel-fade .carousel-item-next.carousel-item-start,
    .carousel-fade .carousel-item-prev.carousel-item-end {
      opacity: 0;
    }
    
    .carousel-fade .carousel-item.active {
      opacity: 1;
    }
    
    .carousel-fade .carousel-item-next,
    .carousel-fade .carousel-item-prev,
    .carousel-fade .carousel-item.active.carousel-item-start,
    .carousel-fade .carousel-item.active.carousel-item-end {
      z-index: 1;
    }

    /* Estilo para el fondo del texto */
    .carousel-caption {
      border-radius: 8px;
      background-color: rgba(255, 255, 255, 0.5); /* Fondo negro con opacidad */
      color: white; /* Color de texto blanco */
      padding: 20px; /* Espaciado interno */
    }
    .fondoObscuro{
      background-color: #030405;
      color: #fff;
      text-align: center;
      width: auto;
    }
    .fondoGris{
      background-color: #BCBCBB;
    }
    .text-with-line-breaks {
    text-align: justify;
    white-space: pre-line;
  }
  .representantes-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
  }
  .representante {
    width: calc(33.33% - 10px); /* Ajusta el ancho según tus necesidades */
    margin-bottom: 10px;
  }
  .mi-div-con-interlineado-reducido {
  line-height: 1; /* Ajusta el valor según tus necesidades */
}
  </style>

<script languague="javascript">
  function mostrar1() {
      div = document.getElementById('descripcion');
      div.style.display = '';
      var el = document.getElementById("text_descripcion");
      //el.setAttribute("style", "border-bottom:2px solid #53bd25; color: #53bd25; text-align: center;");
/*border-bottom:2px solid #53bd25; color: #53bd25; text-align: center;*/

      div2 = document.getElementById('representantes');
      div2.style.display = 'none';
      var al = document.getElementById("text_representantes");
      //al.setAttribute("style", "text-align: center; color: gray");
  }
  function mostrar() {
      div = document.getElementById('representantes');
      div.style.display = '';
      var el = document.getElementById("text_descripcion");
      //el.setAttribute("style", "text-align: center; color: gray");

      div2 = document.getElementById('descripcion');
      div2.style.display = 'none';
      var al = document.getElementById("text_representantes");
      //al.setAttribute("style", "border-bottom:2px solid #53bd25; color: #53bd25; text-align: center;");
  }


</script>
</head>
<body  class="hold-transition sidebar-mini layout-fixed" onload="mostrar1()" >
<div class="wrapper" style="background-color: #fff;">

  <!-- Loding Aqui va el monito de cargando-->
    <%- include("../template_user/loading.ejs") %>
  <!-- / Loding -->

  <!-- Navbar -->
    <%- include("../template_user/menuadmin.ejs") %>
  <!-- /.navbar -->

  <!-- Aside Main Sidebar Container -->
  <% dondeEsto = "sponsors"; %>
<!--------------------------------------------------------------------------------------------------------->
  <%- include("../template_user/asaid.ejs") %>

 <!------------------------------------------------------------------------------------------------------------>
 <!-- /.Aside -->

  <!-- Content Wrapper. Contains page content -->
  <div class="content-wrapper" style="background-color: #fff;">
    <div style="p-2 bg-light border">&nbsp;</div>
              
        <!-- COMIENZA EL CAROUSEL-->
        <div class="w-100 rounded mt-2 mb-2 p-2" style="position:relative; " >

          <!-- // Reviso si tienen fotos para banner, si no se muestra solo el banner -->
          <%
          if(funct_Spion_P.length > 0){ 
          %>
          <div id="carouselExampleDark" class="carousel carousel-dark slide carousel-fade rounded" data-bs-ride="carousel" style='margin-top:10px'>
            
            <!-- Indicators/dots -->
            <div class="carousel-indicators">
            <%
              for(var i=1; i <= funct_Spion_P.length; i++ ){
                if(i==1){
                  %>
                  <button type="button" data-bs-target="#carouselExampleDark" data-bs-slide-to="<%=i%>" class="active" aria-current="true" aria-label="Slide <%=i-1%>"></button>
                  <button type="button" data-bs-target="#carouselExampleDark" data-bs-slide-to="<%=i%>" aria-current="true" aria-label="Slide <%=i%>"></button>
                  <%
                }else{
                  %>
                  <button type="button" data-bs-target="#carouselExampleDark" data-bs-slide-to="<%=i%>" aria-label="Slide <%=i%>"></button>
                  <%
                }
              }
              
            %>
            </div>
  
            <div class="carousel-inner">
              <%
              for(var i=0; i < funct_Spion_P.length; i++ ){
                  var idCtrlPrincipal = funct_Spion_P[i].id_ctrl
                
                if(i==0){
                  %>
                    <div class="carousel-item active">
                      <a href="<%= info_sponsor.t_web %>">
                        <img src="<%= info_sponsor.t_portada %>" class="d-block w-100 rounded" alt="Slide 1">
                        <div class="carousel-caption d-none d-md-block">
                          <h5><%= info_sponsor.t_nombre %></h5>
                          <p><%= info_sponsor.t_subtitulo %></p>
                        </div>
                      </a>
                    </div>
                    <div class="carousel-item">
                      <a href="<%= funct_Spion_P[i].enlace %>">
                        <img src="<%= funct_Spion_P[i].imagen %>" class="d-block w-100 rounded" alt="Slide 1">
                        <div class="carousel-caption d-none d-md-block">
                          <h5><%= funct_Spion_P[i].titulo %></h5>
                          <!--<p>Nulla vitae elit libero, a pharetra augue mollis interdum.</p>-->
                        </div>
                      </a>
                    </div>
                  <%
                }else{
                  %>
                  <div class="carousel-item">
                    <a href="<%= funct_Spion_P[i].enlace %>">
                    <img src="<%= funct_Spion_P[i].imagen %>" class="d-block w-100 rounded" alt="Slide 1">
                      <div class="carousel-caption d-none d-md-block">
                        <h5><%= funct_Spion_P[i].titulo %></h5>
                        <!--<p>Nulla vitae elit libero, a pharetra augue mollis interdum.</p>-->
                      </div>
                    </a>
                  </div>
                  <%
                }
              }
              
            %> 
            </div>

            <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleDark" data-bs-slide="prev">
              <span class="carousel-control-prev-icon" aria-hidden="true"></span>
              <span class="visually-hidden">Previous</span>
            </button>
            <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleDark" data-bs-slide="next">
              <span class="carousel-control-next-icon" aria-hidden="true"></span>
              <span class="visually-hidden">Next</span>
            </button>

          </div>

          <!-- Bootstrap Bundle with Popper -->
          <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.6/dist/umd/popper.min.js"></script>
          <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js"></script>
        <%
          }else{
        %>
            <img src="<%= info_sponsor.t_portada %>" width="100%" alt="">
        <%  
          }
        %>
        </div>
      <!-- // TERMINA EL CAROUSEL-->
      <div class="rounded fondoObscuro" style="margin: 0 auto; position: relative; top: -30px; z-index: 10000; text-align: center; width: 300px;" id='dos'>
        <% if(info_sponsor.t_categoria=='2' ){ %> Gold Sponsor 
        <% }else if(info_sponsor.t_categoria=='1' ){ %> Sponsor Headliner 
        <% }else{ %> Premium Sponsor <% } %>
      </div>
     
    <!-- Main content -->
    <section class="content h-100 row col d-inline-block" style="padding-left:25px; ">
      <div class="container-fluid rounded p-1"  style="background: #fff; width: 100%;"><!--  -->

          <!-- Menu superior -->
          <div class="w-100 row rounded pl-1" style='margin:0 auto'>
            <div class="" style="width: 100%; display: flex; justify-content: center;">
                  <!--Si tiene Web-->
                  <% 
                      if(info_sponsor.t_web!=''){ 
                          if(info_sponsor.t_web.includes('http')){ var t_webb = info_sponsor.t_web}
                          else{var t_webb = "https://"+info_sponsor.t_web}
                  %>
                    <a class="p-1" href="<%= t_webb %>" target="_blank"><button type="button" class="btn btn-outline-dark">Website</button></a> 
                  <% } %>

                  <!--Si tiene Facebook-->
                  <% 
                  if(info_sponsor.t_facebook!=''){ 
                      if(info_sponsor.t_facebook.includes('http')){var t_facebookk = info_sponsor.t_facebook}
                      else{ var t_facebookk = "https://"+info_sponsor.t_facebook}
                  %>
                    <a class="p-1" href="<%= t_facebookk %>" target="_blank"><button type="button" class="btn btn-outline-dark">Facebook</button></a>
                  <% } %>

                  <!--Si tiene t_linkedin-->
                  <% 
                  if(info_sponsor.t_linkedin!=''){ 
                      if(info_sponsor.t_linkedin.includes('http')){var t_linkedinn = info_sponsor.t_linkedin}
                      else{var t_linkedinn = "https://"+info_sponsor.t_linkedin}
                  %>
                    <a class="p-1" href="<%= t_linkedinn %>" target="_blank"><button type="button" class="btn btn-outline-dark">LinkedIn</button></a>
                  <% } %>

                  <!--Si tiene t_twitter-->
                  <% 
                  if(info_sponsor.t_twitter!=''){ 
                      if(info_sponsor.t_twitter.includes('http')){ var t_twitterr = info_sponsor.t_twitter}
                      else{ var t_twitterr = "https://"+info_sponsor.t_twitter }
                  %>
                    <!-- <div class="col col-sm-6 col-md-2"><a href="<%= t_twitterr %>" style="border-bottom: 1px solid;" target="_blank">Twitter</a></div> -->
                  <% } %>

                  <!--Si tiene t_instagram-->
                  <% 
                  if(info_sponsor.t_instagram!=''){ 
                      if(info_sponsor.t_instagram.includes('@')){ var t_instagramm = "https://www.instagram.com/"+info_sponsor.t_instagram.slice(1)}
                      else{var t_instagramm = info_sponsor.t_instagram  }
                  %>
                    <a class="p-1" href="<%= t_instagramm %>" target="_blank"><button type="button" class="btn btn-outline-dark">Instagram</button></a>
                  <% } %>
            </div>
          </div>
          <!-- // Menu superior -->


      <!-- INFORMACIÓN -->    
      <div class="row ml-1 w-100 rounded" style="float:left;"> 
        <div class="row pb-2 mt-1 w-100 text-with-line-breaks" >
          <%= (info_sponsor.t_description) %>
        </div>
                   
        <div class="rounded-bottom fondoObscuro mt-2 mb-2" style="margin: 0 auto;" id='dos'>
          Representantes de la empresa
        </div>
        <div class="representantes-container">
          <% if (info_representantes.length > 0) {
               for (var i = 0; i < info_representantes.length; i++) {
                 //let t_foto = info_representantes[i].t_foto;
                 let t_foto = ''
                 let t_nombre = info_representantes[i].t_nombre;
                 let t_empresa = info_representantes[i].t_empresa;
                 let t_cargo = info_representantes[i].t_cargo;

                 
              if (info_representantes[i].t_foto === null || info_representantes[i].t_foto === "") {
                  // La propiedad t_foto es nula o vacía
                  t_foto = 'files_users/user.png';
              } else {
                  // La propiedad t_foto tiene un valor
                  t_foto = info_representantes[i].t_foto;
              }
              
          %>
          <div class="representante text-center mi-div-con-interlineado-reducido">
            <!--<img class="rounded-circle" src="<%= t_foto %>" alt="" width="100px">-->
            <img class="rounded-circle border border-2" src="<%= t_foto %>" alt="" style="width:80px; height: 80px;"><br/>
            <strong style="font-size: 12px;"><%= t_nombre %></strong><br/>
            <div class="w-100 text-center border-bottom mi-div-con-interlineado-reducido pb-1" style="font-size: 12px; color: gray"><%= t_cargo %></div>
            <div class="w-100 text-center mi-div-con-interlineado-reducido mt-1" style="font-size: 12px; color: gray"><%= t_empresa %></div>
          </div>


          <% }
             } %>
        </div>
      </div> 
      <!-- // INFORMACIÓN -->

<!-- /.container-fluid -->
      </div>
    </section>
    <!-- /.content -->
  </div>

  <!-- Control Sidebar -->
    <!--Footer B -->
    <%- include("../template_user/footerb.ejs") %>
    <!--/Footer B -->

    <!--Footer -->
    <%- include("../template_user/footer.ejs") %>
    <!--/Footer -->
</body>
</html>
