<?php $r="../";
$id=$_GET['id'];
$titlepage = 'Editar Producto';
require_once($r."inc/funciones.php");
validNotSession($r);
$tipo='PRODUCTOS'; // Usuario a Modificar
$mysqli = connectDB($r);
$spe=$_SESSION['perfil'];
roleaccess(1321);
$row1 = sinfo('z_productos',$id);

?>
<!DOCTYPE html>
<html lang="en">
  <?php include $r."inc/head.php"; ?>
<body class="fixed-nav sticky-footer  sidenav-toggled  bg-dark" id="page-top">
  <?php include $r."inc/nav.php"; ?>
  
  <div class="content-wrapper">
    <div class="container-fluid">
      <h2 class="text-center text-uppercase"><i class="fa fa-shopping-bag"></i> EDITANDO <?= $row1["producto"]; ?></h2><hr/>
      <form id="formulario" action="acciones.php" method="post">
        
        
  <div class="row g-3 align-items-start">
    <!-- IMAGEN -->
    <div class="col-md-4">
      <div class="form-group position-relative p-2 border rounded">
        <label class="form-label mb-2 font-weight-bold">Imagen principal</label>
        <img id="imgpro" class="img-fluid border"
             src="/productos/imgs/<?php echo !empty($row1['img']) ? $row1['img'] : '0.jpg'; ?>"
             style="max-height:220px;object-fit:contain;">
        <button type="button" id="btnUploadImg" class="btn btn-sm btn-outline-primary mt-2">
          <i class="fa fa-upload"></i> Cargar imagen
        </button>
        <input type="file" id="fileImg" accept="image/jpeg,image/png,image/webp" class="d-none">
        <input type="hidden" name="nameimagen" id="nameimagen"
               value="<?php echo !empty($row1['img']) ? $row1['img'] : ''; ?>">
        <small class="text-muted d-block mt-1">JPG/PNG/WEBP · Máx 3 MB</small>
      </div>
    </div>

    <!-- VIDEO M (prefijo m-) -->
    <div class="col-md-4">
      <div class="form-group position-relative p-2 border rounded">
        <label class="form-label mb-2 font-weight-bold">Video Movimiento</label>
        <video id="vidM" class="w-100 border" style="max-height:220px" controls preload="metadata">
          <?php if(!empty($row1['video'])): ?>
            <source src="/productos/video/m-<?php echo $row1['video']; ?>" type="video/mp4">
          <?php endif; ?>
          Tu navegador no soporta video HTML5.
        </video>
        <button type="button" id="btnUploadVidM" class="btn btn-sm btn-outline-primary mt-2">
          <i class="fa fa-upload"></i> Cargar video movimiento
        </button>
        <input type="file" id="fileVidM" accept="video/mp4,video/webm" class="d-none">
        <small class="text-muted d-block mt-1">MP4/WEBM · Máx 50 MB</small>
      </div>
    </div>

    <!-- VIDEO S (prefijo s-) -->
    <div class="col-md-4">
      <div class="form-group position-relative p-2 border rounded">
        <label class="form-label mb-2 font-weight-bold">Video Soplo</label>
        <video id="vidS" class="w-100 border" style="max-height:220px" controls preload="metadata">
          <?php if(!empty($row1['video'])): ?>
            <source src="/productos/video/s-<?php echo $row1['video']; ?>" type="video/mp4">
          <?php endif; ?>
          Tu navegador no soporta video HTML5.
        </video>
        <button type="button" id="btnUploadVidS" class="btn btn-sm btn-outline-primary mt-2">
          <i class="fa fa-upload"></i> Cargar video Soplo
        </button>
        <input type="file" id="fileVidS" accept="video/mp4,video/webm" class="d-none">
        <small class="text-muted d-block mt-1">MP4/WEBM · Máx 50 MB</small>
      </div>
    </div>
  </div>
  <!-- Campos ocultos para enviar/guardar -->
  <input type="hidden" name="namevideo" id="namevideo"         value="<?php echo !empty($row1['video']) ? $row1['video'] : ''; ?>">
  <!-- Si quieres UPDATE inmediato en BD al subir: -->
  <input type="hidden" name="idproducto" id="idproducto"         value="<?php echo !empty($row1['id']) ? intval($row1['id']) : 0; ?>">
        
        <h5>Informacion</h5>
        <div class="form-group">
            <label for="nombre" class="col-form-label">Nombre</label>
            <input type="text" class="form-control" id="nombre" name="nombre" placeholder="Nombre" value="<?= $row1["producto"]; ?>" required>
            <label for="iva" class="col-form-label">Iva</label>
            <select type="number" class="form-control" id="iva" name="iva" required>
                <? for($cont=0;$cont<40;$cont++){ ?><option value="<?= $cont; ?>" <? if($row1["iva"]==$cont){echo 'selected="selected"'; } ?>><?= $cont.'%'; ?></option><? }  ?>
            </select>
            <label for="descripcion" class="col-form-label">Descripción Breve del producto</label>
            <textarea type="text" class="form-control" id="descripcion" name="descripcionbreve" placeholder="Descripción Breve del producto" autocomplete="off" required><?= $row1["descripcionbreve"]; ?></textarea>
            <label for="descripcion" class="col-form-label">Descripción del producto</label>
            <textarea type="text" class="form-control" id="descripcion" name="descripcion" placeholder="Descripción del producto" autocomplete="off" required><?= $row1["descripcion"]; ?></textarea>
            <? $arrayidcategorias =  array();
                $sql = $mysqli->query("SELECT idcategoria FROM z_productos_categorias WHERE idproducto=$id");
                while($row = $sql->fetch_assoc()){
                    array_push($arrayidcategorias, $row['idcategoria']);
                }
                ?>
        
            <label  class="col-form-label">Categoria(s)</label>
            <select name="categoria[]" data-placeholder="Seleccione su categoria..." multiple class="chosen-select">
                <? $categorias = $mysqli->query("SELECT id,categoria FROM z_categorias_productos"); 
                while($categoria = $categorias->fetch_assoc()) {?>
                <option value="<?= $categoria['id']; ?>" <? if(in_array($categoria['id'],$arrayidcategorias)){ echo  'selected';} ?>><?= $categoria['categoria']; ?></option>
                <? } ?>
            </select>
            
            
            <label  class="col-form-label">Unida principal</label>
            <select name="unidad" data-placeholder="Seleccione su unidad..." class="chosen-select">
                <option value="Kilo" <?php if($row1["unidad2"]=="Kilo") echo "selected"; ?>>KILO</option>
                <option value="Litro" <?php if($row1["unidad2"]=="Litro") echo "selected"; ?>>LITRO</option>
                <option value="Pieza" <?php if($row1["unidad2"]=="Pieza") echo "selected"; ?>>PIEZA</option>
            </select>
        </div>
        <hr/>
        <!--<h5>Precios</h5>
        <div class="form-group row">
            <label for="precio" class="col-sm-2 col-form-label">Precio (Kg o L)</label>
            <div class="col-sm-4">
                <input type="number" class="form-control" id="precio" name="precio" placeholder="Precio (Kilogramos o Litro)"  value="<?= $row1["precio"]; ?>" required>
            </div>
            <label for="precio" class="col-sm-2 col-form-label">Precio Oferta (Kg o L)</label>
            <div class="col-sm-4">
                <input type="number" class="form-control" id="Oferta" name="oferta" placeholder="Precio Oferta (Kilogramos o Litro)"  value="<?= $row1["oferta"]; ?>" required>
            </div>
        </div>
        <hr/>-->
        <h5>Certificados</h5>
        <div class="form-group row">
            <label for="precio" class="col-sm-2 col-form-label">Certificados de análisis</label>
            <div class="col-sm-3">
                <input type="file" class="form-control" id="archivo1" name="archivo1">
            </div>
            <div class="col-sm-3">
                <input type="file" class="form-control" id="archivo2" name="archivo2">
            </div>
            <div class="col-sm-3">
                <input type="file" class="form-control" id="archivo3" name="archivo3">
            </div>
        </div>
        <hr/>
        <h5>Presentaciones</h5>
        <style>
            td input{
                border: 1px solid #00000036;
    padding: 5px;
    border-radius: 9px;
    text-align: center;
            }
        </style>
        <table class="table">
          <thead>
            <tr>
              <th scope="col">Presentacion</th>
              <th scope="col">Cliente final</th>
              <th scope="col">Comercializador</th>
              <th scope="col">Precio WEB</th>
              <th scope="col">Oferta WEB</th>
              <th scope="col">Preferido WEB</th>
              <th scope="col"><i class="fa fa-gear"></i></th>
            </tr>
          </thead>
          <tbody>
            <? $arraypresentaciones= array();
                $presentaciones = $mysqli->query("SELECT * FROM z_producto_presentacion WHERE idproducto=$id"); 
                while($presentacion = $presentaciones->fetch_assoc()) {
                    array_push($arraypresentaciones, $presentacion['idpresentacion']);
                    $infopresentacion = sinfo('z_presentaciones_productos',$presentacion['idpresentacion']);
            ?>
            
            <tr id="<?= $infopresentacion['id']; ?>">
              <th  scope="row"><?= $infopresentacion['presentacion']; ?><input type="hidden" name="idpres<?= $infopresentacion['id']; ?>" value="<?= $infopresentacion['id']; ?>" ></th>
              <td><input type="number" name="minprecio<?= $infopresentacion['id']; ?>" value="<?= $presentacion['minorista']; ?>" ></td>
              <td><input type="number" name="mayprecio<?= $infopresentacion['id']; ?>" value="<?= $presentacion['mayorista']; ?>" ></td>
              <td><input type="number" name="prepre<?= $infopresentacion['id']; ?>" value="<?= $presentacion['precio']; ?>" ></td>
              <td><input type="number" name="ofepre<?= $infopresentacion['id']; ?>" value="<?= $presentacion['oferta']; ?>" ></td>
              <td><input type="radio" class="radio" value="<?= $infopresentacion['id']; ?>" name="preferido" <? if($presentacion['preferido']==1){echo 'checked'; } ?>/></td>
              <td><i onclick="borrarp(<?= $infopresentacion['id']; ?>)" class="btn fa fa-trash text-danger"></i></td>
            </tr>
            <? } ?>
        
          </tbody>
        </table>
        <a id="plus-presentacion" class="btn btn-success btn-block text-white"><i class="fa fa-plus fa-lg"></i> Añadir Presentación</a>
        <hr/>
        <div class="form-group row">
            <div class="col-sm-12 text-center">
                <input type="submit" class="btn btn-danger" value="ACTUALIZAR PRODUCTO">
                <input type="hidden" class="btn btn-primary btn-block" name="editar" value="<?= $id; ?>">
            <a href="javascript:history.back(1)" class="btn btn-primary  m-1">ATRAS</a>
            </div>
        </div>
      </form>
    </div>
  </div>
