@extends('layouts.app')

@section('content')
    <div class="container">
        <br />
        <div class="card">
            <div class="card-header">
                <h2>Agregar Trabajo de Titulación</h2>
            </div>
            <div class="pull-right">
                <form action="{{ route('trabajostitulacion.store') }}" method="POST" enctype="multipart/form-data">
            </div>

            @csrf

            <div class="card-body row">
                <div class="col-md-6">
                    <div class="form-group">
                        <label for="codigo">Código del trabajo de titulación:</label>
                        <input type="text" name="codigo" class="form-control" placeholder="Ingrese el código" required>
                    </div>
                </div>

                <div class="col-md-6">
                    <div class="form-group">
                        <label for="titulo">Título del trabajo de titulación:</label>
                        <input type="text" name="titulo" class="form-control" placeholder="Ingrese el título" required>
                    </div>
                </div>

                <div class="col-md-6">
                    <div class="form-group">
                        <label for="codigo_inventario">Código de inventario del trabajo de titulación:</label>
                        <input type="text" name="codigo_inventario" class="form-control"
                            placeholder="Ingrese el código de inventario" required>
                    </div>
                </div>

                <div class="col-md-6">
                    <div class="form-group">
                        <label for="tutor">Tutor del trabajo de titulación:</label>
                        <input type="text" name="tutor" class="form-control" placeholder="Ingrese el nombre del tutor"
                            required>
                    </div>
                </div>

                <div class="col-md-6">
                    <div class="form-group">
                        <label for="periodo_academico_id">Período Académico:</label>
                        <select name="periodo_academico_id" class="form-control" required>
                            <option value="">Seleccionar período académico</option>
                            @foreach ($periodosAcademicos as $periodo)
                                <option value="{{ $periodo->id }}">{{ $periodo->nombre }}</option>
                            @endforeach
                        </select>
                    </div>
                </div>

                <div class="col-md-6">
                    <div class="form-group">
                        <label for="carreras_id">Carreras Relacionadas:</label>
                        <select name="carreras_id" class="form-control" required>
                            <option value="">Seleccionar carrera</option>
                            @foreach ($carreras as $carrera)
                                <option value="{{ $carrera->id }}">{{ $carrera->nombre_carrera }}</option>
                            @endforeach
                        </select>
                    </div>
                </div>


                <div class="col-md-6">
                    <div class="form-group">
                        <label for="autores">Autores:</label>
                        <select name="autores[]" class="form-control" multiple id="autoresSelect" required>
                            @foreach ($autores as $autor)
                                <option value="{{ $autor->id }}">{{ $autor->nombre }} {{ $autor->apellido }}</option>
                            @endforeach
                        </select>
                    </div>
                </div>

                <div class="col-md-6">
                    <div class="form-group">
                        <strong>Imagen de Ejemplar:</strong>
                        <input type="file" name="imagen" class="form-control" accept="image/*" required>
                    </div>
                </div>

                <div class="form-group text-center mt-3">
                    <a class="btn btn-secondary" href="{{ route('trabajostitulacion.index') }}">Volver</a>
                    <button type="submit" class="btn btn-primary">Guardar</button>
                </div>
            </div>
            </form>
        </div>
    </div>

    <script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.13/js/select2.min.js"></script>

    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.13/css/select2.min.css"
        crossorigin="anonymous" referrerpolicy="no-referrer" />

    <script>
        $(document).ready(function() {
            $('#autoresSelect').select2({
                width: '100%',
                placeholder: 'Buscar autor',
                minimumInputLength: 3,
                ajax: {
                    url: '{{ route('autores.search') }}',
                    dataType: 'json',
                    delay: 250,
                    processResults: function(data) {
                        return {
                            results: $.map(data, function(item) {
                                return {
                                    id: item.id,
                                    text: item.nombre + ' ' + item
                                        .apellido
                                };
                            })
                        };
                    },
                    cache: true
                }
            });
        });
    </script>
@endsection