@extends('admin.layouts.app')

@section('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>
@endsection

@section('css')

@endsection

@section('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="{{route('config.banner.store')}}" method="post" enctype="multipart/form-data">
                                @csrf

                                <div class="col-md-12">
                                    <div class="imgPreview img-vista" id="preview">
                                        <img src="{{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>{{$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>
@endsection

@section('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 > 0) {
                        Snackbar.show({
                        text: 'Archivo muy pesado Tamaño máximo permitido es de 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="{{asset($banner->data)}}">');
            }
        });
    </script>
@endsection