<!-- MODAl PRESENTACIONES -->
<div class="modal" tabindex="-1" role="dialog" id="ModalPresentaciones">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">Presentacion</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
          <label class="col-form-label">Presentación</label>
          <select id="pluspresentacion" data-placeholder="Seleccionar presentacion" class="chosen-select" >
              <option selected disabled>Presentaciones...</option>
              <? $sql = $mysqli->query("SELECT * FROM z_presentaciones_productos ORDER BY presentacion ASC");
              while($option = $sql->fetch_assoc()) {
              ?>
              <option value="<?= $option['id']; ?>"><?= $option['presentacion']; ?></option>
              <? } ?>
          </select>
          <label class="col-form-label">Cliente final</label>
          <input id="minprecio" type="number" class="form-control" placeholder="Precio Cliente final...">
          <label class="col-form-label">Comercializador</label>
          <input id="mayprecio" type="number" class="form-control" placeholder="Precio Comercializador...">
          <label class="col-form-label">Precio WEB</label>
          <input id="plusprecio" type="number" class="form-control" placeholder="Precio WEB...">
          <label class="col-form-label">Oferta WEB</label>
          <input id="plusoferta" type="number" class="form-control" placeholder="Precio Oferta WEB...">
          <div id="MsgModalPresent">
              
          </div>
      </div>
      <div class="modal-footer">
        <button onclick="pluspresent()" type="button" class="btn btn-primary">AGRERGAR</button>
        <button type="button" class="btn btn-secondary" data-dismiss="modal">CERRAR</button>
      </div>
    </div>
  </div>
