@extends('layouts.app')

@section('content')
    <div class="container">
        <br />
        <h2 class="text-center">Editar Asignatura</h2>
        <div class="row">
            <div class="col-md-6 offset-md-3">
                <form action="{{ route('asignature.update', $asignature->id) }}" method="POST">
                    @csrf
                    @method('PUT')

                    <div class="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"
                                    value="{{ $asignature->nombre_asignatura }}"
                                    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"
                                    value="{{ $asignature->codigo_asignatura }}"
                                    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" {{ $asignature->estado === 'Activa' ? 'selected' : '' }}>Activa
                                    </option>
                                    <option value="Inactiva" {{ $asignature->estado === 'Inactiva' ? 'selected' : '' }}>
                                        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>
                                    @foreach ($carreras as $carrera)
                                        <option value="{{ $carrera->id }}"
                                            {{ $asignature->carrera_id === $carrera->id ? 'selected' : '' }}>
                                            {{ $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 }}"
                                            {{ in_array($libro->id, $asignature->libros->pluck('id')->toArray()) ? 'checked' : '' }}>
                                        <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('materiales.index') }}">Volver</a>
                            <button type="submit" class="btn btn-primary">Guardar</button>
                        </div>
                    </div>
                </form>
            </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