<!DOCTYPE html>
<html lang="en">

<head>
    @include('include.meta-favicon')
    @include('include.plugins-styles')

    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>Programa de estudio</title>
    <link rel="icon" href="{{ asset('/images/institucion/logo-iestp.png') }} " type="image/x-icon">

    <!-- Template CSS -->
    <link href="https://fonts.googleapis.com/css2?family=Material+Icons" rel="stylesheet">
    <link href="{{ asset('/css/style.css') }}" rel="stylesheet">
    <link href="{{ asset('/css/estilos.css') }}" rel="stylesheet">
    <link href="{{ asset('/css/programas_estudios.css') }}" rel="stylesheet">
    <script src="{{ asset('functions.js') }}" type="module"></script>
    <style>
        .card:hover {
            transform: translateY(-10px);
            box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
        }

        .card-img-top {
            width: 70px;
            height: 20rem;
            object-fit: cover;
        }

        .card-body {
            text-align: center;
            background-color: #f7f7f7;
            border-top: 2px solid var(--primary-color);
            /* Color institucional */
            padding-top: 10px;
        }

        .carousel-control-prev,
        .carousel-control-next {
            width: 3.5rem !important;
        }

        .carousel-control-prev-icon,
        .carousel-control-next-icon {
            background-color: var(--primary-color);
            /* Color institucional */
            border-radius: 10%;
            width: 4rem !important;
            height: 4rem !important;
        }

        .cv {
            background: linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-color) 100%);
            border: none;
            color: white;
            padding: 15px 32px;
            text-align: center;
            text-decoration: none;
            display: inline-block;
            font-size: 16px;
            margin: 4px 2px;
            cursor: pointer;
            border-radius: 12px;
            transition: all 0.3s ease;
        }

        .button h4 {
            margin: 0;
            font-family: Arial, sans-serif;
            font-size: 18px;
        }

        .cv:hover {
            background-color: #45a049;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
            transform: scale(1.05);
        }

        .buttons-container justify-content-center {
            display: flex;
            gap: 10px;
        }

        iframe {
            width: 100%;
            height: 600px;
            display: none;
        }

        .title-animation {
            font-size: 2.5rem;
            /* Ajusta el tamaño según sea necesario */
            text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
            /* Sombra para dar profundidad */
            animation: slideIn 1s ease-in-out;
        }

        @keyframes slideIn {
            from {
                transform: translateY(-20px);
                opacity: 0;
            }

            to {
                transform: translateY(0);
                opacity: 1;
            }
        }

        .buttons-container .btn {
            border: 2px solid var(--primary-color) !important;
            background: #a4cafcd2 !important;
            color: var(--primary-color) !important;
        }

        #sistemas .card:hover {
            /* Quita cualquier estilo en hover */
            transition: none !important;
            animation: none !important;
            color: inherit !important;
            /* Opcional: Mantiene el color original */
            box-shadow: none;
            /* Quita otros estilos que se aplican en hover si es necesario */
        }

        .carousel-item img {
            width: 100%;
            height: 500px;
            object-fit: cover;
        }









        .cards-container {
            display: flex;
            flex-wrap: wrap;
            gap: 1rem;
        }

        .card {
            background: #f0f0f0;
            padding: 1rem;
            border: 1px solid #ddd;
            border-radius: 5px;
            width: calc(33.333% - 1rem);
            /* Tres columnas */
        }

        .hidden {
            display: none;
        }

        .card {
            max-width: 500px;
            margin: auto;
        }

        .card-header {
            text-align: center;
            background-color: #f8f9fa;
        }

        .card-body h3 {
            font-weight: 700;
            text-align: center;
            margin-bottom: 30px;
        }

        .form-check-label {
            font-size: 0.9rem;
        }

        .btn-dark {
            font-size: 1.1rem;
            font-weight: 700;
        }

        * {
            font-family: Poppins, sans-serif;
        }
    </style>
</head>

