@extends('layouts/app')
@section('tituloModulo','CREAR BIBLIOTECA')
@section('contenido')
<div class="card">
    <div class="card-body">
        <form action="{{ route('bibliotecas.store') }}" method="POST"  enctype="multipart/form-data">
            @csrf
            <label class="control-label is-required">Nombre</label>
            <input class="form-control" type="text" name="titulo" required>
            <label class="control-label is-required">Descripción</label>
            <textarea name="descripcion" class="form-control" required></textarea>
            <h5>Ingrese el archivo PDF  de la biblioteca o ingrese el contenido textual de  la biblioteca</h5>
            <label class="control-label">Documento</label>
            <input class="form-control" type="file" name="documento">
            <label class="control-label is-required">Catagoría</label>
            <select class="form-select categoria" aria-label="Default select example" name="categoria" required>
                <option value="">Selecciona una categoría</option>
                @foreach ($categorias as $categoria)
                    <option value="{{$categoria->codigo_bica}}">{{$categoria->nombre_bica}}</option>
                @endforeach
            </select>
            <label class="control-label is-required">Subcategoría</label>
            <select class="form-select subcategorias" aria-label="Default select example" name="subcategoria" required>
                <option value="">Selecciona una subcategoría</option>
            </select>
            <label class="control-label">Escrito</label>
            <textarea class="tinymce-editor"  name="escrito"></textarea>
            <div class="row mt-3">
                <div class="col-auto">
                    <button type="submit" class="btn btn-success"><i class="bx bx-save"></i> Guardar</button></div>
                <div class="col-auto">
                    <a href={{ route('bibliotecas.index') }} class="btn btn-danger"><i class="fa-solid fa-rotate-left"></i> Cancelar</a>
                </div>
            </div>
        </form>
    </div>
</div>
    <script>
        $(function(){
            $('.categoria').off('change'); // Desvincular eventos 'change' anteriores
            $('.categoria').on('change', onSelectCategoria);
        });
        function onSelectCategoria(){
            var id = $(this).val();
            $.get('{{Request::root()}}/biblioteca/subcategorias/lista/'+id+'', function(data){
                var html_select = '';
                for(var i=0; i<data.length; ++i)
                html_select += '<option value="'+data[i].codigo_bisu+'">'+data[i].nombre_bisu+'</option>';
                $('.subcategorias').html(html_select);
            });
        }
    </script>
@endsection