@extends('layouts.app')

@section('content')
    <div class="container">
    <br/>
        <div class="row justify-content-center">
            <div class="col-md-8">
                <div class="card">
                    <div class="card-header">
                        <h2 class="text-center">Agregar Asignatura</h2>
                    </div>
                    <form action="{{ route('asignature.store') }}" method="POST">
                        @csrf

                        <div class="card-body row">
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label for="nombre_asignatura">Nombre de la asignatura:</label>
                                    <input type="text" name="nombre_asignatura" class="form-control"
                                        placeholder="Ingrese el nombre de la asignatura" required>
                                </div>
                            </div>

                            <div class="col-md-6">
                                <div class="form-group">
                                    <label for="codigo_asignatura">Código de la asignatura:</label>
                                    <input type="text" name="codigo_asignatura" class="form-control"
                                        placeholder="Ingrese el código de la asignatura" required>
                                </div>
                            </div>

                            <div class="col-md-6">
                                <div class="form-group">
                                    <label for="estado">Estado de la asignatura:</label>
                                    <select name="estado" class="form-control" required>
                                        <option value="Activa">Activa</option>
                                        <option value="Inactiva">Inactiva</option>
                                    </select>
                                </div>
                            </div>

                            <div class="col-md-6">
                                <div class="form-group">
                                    <label for="carrera_id">Carrera relacionada:</label>
                                    <select class="form-select" name="carrera_id"
                                        aria-label="Seleccione una asignatura relacionada" required>
                                        <option value="" disabled selected>Seleccione una carrera relacionada:
                                        </option>
                                        @foreach ($carreras as $carrera)
                                            <option value="{{ $carrera->id }}">{{ $carrera->nombre_carrera }}</option>
                                        @endforeach
                                    </select>
                                </div>
                            </div>

                            <div class="col-md-12">
                                <div class="form-group" id="libros-selection">
                                    <strong>Seleccionar libros relacionados:</strong>
                                    @foreach ($libros as $libro)
                                        <div class="form-check">
                                            <input type="checkbox" name="libros[]" value="{{ $libro->id }}"
                                                class="form-check-input" id="libro-{{ $libro->id }}">
                                            <label class="form-check-label"
                                                for="libro-{{ $libro->id }}">{{ $libro->nombre_libro }}</label>
                                        </div>
                                    @endforeach
                                </div>
                                <button type="button" class="btn btn-secondary" id="toggle-libros">Mostrar/Ocultar
                                    Libros</button>
                            </div>

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

    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const toggleLibrosButton = document.getElementById('toggle-libros');
            const librosSelection = document.getElementById('libros-selection');

            toggleLibrosButton.addEventListener('click', function() {
                if (librosSelection.style.display === 'none') {
                    librosSelection.style.display = 'block';
                    toggleLibrosButton.textContent = 'Ocultar Libros';
                } else {
                    librosSelection.style.display = 'none';
                    toggleLibrosButton.textContent = 'Mostrar/Ocultar Libros';
                }
            });
        });
    </script>
@endsection