<body style="background: #F7F7FC">

    @include('navbar')



    @foreach ($programas as $programa)
        <div class="container-fluid">

            <div class="row ">
                <div class="col-xl-12 mx-0 px-0">
                    <div id="carouselExampleIndicators" class="carousel slide" data-bs-ride="carousel">
                        <div class="carousel-indicators">
                            <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="0"
                                class="active" aria-current="true" aria-label="Slide 1"></button>
                            <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="1"
                                aria-label="Slide 2"></button>
                            <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="2"
                                aria-label="Slide 3"></button>
                        </div>
                        <div class="carousel-inner">
                            <div class="carousel-item active">
                                <img class="d-block w-100 h-40"
                                    src="{{ url('programas_estudios/verImagenFondo/' . $programa->id) }}"
                                    alt="First slide">
                            </div>
                        </div>

                        <div class="row w-100 px-0 mx-0">
                            <div class="col-xl-12 col-lg-12 col-sm-12 col-12 py-2"
                                style="z-index: 1; background: #bec9ccd3">
                                <div class="row w-100 py-2">
                                    <div class="col-xl-1 mx-5"></div>
                                    <div class="col-xl-2 col-10" style="border-right: 3px solid white ">
                                        <p class="fs-4 text-center text-dark mb-0 pb-0" style="font-weight: 600">
                                            <i aria-hidden="true" class="far fa-calendar-alt"></i>
                                            Duración: {!! $programa->duracion !!}
                                        </p>
                                    </div>
                                    <div class="col-xl-2 col-10" style="border-right: 3px solid white ">
                                        <p class="fs-4 text-center text-dark mb-0 pb-0" style="font-weight: 600">
                                            <i aria-hidden="true" class="fas fa-user-tag"></i>
                                            <span class="elementor-icon-list-text">Modalidad:
                                                {!! $programa->modalidad !!}</span>
                                        </p>
                                    </div>
                                    <div class="col-xl-2  col-10" style="border-right: 3px solid white ">
                                        <p class="fs-4 text-center text-dark mb-0 pb-0" style="font-weight: 600">
                                            <i aria-hidden="true" class="fas fa-cloud-moon"></i>
                                            <span class="elementor-icon-list-text">Turno: {!! $programa->turno !!}</span>
                                        </p>
                                    </div>
                                    <div class="col-xl-3 col-10">
                                        <p class="fs-4 text-center  text-dark mb-0 pb-0" style="font-weight: 600">
                                            <i aria-hidden="true" class="far fa-hourglass"></i>
                                            <span class="elementor-icon-list-text">Horario:
                                                {!! $programa->horarios !!}</span>
                                        </p>
                                    </div>
                                    <div class="col-xl-2"></div>
                                </div>

                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="container-fluid pb-0 mt-0 px-0">
            <div class="section-title text-center"
                style="background: linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-color)  100%); padding: 30px;">
                <div class="row">
                    <div class="col-md-12">
                        <h4 class="text-uppercase mt-0 line-height-1" style="font-weight: 700; color: white;">PROGRAMA
                            DE ESTUDIO
                        </h4>
                        <h2 class="text-uppercase mt-0 line-height-1 display-6 title-animation"
                            style="font-weight: 700; color: white;">
                            {!! $programa->nombre !!}
                        </h2>
                    </div>
                </div>
            </div>
        </div>
    @endforeach
    <!-- <div class="col-xl-2">
                         <div class="row">
                             <div class="col-xl-12">
                                 <a href="#section-perfil">Perfil de egreso</a>
                             </div>
                             <div class="col-xl-12">
                                 <a href="#section-campo">Campo Laboral</a>
                             </div>
                             <div class="col-xl-12">
                                 <a href="#section-brochure">Brochure</a>
                             </div>
                             <div class="col-xl-12">
                                 <a href="#section-malla">Malla curricular</a>
                             </div>
                             <div class="col-xl-12">
                                 <a href="#section-coordinador">Coordinador general</a>
                             </div>
                             <div class="col-xl-12">
                                 <a href="#section-egresado">Egresados</a>
                             </div>
                         </div>
                     </div>-->


