{{-- @extends('layouts.app')

@section('content')
    <ol class="breadcrumb">
          <li class="breadcrumb-item">
             <a href="{!! route('promocions.index') !!}">Promocion</a>
          </li>
          <li class="breadcrumb-item active">Edit</li>
        </ol>
    <div class="container-fluid">
         <div class="animated fadeIn">
             @include('coreui-templates::common.errors')
             <div class="row">
                 <div class="col-lg-12">
                      <div class="card">
                          <div class="card-header">
                              <i class="fa fa-edit fa-lg"></i>
                              <strong>Edit Promocion</strong>
                          </div>
                          <div class="card-body">
                              {!! Form::model($promocion, ['route' => ['promocions.update', $promocion->id], 'method' => 'patch']) !!}

                              @include('promocions.fields')

                              {!! Form::close() !!}
                            </div>
                        </div>
                    </div>
                </div>
         </div>
    </div>
@endsection --}}

@extends('layouts.app')

@push('css')
<link href="{{ asset('js/select2/select2.min.css') }}" rel="stylesheet" />
<style>
    .input-material{
        width: 0.1px;
        height: 0.1px;
        opacity: 0;
        overflow: hidden;
        position: absolute;
        z-index: -1;
    }
</style>
@endpush

@section('content')
    <div class="container ml-0 mr-0 pl-0 pr-0 row">
        <div class="animate__animated animate__fadeInUp container tarjetas tarjeta-gris p-3 p-sm-2 p-md-3 p-lg-5 p-xl-5 col-12">
            <div class="row row-bottom">
               <div class="col-12 col-sm-12 col-md-6 col-lg-6 col-xl-6">
                   <h3 class="texto-obscuro">Edición de promoción</h3>
                   <nav class="breadcrumb"><a class="breadcrumb-item" href="{{ url('productos') }}">Promociones</a><span class="breadcrumb-item active">Edición de promoción</span></nav>
               </div>
           </div>
           <div class="row">
                {!! Form::model($promocion, ['route' => ['calidad-y-seguridad.update', $promocion->id], 'method' => 'patch','class' => 'formulario-principal col-12','files' => true]) !!}
                    <div class="empty-space-30"></div>
                    @include('promocions.fields_edit')
                    <div class="empty-space-30"></div>
                {!! Form::close() !!}
           </div>
           <div class="empty-space-50"></div>
           <div class="row botonera-inferior">
                <div class="col-12 p-0 m-0 text-right botonera-formulario">
                    <a href="{{ url('calidad-y-seguridad') }}" class="btn btn-secundario text-white width-250">Cancelar <span><-</span></a>
                    <button type="button" id="guardar-cambios" class="btn btn-principal width-250">Guardar cambios <span>-></span></button>
                </div>
            </div>
           <div class="empty-space-50"></div>
       </div>
    </div>
@endsection

