@extends('ATCore::atcore_layout')


@section('content')
    <!-- general form elements -->
          <!-- form start -->
    <form id="create_form" role="form" action="{{ route($routeName.'.store') }}" method="POST" autocomplete="off" enctype="multipart/form-data">
        @csrf
    
        <div class="card card-primary">
            <div class="card-header">
                <h3 class="card-title">{{ $createNewName }}</h3>
            </div>
            <!-- /.card-header -->

            <div class="card-body">
                <div class="form-group">
                    <label for="_display_name">Nombre</label>
                    <input type="text" class="form-control" id="_display_name" name="name"  placeholder="Ingresar nombre" value="{{ old('name') }}">
                </div>
                <div class="form-group">
                    <label for="exampleInputFile">Archivo</label>
                    <div class="input-group">
                        <div class="custom-file">
                            <input type="file" class="custom-file-input" id="_newImage" name="newImage" lang="es">
                            <label class="custom-file-label" for="_newImage">Seleccionar Archivo</label>
                        </div>
                    </div>
                </div>
            </div>
            <div class="card-footer">
                <button type="submit" class="btn btn-primary">{{ $createNewName }}</button>
                <a href="{{ route($routeName.'.index') }}" class="btn btn-secondary">Cancelar </a>
            </div>
        </div>
    </form>
    
@stop

@section('css')
<style>
.custom-file-input:lang(es) ~ .custom-file-label::after {
    content: "Elegir"
}
</style>
@stop

@section('plugins.ValidationJS',true)

@section('js')
<script>


$(document).ready(function () {
  bsCustomFileInput.init();


  $('#create_form').validate({
    submitHandler: function(form) {
        forcePace();
        form.submit();
    },
    rules: {
      name: {
        required: true,
      },
      newImage: {
        required: true,
      }
    },
    messages: {
      name: {
        required: "Por favor ingresa un nombre válido para el archivo.",
      },
      newImage: {
        required: "Debes selecciona un archivo.",
      }
    },
    errorElement: 'span',
    errorPlacement: function (error, element) {
      error.addClass('invalid-feedback');
      element.closest('.form-group').append(error);
    },
    highlight: function (element, errorClass, validClass) {
      $(element).addClass('is-invalid');
    },
    unhighlight: function (element, errorClass, validClass) {
      $(element).removeClass('is-invalid');
    }
  });
});
</script>

@stop