<?php
function tamano_noticias($texto){
    if (strlen($texto)>80) {
        return substr($texto,0,80);
    }
    return $texto;

}

?>

<!DOCTYPE html>
<html lang="es">

<head>

    <meta charset="UTF-8">
    <title>TecNM | Tecnológico Nacional de México</title>
    <meta name="author" content="TecNM">
    <meta name="description" content="Página del Tecnológico Nacional de México">
    <meta name="keywords"
        content="TecNM, Instituto Tecnológico Nacional de México, Tec, Tecnológico Nacional de México, Universidad" />
    <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1">
    <meta name="copyright" content="TecNM" />
    <meta name="robots" content="ALL">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <link rel="icon" href="img/favicon/tecnm.ico" />

    <!-- CSS Bootstrap -->
    <link rel="stylesheet" href="assets/bootstrap/css/bootstrap.min.css">

    <!-- Mis estilos -->
    <link rel="stylesheet" href="css/estilos.css">

    <!-- Iconos con Font Awesome -->
    <link rel="stylesheet" href="assets/files/main/css/fa-svg-with-js.css">
    <link rel="stylesheet" href="iconos/iconos.css">

    <!-- Se agrega para poder usar las fuentes en el css -->
    <link rel="stylesheet" href="assets/files/main/css/estilo-compresion.min.css">
    <link rel="stylesheet" href="assets/files/main/css/jssorStyle.css">

    <link href="css/noticarrusel/slick-theme.css" rel="stylesheet" />
    <link href="css/noticarrusel/slick.css" rel="stylesheet" />
    <!-- Estilo de los puntitos-->
    <link href="../css/peti_puntitos.css" rel="stylesheet">

    <!-- Estilo del carrucel -->
    <style>
        .sitios {
            width: 50%;
            margin: 0px auto;
        }

        .principal {
            width: 100%;
            /*height: 60vh;*/
            margin: 0px 0px;
            margin-bottom: 0px;
        }

        .slick-slide {
            margin: 0px 0px;
        }

        .anexo>.slick-prev:before {
            /* Flecha azul - lado izquierdo */
            background: url('img/flechas/izquierda_gris.png');
            background-size: contain;
            color: transparent;
        }

        .anexo>.slick-next:before {
            /* Flecha azul - lado derecho */
            background: url('img/flechas/derecha_gris.png');
            background-size: contain;
            color: transparent;
        }

        #noticias>.slick-prev:before {
            /* Flecha azul - lado izquierdo */
            background: url('img/flechas/izquierda_azul.png');
            background-size: contain;
            color: transparent;
        }

        #noticias>.slick-next:before {
            /* Flecha azul - lado derecho */
            background: url('img/flechas/derecha_azul.png');
            background-size: contain;
            color: transparent;
        }

        .slick-slide {
            transition: all ease-in-out .3s;
            opacity: 1;
        }

        .slick-active {
            opacity: 1;
        }

        .slick-current {
            opacity: 1;
        }


        .carousel-item {
            width: 100vw;
            height: 60vh;
            min-height: 10%;
            background-size: contain;
            background-position: center;
            background-repeat: no-repeat;
            background: round;
        }

        .card-columns .card {
            display: inline-block;
            width: 100%;
        }

        .card-img-top {
            width: 100%;
            height: 200px !important;
            border-top-left-radius: calc(0.25rem - 1px);
            border-top-right-radius: calc(0.25rem - 1px);
        }

        @media (max-width: 400px) {
            .carousel-item {
                height: 30vh;
            }
        }

        @media (max-width: 500px) {
            .carousel-item {
                height: 25vh;
            }
        }

    </style>

    <!-- Desface -->
    <script src="https://code.jquery.com/jquery-3.2.1.js"></script>
    <script>
        $(document).ready(function() {
            setTimeout(function() {
                $("#desface_noticias").fadeIn(1000);
            }, 50);
        });
        $(document).ready(function() {
            setTimeout(function() {
                $("#desface").fadeIn(1000);
            }, 500);
        });
        $(document).ready(function() {
            setTimeout(function() {
                $("#desface_footer").fadeIn(1000);
            }, 500);
        });
        $(document).ready(function() {
            setTimeout(function() {
                $("#desface_footer_gob").fadeIn(1000);
            }, 1000);
        });
    </script>
