<?php $r="../";
$titlepage = 'Slider Inicio';
require_once($r."inc/funciones.php");
validNotSession($r);
?>
<?php include $r."inc/head.php"; ?>

<body class="fixed-nav sticky-footer bg-dark" id="page-top">
  <?php include $r."inc/nav.php"; ?>
    <div class="content-wrapper">
        <div class="container-fluid">
            <div class="card mb-3">
                <div class="card-header">
                    <h3>Diapositivas Slider INICIO <button class="btn btn-primary float-right" onclick="nueva()"><i class="fa fa-plus"></i> NUEVA</button></h3>
                </div>
                <div class="card-header" style="background-color:#fff">
                    <? $sqllider = $mysqli->query("SELECT id, bg_slider, titulo, texto, boton, url_boton, id FROM z_slider_home ORDER by orden"); 
    			    while($rowslider = $sqllider->fetch_assoc()) { ?>
                    <div id="diapositiva<?= $rowslider['id']; ?>" class="row mb-1 p-1 border border-muted rounded">
                        <div class="col-sm-3 col-md-2 p-0"><img src="../<?= $r.$rowslider['bg_slider']; ?>" class="img-fluid"></div>
                        <div class="col-sm-9 col-md-8"><strong><?= $rowslider['titulo']; ?></strong><p><?= str_replace(array("<br/>", "</br>"), "",$rowslider['texto']); ?></p></div>
                        <div class="col-xs-12 col-md-2 text-center">
                            <button class="btn btn-primary fa fa-pencil fa-lg" onclick="editar('<?= implode("','",$rowslider); ?>')"></button>
                            <button class="btn btn-danger fa fa-trash fa-lg" onclick="eliminar(<?= $rowslider['id']; ?>)"></button>
                        </div>
                    </div>
                    <? } ?>
                </div>
            </div>
        </div>
    </div>


<!-- The Modal -->
<div class="modal" id="actionsliders">
  <div class="modal-dialog">
    <div class="modal-content">

      <!-- Modal Header -->
      <div class="modal-header">
        <h4 class="modal-title">DIAPOSITIVA</h4>
        <button type="button" class="close" data-dismiss="modal">&times;</button>
      </div>

      <!-- Modal body -->
      <div class="modal-body">
        <form id="slider" action="acciones.php" method="POST" enctype="multipart/form-data">
          <input type="hidden" name="actionmodal">
          <div class="form-group">
            <img id="imgslider" src="" width="100%"  style="cursor: pointer;" class="img-fluid rounded">
            <input type="file" id="fileInput"  name="imagen" style="display: none;">
          </div>
          <div class="form-group">
            <input type="text" name="titulo" class="form-control mb-1" placeholder="Titulo Principal">
          </div>
          <div class="form-group">
            <textarea class="form-control" name="texto" rows="6">Texto Secundario</textarea>
          </div>
          <div class="form-group">
              <label>Boton</label>
              <input type="text" name="text_boton" class="form-control mb-1" placeholder="Texto del Boton">
              <input type="text" name="url_boton" class="form-control" placeholder="Url del Boton">
          </div>
        </form>
      </div>

      <!-- Modal footer -->
      <div class="modal-footer">
        <button type="submit" form="slider" class="btn btn-success float-right">ACTUALIZAR</button>
        <button type="button" class="btn btn-danger float-left" data-dismiss="modal">CERRAR</button>
      </div>

    </div>
  </div>
</div>
  <?php include $r."inc/foot.php"; ?>
  <script>
      function nueva(){
          $('#actionsliders').modal('show');
          $('input[name=actionmodal]').removeAttr('value');
          $('#imgslider').attr('src', 'https://dummyimage.com/1450x750/fff/aaa');
          $('input[name=titulo]').val('');
          $('textarea[name=texto]').html('');
          $('input[name=text_boton]').val('');
          $('input[name=url_boton]').val('');
      }
      function editar(id,img,titulo,texto,boton,urlboton){
          $('#actionsliders').modal('show');
          $('input[name=actionmodal]').val(id);
          $('#imgslider').attr('src', '../../'+img);
          $('input[name=titulo]').val(titulo);
          $('textarea[name=texto]').html(texto);
          $('input[name=text_boton]').val(boton);
          $('input[name=url_boton]').val(urlboton);
          
      }
      function eliminar(id){
        // Abrir SweetAlert para confirmación
        swal({
            title: '¿Estás seguro de eliminar esta diapositiva?',
            type: 'warning',
            showCancelButton: true,
            confirmButtonColor: '#3085d6',
            cancelButtonColor: '#d33',
            confirmButtonText: 'Sí',
            cancelButtonText: 'No',
            closeOnConfirm: false
        }, function(isConfirm) {
            // Si el usuario hace clic en "Sí"
            if (isConfirm) {
                // Eliminar el div padre
                $('#diapositiva' + id).remove();
                 // Enviar el ID de la imagen al archivo de acción usando AJAX
                $.ajax({
                    url: 'acciones.php',
                    type: 'POST',
                    data: { 'eliminar': id },
                    success: function(response) {
                        swal('Eliminada', 'La diapositiva ha sido eliminada', 'success');
                    },
                    error: function(xhr, status, error) {
                        // Manejar cualquier error que ocurra durante la solicitud AJAX
                        swal(error);
                    }
                });
                
            }
        });
      }
  </script>
<script>
$(document).ready(function() {
    $('#imgslider').on('click', function() {
        $('#fileInput').click();
    });

    $('#fileInput').on('change', function() {
        if (this.files && this.files[0]) {
            var reader = new FileReader();
            reader.onload = function(e) {
                $('#imgslider').attr('src', e.target.result);
            };
            reader.readAsDataURL(this.files[0]);
        }
    });
     $('#slider').on('submit', function(e) {
        e.preventDefault(); // Evita que el formulario se envíe normalmente

        var formData = new FormData(this);

        $.ajax({
            url: $(this).attr('action'),
            type: $(this).attr('method'),
            data: formData,
            processData: false,
            contentType: false,
            success: function(response) {
                // Aquí puedes manejar la respuesta del servidor si es necesario
                if(response.estado == 'exitoso'){
                    swal(response.mensaje);
                    nueva();
                }else{
                    swal(response.mensaje);
                }
            },
            error: function(xhr, status, error) {
                // Aquí puedes manejar cualquier error que ocurra durante la solicitud AJAX
                swal(error);
            }
        });
    });
});
</script>

</body>
</html>