@push('scripts')
    <script src="{{ asset('js/ckeditor/ckeditor.js') }}"></script>
    <script src="{{ asset('js/select2/select2.min.js') }}"></script>
    <script src="{{ asset('js/validaciones/validaciones.js') }}"></script>
    <script>
        ClassicEditor
        .create( document.querySelector( '#ficha_tecnica' ), {
            toolbar: {
                items: [
                    'heading',
                    '|',
                    'bold',
                    'italic',
                    'link',
                    'bulletedList',
                    'numberedList',
                    '|',
                    'indent',
                    'outdent',
                    '|',
                    'blockQuote',
                    'insertTable',
                    'undo',
                    'redo'
                ]
            },
            language: 'es',
            image: {
                toolbar: [
                    'imageTextAlternative',
                    'imageStyle:full',
                    'imageStyle:side'
                ]
            },
            table: {
                contentToolbar: [
                    'tableColumn',
                    'tableRow',
                    'mergeTableCells'
                ]
            },
            licenseKey: '',

        } )
        .then( editor => {
            window.editor = editor;
        } )
        .catch( error => {
            console.error( 'Oops, something went wrong!' );
            console.error( 'Please, report the following error on https://github.com/ckeditor/ckeditor5/issues with the build id and the error stack trace:' );
            console.warn( 'Build id: 51i7nbhx32nf-qrolc6ajm7ow' );
            console.error( error );
        } );

        var validador_imagen = false;
        var texto_imagen = '';
        // $('#output_imagen_destacada').css('background-image','');
        if (window.FileList && window.File && window.FileReader) {
            validador_imagen = false;
            document.getElementById('imagen_destacada').addEventListener('change', event => {
            // output.css = '';
            $(".span-file").show();
            // $('#output_imagen_destacada').css('background-image','');
            $("#status_imagen_destacada").text('');
            $("#status_imagen_destacada").hide();
            const file = event.target.files[0];
            if (!file.type) {
                console.log(file);
                $("#status_imagen_destacada").text('Error: el archivo '+file.name+' no es compatible con este navegador, intente con un archivo con extensión JPG o PNG.');
                $("#status_imagen_destacada").show();
                texto_imagen = '.';
                return;
            }
            if (!file.type.match('image.*')) {
                $("#status_imagen_destacada").text('Error: el archivo seleccionado no parece ser una imagen, intente con un archivo con extensión JPG o PNG.');
                $("#status_imagen_destacada").show();
                texto_imagen = '.';
                return;
            }
            const reader = new FileReader();
            reader.addEventListener('load', event => {
                $(".span-file").hide();
                $('#output_imagen_destacada').css('background-image','url("'+event.target.result+'")');
                validador_imagen = true;
                texto_imagen = '';
            });
            reader.readAsDataURL(file);
            });
        }
        validador_imagen = true;

        $('.js-example-basic-single').select2({});


        $("#btn-imagen-destacada").click(function(){
            $("#imagen_destacada").click();
        });

        $("#guardar-cambios").click(function(){
            aplicar_validaciones();
            // $(".formulario-principal").submit();
        });

       function cargar_nombre(){
            $('.input-material').change(function(){
                var filename = $(this).val().split('\\').pop();
                var idname = $(this).attr('id');
                if($(this).val() == ""|| $(this).val() == null)
                {
                    $("#div_"+idname).remove();
                    return true;
                }
                $('#span-'+idname).html(filename);
                $("#div_"+idname).css('display','block');
            });
       }

       function evento_eliminar(){
            $(".btn-close-materiales").click(function(){
                elemento = $(this);
                elemento.parent().remove();
            });
       }
        var cm = 0;

        $("#nombre").focusout(function(){
            if (validar_texto('#nombre', '#nombre_mensaje',3,50)) {
                $(this).removeClass('is-invalid');
            }else{
                $(this).addClass('is-invalid');
            }
        });

        // $("#texto_promocional").focusout(function(){
        //     if (validar_texto('#texto_promocional', '#texto_promocional_mensaje',3,100)) {
        //         $(this).removeClass('is-invalid');
        //     }else{
        //         $(this).addClass('is-invalid');
        //     }
        // });

        $("#descripcion").focusout(function(){
            if (validar_texto('#descripcion', '#descripcion_mensaje',3,100)) {
                $(this).removeClass('is-invalid');
            }else{
                $(this).addClass('is-invalid');
            }
        });

        function aplicar_validaciones()
        {
            var validacion = true;

            if (validar_texto('#nombre', '#nombre_mensaje',3,50)) {
                $("#nombre").removeClass('is-invalid');
            }else{
                $("#nombre").addClass('is-invalid');
                validacion = false;
            }

            if($("#precio").val() != "")
            {
                $("#precio").removeClass('is-invalid');
                $("#precio_mensaje").text('');
            }else{
                $("#precio").addClass('is-invalid');
                $("#precio_mensaje").text('El campo es obligatorio');
                validacion = false;
            }

            // if (validar_texto('#texto_promocional', '#texto_promocional_mensaje',3,100)) {
            //     $("#texto_promocional").removeClass('is-invalid');
            // }else{
            //     $("#texto_promocional").addClass('is-invalid');
            //     validacion = false;
            // }

            if (validar_texto('#descripcion', '#descripcion_mensaje',3,100)) {
                $("#descripcion").removeClass('is-invalid');
            }else{
                $("#descripcion").addClass('is-invalid');
                validacion = false;
            }

            if(!validador_imagen)
            {
                $("#status_imagen_destacada").show();
                if(texto_imagen == '')
                {
                    $("#status_imagen_destacada").text('Debes subir una imagen.');
                }
                validacion = false;
            }

            if(window.editor.getData() == ""||window.editor.getData() == null)
            {
                validacion = false;
                $("#ficha_tecnica_mensaje").text('El campo es obligatorio');
                $("#ficha_tecnica_mensaje").slideDown();
            }else{
                $("#ficha_tecnica_mensaje").slideUp();
                $("#ficha_tecnica_mensaje").text('');
            }

            if (validacion) {
                $(".formulario-principal").submit();
            }
        }

        setInputFilter(document.getElementById("precio"), function(value) {
            return /^-?\d*[.]?\d{0,2}$/.test(value);
        });
    </script>
@endpush