@extends('layouts.app')

@push('css')
<link href="{{ asset('js/select2/select2.min.css') }}" rel="stylesheet" />
@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 circular</h3>
                   <nav class="breadcrumb"><a class="breadcrumb-item" href="{{ url('circulares') }}">Circulares</a><span class="breadcrumb-item active">Edición de circular</span></nav>
               </div>
           </div>
           <div class="row">
                {!! Form::model($categoria, ['route' => ['circulares.update', $categoria->id], 'method' => 'patch','class' => 'formulario-principal col-12','files' => true]) !!}
                    <div class="empty-space-30"></div>
                    @include('circulares.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('circulares') }}" 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/select2/select2.min.js') }}"></script>
    <script src="{{ asset('js/validaciones/validaciones.js') }}"></script>
    <script>
        @if (isset($categoria->archivo))
        var hay_archivo = false;
        @else
        var hay_archivo = true;
        @endif
        var edicion_aux = false;
        console.log(hay_archivo,edicion_aux);
        function cargar_nombre_edit(){
            $('.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');
            });
        }

        $(".btn-remove-exist").click(function(){
            elemento = $(this);
            $(".materiales_eliminados").append(' <input value="'+elemento.data('id')+'" type="hidden" name="materiales_eliminados[]">')
            elemento.parent().remove();
            edicion_aux = true;
        });

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

        $("#add-material").click(function(){
            cm++;
            $("#div_material0").remove();
            $("#list_materiales").append('<div class="div_materiales p-2" id="div_material'+cm+'" style="display:none">'+
            '<input class="input-material" type="file" name="material[]" id="material'+cm+'" accept=".jpeg, .jpg, .png, .doc, .docx, .pdf, .xls, .xlsx, .ppt, .pptx, .csv" style="display:none">'+
            '<label class="for-materiales" for="material'+cm+'">'+
                    '<span id="span-material'+cm+'">Subir archivo</span>'+
                '</label>'+
                '<button type="button" class="btn-close-materiales">X</button>'+
            '</div>');
            $("#material"+cm).click();
            cargar_nombre_edit();
            evento_eliminar_edit();
            edicion_aux = true;
        });

        var m = 0;
        $("#add-docs").click(function(){
            m++;
            $("#list_docs").append('<div class="div_imagenes p-2" id="div_docs'+m+'" style="display:none">'+
                '<input class="input-material" type="file" name="docs[]" id="docs'+m+'" accept=".jpeg, .jpg, .png, .doc, .docx, .pdf, .xls, .xlsx, .ppt, .pptx, .csv" style="display:none">'+
                '<label class="for-materiales" for="material'+m+'">'+
                    '<span id="span-docs'+m+'">Subir archivo</span>'+
                '</label>'+
                '<button type="button" class="btn-close-materiales">X</button>'+
            '</div>');
            $("#docs"+m).click();
            cargar_nombre();
            evento_eliminar();
        });
        function cargar_nombre(){
            $('.input-material').change(function(){
                var filename = $(this).val().split('\\').pop();
                var idname = $(this).attr('id');
                console.log('Cambio '+idname);
                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();
            });
        }

        $('.js-example-basic-single').select2({
            tags: true,
            placeholder: 'Agrega una o más subcategorías'
        });

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

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

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

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

        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 (validar_texto('#slug', '#slug_mensaje',3,50)) {
            //     $("#slug").removeClass('is-invalid');
            // }else{
            //     $("#slug").addClass('is-invalid');
            //     validacion = false;
            // }

            if(hay_archivo){
                var numArchivosSeleccionados = $('[id^="docs"]').filter(function() {
                    return $(this).val() !== "";
                }).length;

                if (numArchivosSeleccionados === 0) {
                    $("#docs_mensaje").slideDown().text('Debes seleccionar al menos un archivo');
                    validacion = false;
                } else if (numArchivosSeleccionados === 2) {
                    $("#docs_mensaje").slideDown().text('No se puede subir más de un archivo');
                    validacion = false; 
                } else {
                    $("#docs_mensaje").slideUp().text('');
                }
            }else if(edicion_aux){
                var numArchivosSeleccionados = $('[id^="material"]').filter(function() {
                    return $(this).val() !== "";
                }).length;

                if (numArchivosSeleccionados === 0) {
                    $("#material_mensaje").slideDown().text('Debes seleccionar al menos un archivo');
                    validacion = false;
                } else if (numArchivosSeleccionados === 2) {
                    $("#material_mensaje").slideDown().text('No se puede subir más de un archivo');
                    validacion = false; 
                } else {
                    $("#material_mensaje").slideUp().text('');
                }
            }

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

            if (validacion) {
                $(".formulario-principal").submit();
            }
        }
    </script>
@endpush
{{-- @extends('layouts.app')

@section('content')
    <ol class="breadcrumb">
          <li class="breadcrumb-item">
             <a href="{!! route('circulares.index') !!}">Categoria</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 Categoria</strong>
                          </div>
                          <div class="card-body">
                              {!! Form::model($categoria, ['route' => ['circulares.update', $categoria->id], 'method' => 'patch']) !!}

                              @include('circulares.fields')

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