@extends('layouts.landing')

@section('title', 'Mis Grados y Secciones')

@section('content')
    <div class="wrapper">
        @include('layouts._partials.header')
        @include('layouts._partials.menuAdmin', ['activeItem' => 'degrees'])
        <div class="content-wrapper p-2">
            <div class="container-fluid">
                <div class="card">
                    <div class="card-body">
                        <div class="row ml-0">
                            <button class="btn btn-info mb-3 col-md-2" data-bs-toggle="modal"
                                data-bs-target="#createModalSection">
                                Agregar Sección
                            </button>
                            <p class="col-md-10" style="text-align: center; font-weight: bold;">GESTIÓN DE GRADOS Y
                                SECCIONES</p>
                        </div>
                        <table class="table table-bordered border-success-subtle table-hover">
                            <thead class="table-success">
                                <tr>
                                    <th class="text-center">Primer Grado</th>
                                    <th class="text-center"></th>
                                    <th class="text-center">Segundo Grado</th>
                                    <th class="text-center"></th>
                                    <th class="text-center">Tercer Grado</th>
                                    <th class="text-center"></th>
                                    <th class="text-center">Cuarto Grado</th>
                                    <th class="text-center"></th>
                                    <th class="text-center">Quinto Grado</th>
                                    <th class="text-center"></th>
                                </tr>
                            </thead>
                            <tbody>
                                @php
                                    $maxSection = !empty($structuredData) ? max(array_map(fn($degree) => count($degree['sections']), $structuredData)) : 0;
                                @endphp

                                @for ($i = 0; $i < $maxSection; $i++)
                                    <tr>
                                        @foreach ($structuredData as $degree)
                                            @if (isset($degree['sections'][$i]))
                                                <td class="border-success-subtle text-center">
                                                    {{ $degree['sections'][$i]['name_section'] }}
                                                </td>
                                                <td class="border-success-subtle text-center align-middle">
                                                    <button class="btn btn-info btn-sm editSectionBtn" data-bs-toggle="modal"
                                                        data-bs-target="#updateModalSection"
                                                        data-id_section="{{ $degree['sections'][$i]['id_section'] }}"
                                                        data-name_section="{{ $degree['sections'][$i]['name_section'] }}">
                                                        <i class="fas fa-edit"></i>
                                                    </button>
                                                </td>
                                            @else
                                                <td class="border-success-subtle text-center">
                                                    No hay secciones
                                                </td>
                                                <td class="border-success-subtle text-center">

                                                </td>
                                            @endif
                                        @endforeach
                                    </tr>
                                @endfor
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
        @include('components.alert-request')
        @include('admin.course_section.create')
        @include('components.alert-request')
        @include('layouts._partials.footer')
        @include('admin.course_section.edit')
    </div>
    <script>
        document.addEventListener("DOMContentLoaded", function () {
            const editButonsSection = document.querySelectorAll(".editSectionBtn");
            editButonsSection.forEach(buttonSection => {
                buttonSection.addEventListener("click", function () {
                    let idSection = this.getAttribute("data-id_section");
                    let nameSection = this.getAttribute("data-name_section");

                    document.getElementById("id_section").value = idSection;
                    document.getElementById("edit_name_section").value = nameSection;
                })
            })
        })
    </script>
@endsection