</div>


  <? include $r."inc/foot.php"; ?>
  <script>
  
     var presentaciones = <?php echo json_encode($arraypresentaciones); ?>;
      $('#plus-presentacion').on('click', function(){
          $('#ModalPresentaciones').modal('show');
      });
      
      function pluspresent(){
          var idpresentacion = $('#pluspresentacion').val();
          if(idpresentacion === null){ showmsg('#MsgModalPresent','<hr/><b class="text-danger p-1">seleccione una presentacion</b>'); }
          else{
              var presentacion = $('#pluspresentacion option:selected').text();
              var minprecio = $('#minprecio').val();
              var mayprecio = $('#mayprecio').val();
              var precio = $('#plusprecio').val();
              var oferta = $('#plusoferta').val();
              if(precio === '' || precio === 0){
                  showmsg('#MsgModalPresent','<hr/><b class="text-danger p-1">Falta el precio</b>');
              }else{
                  console.log(presentaciones.includes(idpresentacion));
                  if(presentaciones.includes(idpresentacion) === false){
                    presentaciones.push(idpresentacion);
                    $('.table').append('<tr id="'+idpresentacion+'"><th scope="row">'+presentacion+'<input type="hidden" name="idpre'+idpresentacion+'" value="'+idpresentacion+'"></th> <td>'+moneda(minprecio)+'<input type="hidden" name="minprecio'+idpresentacion+'" value="'+minprecio+'"></td> <td>'+moneda(mayprecio)+'<input type="hidden" name="mayprecio'+idpresentacion+'" value="'+mayprecio+'"></td>  <td>'+moneda(precio)+'<input type="hidden" name="prepre'+idpresentacion+'" value="'+precio+'"></td>  <td>'+moneda(oferta)+'<input type="hidden" name="ofepre'+idpresentacion+'" value="'+oferta+'"></td><td><input type="radio" class="radio" value="'+idpresentacion+'" name="preferido" /></td><td><i onclick="borrarp('+idpresentacion+')" class="btn fa fa-trash text-danger"></i></td></tr>');
                    $('#pluspresentacion').prop('selectedIndex',0);
                    $('#minprecio, #mayprecio, #plusprecio, #plusoferta').val('');
                  }else{
                      showmsg('#MsgModalPresent','<hr/><b class="text-danger p-1">La presentacion a agregar ya existe</b>');
                  }
              }
          }
      }
      function showmsg(id,msg){
          $(id).html(msg);
          setTimeout(function(){ hidemsg(id); }, 5000);
      }
      function hidemsg(id){
          $(id).html();
      }
      $('#loadimagen').on('click', function(){
          $('#ModalImagen').modal('show');
      });
      function moneda(valor) {
      var result = '$ '+Intl.NumberFormat("de-DE").format(valor)+' COP';
      return result;
    }
    </script>
   <script>