<style>
/* Animación 1: Fade In */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(50px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Animación 2: Zoom In */
@keyframes zoomIn {
    from {
        opacity: 0;
        transform: scale(0.5);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* Animación 3: Rotate In */
@keyframes rotateIn {
    from {
        opacity: 0;
        transform: rotate(-45deg);
    }
    to {
        opacity: 1;
        transform: rotate(0);
    }
}

/* Clases base */
.animated-box {
    opacity: 0;
    transition: opacity 0.5s ease-out, transform 0.5s ease-out;
}

/* Clases de animación */
.animate-fadeIn {
    animation: fadeIn 1s ease-out forwards;
}

.animate-zoomIn {
    animation: zoomIn 1s ease-out forwards;
}

.animate-rotateIn {
    animation: rotateIn 1s ease-out forwards;
}

</style>

<script>
document.addEventListener("DOMContentLoaded", function () {
    const animations = ['animate-fadeIn', 'animate-zoomIn', 'animate-rotateIn']; // Lista de animaciones

    const observer = new IntersectionObserver(
        (entries, observer) => {
            entries.forEach(entry => {
                if (entry.isIntersecting) {
                    const randomAnimation = animations[Math.floor(Math.random() * animations.length)]; // Selección aleatoria
                    entry.target.classList.add(randomAnimation);
                    observer.unobserve(entry.target); // Deja de observar después de animar
                }
            });
        },
        { threshold: 0.2 } // Inicia cuando el elemento sea 20% visible
    );

    // Seleccionar elementos para observar
    const elements = document.querySelectorAll('.animated-box');
    elements.forEach(el => observer.observe(el));
});

</script>

    <div class="container-fluid">
        <div class="row my-4">
            <div class="col-xl-2"></div>
            <div class="col-xl-8">
                <div class="row m-3">

                    <div class="col-xl-8">
                        <div class="row">
                            <div id="section-perfil" class="mt-2 mb-5 animated-box">
                                <h1 class="text-black font-weight-bold mb-3" style="font-weight: 800">¿Cuál será tu
                                    perfil del egresado?</h1>
                                <div class="row bg-white rounded p-2 pt-3 my-1">

                                    <p class="text-black">
                                        @foreach ($perfiles as $perfil)
                                            {!! $perfil->descripcion !!}
                                        @endforeach
                                    </p>
                                </div>
                            </div>
                            <style>
                                .background-div {
                                    height: 200px;
                                    background-size: cover;
                                    background-position: center;
                                    background-repeat: no-repeat;
                                    position: relative;
                                    overflow: hidden;
                                    /* Oculta contenido que se salga del div */
                                    transition: transform 0.3s, filter 0.3s;
                                    /* Transición suave */
                                }

                                .background-div p {
                                    position: absolute;
                                    bottom: 0;
                                    left: 0;
                                    right: 0;
                                    background: rgba(0, 0, 0, 0.5);
                                    /* Fondo semi-transparente para el texto */
                                    color: white;
                                    margin: 0;
                                    padding: 10px;
                                    text-align: center;
                                    transition: opacity 0.3s;
                                    /* Transición suave para desaparecer */
                                }

                                .background-div:hover {
                                    transform: scale(1.1);
                                    /* Aumenta ligeramente el tamaño de la imagen */
                                    filter: brightness(1.2);
                                    /* Incrementa el brillo */
                                }

                                .background-div:hover p {
                                    opacity: 0;
                                    /* Hace que el texto desaparezca */
                                }

                                .pdf-container {
                                    width: 100%;
                                    height: 80vh;
                                    border: 1px solid #ccc;
                                    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
                                }

                                /* Elementos ocultos inicialmente */
                                .hidden {
                                    opacity: 0;
                                    transition: opacity 0.5s ease-in-out;
                                }

                                /* Los items que deben ser visibles siempre (por defecto) */
                                .campo-item {
                                    opacity: 0;
                                    transition: opacity 0.5s ease-in-out;
                                }

                                /* Clase visible se aplica cuando un item debe aparecer */
                                .campo-item.visible {
                                    opacity: 1;
                                }

                                /* Aparece al cargar la página para los primeros 3 items */
                                .campo-item.initial-visible {
                                    opacity: 1;
                                    transition: opacity 1s ease-in-out;
                                    /* Transición más larga para la carga inicial */
                                }

                                .btn-custom {
                                    background-color: black;
                                    color: white;
                                    border: 2px solid white;
                                    padding: 10px 20px;
                                    font-size: 16px;
                                    font-weight: bold;
                                    text-transform: uppercase;
                                    display: inline-flex;
                                    align-items: center;
                                    justify-content: center;
                                    border-radius: 5px;
                                    transition: background-color 0.3s ease, color 0.3s ease;
                                }

                                .btn-custom .arrow {
                                    margin-left: 8px;
                                    font-size: 18px;
                                    transition: transform 0.3s ease;
                                }

                                /* Efecto al pasar el ratón sobre el botón */
                                .btn-custom:hover {
                                    background-color: white;
                                    color: black;
                                }

                                /* Estilo para el botón invertido */
                                .btn-custom-inverse {
                                    background-color: white;
                                    color: black;
                                    border: 2px solid black;
                                    padding: 10px 20px;
                                    font-size: 16px;
                                    font-weight: bold;
                                    text-transform: uppercase;
                                    display: inline-flex;
                                    align-items: center;
                                    justify-content: center;
                                    border-radius: 5px;
                                    transition: background-color 0.3s ease, color 0.3s ease;
                                }

                                .btn-custom-inverse .arrow {
                                    margin-left: 8px;
                                    font-size: 18px;
                                    transition: transform 0.3s ease;
                                }

                                /* Efecto al pasar el ratón sobre el botón invertido */
                                .btn-custom-inverse:hover {
                                    background-color: black;
                                    color: white;
                                }

                                /* Efecto de la flecha en el hover */
                                .btn-custom:hover .arrow,
                                .btn-custom-inverse:hover .arrow {
                                    transform: translateX(5px);
                                }
                            </style>

                            <div id="section-campo" class="mt-2 mb-5 animated-box">
                                <h1 class="text-black font-weight-bold mb-3" style="font-weight: 800">¿Dónde te
                                    especializarás?</h1>
                                <div class="row">
                                    @foreach ($campos as $index => $campo)
                                        <div
                                            class="col-xl-4 col-lg-6 mb-4 campo-item {{ $index >= 3 ? 'hidden' : 'initial-visible' }}">
                                            <div class="background-div"
                                                style="background-image: url('{{ asset('programas_estudios/ver_imagenCampoLaboral/' . $campo->id) }}')">
                                                <p>{!! $campo->texto !!}</p>
                                            </div>
                                        </div>
                                    @endforeach
                                </div>
                                <!-- Botón para ver más -->
                                <button id="verMasBtn" class="btn btn-custom-inverse mt-3 ">Ver más<span
                                        class="arrow2 mx-1">▶</span></button>

                                <!--<button id="verMasBtn" class="btn btn-primary mt-3">Ver más</button> -->
                            </div>



                            <script>
                                document.addEventListener("DOMContentLoaded", function() {
                                    // Aplicamos la transición de opacidad a los primeros 3 elementos al cargar la página
                                    const firstThreeItems = document.querySelectorAll('.campo-item.initial-visible');

                                    firstThreeItems.forEach((item) => {
                                        // Agregar la clase visible con un pequeño retraso para que la transición funcione
                                        setTimeout(() => {
                                            item.classList.add('visible');
                                        }, 10); // Retraso para asegurar que la transición ocurra correctamente
                                    });
                                });

                                document.getElementById("verMasBtn").addEventListener("click", function() {
                                    // Seleccionar los items ocultos
                                    const hiddenItems = document.querySelectorAll(".campo-item.hidden");

                                    // Mostrar los primeros 3 items ocultos con la animación de aparición
                                    hiddenItems.forEach((item, index) => {
                                        if (index < 3) {
                                            // Eliminar la clase 'hidden' y agregar 'visible' para la transición
                                            item.classList.remove("hidden");
                                            setTimeout(() => {
                                                item.classList.add("visible");
                                            }, 10); // Aseguramos que la animación se ejecute con un pequeño retraso
                                        }
                                    });

                                    // Si ya no quedan items ocultos, ocultar el botón
                                    if (document.querySelectorAll(".campo-item.hidden").length === 0) {
                                        this.style.display = "none";
                                    }
                                });
                            </script>

                            <div id="section-coordinador" class="mt-2 mb-5 animated-box">
                                <h1 class="text-black font-weight-bold  mb-3" style="font-weight: 800">¿Qué opina
                                    nuestro Coordinador Académico?</h1>
                                @foreach ($coordinadores as $coordinador)
                                    <div class="row">
                                        <div class="col-xl-6">
                                            <p class="text-justify text-muted text-black"
                                                style="line-height: 1.8; font-size: 0.9rem;">
                                                Estimados: Director del IESTP “Ilave”, señores docentes, personal jerárquico, 
                                                personal administrativo, padres de familia y jóvenes estudiantes de nuestra querida 
                                                provincia de El Collao – Ilave.
                                                <br><br>
                                                Reciban un cordial y afectuoso saludo. Me dirijo a ustedes como coordinador del Programa 
                                                de Estudios de Arquitectura de Plataformas y Servicios de Tecnologías de la Información para expresar 
                                                la importancia que tiene la tecnología para el desarrollo de nuestra localidad, la región altiplánica y el país entero. 
                                                En nuestra institución formamos profesionales técnicos comprometidos con la innovación digital, preparados para afrontar 
                                                los desafíos del mundo moderno en redes, plataformas, desarrollo de software y soporte tecnológico.
                                                <br><br>
                                                Invito a los jóvenes estudiantes del quinto año de secundaria a decidir con visión de futuro y formar parte de nuestra 
                                                familia tecnológica del Programa de Estudios de Arquitectura de Plataformas y Servicios de Tecnologías de la 
                                                Información del IESTP Ilave. ¡Los esperamos con entusiasmo para construir juntos el futuro digital de nuestra tierra!
                                            </p>
                                        </div>
                                        <div class="col-xl-6">
                                            <div class="card w-100 rounded">
                                                <div class="card-head" style="border: 1px solid white">
                                                    <img src="{{ url('programas_estudios/verCoordinadorFoto/' . $coordinador->id) }}"
                                                        class="w-100" alt="">
                                                </div>
                                                <div class="card-body bg-white">
                                                    <h3 class="text-center text-muted text-black text-uppercase mb-0"
                                                        style="line-height: 1.8;">{!! $coordinador->nombre !!}</h3>
                                                    <h6 class="text-center text-muted text-black text-capitalize mt-0"
                                                        style="line-height: 1.8;">{!! $coordinador->cargo !!}</h6>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                @endforeach
                            </div>
                            <div id="section-egresados" class="mt-2 mb-5 animated-box">
                                <h1 class="text-black font-weight-bold mb-3" style="font-weight: 800">
                                    Conoce a nuestros profesionales del programa
                                </h1>

                                @if ($egresados->isEmpty())
                                    <p>No se encontraron egresados para este programa de estudio.</p>
                                @else
                                    <!-- Aquí va el código del carrusel -->


                                    <div id="carouselExample" class="carousel slide" data-bs-ride="carousel">
                                        <!-- Indicadores -->
                                        <div class="carousel-indicators">
                                            @foreach ($egresados->chunk(2) as $index => $chunk)
                                                <button type="button" data-bs-target="#carouselExample"
                                                    data-bs-slide-to="{{ $index }}"
                                                    class="{{ $index === 0 ? 'active' : '' }}"
                                                    aria-current="{{ $index === 0 ? 'true' : '' }}"
                                                    aria-label="Slide {{ $index + 1 }}">
                                                </button>
                                            @endforeach
                                        </div>

                                        <!-- Contenido del Carrusel -->
                                        <div class="carousel-inner">
                                            @foreach ($egresados->chunk(2) as $chunk)
                                                <div class="carousel-item {{ $loop->first ? 'active' : '' }}">
                                                    <div class="row">
                                                        @foreach ($chunk as $egresado)
                                                            <div class="col-xl-6">
                                                                <div class="card w-100">
                                                                    <img src="{{ url('programas_estudios/verEgresadoFoto/' . $egresado->id) }}"
                                                                        class="card-img-top"
                                                                        alt="Imagen de {{ $egresado->nombre }}">
                                                                    <div class="card-body">
                                                                        <h5 class="card-title">{!! $egresado->nombre !!}
                                                                        </h5>
                                                                        <p class="card-text">{!! $egresado->descripcion !!}
                                                                        </p>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        @endforeach
                                                    </div>
                                                </div>
                                            @endforeach
                                        </div>
                                    </div>
                                @endif
                            </div>



                        </div>
                    </div>
                    <div class="col-xl-4 mt-2 mb-5 animated-box">
                        <div class="row bg-white mx-1 my-2 py-2" style="box-shadow: 0 2px 2px #5a070479; border-radius: 8px;">
                            <div class="col-xl-3 d-flex justify-content-center align-items-center">
                                <img src="https://cdn-icons-png.flaticon.com/512/559/559384.png" alt="icono" class="w-100">
                            </div>
                            <div class="col-xl-9 d-flex align-items-center">
                                <div>
                                    <p class="mb-0 text-dark  " >Inicio de clases</p>
                                    <p class="bold mb-0 text-dark " style="font-weight: 600; font-size: 16px">06 de noviembre</p>
                                </div>
                            </div>
                        </div>

                        <div class="row"
                            style="  margin: 0;  padding: 2px 0 0 12px;  position: -webkit-sticky;  position: sticky;  top: 7rem">
                            <h3>Inscríbete aquí</h3>
                            <form id="formModal" novalidate>
                                @csrf
                                <div class="mb-2">
                                    <input type="text" class="form-control px-3 py-1" id="nombre" name="nombre"
                                        placeholder="Nombre" required
                                        style=" background: #eff0f6; color: #6e7191; border: none; border-radius: 8px;">
                                        @include('include.div.invalid-feedback')
                                </div>
                                <div class="mb-2">
                                    <input type="text" class="form-control px-3 py-1" id="apellidoPaterno" name="apellido_paterno"
                                        placeholder="Apellido paterno" required
                                        style=" background: #eff0f6; color: #6e7191; border: none; border-radius: 8px;">
                                        @include('include.div.invalid-feedback')
                                </div>
                                <div class="mb-2">
                                    <input type="text" class="form-control px-3 py-1" id="apellidoMaterno" name="apellido_materno"
                                        placeholder="Apellido materno" required
                                        style=" background: #eff0f6; color: #6e7191; border: none; border-radius: 8px;">
                                        @include('include.div.invalid-feedback')
                                </div>
                                <div class="mb-2">
                                    <input type="text" class="form-control px-3 py-1" id="dni" name="dni"
                                        placeholder="DNI" required
                                        style=" background: #eff0f6; color: #6e7191; border: none; border-radius: 8px;">
                                        @include('include.div.invalid-feedback')
                                </div>
                                <div class="mb-2">
                                    <input type="tel" class="form-control px-3 py-1" id="telefono" name="telefono"
                                        placeholder="Teléfono celular" required
                                        style=" background: #eff0f6; color: #6e7191; border: none; border-radius: 8px;">
                                        @include('include.div.invalid-feedback')
                                </div>
                                <div class="mb-2">
                                    <input type="email" class="form-control px-3 py-1" id="correo" name="correo"
                                        placeholder="Correo electrónico" required
                                        style=" background: #eff0f6; color: #6e7191; border: none; border-radius: 8px;">
                                        @include('include.div.invalid-feedback')
                                </div>
                                <div class="mb-2">
                                    <select class="w-100" id="sede" name="sede"
                                        style="background: #eff0f6; color: #6e7191; border: none; border-radius: 8px;">
                                    </select>
                                    @include('include.div.invalid-feedback')
                                </div>

                                <div class="form-check mb-0 pb-0">
                                    <input class="form-check-input" type="checkbox" id="politica" name="politica" required>
                                    @include('include.div.invalid-feedback')
                                    <label class="form-check-label mb-0 pb-0" for="politica">
                                        <p style="font-size: 13px">
                                            Declaro conocer la <a href="#" class="text-decoration-none">política
                                                de privacidad</a> del instituto y doy mi consentimiento para el
                                            tratamiento de estos.
                                        </p>
                                    </label>
                                </div>
                                <div class="form-check">
                                    <input class="form-check-input" type="checkbox" id="contactoAutorizado" name="contacto_autorizado" required>
                                    @include('include.div.invalid-feedback')
                                    <label class="form-check-label" for="contactoAutorizado">
                                        <p style="font-size: 13px">
                                            Autorizo al instituto a contactarme y enviarme información de los
                                            servicios educativos que ofrecen, eventos, promociones.
                                        </p>
                                    </label>
                                </div>
                                <button id="btnSendEmail" type="button" class="btn btn-dark w-100">Inscribirme</button>
                            </form>

                        </div>



                    </div>
                </div>
            </div>
            <div class="col-xl-2"></div>
        </div>

        <div class="row mt-2 mb-5 py-4 animated-box" style="background: #1652a1">
            <div class="col-xl-2"></div>
            <div class="col-xl-8">
                <div class="row m-3">
                    <div id="section-brochure" class="my-3">
                        <h1 class="text-white font-weight-bold mb-3" style="font-weight: 800">Conoce el brochure de nuestro
                            programa</h1>
                        <div id="myCarousel" class="carousel slide" data-bs-wrap="false" data-bs-ride="carousel">
                            <div class="carousel-inner">
                                <div class="carousel-item active">
                                    <!-- Primera tabla -->
                                    <table class="table table-bordered ">
                                        <thead class=""
                                            style="background: linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-color)  100%);">
                                            <tr>
                                                <th class="text-center text-white" colspan="4">MP 01: Soporte y
                                                    control de recursos en sistemas de tecnologías de la información
                                                </th>
                                            </tr>
                                            <tr>
                                                <th class="text-center text-white">SEMESTRE</th>
                                                <th class="text-center text-white">CURSO</th>
                                                <th class="text-center text-white">CREDITOS</th>
                                                <th class="text-center text-white">HORAS</th>
                                            </tr>
                                        </thead>
                                        <tbody class="bg-white">
                                            <tr>
                                                <th rowspan="6" class="text-center align-middle">
                                                    <h1>I</h1>
                                                </th>
                                                <td>Fundamentos y diseño de redes de comunicación</td>
                                                <td>--</td>
                                                <td>--</td>
                                            </tr>
                                            <tr>
                                                <td>Mantenimiento preventivo y correctivo de equipos informáticos</td>
                                                <td>--</td>
                                                <td>--</td>
                                            </tr>
                                            <tr>
                                                <td>Sistemas operativos</td>
                                                <td>--</td>
                                                <td>--</td>
                                            </tr>
                                            <tr>
                                                <td>Administración de centro de procesamiento de datos</td>
                                                <td>--</td>
                                                <td>--</td>
                                            </tr>
                                            <tr>
                                                <td>Comunicación oral</td>
                                                <td>--</td>
                                                <td>--</td>
                                            </tr>
                                            <tr>
                                                <td>Aplicaciones en internet</td>
                                                <td>--</td>
                                                <td>--</td>
                                            </tr>
                                            <tr>
                                                <th rowspan="6" class="text-center align-middle">
                                                    <h1>II</h1>
                                                </th>
                                                <td>Instalación y configuración de redes de datos</td>
                                                <td>--</td>
                                                <td>--</td>
                                            </tr>
                                            <tr>
                                                <td>Seguridad y optimización de redes de comunicación</td>
                                                <td>--</td>
                                                <td>--</td>
                                            </tr>
                                            <tr>
                                                <td>Reparación de equipos de cómputo</td>
                                                <td>--</td>
                                                <td>--</td>
                                            </tr>
                                            <tr>
                                                <td>Administración de servidores de red</td>
                                                <td>--</td>
                                                <td>--</td>
                                            </tr>
                                            <tr>
                                                <td>Interpretación y Producción de Textos</td>
                                                <td>--</td>
                                                <td>--</td>
                                            </tr>
                                            <tr>
                                                <td>Ofimática</td>
                                                <td>--</td>
                                                <td>--</td>
                                            </tr>
                                        </tbody>
                                    </table>
                                </div>

                                <div class="carousel-item">
                                    <!-- Segunda tabla -->
                                    <div class="table-responsive">
                                        <table class="table table-bordered table-responsive-sm">
                                            <thead class=""
                                                style="background: linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-color) 100%);">
                                                <tr>
                                                    <th class="text-center text-white" colspan="4">MP 02:
                                                        Asistencia en la producción de los sistemas TI</th>
                                                </tr>
                                                <tr>
                                                    <th class="text-center text-white">SEMESTRE</th>
                                                    <th class="text-center text-white">CURSO</th>
                                                    <th class="text-center text-white">CREDITOS</th>
                                                    <th class="text-center text-white">HORAS</th>
                                                </tr>
                                            </thead>
                                            <tbody class="bg-white">
                                                <tr>
                                                    <th rowspan="7" class="text-center align-middle">
                                                        <h1>III</h1>
                                                    </th>
                                                    <td>Fundamentos de programación</td>
                                                    <td>--</td>
                                                    <td>--</td>
                                                </tr>
                                                <tr>
                                                    <td>Organización de recursos TI</td>
                                                    <td>--</td>
                                                    <td>--</td>
                                                </tr>
                                                <tr>
                                                    <td>Análisis y diseño de sistemas</td>
                                                    <td>--</td>
                                                    <td>--</td>
                                                </tr>
                                                <tr>
                                                    <td>Algoritmos y programación de computadoras</td>
                                                    <td>--</td>
                                                    <td>--</td>
                                                </tr>
                                                <tr>
                                                    <td>Base de datos</td>
                                                    <td>--</td>
                                                    <td>--</td>
                                                </tr>
                                                <tr>
                                                    <td>Inglés para comunicación oral</td>
                                                    <td>--</td>
                                                    <td>--</td>
                                                </tr>
                                                <tr>
                                                    <td>Comportamiento ético</td>
                                                    <td>--</td>
                                                    <td>--</td>
                                                </tr>
                                                <tr>
                                                    <th rowspan="6" class="text-center align-middle">
                                                        <h1>IV</h1>
                                                    </th>
                                                    <td>Fundamentos de desarrollo web</td>
                                                    <td>--</td>
                                                    <td>--</td>
                                                </tr>
                                                <tr>
                                                    <td>Administración de base de datos</td>
                                                    <td>--</td>
                                                    <td>--</td>
                                                </tr>
                                                <tr>
                                                    <td>Desarrollo de aplicaciones</td>
                                                    <td>--</td>
                                                    <td>--</td>
                                                </tr>
                                                <tr>
                                                    <td>Metodologías de desarrollo de software</td>
                                                    <td>--</td>
                                                    <td>--</td>
                                                </tr>
                                                <tr>
                                                    <td>Comprensión y redacción en inglés</td>
                                                    <td>--</td>
                                                    <td>--</td>
                                                </tr>
                                                <tr>
                                                    <td>Solución de problemas</td>
                                                    <td>--</td>
                                                    <td>--</td>
                                                </tr>
                                            </tbody>
                                        </table>
                                    </div>
                                </div>

                                <div class="carousel-item">
                                    <!-- Tercera tabla -->
                                    <div class="table-responsive">
                                        <table class="table table-bordered table-responsive-sm">
                                            <thead
                                                style="background:linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-color) 100%);">
                                                <tr>
                                                    <th class="text-center text-white" colspan="4">MP 03: Diseño de
                                                        infraestructura de plataformas de TI</th>
                                                </tr>
                                                <tr>
                                                    <th class="text-center text-white">SEMESTRE</th>
                                                    <th class="text-center text-white">CURSO</th>
                                                    <th class="text-center text-white">CREDITOS</th>
                                                    <th class="text-center text-white">HORAS</th>
                                                </tr>
                                            </thead>
                                            <tbody class="bg-white">
                                                <tr>
                                                    <th rowspan="5" class="text-center align-middle">
                                                        <h1>V</h1>
                                                    </th>
                                                    <td>Herramientas de diseño gráfico</td>
                                                    <td>--</td>
                                                    <td>--</td>
                                                </tr>
                                                <tr>
                                                    <td>Arquitectura de la información</td>
                                                    <td>--</td>
                                                    <td>--</td>
                                                </tr>
                                                <tr>
                                                    <td>Desarrollo de aplicaciones web</td>
                                                    <td>--</td>
                                                    <td>--</td>
                                                </tr>
                                                <tr>
                                                    <td>Desarrollo de recursos TIC's</td>
                                                    <td>--</td>
                                                    <td>--</td>
                                                </tr>
                                                <tr>
                                                    <td>Aplicaciones con webservices</td>
                                                    <td>--</td>
                                                    <td>--</td>
                                                </tr>
                                                <tr>
                                                    <th rowspan="5" class="text-center align-middle">
                                                        <h1>VI</h1>
                                                    </th>
                                                    <td>Desarrollo multimedia</td>
                                                    <td>--</td>
                                                    <td>--</td>
                                                </tr>
                                                <tr>
                                                    <td>Arquitectura y programación web</td>
                                                    <td>--</td>
                                                    <td>--</td>
                                                </tr>
                                                <tr>
                                                    <td>Comercio electrónico</td>
                                                    <td>--</td>
                                                    <td>--</td>
                                                </tr>
                                                <tr>
                                                    <td>Aplicaciones móviles</td>
                                                    <td>--</td>
                                                    <td>--</td>
                                                </tr>
                                                <tr>
                                                    <td>Seguridad informática</td>
                                                    <td>--</td>
                                                    <td>--</td>
                                                </tr>
                                            </tbody>
                                        </table>
                                    </div>
                                </div>
                            </div>

                            <!-- Controles de navegación fuera del carrusel -->
                            <button class="carousel-control-prev" type="button" data-bs-target="#myCarousel"
                                data-bs-slide="prev">
                                <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                                <span class="visually-hidden">Previous</span>
                            </button>
                            <button class="carousel-control-next" type="button" data-bs-target="#myCarousel"
                                data-bs-slide="next">
                                <span class="carousel-control-next-icon" aria-hidden="true"></span>
                                <span class="visually-hidden">Next</span>
                            </button>
                        </div>

                        <style>
                            .carousel-inner {
                                overflow: hidden;
                                /* Asegúrate de que no haya desbordamientos visibles */
                            }

                            /* Suaviza la transición entre las tablas */
                            .carousel-item {
                                transition: opacity 0.5s ease-in-out, transform 0.5s ease-in-out;
                            }

                            .carousel-control-prev,
                            .carousel-control-next {
                                position: absolute;
                                top: 50%;
                                transform: translateY(-50%);
                                z-index: 5;
                            }

                            .carousel-control-prev {
                                left: -4rem;
                                /* Para mover la flecha hacia la izquierda */
                            }

                            .carousel-control-next {
                                right: -4rem;
                                /* Para mover la flecha hacia la derecha */
                            }
                        </style>

                        <div class="row justify-content-center">
                            <button class="btn btn-primary w-auto mx-2">DESCARGAR BROCHURE</button>
                            <button class="btn btn-primary w-auto mx-2">DESCARGAR MALLA CURRICULAR</button>
                        </div>

                    </div>
                </div>

            </div>
            <div class="col-xl-2"></div>
        </div>



        <div class="row mt-2 mb-5 animated-box">
            <div class="col-xl-2"></div>
            <div class="col-xl-8">
                <h1 class="text-black font-weight-bold mb-3" style="font-weight: 800">
                    CONOCE NUESTRA GALERÍA DE IMÁGENES
                </h1>

                <div class="row mt-4">
                    <div class="col-xl-4">
                        <img class="w-100 mb-3" style="height: 20rem ; object-fit: cover"
                            src="https://iestpnasca.dreica.site/wp-content/uploads/2024/09/Captura-de-pantalla-2024-09-27-110053-1024x645.png"
                            alt="">
                    </div>
                    <div class="col-xl-4">
                        <img class="w-100 mb-3" style="height: 20rem; object-fit: cover"
                            src="https://iestpnasca.dreica.site/wp-content/uploads/2024/09/Captura-de-pantalla-2024-09-27-110042-1024x609.png"
                            alt="">
                    </div>
                    <div class="col-xl-4">
                        <img class="w-100 mb-3" style="height: 20rem; object-fit: cover"
                            src="https://iestpnasca.dreica.site/wp-content/uploads/2024/09/Captura-de-pantalla-2024-09-27-110147.png"
                            alt="">
                    </div>
                    <div class="col-xl-4">
                        <img class="w-100 mb-3" style="height: 20rem; object-fit: cover"
                            src="https://iestpnasca.dreica.site/wp-content/uploads/2024/09/Captura-de-pantalla-2024-09-27-110019-1024x563.png"
                            alt="">
                    </div>
                    <div class="col-xl-4">
                        <img class="w-100 mb-3" style="height: 20rem; object-fit: cover"
                            src="https://iestpnasca.dreica.site/wp-content/uploads/2024/09/Captura-de-pantalla-2024-09-27-105951-1024x646.png"
                            alt="">
                    </div>
                    <div class="col-xl-4">
                        <img class="w-100 mb-3" style="height: 20rem; object-fit: cover"
                            src="https://iestpnasca.dreica.site/wp-content/uploads/2024/09/Captura-de-pantalla-2024-09-27-110157.png"
                            alt="">
                    </div>

                </div>
            </div>

            <div class="col-xl-2"></div>
        </div>
    </div>

    </div>

    @include('footer')
</body>
@include('include.plugins-scripts')

</html>
<script src="{{ asset('js_Ajax_admin/programa_form.js') }}" type="module"></script>

<script>
    function verDocumentoDatos(idDoc) {
        // Generar la URL del PDF
        var pdfUrl = `/industrias-alimentarias/verDocumentoDatos/${idDoc}`;

        // Establecer el URL en el iframe dentro del modal
        document.getElementById('pdfViewer').src = pdfUrl;

        // Abrir el modal
        var modal = new bootstrap.Modal(document.getElementById('pdfModal'));
        modal.show();
    }



    document.addEventListener('DOMContentLoaded', function() {
        showSection('sistemas');
    });

    function showSection(sectionId) {
        var sections = document.querySelectorAll('.section');
        var activeSection = null;

        sections.forEach(function(section) {
            if (section.classList.contains('show')) {
                section.classList.remove('active');
                section.classList.add('inactive');

                section.addEventListener('animationend', function() {
                    section.classList.remove('show');
                    section.classList.remove('inactive');
                }, {
                    once: true
                });

                activeSection = section.id;
            }
        });

        if (sectionId === activeSection) {
            sectionId = 'sistemas';
        }

        var selectedSection = document.getElementById(sectionId);
        selectedSection.classList.add('show');
        selectedSection.classList.add('active');

        // Ajustar la altura del contenedor después de un pequeño retraso
        var wrapper = document.querySelector('.section-wrapper');
        setTimeout(function() {
            wrapper.style.height = selectedSection.scrollHeight + 'px';
        }, 100); // Ajustar la altura después de 100ms para permitir que el contenido cargue completamente
    }

    document.addEventListener('DOMContentLoaded', function() {
        var firstSection = document.querySelector('.section.show');
        var wrapper = document.querySelector('.section-wrapper');
        if (firstSection) {
            setTimeout(function() {
                wrapper.style.height = firstSection.scrollHeight + 'px';
            }, 100);
        }
    }); <
    />

    <
    script >
        document.getElementById("verMasBtn").addEventListener("click", function() {
            // Seleccionar los cards ocultos
            const hiddenCards = document.querySelectorAll(".card.hidden");

            // Mostrar los primeros 3 cards ocultos
            hiddenCards.forEach((card, index) => {
                if (index < 3) {
                    card.classList.remove("hidden");
                }
            });

            // Si ya no quedan cards ocultos, ocultar el botón
            if (document.querySelectorAll(".card.hidden").length === 0) {
                this.style.display = "none";
            }
        });
</script>
