<?php
session_start();
include("config.php");
include('funciones.php');
validacion_usuario($con);
include "include/head.php" ?>; 
</head>
<body >
<?php include("include/menu.php") ?> 
    <div class="container margin-top" >
        <div class="panel panel-info">
            <div class="panel-heading">
              <h3 class="panel-title">Editar Banner</h3>
            </div>
            <div class="panel-body">
                <form id="formulario_banneredit" name="formulario" method="post" enctype="multipart/form-data" action="banneredi_grabar.php">                    
                    <?php
                    $id =$_POST['bannereditar_id'];
                    $id_v = filter_var($id, FILTER_SANITIZE_STRING);
                    if($id_v){?>                    
                        <input type="hidden" id="id" name="id" value="<?php echo $id_v;?>" />
                        <?php  
                        $url_real = mysqli_real_escape_string($con,$id_v);
                        $sql = "SELECT * FROM banner WHERE id=".$url_real;
                        $result_edi=mysqli_query($con,$sql);
                        if($result_edi){
                          $filas=mysqli_num_rows($result_edi);
                          if($filas >0){
                            while ($fila_edi =mysqli_fetch_assoc($result_edi)) {
                            ?>
                              <div class="row">
                                <div class="col-sm-2">
                                    <a type="button" href="banner.php" class="btn btn-primary">Ver lista de Banner</a>
                                    <br><br>
                                </div>
                              </div>
                            <div class="row"><div class="col-sm-12"><div class="alert alert-warning"> Se permiten imágenes de formato .jpg, .png</div></div></div>      
                            <input class="form-control input-sm" type="hidden" value="<?php echo $fila_edi['imagen_escritorio']; ?>" name="imagen_escritorio_bd" />
                            <input class="form-control input-sm" type="hidden" value="<?php echo $fila_edi['imagen_mobile']; ?>" name="imagen_mobile_bd" /> 
                            <div class="row">
                                <div class="col-sm-2"><label>Publicado</label></div>
                                <div class="col-sm-2">
                                    <select class="form-control" name="estado">
                                       <option value="1" <?php if (!(strcmp("1", $fila_edi['estado']))) {echo "selected=\"selected\"";} ?>>Publicada</option>
                                       <option value="2" <?php if (!(strcmp("2", $fila_edi['estado']))) {echo "selected=\"selected\"";} ?>>No Publicada</option>
                                    </select>
                                </div>
                            </div>
                            <br>
                            <div class="row"> <div class="col-sm-12"> <label for="imagen">Imágen Web</label></div></div>
                            <div class="row"> <div class="col-sm-12"><div class="alert alert-warning">La imágen web debe tener un tamaño de 1365 x 438 px. La imágen debe tener un tamaño menor o igual a 120 kb.</div></div></div>
                            <div class="row"><div class="col-sm-12"><input name="imagen_escritorio" type="file" id="imagen_escritorio" size="88" maxlength="170"></div></div> 
                            <br>                      
                            <div class="row">        
                                <div class="col-sm-12"><img src="img/banner/<?php echo $fila_edi['imagen_escritorio']; ?>" width="150" class="img-rounded"></div>
                            </div>    
                            <br>                        
                            <div class="row"> <div class="col-sm-12"> <label for="imagen">Imágen Interna</label></div></div>
                            <div class="row"><div class="col-sm-12"><div class="alert alert-warning">La imágen web debe tener un tamaño de 880 x 524 px. La imágen debe tener un tamaño menor o igual a 120 kb.</div></div></div>
                            <div class="row"><div class="col-sm-12"><input name="imagen_mobile" type="file" id="imagen_mobile"   size="88" maxlength="170"></div></div>               
                            <br>
                            <div class="row">        
                                <div class="col-sm-12"><img src="img/banner/<?php echo $fila_edi['imagen_mobile']; ?>" width="150" class="img-rounded"></div>
                            </div>  
                            <br>
                            <div class="row"> <div class="col-sm-12"><label>Link</label></div></div>
                            <div class="row"><div class="col-sm-12"><input name="link" class="form-control" type="text" id="link" size="88" maxlength="170" value="<?php echo $fila_edi['link']; ?>"/></div></div>  
                            <br>                            
                            <div class="row">      
                                <div class="col-sm-12">
                                    <div id="cuerpo">
                                        <textarea class="custom_ckeditor" id='cuerpo_interno' name="cuerpo_interno" placeholder="">
                                            <?php echo $fila_edi['descripcion']; ?>
                                        </textarea>         
                                     </div>
                                </div>
                            </div>                    
                            <br>
                            <br>                               
                            <?php 
                            }
                          }else{
                             ?>
                            <script>
                             alert("No hay banner recientes, por favor agregue nuevos banner");
                             window.location.href="banner.php";
                            </script>
                           <?php
                          }
                         }else{                         
                          ?>
                          <script>
                           alert("Error al ejecutar la consulta");
                           window.location.href="banner.php";
                          </script>
                         <?php
                        }
                    }else{?>
                      <script>
                       alert("Lo sentimos, los datos son íncompletos o son incorrectos");
                       window.location.href="banner.php";
                      </script>
                    <?php              
                    }
                     ?>    
                        <div style="margin-top:20px">
                            <a class="btn btn-default" href="banner.php" role="button">Regresar</a>
                            <input class="btn btn-default" id="submitBtn" type="submit" value="Grabar">
                        </div>                             
                    </div>                              
                </form>
                <div id="imgContainer_escritorio_editar">
                </div>
                <div id="imgContainer_mobile_editar">
                </div> 
            </div>
        </div>
    </div>
    <script src="<?php echo $host; ?>admin/js/jqueryvalidation/jquery.js"></script>    
    <script type="text/javascript" src="<?php echo $host; ?>admin/js/ckeditor/function_ckeditor.min.js"></script>
    <?php include("include/footer.php");?>
    <script type="text/javascript" src="<?php echo $host; ?>admin/js/validation.js"></script>
    <?php
    include("include/ckeditor.php");
    ?>
    <script src="js/jqueryvalidation/jquery.validate.min.js"></script>
    <script src="js/jqueryvalidation/additional-methods.js"></script>   
    <script type="text/javascript">
    jQuery(document).ready(function($){
        $.validator.addMethod('callbackescritorioedit', function(value, element, params) {
          if(value == ""){
             return true;
          }else{
            return params.callback_escritorio_edit(value, element);
          }              
    }, 'Callback test failed');
    
    $.validator.addMethod('callback_mobileedit', function(value, element, params) {
       if(value == ""){
         return true;
      }else{
        return params.callback_mobile_edit(value, element);
      }
    }, 'Callback test failed');

     $('#formulario_banneredit').validate({
        rules: {
            cuerpo_interno:{
                cke_required:false
            },
            link: {                         
                required: true,
                url: true
            },
            imagen_escritorio: {                            
                required: false,
                extension: "jpg,jpeg,png",
                callbackescritorioedit: {
                    callback_escritorio_edit: function() {
                    return $imagen_escritorio.data('imageWidth')  == 1365 && $imagen_escritorio.data('imageHeight')  == 438;
                    }
                 },
                  filesize:{
                    size:120000,
                    kb:120,
                  }
            },
            imagen_mobile: {                            
                required: false,
                extension: "jpg,jpeg,png",
                callback_mobileedit: {
                    callback_mobile_edit: function() {
                    return $imagen_mobile.data('imageWidth')  == 880 && $imagen_mobile.data('imageHeight') == 524;
                    }                    
                },
                filesize:{
                  size:120000,
                  kb:120,
                }              
            }
        },
            errorPlacement: function( error, element ) {
                error.insertBefore(element);        
        },
         messages: {
            imagen_escritorio: {
              required: "Este campo es requerido",
              callbackescritorioedit: "La imágen de cabecera debe tener un tamaño mínimo de 1365px y 438px."
            },
            imagen_mobile: {
              required: "Este campo es requerido",
              callback_mobileedit: "La imágen de cabecera debe tener un tamaño mínimo de 880px y 524px."
            },
        }
    
    });

    var  $submitBtn = $('#submitBtn'), $imagen_escritorio = $('#imagen_escritorio'),
    $imagen_mobile = $('#imagen_mobile'),
    $imgContainer_escritorio = $('#imgContainer_escritorio_editar'),
    $imgContainer_mobile = $('#imgContainer_mobile_editar');
    
    $('#imagen_escritorio').change(function() {
      var fileName = $(this).val();
      $submitBtn.attr('disabled', true);
      $imgContainer_escritorio.hide().empty();
      $imagen_escritorio.removeData('imageWidth');
      $imagen_escritorio.removeData('imageHeight');

      var file = this.files[0];
      if(fileName != ""){
       if (file.type.match(/image\/.*/)) {
          var reader = new FileReader();
          reader.onload = function() {
          var $img = $('<img />').attr({ src: reader.result });
         $imgContainer_escritorio.append($img).show();
          $img.on('load', function() {
          var imageWidth = $img.width();
          var imageHeight= $img.height();   
          $imagen_escritorio.data('imageWidth', imageWidth);
          $imagen_escritorio.data('imageHeight', imageHeight);
              if (imageWidth != 1365 && imageHeight  != 438) {
                $imgContainer_escritorio.hide();
              }
              $submitBtn.attr('disabled', false);

              $("img").addClass("img-responsive");
               $imgContainer_escritorio.hide();
            });
          }
          reader.readAsDataURL(file);
        }
       }
    });

    $('#imagen_mobile').change(function() {
      var fileName = $(this).val();
      $submitBtn.attr('disabled', true);
      $imgContainer_mobile.hide().empty();
      $imagen_mobile.removeData('imageWidth');
      $imagen_mobile.removeData('imageHeight');
      var file = this.files[0];
      if(fileName != ""){
       if (file.type.match(/image\/.*/)) {
          var reader = new FileReader();
          reader.onload = function() {
          var $img = $('<img />').attr({ src: reader.result });
         $imgContainer_mobile.append($img).show();
          $img.on('load', function() {
          var imageWidth = $img.width();
          var imageHeight= $img.height();   
          $imagen_mobile.data('imageWidth', imageWidth);
          $imagen_mobile.data('imageHeight', imageHeight);
              if (imageWidth != 880 && imageHeight  != 524) {
                $imgContainer_mobile.hide();
              }
              $submitBtn.attr('disabled', false);
              $("img").addClass("img-responsive");
               $imgContainer_mobile.hide();
            });
          }
          reader.readAsDataURL(file);
        }
      }
    });
})
</script>
</body>
</html>
