@extends('layouts.landing')

@section('title', 'mis cursos')

@section('content')
    <div class="wrapper">
        @include('layouts._partials.header')
        @include('layouts._partials.menuAdmin', ['activeItem' => 'courses'])
        <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="#createModalCourse">
                                Agregar Curso
                            </button>
                            <p class="col-md-10" style="text-align: center; font-weight: bold;">GESTIÓN DE CURSOS Y
                                COMPETENCIAS</p>
                        </div>
                        <table class="table  table-sm table-bordered border-success-subtle table-hover">
                            <thead class="table-success">
                                <tr>
                                    <th class="text-center">CURSOS</th>
                                    <th class="text-center">COMPETENCIAS</th>
                                    <th class="text-center">EDITAR</th>
                                    <th class="text-center">ARCHIVAR</th>
                                </tr>
                            </thead>
                            <tbody>
                                @foreach ($structuredData as $course)
                                    <tr>
                                        <td class="border-success-subtle text-center align-middle"
                                            rowspan="{{ max(1, count($course['competences'])) }}">
                                            {{ $course['name'] }}
                                        </td>
                                        @if (count($course['competences']) > 0)
                                            <td class="border-success-subtle">{{ $course['competences'][0]['name_competence'] }}
                                            </td>
                                        @else
                                            <td class="border-success-subtle">No hay competencias</td>
                                        @endif
                                        <td class="border-success-subtle text-center align-middle"
                                            rowspan="{{ max(1, count($course['competences'])) }}">
                                            <button class="btn btn-info btn-sm editCourseBtn" data-bs-toggle="modal"
                                                data-bs-target="#editModalCourse" 
                                                data-id_course="{{ $course['id_course'] }}"
                                                data-name="{{ $course['name'] }}"
                                                data-competences="{{ json_encode(array_column($course['competences'], 'name_competence')) }}">
                                                <i class="fas fa-edit"></i>
                                            </button>
                                        </td>
                                        <td class="border-success-subtle text-center align-middle"
                                            rowspan="{{ max(1, count($course['competences'])) }}">
                                            <button class="btn btn-danger btn-sm archive-btn" 
                                                data-bs-toggle="modal"
                                                data-bs-target="#ArchiveModalCourses{{ $course['id_course'] }}"
                                                data-id_course="{{ $course['id_course'] }}">
                                                <i class="fas fa-trash"></i>
                                            </button>
                                        </td>
                                    </tr>
                                    @foreach (array_slice($course['competences'], 1) as $competence)
                                        <tr>
                                            <td class="border-success-subtle">{{ $competence['name_competence'] }}</td>
                                        </tr>
                                    @endforeach
                                @endforeach
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
        @include('components.alert-request')
        @include('admin.course_section.archive')
        @include('admin.course_section.create')
        @include('admin.course_section.edit')
        @include('layouts._partials.footer')
    </div>
    <script>
        document.addEventListener("DOMContentLoaded", function () {
            const editButtons = document.querySelectorAll(".editCourseBtn");
            editButtons.forEach(button => {
                button.addEventListener("click", function () {
                    let idCourse = this.getAttribute("data-id_course");
                    let courseName = this.getAttribute("data-name");
                    let competences = JSON.parse(this.getAttribute("data-competences"));

                    document.getElementById("course_id").value = idCourse;
                    document.getElementById("edit_course_name").value = courseName;
                    let competenceContainer = document.getElementById("competenceContainer");
                    competenceContainer.innerHTML = ""; 
                    competences.forEach((competence, index) => {
                        let input = document.createElement("input");
                        input.type = "text";
                        input.className = "form-control mt-2";
                        input.name = `competences[]`; 
                        input.value = competence;
                        competenceContainer.appendChild(input);
                    });
                });
            });
        });
    </script>

@endsection