<?php $r="../";
$id=$_GET['id'];
require_once($r."inc/funciones.php");
validNotSession($r);
$titlepage="Nuevo producto";
$tipo='PRODUCTOS'; // Usuario a Modificar
$mysqli = connectDB($r);

?>
<!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> CREAR <?= $row1["producto"]; ?></h2><hr/>
      <form id="formulario" action="acciones.php" method="post">
        <input type="hidden" name="nuevo" value="np">
        <div class="form-group float-left p-2">
            <label>Imagen Principal</label>
            <img name="imgpro" id="imgpro" src="/img/products/<?if(!empty($row1["imagen"])){ echo $row1["imagen"]; }else{ echo '0.jpg';} ?>" width="320px">
            <span id="loadimagen" style="position: relative;    left: -50%;    color: #000;    text-shadow: 5px 5px 13px #e36400;cursor:pointer;" title="Cargar imagen"><i class="fa fa-upload fa-4x"></i></span>
            <input type="hidden" name="nameimagen">
            <? /* <hr/>
            <label>Imagenes galeria</label>
            <br/>
            <input type="file" name="galeria[]" placeholder="imagenes Galeria producto" accept="image/*" multiple>*/ ?>
        </div>
        <h5>Informacion</h5>
        <div class="form-group row">
            <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>
                <option selected disabled>el IVA del producto</option>
                <? for($i=0;$i<25;$i++){ ?><option value="<?= $i; ?>"><?= $i; ?>%</option><? } ?>
            </select>
            <label for="descripcion" class="col-form-label">Descripcion Breve</label>
            <textarea type="text" class="form-control" name="descripcionbreve" placeholder="Descripción Breve del producto" autocomplete="off" required></textarea>
            
            <label for="descripcion" class="col-form-label">Descripcion</label>
            <textarea type="text" class="form-control" id="descripcion" name="descripcion" placeholder="Descripción del producto" autocomplete="off" required><?= $row1["descripcion"]; ?></textarea>
            
            <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']; ?>"><?= $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">KILO</option>
                <option value="Litro">LITRO</option>
                <option value="Pieza">PIEZA</option>
            </select>
        </div>
        <hr/>
        <h5>Certificados</h5>
        <div class="form-group row">
            <div class="col-sm-4">
            <label for="precio" class="col-sm-2 col-form-label">Analisis</label>
                <input type="file" class="form-control" id="archivo1" name="archivo1">
            </div>
            <div class="col-sm-4">
            <label for="precio" class="col-sm-2 col-form-label">Seguridad</label>
                <input type="file" class="form-control" id="archivo2" name="archivo2">
            </div>
            <div class="col-sm-4">
            <label for="precio" class="col-sm-2 col-form-label">Riezgo</label>
                <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">Marca</th>
              <th scope="col">Cliente final</th>
              <th scope="col">Comercializador</th>
              <th scope="col">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>
          </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">
            <a href="javascript:history.back(1)" class="btn btn-primary  m-1">ATRÁS</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">Marcas</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">Presentacion</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");
              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="Valor Cliente final...">
          <label class="col-form-label">Comercializador</label>
          <input id="mayprecio" type="number" class="form-control" placeholder="Valor Comercializador...">
          <label class="col-form-label">Precio WEB</label>
          <input id="plusprecio" type="number" class="form-control" placeholder="Valor Precio WEB...">
          <label class="col-form-label">Oferta WEB</label>
          <input id="plusoferta" type="number" class="form-control" placeholder="Valor 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>

<!-- MODAL IMAGEN -->
 <div class="modal" tabindex="-1" role="dialog" id="ModalImagen">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">Cargar Imagen</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">Imagen <br/><sup>Dimenciones imagen(Ancho => 800px x Alto => 800px)</sup></label>
          <input type="file" name="file" accept="image/gif, image/jpeg, image/png"  onchange="ValidarImagen(this);">
          <div id="MsgModalImagen">
              
          </div>
      </div>
    </div>
  </div>
</div>
  <? include $r."inc/foot.php"; $arraypresentaciones = array(0,0)?>
  <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 precioweb = $('#plusprecio').val();
              var ofertaweb = $('#plusoferta').val();
              if(minprecio === '' || minprecio === 0){
                  showmsg('#MsgModalPresent','<hr/><b class="text-danger p-1">Falta el precio</b>');
              }else{
                  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(precioweb)+'<input type="hidden" name="prepre'+idpresentacion+'" value="'+precioweb+'"></td><td>'+moneda(ofertaweb)+'<input type="hidden" name="ofepre'+idpresentacion+'" value="'+ofertaweb+'"></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 ValidarImagen(obj){
        var uploadFile = obj.files[0];
        
        if (!window.FileReader) {
            showmsg('#MsgModalImagen','<hr/><b class="text-danger p-1">El navegador no soporta la lectura de archivos</b>');
            return;
        }
    
        if (!(/\.(jpg|png|gif)$/i).test(uploadFile.name)) {
            showmsg('#MsgModalImagen','<hr/><b class="text-danger p-1">El archivo a adjuntar no es una imagen</b>');
        }
        else {
            var img = new Image();
            img.onload = function () {
                /*if (this.width.toFixed(0) != 820 && this.height.toFixed(0) != 820) {
                    showmsg('#MsgModalImagen','<hr/><b class="text-danger p-1">Las medidas deben ser: 820px * 820px</b>');
                    $(obj).val('');
                }
                else */
                if (uploadFile.size > 204800)
                {
                    showmsg('#MsgModalImagen','<hr/><b class="text-danger p-1">El peso de la imagen no puede exceder los 2 Mb</b>');
                    $(obj).val('');
                }
                else {
                    showmsg('#MsgModalImagen','<hr/><a class="btn btn-success btn-block text-white" onclick="cargarimagen()">Cargar Imagen <i class="fa fa-upload fa-lg></i>"</a>')                
                }
            };
            img.src = URL.createObjectURL(uploadFile);
        }                 
    }
    </script>
    <script>
    function cargarimagen(){
        var formData = new FormData();
        var files = $('input[name=file]')[0].files[0];
        formData.append('file',files);
        $.ajax({
            url: 'upload.php',
            type: 'post',
            data: formData,
            contentType: false,
            processData: false,
            success: function(response) {
                $('#imgpro').attr('src','/img/products/'+response);
                $('input[name=nameimagen]').val(response);
                $('#ModalImagen').modal('hide');
            }
        });
        return false;
    }
    </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>