

<?php $__env->startSection('breadcrumb'); ?>
	<li class="breadcrumb-item"><a href="javascript:void(0);">Configuraciones</a></li>
    <li class="breadcrumb-item active" aria-current="page"><span>Banner</span></li>

    <style type="text/css">
        #preview img{
            height: 400px !important;
            width: 100% !important;
        }
    </style>
<?php $__env->stopSection(); ?>

<?php $__env->startSection('css'); ?>

<?php $__env->stopSection(); ?>

<?php $__env->startSection('content'); ?>
<div class="row layout-spacing layout-top-spacing feather-icon">
    <div id="font-icon_feather" class="col-lg-12">
        <div class="statbox widget box box-shadow">
            <div class="widget-content widget-content-area bx-top-6">
                <div class="icon-section">
                    <div class="row">
                        <div class="col-xl-12">
                        	
                            <center><h4>Banner</h4></center>
                            <hr>

                            <form action="<?php echo e(route('config.banner.store')); ?>" method="post" enctype="multipart/form-data">
                                <?php echo csrf_field(); ?>

                                <div class="col-md-12">
                                    <div class="imgPreview img-vista" id="preview">
                                        <img src="<?php echo e(asset($banner->data)); ?>">
                                    </div>
                                </div>
                                <div class="col-md-12">
                                    <div class="custom-file mt-5 mb-2" id="foto-div-0">
                                        <input type="file" class="custom-file-input" id="foto" name="foto" accept="image/x-png,image/jpeg" >
                                        <h6 class="custom-file-label" for="foto-0">Actualizar Foto</h6>
                                    </div><br>
                                </div>
                                <div class="col-md-12 mt-3 ml-3">
                                    Sume una imagen en formato: <strong>.png</strong> o <strong>.jpg</strong><br>
                                    Tamaño máximo de la imagen: <strong><?php echo e($maxmb); ?>MB</strong><br>
                                    Resolución recomendada: <strong>1316x564</strong> 
                                </div>
                                <div class="row">
                                    <div class="col mt-5">
                                        <button type="submit" class="btn btn-primary float-right">Subir</button>
                                    </div>
                                </div>
                            </form>                                         
                        </div>
                    </div>
                </div>         
            </div>
        </div>
    </div>
</div>
<?php $__env->stopSection(); ?>

<?php $__env->startSection('script'); ?>
    <script type="text/javascript">
        function fileValidation(){
            var fileInput = document.getElementById('foto');
            var filePath = fileInput.value;
            var allowedExtensions = /(.jpg|.jpeg|.png)$/i;
            if(!allowedExtensions.exec(filePath)){
                return false;
            }else{
                return true;     
            }
        }

        document.getElementById("foto").onchange = function (e) {
            // Creamos el objeto de la clase FileReader

            var validate = fileValidation();

            if (validate) {

                let archivo = document.getElementById("foto");
                let peso = archivo.files[0].size;
                if(peso > <?php     echo 1000000*$maxmb; ?>) {
                        Snackbar.show({
                        text: 'Archivo muy pesado Tamaño máximo permitido es de <?php echo $maxmb; ?>MB',
                        pos: 'bottom-right',
                        actionText:"Ok"
                    }); 
                    $("#foto").val('');             
                }else{
                    let reader = new FileReader();
                    reader.readAsDataURL(e.target.files[0]);
                    reader.onload = function () {
                        let preview = document.getElementById('preview'),
                            image = document.createElement('img');
                        image.src = reader.result;
                        preview.innerHTML = '';
                        preview.append(image);
                    };
                }
                
            }else{
                var file = $('#foto').val();

                if (file!='') {
                    Snackbar.show({
                        text: 'La extensión del icono no es válida, solo se permite extensiones .JPG o .PNG',
                        pos: 'bottom-right',
                        actionText:"Ok"
                    }); 
                }            
            }
        }

        $('#foto').change(function () {

            var file = $('#foto').val();

            if (file == '') {
                $('#preview').html('<img src="<?php echo e(asset($banner->data)); ?>">');
            }
        });
    </script>
<?php $__env->stopSection(); ?>
<?php echo $__env->make('admin.layouts.app', \Illuminate\Support\Arr::except(get_defined_vars(), ['__data', '__path']))->render(); ?><?php /**PATH C:\xampp\htdocs\guatehoteles\resources\views/admin/configuraciones/banner.blade.php ENDPATH**/ ?>