@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">Creación de circular</h3>
                   <nav class="breadcrumb"><a class="breadcrumb-item" href="{{ url('categorias') }}">Circulares</a><span class="breadcrumb-item active">Creación de circular</span></nav>
               </div>
           </div>
           <div class="row">
                {!! Form::open(['route' => 'categorias.store','class' => 'formulario-principal col-12','files' => true]) !!}
                    <div class="empty-space-30"></div>
                    @include('categorias.fields')
                    <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('categorias') }}" 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>
        $('.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 (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('categorias.index') !!}">Categoria</a>
      </li>
      <li class="breadcrumb-item active">Create</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-plus-square-o fa-lg"></i>
                                <strong>Create Categoria</strong>
                            </div>
                            <div class="card-body">
                                {!! Form::open(['route' => 'categorias.store']) !!}

                                   @include('categorias.fields')

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