@extends('adm.index')
@section('productos','active')
@section('productos_true','true')
@section('productos_show','show')
@section('productos_collapsed','collapsed')
@section('form')

<style>
    form{
        margin-bottom: 40px !important;
        height: 100%;
    }
    main{
        max-height: none;
    }
</style>

<div class="container">
    <div class="row">
        <div class="col-12">
            <h2>Agregar producto</h2>
        </div>
        <div class="col-12">
            <form method="POST" action="<?= route('createProducto') ?>" enctype="multipart/form-data">
                @csrf
                <div class="col-md-6 mb-3">
                    <label for="inputOrden" class="form-label">Orden</label>
                    <input type="text" class="form-control" id="inputOrden" name="orden" required>
                </div>
                <div class="col-md-6  mb-3">
                    <label for="inputNombre" class="form-label">Nombre</label>
                    <input type="text" class="form-control" id="inputNombre" name="nombre" required>
                </div>
                <div class="col-md-6  mb-3">
                    <label for="categoria" class="form-label">Selecciona la categor&iacute;a del producto</label>
                    <select class="form-select" name="categoria_id" id="categoria" aria-label="Default select example" required>
                        <?php foreach($categorias as $categoria){ ?>
                            <option value="<?= $categoria->id ?>"><?= $categoria->nombre ?></option>
                        <?php } ?>
                    </select>
                </div>
                <div class="col-md-12 mb-3">
                    <label for="descripcion" class="form-label">Descripci&oacute;n</label>
                    <textarea class="form-control" name="descripcion" id="descripcion" cols="30" rows="10"></textarea>
                </div>
                <div class="col-md-12 mb-3">
                    <label for="texto_izq" class="form-label">Caracter&iacute;sticas generales(Texto izquierdo)</label>
                    <textarea class="form-control" name="texto_izq" id="texto_izq" cols="30" rows="10"></textarea>
                </div>
                <div class="col-md-12 mb-3">
                    <label for="texto_der" class="form-label">Caracter&iacute;sticas generales(Texto derecho)</label>
                    <textarea class="form-control" name="texto_der" id="texto_der" cols="30" rows="10"></textarea>
                </div>
                <div class="col-md-12 mb-3">
                    <label for="datos_tecnicos" class="form-label">Datos t&eacute;cnicos</label>
                    <textarea class="form-control" name="datos_tecnicos" id="datos_tecnicos" cols="30" rows="10"></textarea>
                </div>
                <div class="col-md-12 mb-3">
                    <label for="datos_electricos" class="form-label">Datos el&eacute;ctricos</label>
                    <textarea class="form-control" name="datos_electricos" id="datos_electricos" cols="30" rows="10"></textarea>
                </div>
                <div class=" mb-3">
                    <label for="foto_circuito" class="form-label">Foto Datos el&eacute;ctricos(Tama&ntilde;o recomendado: 1080 x 1080 px)</label>
                    <input class="form-control" type="file" id="foto_circuito" name="foto_circuito">
                </div>
                <div class=" mb-3">
                    <label for="ficha" class="form-label">Ficha t&eacute;cnica</label>
                    <input class="form-control" type="file" id="ficha" name="ficha_tecnica">
                </div>
                <div class=" mb-3">
                    <label for="formFile" class="form-label">Imagen(Tama&ntilde;o recomendado: 1080 x 1080 px)</label>
                    <input class="form-control" type="file" id="formFile" name="foto" required>
                </div>
                <div class=" mb-3">
                    <label for="formFile2" class="form-label">Imagen(Tama&ntilde;o recomendado: 1080 x 1080 px)</label>
                    <input class="form-control" type="file" id="formFile2" name="foto2">
                </div>
                <div class=" mb-3">
                    <label for="formFile3" class="form-label">Imagen(Tama&ntilde;o recomendado: 1080 x 1080 px)</label>
                    <input class="form-control" type="file" id="formFile3" name="foto3">
                </div>
                <div class=" mb-3">
                    <label for="formFile4" class="form-label">Imagen(Tama&ntilde;o recomendado: 1080 x 1080 px)</label>
                    <input class="form-control" type="file" id="formFile4" name="foto4">
                </div>
                <div class=" mb-3">
                    <label for="formFile5" class="form-label">Imagen(Tama&ntilde;o recomendado: 1080 x 1080 px)</label>
                    <input class="form-control" type="file" id="formFile5" name="foto5">
                </div>
                <button type="submit" class="btn btn-primary">Agregar producto</button>
            </form>
        </div>
    </div>
</div>

<script>
  $(document).ready(function() {
       $('textarea').summernote({
           insertTableMaxSize: {
               col: 20,
               row: 20
           },
           height: 200,
           toolbar: [
               // [groupName, [list of button]]
               ['table', ['table']],
               ['style', ['bold', 'italic', 'underline', 'clear']],
               ['font', ['strikethrough', 'superscript', 'subscript']],
               ['fontsize', ['fontsize']],
               ['color', ['color']],
               ['para', ['ul', 'ol', 'paragraph']],
               ['height', ['height']],
               ['view', ['fullscreen', 'codeview', 'help']],
            ],
       });
   });

</script>

@endsection
