@extends('layouts.app')

@section('subtitle', 'Comparar Programas')
@section('content_header_title', 'Equivalencias')
@section('content_header_subtitle', 'Comparar Programas')

@section('content_body')
<div class="card">
    <div class="carbody p-4">
        <form action="{{ route('admin.equivalences.create') }}" method="GET">
            <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="{{ $program->id }}">{{ $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 name="university_b_id" 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>

            <button type="submit" class="btn btn-info shadow">Comparar</button>
        </form>

        <h3 class="mt-5 mb-2">Programas de UIIX con Equivalencias</h3>
        @if($programsA->isNotEmpty())
            <table class="table table-striped table-bordered table-hover hover mt-2" style="width:100%;">
                <thead>
                    <tr class="table-info">
                        <th class="align-middle">Programa A</th>
                    </tr>
                </thead>
                <tbody>
                    @foreach($programsA as $programA)
                        <tr>
                            <td>{{ $programA->name }} - {{ $programA->codigo }}</td>
                        </tr>
                    @endforeach
                </tbody>
            </table>
        @else
            <p>No se encontraron equivalencias para los programas seleccionados.</p>
        @endif
    </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 }} - {{ $program->codigo }}';
            programSelect.appendChild(option);
        }
    @endforeach
});
</script>
@stop