</head>

<body>
    <div id='loading' style='display: none;'>
        <div class='spinner'>
            <img src="http://poa.zitacuaro.tecnm.mx/docs/img/Petirrojos.jpg" class='imgPeti'
                style='width:70px; height:70px;' />
            <div class='bounce1'></div>
            <div class='bounce2'></div>
            <div class='bounce3'></div>
        </div>
    </div>
    @include('menu')

    <div id="contenedor">
        <!-- Slider -->
        <section class='one-time principal' style='margin-top:20px;'>
            @forelse ($carrucel  as $c )
                <div class='carousel-item active text-center'>
                    <!-- imagen-->
                    @if ($c->documento != '')
                        <?php $documentos = explode(',', $c->documento); ?>
                        @foreach ($documentos as $documento)
                            <a href='pdf/slider/{{ $documento }}' target='_blank'>
                                <!-- documentos-->
                                <div style='width:100%; height:100%'><img style='object-fit: contain;'
                                        src="img/slider/{{ $c->imagen }}" alt="{{ $c->texto_alternativo }}"
                                        srcset="" height="100%"></div>
                            </a>
                        @endforeach
                    @else
                        @if ($c->url != '')
                            <a href='{{ $c->url }}' target='_blank'>
                                <!-- url-->
                                <div style='width:100%; height:100%'><img style='object-fit: contain;'
                                        src="img/slider/{{ $c->imagen }}" alt="{{ $c->texto_alternativo }}"
                                        srcset="" height="100%"></div>
                            </a>
                        @else
                            <img style='object-fit: contain;' src="img/slider/{{ $c->imagen }}"
                                alt="{{ $c->texto_alternativo }}" srcset="" height="100%">
                        @endif
                    @endif
                </div>
            @empty

                <div class='carousel-item' style='background-image: url("img/slider/ENTORNO.jpg");'>

                    <a href='img/slider/ENTORNO.jpg' target='_blank'>

                        <div style='width:100%; height:100%'></div>

                    </a>

                </div>



            @endforelse

        </section>


        <!-- Contenidos (Síguenos, Sitios de Interés) -->
        <div id='desface' style='display: none;'>
            <div class='container m-0 m-auto mb-3'>

                <!-- Comunicación -->
                <div class='row w-100 justify-content-center bg-light pb-3 m-0'>
                    <section class='container bg-light px-5 mx-0 pb-3 m-auto' id='desface_noticias'
                        style='display: none;'>
                        <div class='row'>
                            <div class='col-12 display-2 text-center my-0 py-3'>
                                <a role='button' href='#'>
                                    Comunicación
                                </a>
                            </div>
                        </div>

                        <div class='center slider my-0' id='noticias'>
                            @forelse ($noticias as $n)
                                <div class='row justify-concent-center' style='posicion: relative;'>
                                    <div class='col-12'>
                                        <img class='img-fluid mx-auto w-100' style='height: 150px;object-fit: contain;'
                                            src='img/noticias/{{ $n->imagen }}' alt='No se pudo cargar la imagen' />
                                    </div>
                                    <div class='h6 col-12 py-2'>
                                        {{ tamano_noticias($n->titulo) }}
                                    </div>
                                    <div class='col-12' style='bottom: 0px;'>
                                        <button type="button" target="_blank" class="btn btn-outline-tecnm"
                                            onclick='consultar_noticia({{ $n->id }});'>LEER MÁS</button>
                                        <!-- <a href='#' target='_blank' >

                                            LEER MÁS

                                        </a>-->

                                    </div>
                                </div>
                            @empty
                            @endforelse

                        </div>

                    </section>
                </div>

                <br />

                <!-- Misión, Vicion y Objetivos -->
                <div class='row w-100 justify-content-center bg-light py-3 m-0'>
                    <p class='col-12 display-2 text-center'>
                        División de Estudios de Posgrado e Investigación
                    </p>
                    <div style='margin-left: 5%;margin-right: 5%;'>

                        <p class='col-12 '><strong>
                                Objetivos
                            </strong></p>
                        <p class='col-12 text-justify'>Coordinar la aplicación de planes y programas de
                            estudio de los posgrados que se imparten en el Instituto Tecnológico de Zitácuaro, así como
                            la atención a los estuadiantes de estos posgrados.</p>
                        <p class='col-12 '><strong>
                                Misión
                            </strong></p>
                        <p class="col-12 text-justify">
                            Ser la base para el fortalecimiento en los posgrados que se imparten en el Instituto
                            Tecnológico de Zitácuaro dando programas educativos de calidad, así como investigaciones
                            individuales y en colaboración que sean de gran impacto para las empresas regionales,
                            nacionales e internacionales. </p>
                        <p class='col-12'><strong>
                                Visión
                            </strong></p>
                        <p class="col-12 text-justify">La DEPI gestiona con el apoyo de las TICs solicitudes de
                            estudios de posgrado de manera oportuna y eficaz generadas en el seno de las coordinaciones
                            de posgrado, implementando planes y programas de estudio pertinentes e innovadores de
                            acuerdo a las necesidades de la región.</p>
                    </div>
                </div>
                <br />
                <!-- Organigrama -->
                <div class='row w-100 justify-content-center bg-light py-3 m-0'>
                    <p class='col-12 display-2 text-center'>
                        Organigrama
                    </p>
                    <iframe src="pdf/Organigrama.pdf" frameborder="0" width="100%" height="525"
                        style='margin-left: 5%;margin-right: 5%;'></iframe>
                </div>
                <br />
            </div>
            <!-- Síguenos -->
            <div class='row w-100 justify-content-center bg-light py-3 m-0'>

                <p class='col-12 display-2 text-center'>
                    Síguenos
                </p>

                <div class='media-container-row text-center'>

                    <!--Twitter-->
                    <span style="margin-top:15px;">
                        <a class="twitter-timeline" data-lang="es" data-width="350" data-height="525" data-dnt="true"
                            data-theme="light" href="https://twitter.com/TecNM_MX?ref_src=twsrc%5Etfw">itzitacuaro</a>
                    </span>
                    <!--Youtube-->
                    <iframe style="margin-top:15px;" width="350" height="525"
                        src="https://www.youtube.com/embed/g5t8XqXg8mw" frameborder="0"
                        allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
                        allowfullscreen></iframe>

                    <!--Facebook-->
                    <iframe style="margin-top:15px;" width="350" height="525"
                        src="https://www.facebook.com/plugins/page.php?href=https%3A%2F%2Fwww.facebook.com%2Fprofile.php%3Fid%3D100063571689050&tabs=timeline&width=340&height=500&small_header=false&adapt_container_width=true&hide_cover=false&show_facepile=true&appId"
                        style="border:none;overflow:hidden" scrolling="no" frameborder="0" allowTransparency="true"
                        allow="encrypted-media" allowfullscreen></iframe>

                </div>
            </div>

            <br />

            <!-- Sitios de Interés -->
            <div class='row w-100 justify-content-center bg-light pt-3 m-0'>



                <p class='display-2'>

                    Sitios de Interés

                </p>



            </div>

            <div class='row w-100 justify-content-center bg-light pt-3 m-0'>



                <div class='col-12 col-sm-6 col-md-4 col-lg-3 col-xl-2 text-center mb-3'>

                    <a href='https://www.conacyt.gob.mx/' target='_blank'>

                        <img loading='lazy' src='img/interes/CONACYT.png' alt='CONACYT' title='CONACYT'
                            class='img-fluid' />

                    </a>

                </div>



                <div class='col-12 col-sm-6 col-md-4 col-lg-3 col-xl-2 text-center mb-3'>

                    <a href='https://www.conricyt.mx/' target='_blank'>

                        <img loading='lazy' src='img/interes/CONRICYT.png' alt='CONRICYT' title='CONRICYT'
                            class='img-fluid' />

                    </a>

                </div>

                <div class='col-12 col-sm-6 col-md-4 col-lg-3 col-xl-2 text-center mb-3'>

                    <a href='http://universia.net.mx/' target='_blank'>

                        <img loading='lazy' src='img/interes/universia.png' alt='Universia' title='Universia'
                            class='img-fluid' />

                    </a>

                </div>

                <div class='col-12 col-sm-6 col-md-4 col-lg-3 col-xl-2 text-center mb-3'>

                    <a href='http://consultapublicamx.inai.org.mx:8080/vut-web/?idSujetoObigadoParametro=10009&amp;idEntidadParametro=33&amp;idSectorParametro=21'
                        target='_blank'>

                        <img loading='lazy' src='img/interes/PNT.png' alt='PNT' title='PNT'
                            class='img-fluid' />

                    </a>

                </div>

                <div class='col-12 col-sm-6 col-md-4 col-lg-3 col-xl-2 text-center mb-3'>

                    <a href='https://portal.itzitacuaro.edu.mx/pago/' target='_blank'>

                        <img loading='lazy' src='img/interes/ventanilla.png' alt='Ventanilla Virtual'
                            title='Ventanilla Virtual' class='img-fluid' />

                    </a>

                </div>


                
                <div class='col-12 col-sm-6 col-md-4 col-lg-3 col-xl-2 text-center mb-3'>

                    <a href='https://elibro.net/es/lc/zitacuaro/login_usuario/?next=/es/lc/zitacuaro/inicio/' target='_blank'>

                        <img loading='lazy' src='img/interes/elibro2.jpeg' alt='eLibro'
                            title='eLibro' class='img-fluid' />

                    </a>

                </div>

                <div class='col-12 col-sm-6 col-md-4 col-lg-3 col-xl-2 text-center mb-3'>

                    <a href='https://mexicox.gob.mx/' target='_blank'>

                        <img loading='lazy' src='img/interes/mexicoX2.jpeg' alt='MéxicoX'
                            title='MéxicoX' class='img-fluid' />

                    </a>

                </div>


            </div>




            <br />

        </div>
    </div>


    </div>
    <!-- Redes Sociales Lateral -->
    <div class="sticky-container">
        <ul class="sticky">
            <li>
                <img loading='lazy' src="img/redes_sociales/facebook.png" width="32" height="32" alt="facebook" />
                <p><a href="https://www.facebook.com/Divisi%C3%B3n-de-Estudios-de-Posgrado-e-Investigaci%C3%B3n-ITZ-103169674777420" target="_blank">Me
                        gusta en<br>Facebook</a></p>
            </li>
            <li>
                <img loading='lazy' src="img/redes_sociales/twitter.png" width="32" height="32" alt="Twitter" />
                <p><a href="https://twitter.com/TecNM_MX" target="_blank">Síguenos en<br>Twitter</a></p>
            </li>
            <li>
                <img loading='lazy' src="img/redes_sociales/youtube.png" width="32" height="32" alt="YouTube" />
                <p><a href="https://www.youtube.com/channel/UCN7UBgypHOFEl17AoXaETJw/featured" target="_blank">Suscríbase
                        en<br>YouTube</a>
                </p>
            </li>
        </ul>
    </div>

    @include('footer')
</body>

</html>
