{% extends 'h_tmp_usr/z_tmp.html' %}

{% block css %}
<link rel="stylesheet" href="{{ url_for('static', filename='f_contact/form.css') }}">

<!-- {# datatables #} -->
<link rel="stylesheet" href="https://cdn.datatables.net/2.2.2/css/dataTables.bootstrap5.css">

<!-- {# i jconfirm #} -->
<link rel="stylesheet" href="https://htmlguyllc.github.io/jConfirm/jConfirm.min.css">
<!-- {# f jconfirm #} -->
{% endblock css %}

{% block body %}

<style>
  /* estilos del carousel */
  @media screen and (orientation: landscape) {
    .carousel img {
      height: 80vh;
      object-fit: cover;
    }
  }

  .carousel-item video {
    width: 100%;
    height: 80vh; 
    object-fit: cover;
    display: block;
  }

  .carousel-item {
    position: relative;
    overflow: hidden;
    /* height: 100vh; */
  }
  .carousel-inner {
    overflow: hidden;
  }

  .carousel-caption.centered {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none; 
  }

  .carousel-caption.centered .caption-content {
    padding: 1rem 2rem;
    border-radius: 10px;
    text-align: center;
    box-shadow: 0 0 10px rgba(0,0,0,0.3);
    pointer-events: auto; 
    width: max-content;
    max-width: 90%;
  }

  .carousel-caption.centered .caption-content h2 {
    font-size: clamp(1.5rem, 5vw, 3rem);
    margin: 0;
    text-shadow: 1px 1px 4px rgba(0,0,0,0.6);
  }

  /* ------------------ */
/* Aplica a ambas: imágenes y videos */
.carousel-item img,
.carousel-item video {
  /* width: 100%; */
  /* height: 100%; */
  object-fit: cover; 
  display: block;
}


</style>



<ul class="nav nav-tabs" id="myTab" role="tablist">
  <li class="nav-item" role="presentation">
    <button class="nav-link active" id="home-tab" data-bs-toggle="tab" data-bs-target="#home" type="button" role="tab" aria-controls="home" aria-selected="true"><i class="bi bi-file-earmark-slides-fill"></i> Slides</button>
  </li>
  <li class="nav-item" role="presentation">
    <button class="nav-link" id="profile-tab" data-bs-toggle="tab" data-bs-target="#profile" type="button" role="tab" aria-controls="profile" aria-selected="false"><i class="bi bi-database-fill-up"></i> Añadir Slide</button>
  </li>
  <li class="nav-item" role="presentation">
    <button class="nav-link" id="contact-tab" data-bs-toggle="tab" data-bs-target="#contact" type="button" role="tab" aria-controls="contact" aria-selected="false"><i class="bi bi-play-circle-fill"></i> Carousel</button>
  </li>
</ul>
<div class="tab-content" id="myTabContent">
  <div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab">
    <!-- {# --------------------------------------------------------------- #} -->
    <!-- {# i tabla slides #} -->
    <table id="tblCarousel" class="table table-striped" style="width:100%" >
      <thead>
        <th>ID</th>
        <th>Creado</th>
        <th>Archivo</th>
        <th>Texto</th>
        <th>Acciones</th>
      </thead>
      <tbody>
        {% for ele in data %}
        <tr id="{{ ele[0] }}"> 
          <td>{{ loop.index }}</td>
          <td>{{ ele[5] }}</td>
          <td>{{ ele[1] }}</td>
    
          <td style="background-color: {{ ele[2] }}; color: {{ ele[3] }};">{{ ele[4] }}</td>
          <td >
            <div class="field_btns">
              <a href="{{ url_for('download_file', filename = ele[1] ) }}" class="btn btn-dark" style="color: white;">
                <i class="bi bi-download"></i>
              </a>
              <a href="#" class="btn btn-danger delete-btn" data-id="{{ ele[0] }}">
                <i class="bi bi-trash"></i>
              </a>
            </div>
          </td>
        </tr>
        {% endfor %}
      </tbody>
    </table>

    <!-- {# f tabla slides #} -->
    <!-- {# --------------------------------------------------------------- #} -->
  </div>
  <div class="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="profile-tab">
    <!-- {# --------------------------------------------------------------- #} -->
    <!-- {# i form add slide #} -->
      <!-- {# inicio form #} -->
      <div class="form-container" data-aos="fade-down" data-aos-delay="0" data-aos-duration="800"
      data-aos-easing="ease-in-out">
      <div class="form-header">
        <h2>Agregar Slide</h2>
      </div>
      <form method="POST" action="{{ url_for('carousel') }}" enctype="multipart/form-data" class="login-form">
        {{ form.hidden_tag() }}

        <!-- {# input imagen #} -->
        <div class="form-row">
          {{ form.img.label() }}
          {{ form.img( class_="form-control" ) }}
        </div>

        <!-- {# bg color picker #} -->
        <div class="form-row">
          {{ form.bg_color.label() }}
          {{ form.bg_color( type="color", class_="form-control form-control-color", value="") }}
        </div>

        <!-- {# txt color picker #} -->
        <div class="form-row">
          {{ form.txt_color.label() }}
          {{ form.txt_color( type="color", class_="form-control form-control-color", value="" ) }}
        </div>

        <!-- {# txt #} -->
        <div class="form-row">
          {{ form.txt.label() }}
          {{ form.txt( class_="form-control" ) }}
        </div>
        <button type="submit" class="btn btn-primary">
          <i class="bi bi-database-fill-up"></i> Enviar Datos
        </button>
      </form>
    </div>
    <!-- {# final form #} -->
    <!-- {# f form add slide #} -->
    <!-- {# --------------------------------------------------------------- #} -->
  
  </div>
  <div class="tab-pane fade" id="contact" role="tabpanel" aria-labelledby="contact-tab">
    <!-- {# --------------------------------------------------------------- #} -->
    <!-- {# i carousel #} -->
    <div id="carouselExampleCaptions" class="carousel slide" data-bs-ride="carousel">
      <div class="carousel-indicators">
        {% for s in data %}
        <button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="{{ loop.index0 }}"
          class="{% if loop.first %}active{% endif %}" aria-current="{{ 'true' if loop.first else 'false' }}"
          aria-label="Slide {{ loop.index }}"></button>
        {% endfor %}
      </div>
      <div class="carousel-inner">
        <!-- {# inicio card item slide #} -->
        {% for s in data %}
        <div class="carousel-item {% if loop.first %}active{% endif %}">
          {% if s[1].endswith('.mp4') %}
          <video class="d-block w-100" autoplay muted loop playsinline>
            <source src="{{ url_for('static', filename='uploads/' + s[1]) }}" type="video/mp4">
            Tu navegador no soporta el video.
          </video>
          {% else %}
          <img src="{{ url_for('static', filename='uploads/' + s[1]) }}" class="d-block w-100" alt="...">
          {% endif %}
          <div class="carousel-caption centered">
            <div class="caption-content" style="background-color: {{ s[2] }}; color: {{ s[3] }};">
              <h2>{{ s[4] }}</h2>
            </div>
          </div>
        </div>
        {% endfor %}
        <!-- {# fin card item slide #} -->
      </div>
      <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleCaptions" 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="#carouselExampleCaptions" data-bs-slide="next">
        <span class="carousel-control-next-icon" aria-hidden="true"></span>
        <span class="visually-hidden">Next</span>
      </button>
    </div>
    <!-- {# f carousel #} -->
    <!-- {# --------------------------------------------------------------- #} -->
  </div>
</div>




{% endblock body %}

{% block js %}

<!-- {# js databases #} -->
<script src="https://code.jquery.com/jquery-3.7.1.js"></script>
<!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/5.3.0/js/bootstrap.bundle.min.js"></script> -->
<script src="https://cdn.datatables.net/2.2.2/js/dataTables.js"></script>
<script src="https://cdn.datatables.net/2.2.2/js/dataTables.bootstrap5.js"></script>

<!-- jQuery y jConfirm -->
<!-- <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> -->
<script src="https://htmlguyllc.github.io/jConfirm/jConfirm.min.js"></script>


<script>
   function delete_file(e){
      let btn = $(this); // `this` es el botón que lanzó el jConfirm
      let postId = btn.data('id'); // lee el data-id
      let data = { 'id': postId };
      console.log(data)

    }
      // https://htmlguyllc.github.io/jConfirm/
      $(function(){
        $('.delete-btn').jConfirm({
            //false|array: if provided, this will override the default confirm/deny buttons (see below for an example)
            btns: false,
            //string: question displayed to the user
            question: '¿Deseas continuar con la eliminación?',
            //string: confirm button text
            confirm_text: 'Sí',
            //string: deny button text
            deny_text: 'No',
            //boolean: if true, when the confirm button is clicked the user will be redirected to the button's href location
            // follow_href: true,
            //boolean: if true and follow_href is true, the href will be opened in a new window
            open_new_tab: false,
            //boolean: if true, the tooltip will be hidden if you click outside of it
            hide_on_click: true,
            //string ('auto','top','bottom','left','right'): preferred location of the tooltip (defaults to auto if no space)
            position: 'auto',
            //boolean: if true, the deny button will be shown
            show_deny_btn: true,
            //string ('black', 'white', 'bootstrap-4', 'bootstrap-4-white')
            theme: 'bootstrap-4',
            //string ('tiny', 'small', 'medium', 'large')
            size: 'medium',
            //boolean: show the tooltip immediately on instantiation
            show_now: false,
            //string: class(es) to add to the tooltip
            'class': ''
        }).on('confirm', delete_file)
        .on('deny', function(e){
            var btn = $(this);
            //do something on deny
        }).on('jc-show', function(e, tooltip){
            // console.log("el tooltip es visible");
            //do something when tooltip is shown
            //tooltip dom element is passed as the second parameter
        }).on('jc-hide', function(e){
            //do something when tooltip is hidden
        });

    });
</script>

<script>

  new DataTable('#tblCarousel', {
        initComplete: function() {
            // Agrega campos de filtro para cada columna
            this.api().columns().every(function() {
                let column = this;
                let header = $(column.header());
                let title = header.text().trim();

                // Excluir la columna "Estatus" del filtro
                if (title !== 'Acciones') {
                    // Crea input de filtro
                    header.append('<div class="filter"><input type="text" class="form-control" placeholder="'+title+'" /></div>');
                    
                    // Aplica el filtro al escribir
                    $('input', header)
                        .on('keyup change', function() {
                            if (column.search() !== this.value) {
                                column.search(this.value).draw();
                            }
                        });
                }
            });
        }
    });


</script>


<!-- {# if flash #} -->
{% include 'z_comps/if_flash.html' %}

<!-- {# aos script #} -->
{% include 'z_comps/aos_script.html' %}

<!-- {# validador archivos extensión #} -->
<script type="module" src="{{ url_for('static', filename='h_tmp_user/i_carousel_form/carousel_form.js') }}"></script>




{% endblock js %}