<?php $__env->startSection('breadcrumb'); ?>
    <li class="breadcrumb-item" aria-current="page"><a href="<?php echo e(route('servicios.index')); ?>">Servicios</a></li>
    <li class="breadcrumb-item active" aria-current="page"><span>Editar</span></li>
<?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>Editar servicio</h4></center>
                            <hr>

                            <form action="<?php echo e(route('servicios.update',$servicio->id)); ?>" method="post" enctype="multipart/form-data">
                                <?php echo csrf_field(); ?>
                                <div class="row">
                                    <div class="col-md-6 mb-1">
                                        <center>
                                            <div id="preview" style="width: 100%;">
                                                <img 
                                                    <?php if(is_null($servicio->img)): ?>
                                                        src="<?php echo e(asset('img/icon.svg')); ?>"
                                                    <?php else: ?>
                                                        src="<?php echo e(asset($servicio->img)); ?>"
                                                    <?php endif; ?>

                                                >
                                            </div>
                                        </center>        
                                    </div>
                                    <div class="col-md-6">
                                        <label>Icono</label>
                                        <div class="custom-file">
                                          <input class="custom-file-input <?php $__errorArgs = ['foto'];
$__bag = $errors->getBag($__errorArgs[1] ?? 'default');
if ($__bag->has($__errorArgs[0])) :
if (isset($message)) { $__messageOriginal = $message; }
$message = $__bag->first($__errorArgs[0]); ?> is-invalid <?php unset($message);
if (isset($__messageOriginal)) { $message = $__messageOriginal; }
endif;
unset($__errorArgs, $__bag); ?>" type="file" id="file-input" name="foto">
                                          <label class="custom-file-label" for="file-input">Subir icono...</label>
                                          <?php $__errorArgs = ['foto'];
$__bag = $errors->getBag($__errorArgs[1] ?? 'default');
if ($__bag->has($__errorArgs[0])) :
if (isset($message)) { $__messageOriginal = $message; }
$message = $__bag->first($__errorArgs[0]); ?>
                                            <span class="invalid-feedback" role="alert">
                                                <strong><?php echo e($message); ?></strong>
                                            </span>
                                        <?php unset($message);
if (isset($__messageOriginal)) { $message = $__messageOriginal; }
endif;
unset($__errorArgs, $__bag); ?>
                                        </div>
                                        <p style="text-align: justify; font-size: 18px;">
                                            <br>
                                            Sube una icono en formato <strong>.SVG</strong> o <strong>.PNG.</strong> Dimensión recomendada <strong>24x24.</strong> <br>
                                            Max. <strong>100Kb</strong>
                                        </p>
                                    </div>
                                </div>

                                <div class="row">
                                    <div class="col">
                                        <h6>Nombre del servicio <strong class="text-danger">*</strong></h6>
                                        <input type="text" name="servicio" value="<?php echo e($servicio->servicio); ?>" class="form-control  <?php if(session('error_servicio')): ?> is-invalid <?php endif; ?>" placeholder=" Ej. WiFI">
                                        <div class="invalid-feedback">
                                               <?php if(session('error_servicio')): ?> <?php echo e(session('error_servicio')); ?> <?php endif; ?>
                                            </div>
                                       <br>
                                    </div>
                                </div>

                                <div class="row">
                                    <div class="col">
                                        <button type="submit" class="btn btn-primary float-right">Actualizar</button>
                                    </div>
                                </div>
                            </form>                                         
                        </div>
                    </div>
                </div>         
            </div>
        </div>
    </div>
</div>
<?php $__env->stopSection(); ?>

<?php $__env->startSection('script'); ?>
    <script type="text/javascript" src="<?php echo e(asset('js/ckeditor/ckeditor.js')); ?>"></script>
    <script type="text/javascript">
        CKEDITOR.replace('respuesta');
    </script>
    <script type="text/javascript">
    function fileValidation(){
            var fileInput = document.getElementById('file-input');
            var filePath = fileInput.value;
            var allowedExtensions = /(.svg|.png)$/i;
            if(!allowedExtensions.exec(filePath)){
                return false;
            }else{
                return true;     
            }
        }

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

        var validate = fileValidation();

        if (validate) {

            let archivo = document.getElementById("file-input");
            let peso = archivo.files[0].size;
            if(peso > 100000) {
                    Snackbar.show({
                    text: 'Archivo muy pesado Tamaño máximo permitido es de 100kb',
                    pos: 'bottom-right',
                    actionText:"Ok"
                }); 
                $("#file-input").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 = $('#file-input').val();

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

    $('#file-input').change(function () {

        var file = $('#file-input').val();

        if (file == '') {
            $('#preview').html('<img src="/img/icon.svg">');
        }
    });
    </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/servicios/edit.blade.php ENDPATH**/ ?>