@extends('layouts.app')

{{-- Customize layout sections --}}
@section('subtitle', 'Lista de Asignaturas')
@section('content_header_title', 'Asignaturas')
@section('content_header_subtitle', 'Lista de Asignaturas')

@section('content')
<div class="container">
    <div class="row">
        <div class="col-md-12">

            <form method="GET" action="{{ route('admin.subjects.index') }}">
                <div class="row">
                    <div class="col-6">
                        <div class="form-group">
                            <label for="university_id">Universidad</label>
                            <select name="university_id" id="university_id" class="form-control" onchange="this.form.submit()">
                                <option value="">-- Seleccione una Universidad --</option>
                                @foreach($universities as $university)
                                    <option value="{{ $university->id }}" {{ $university->id == $universityId ? 'selected' : '' }}>
                                        {{ $university->name }} - {{ $university->initial }}
                                    </option>
                                @endforeach
                            </select>
                        </div>

                    </div>

                    <div class="col-6">
                        <div class="form-group">
                            <label for="program_id">Programa</label>
                            <select name="program_id" id="program_id" class="form-control" onchange="this.form.submit()">
                                <option value="">-- Seleccione un Programa --</option>
                                @foreach($programs as $program)
                                    <option value="{{ $program->id }}" {{ $program->id == $programId ? 'selected' : '' }}>
                                        {{ $program->name }} - {{ $program->codigo }}
                                    </option>
                                @endforeach
                            </select>
                        </div>

                    </div>

                </div>
            </form>

            @if($universityId && $programId)
                <div class="d-flex justify-content-start my-5 mx-2" id="subject-agregar">
                    <a href="{{ route('admin.subjects.create', ['program_id' => $programId, 'university_id' => $universityId]) }}" class="btn btn-success btn-lg shadow">Agregar Asignatura</a>
                </div>

                @if($subjects->isNotEmpty())
                    <table id="userTable" class="table table-striped table-bordered table-hover hover mt-2" style="width:100%;">
                        <thead>
                            <tr class="table-info">
                                <th class="align-middle">No.</th>
                                <th class="align-middle">Nombre</th>
                                <th class="align-middle">Código</th>
                                <th class="align-middle">Créditos</th>
                                <th class="align-middle">Acciones</th>
                            </tr>
                        </thead>
                        <tbody>
                            @php($i = 1)
                            @foreach($subjects as $subject)
                                <tr>
                                    <td>{{ $i }}</td>
                                    <td>{{ $subject->name }}</td>
                                    <td>{{ $subject->code }}</td>
                                    <td style="text-align: center;">{{ $subject->credits }}</td>
                                    <td style="text-align: right;">
                                        <a href="{{ route('admin.subjects.edit', ['subject' => $subject->id, 'university_id' => $universityId, 'program_id' => $programId]) }}" class="btn btn-sm btn-success shadow mr-1">Editar</a>
                                        <form action="{{ route('admin.subjects.destroy', $subject->id) }}" method="POST" style="display:inline;">
                                            @csrf
                                            @method('DELETE')
                                            <input type="submit" value="Eliminar" class="btn btn-sm btn-danger shadow" onclick="return confirm('¿Está seguro que desea eliminar la Asignatura?')">
                                        </form>
                                    </td>
                                </tr>
                                @php($i++)
                            @endforeach
                        </tbody>
                    </table>
                @else
                    <p>No se encontraron asignaturas para el programa seleccionado.</p>
                @endif
            @endif
        </div>
    </div>
</div>
@endsection

@push('css')
    <link rel="stylesheet" href="https://cdn.datatables.net/2.0.8/css/dataTables.bootstrap5.css">
@endpush

{{-- Push extra scripts --}}

@push('js')
    <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/5.3.0/js/bootstrap.bundle.min.js"></script>
    <script src="https://cdn.datatables.net/2.0.8/js/dataTables.js"></script>
    <script src="https://cdn.datatables.net/2.0.8/js/dataTables.bootstrap5.js"></script>
    <script>
        var table = $('#userTable').DataTable({
            pageLength: 25, // Muestra 25 registros por vez
            order: [], // Evita que DataTables aplique cualquier orden por defecto
            columnDefs: [
                { width: '180px', targets:4 } // Define el ancho de la segunda columna como 200px
            ],
            language: {
                "decimal": "",
                "emptyTable": "No hay información",
                "info": "Mostrando _START_ a _END_ de _TOTAL_ registros",
                "infoEmpty": "Mostrando 0 to 0 of 0 registros",
                "infoFiltered": "(Filtrado de _MAX_ total registros)",
                "infoPostFix": "",
                "thousands": ",",
                "lengthMenu": "Mostrar _MENU_ registros",
                "loadingRecords": "Cargando...",
                "processing": "Procesando...",
                "search": "Buscar:",
                "zeroRecords": "Sin resultados encontrados",
                "paginate": {
                    "first": "Primero",
                    "last": "Ultimo",
                    "next": "Siguiente",
                    "previous": "Anterior"
                }
            },
        });
    </script>

@endpush