@extends('layouts.app')

{{-- Customize layout sections --}}
@section('subtitle', 'Informe Técnico')
@section('content_header_title', 'Informe Técnico')
@section('content_header_subtitle', 'Informe Técnico')

@section('content_body')
<div class="card">
    <div class="carbody p-4">
        <form action="{{ route('admin.reports.selectStudent') }}" method="POST">
            @csrf
            @method('POST')
            <div class="row">
                <div class="col-md-6">
                    <div class="form-group">
                        <label for="program_a_id">Programa de UIIX</label>
                        <select name="program_a_id" class="form-control" required>
                            <option value="">- Seleccione un programa -</option>
                            @foreach($programs->where('university_id', 1) as $program)
                                <option value="H{{ $program->codigo }}">{{ $program->name }} - {{ $program->codigo }}</option>
                            @endforeach
                        </select>
                    </div>
                </div>
                <div class="col-md-6">
                    <div class="form-group">
                        <label for="university_b_id">Universidad Origen</label>
                        <select id="university_b_id" class="form-control" required>
                            <option value="">- Seleccione una Universidad -</option>
                            @foreach($universities as $university)
                                @if($university->id != 1)
                                    <option value="{{ $university->id }}">{{ $university->name }} - {{ $university->initial }}</option>
                                @endif
                            @endforeach
                        </select>
                    </div>

                    <div class="form-group">
                        <label for="program_b_id">Programa de la Universidad Origen</label>
                        <select name="program_b_id" id="program_b_id" class="form-control" required>
                            <option value="">- Seleccione un programa -</option>
                            <!-- Opciones se llenarán dinámicamente con JavaScript -->
                        </select>
                    </div>
                </div>
            </div>
            <div class="d-flex justify-content-end">
                <button type="submit" class="btn btn-info shadow">Siguiente</button>
            </div>
        </form>
    </div>
</div>

<script>
document.getElementById('university_b_id').addEventListener('change', function() {
    var universityId = this.value;
    var programSelect = document.getElementById('program_b_id');
    programSelect.innerHTML = '<option value="">- Seleccione una opción -</option>';

    @foreach($programs as $program)
        if ({{ $program->university_id }} == universityId) {
            var option = document.createElement('option');
            option.value = '{{ $program->id }}';
            option.text = '{{ $program->name }}';
            programSelect.appendChild(option);
        }
    @endforeach
});
</script>
@stop