$(function () {
  // Botones → abren inputs
  $('#btnUploadImg').on('click',  () => $('#fileImg').trigger('click'));
  $('#btnUploadVidM').on('click', () => $('#fileVidM').trigger('click'));
  $('#btnUploadVidS').on('click', () => $('#fileVidS').trigger('click'));

  // Límites y tipos permitidos
  const limits = { img: 3*1024*1024, vid: 50*1024*1024 };
  const acceptImg = ['image/jpeg','image/png','image/webp'];
  const acceptVid = ['video/mp4','video/webm'];

  // IMAGEN
  $('#fileImg').on('change', function(){
    const f = this.files[0]; if(!f) return;
    if(!acceptImg.includes(f.type)) return alertFile(this,'Formato no válido','Usa JPG, PNG o WEBP');
    if(f.size > limits.img)         return alertFile(this,'Archivo grande','La imagen supera 3 MB');

    // preview
    const reader = new FileReader();
    reader.onload = e => $('#imgpro').attr('src', e.target.result);
    reader.readAsDataURL(f);

    // subir
    subir('imagen', f, null, (res) => {
      $('#nameimagen').val(res.db_name || res.filename || '');
      Sweet('Imagen subida','Se guardó correctamente','success');
    });
  });

  // VIDEO M
  $('#fileVidM').on('change', function(){
    const f = this.files[0]; if(!f) return;
    if(!acceptVid.includes(f.type)) return alertFile(this,'Formato no válido','Usa MP4 o WEBM');
    if(f.size > limits.vid)         return alertFile(this,'Archivo grande','El video supera 50 MB');

    // preview
    const url = URL.createObjectURL(f);
    $('#vidM').empty().append($('<source>',{src:url, type:f.type}))[0].load();

    const dbName = $('#namevideo').val() || null;
    subir('video_m', f, dbName, (res) => {
      if(res.db_name) $('#namevideo').val(res.db_name);
      Sweet('Video móvil subido','Se guardó correctamente','success');
    });
  });

  // VIDEO S
  $('#fileVidS').on('change', function(){
    const f = this.files[0]; if(!f) return;
    if(!acceptVid.includes(f.type)) return alertFile(this,'Formato no válido','Usa MP4 o WEBM');
    if(f.size > limits.vid)         return alertFile(this,'Archivo grande','El video supera 50 MB');

    // preview
    const url = URL.createObjectURL(f);
    $('#vidS').empty().append($('<source>',{src:url, type:f.type}))[0].load();

    const dbName = $('#namevideo').val() || null;
    subir('video_s', f, dbName, (res) => {
      if(res.db_name) $('#namevideo').val(res.db_name);
      Sweet('Video estándar subido','Se guardó correctamente','success');
    });
  });

  function alertFile(input, title, text){
    Sweet(title, text, 'error');
    input.value = '';
  }
  function Sweet(t, m, icon){
    Swal.fire({title:t, text:m, icon:icon});
  }

  // Subida genérica
  function subir(tipo, file, dbName, onOk){
      const fd = new FormData();
      fd.append('tipo', tipo);              // <<-- PRIMERO o en cualquier orden, pero que exista
      fd.append('file', file);
      if (dbName) fd.append('db_name', dbName);
      const idp = parseInt($('#idproducto').val() || 0, 10);
      if (idp > 0) fd.append('idproducto', idp);
    
      $.ajax({
        url: 'ajax/upload_media_producto.php',
        type: 'POST',
        data: fd,
        processData: false,                 // <<-- obligatorio con FormData
        contentType: false,                 // <<-- obligatorio con FormData
        dataType: 'json',                   // <<-- así evitas JSON.parse manual
        beforeSend: () => Swal.showLoading(),
        success: function(res){
          Swal.close();
          if (res && res.ok) {
            onOk && onOk(res);
          } else {
            Swal.fire('Error', (res && res.msg) || 'No se pudo subir el archivo', 'error');
          }
        },
        error: function(xhr){
          Swal.close();
          Swal.fire('Error', 'Fallo de red o servidor', 'error');
          console.error('AJAX error:', xhr && xhr.responseText);
        }
      });
    }
});
</script>

    <script>
        function borrarp(idrow){
            $('#'+idrow).remove();
            var index = presentaciones.indexOf(idrow);
            if (index === -1) {
              presentaciones.splice(index, 1);
            }

            console.log(presentaciones);
        }
    </script>
</body>
</html>