@extends("frontend.includes.layout")

@section('links')
    @vite('resources/scss/offert.scss')
    <link async rel="stylesheet" href="/vendor/owlcarousel/assets/owl.carousel.min.css">
    <link async rel="stylesheet" href="/vendor/owlcarousel/assets/owl.theme.default.min.css">
    <!--[if lte IE 8]>
                                                                                                                <script charset="utf-8" type="text/javascript" src="//js.hsforms.net/forms/v2-legacy.js"></script>
                                                                                                            <![endif]-->
    <script charset="utf-8" type="text/javascript" src="//js.hsforms.net/forms/v2.js"></script>

    <link async type="text/css" rel="stylesheet" href="/vendor/lightbox2/css/lightbox.min.css" />


@endsection

@section('scripts')
    <script defer src="/vendor/owlcarousel/owl.carousel.js"></script>
    <script defer src="/vendor/owlcarousel/owl.carousel.min.js"></script>
    <script defer src="/vendor/lightbox2/js/lightbox.min.js"></script>

    <script>
        $(document).ready(function () {

            $(".owl-carousel-brands").owlCarousel({
                loop: true,
                margin: 10,
                nav: true,
                autoplay: true,
                responsiveClass: true,
                lazyLoad: true,
                controls: true,
                responsive: {
                    0: {
                        items: 2
                    },
                    600: {
                        items: 4
                    },
                    1000: {
                        items: 6
                    },
                    1400: {
                        items: 6
                    }
                }

            });

            $(".owl-carousel-plan").owlCarousel({
                loop: true,
                margin: 10,
                nav: true,
                autoplay: true,
                responsiveClass: true,
                controls: true,
                responsive: {
                    0: {
                        items: 1
                    },
                    600: {
                        items: 1
                    },
                    1000: {
                        items: 2
                    },
                    1400: {
                        items: 3
                    }
                }

            });

            $(".owl-carousel-instalation").owlCarousel({
                loop: true,
                margin: 10,
                nav: true,
                autoplay: true,
                responsiveClass: true,
                controls: true,
                responsive: {
                    0: {
                        items: 1
                    },
                    600: {
                        items: 1
                    },
                    1000: {
                        items: 2
                    },
                    1400: {
                        items: 3
                    }
                }

            });


            // Gets the video src from the data-src on each button
            let $videoSrc;
            $('.video-btn').click(function () {
                $videoSrc = $(this).data("src");
            });
            // when the modal is opened autoplay it
            $('#modalVideo').on('shown.bs.modal', function (e) {
                // set the video src to autoplay and not to show related video. Youtube related video is like a box of chocolates... you never know what you're gonna get
                $("#video").attr('src', $videoSrc + "?autoplay=1&amp;modestbranding=1&amp;showinfo=0");
            })

            // stop playing the youtube video when I close the modal
            $('#modalVideo').on('hide.bs.modal', function (e) {
                // a poor man's stop video
                $("#video").attr('src', $videoSrc);
            })
        });
    </script>

@endsection


@section('content')
    <!-- MAIN-->
    <main id="main">

        <section class="section p-b-40 text-center">
            <div class="box_image  img-fluid" style="background: url(/images/cliento/banner.webp) center no-repeat;">
                <div class="text_on_image col-md-12">
                    <h1>Licenciatura en <br> <span>Derecho</span> </h1>
                </div>
            </div>
            <div class="container p-t-20">
                <div class="row">


                    <div class="col-6 col-md-3">
                        <div class="av-IconDetailConteiner">

                            <div class="icon-sprite-clock av-icon-position"></div>
                            <div class="av-IconDetailTextContainer">
                                <div class="av-IconDetailTextName">Duración:</div>
                                <div class="av-IconDetailTextValue">6 semestres</div>
                            </div>
                        </div>
                    </div>

                    <div class="col-6 col-md-3">

                        <div class="av-IconDetailConteiner">
                            <div class="icon-sprite-modality av-icon-position"></div>
                            <div class="av-IconDetailTextContainer">
                                <div class="av-IconDetailTextName">Modalidad:</div>
                                <div class="av-IconDetailTextValue">Presencial</div>
                            </div>
                        </div>
                    </div>
                    <div class="col-6 col-md-3">
                        <div class="av-IconDetailConteiner">
                            <div class="icon-sprite-calendar av-icon-position"></div>
                            <div class="av-IconDetailTextContainer">
                                <div class="av-IconDetailTextName">Inicio:</div>
                                <div class="av-IconDetailTextValue">Agosto y Febrero</div>
                            </div>

                        </div>
                    </div>
                    <div class="col-6 col-md-3">

                        <div class="av-IconDetailConteiner">
                            <div class="icon-sprite-rvoe av-icon-position"></div>
                            <div class="av-IconDetailTextContainer">
                                <div class="av-IconDetailTextName">RVOE:</div>
                                <div class="av-IconDetailTextValue">128762185312</div>
                            </div>
                        </div>
                    </div>

                </div>
        </section>

        <section class="section p-b-20">
            <div class="container">
                <div class="row">
                    <div class="col-md-7 mb-4">
                        <p>
                            La Licenciatura en Derecho de la Universidad Cuauhtémoc se caracteriza por brindar educación de
                            excelencia y bajo un enfoque ético profesional; garantiza que los egresados dominen las ramas
                            clásicas del Derecho.
                        </p>
                        <div class="list list-dot text-justify mt-3">
                            <ul>
                                <li class="text-blue">Constituciónal.</li>
                                <li class="text-blue">Civil.</li>
                                <li class="text-blue">Penal.</li>
                                <li class="text-blue">Mercantil.</li>
                                <li class="text-blue">Administrativo.</li>
                                <li class="text-blue">Fiscal.</li>
                                <li class="text-blue">Procesal.</li>
                            </ul>
                        </div>
                        <p>
                            Además, la universidad tiene el compromiso de convertilos en profesiónistas altamente
                            capacidatdos para afrontar los desafiós juríficos actuales y del futuro.
                        </p>
                        <p>
                            Con dicha intención, el Plan de Estudios ha sido robustecido con la estrategía educativa
                            integral, donde se propicio la realiazación de actividades extracurriculares y prácticas
                            constantes, siempre a la vanguardia de los temas y materias en tendencia.
                        </p>
                    </div>
                    <div class="col-md-5 mt-ms-4">
                        <div class="background-gray card-form-1-container p-b-20">
                            <div class="text-center">
                                <h2 style="padding-bottom: 10px; color: #22418b;font-size: 20px;letter-spacing: 1px;">
                                    Estudiar la universidad es
                                    una inversión para
                                    ti y para tu familia</h2>
                                <p>Déjanos tus datos y te enviaremos por correo el detalle de la colegiatura y las
                                    opciones de
                                    beca</p>
                                <img src="/images/cliento/form1.webp" alt="ucg derecho" class="my-3">
                            </div>

                            <div class="ucg-crm-hubspot">
                                <div class="m-form-gray">
                                    <script>
                                        hbspt.forms.create({
                                            region: "na1",
                                            portalId: "21003095",
                                            formId: "17aba1e4-c0de-4223-84f4-ada933b5b387"
                                        });
                                    </script>

                                    <div class="row">
                                        <div class="col-md-12">
                                            <div class="text-center">
                                                <a href="{{ route('notice_of_privacy') }}">Aviso de privacidad</a>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="text-center mt-4">
                <a href="#conocenos" class="btn-indicator">
                    <i class="fas fa-sort-down"></i>
                </a>
            </div>

        </section>

        <section class="m-t-50 m-b-50" id="conocenos">
            <div class="container text-center">
                <div class="row">
                    <div class="col-md-12">
                        <h2 style="color: #22418b;letter-spacing:2px">Conoce a los protagonistas de la
                            licenciatura
                        </h2>
                    </div>
                </div>
                <div class="m-t-50"></div>
                <div class="row">
                    <div class="col-md-6 mb-3">
                        <!-- Button trigger modal -->
                        <button type="button" class="video-btn" data-toggle="modal"
                            data-src="https://www.youtube.com/embed/IP7uGKgJL8U" data-target="#modalVideo">
                            <img src="/images/cliento/video1.webp" alt="video ucg">
                        </button>

                    </div>
                    <div class="col-md-6">
                        <button type="button" class="video-btn" data-toggle="modal"
                            data-src="https://www.youtube.com/embed/6QpL_ix5RSQ" data-target="#modalVideo">
                            <img src="/images/cliento/video2.webp" alt="video 2 ucg">

                        </button>

                    </div>
                </div>
        </section>

        <section class="m-t-50 m-b-50">
            <div class="container text-center">
                <div class="row">
                    <div class="col-md-12">
                        <h2 style="color: #22418b;letter-spacing:2px">Ventajas de estudiar Derecho en la UC campus
                            Santa Anita</h2>
                        <p class="mt-2" style="color: #087af4;font-size: 16px">Algunos de los múltiples beneficios
                            que tiene estudiar esta Licenciatura son:</p>
                    </div>

                </div>
                <div class="m-b-30"></div>

                <div class="row m-3">
                    <div class="col-md-4">
                        <div class="row m-3">
                            <div class="col-2 col-md-12">
                                <i class="fas fa-chalkboard-teacher fa-4x  blue-1"></i>
                            </div>
                            <div class="col-10 col-md-12">
                                <p class="advange-text text-left text-md-center">
                                    Profesores especializados en las materias que imparten, con <strong>
                                        amplia experiencia laboral.
                                    </strong>
                                </p>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div class="row m-3">

                            <div class="col-2 col-md-12">
                                <i class="fas fa-chalkboard-teacher fa-4x  blue-1"></i>
                            </div>
                            <div class="col-10 col-md-12">
                                <p class="advange-text text-left text-md-center">
                                    <strong>
                                        Prácticas profesionales desde el 5º cuatrimestre,
                                    </strong> mediante el desarrollo de proyectos reales.
                                </p>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div class="row m-3">
                            <div class="col-2 col-md-12">
                                <i class="fas fa-chalkboard-teacher fa-4x  blue-1"></i>
                            </div>
                            <div class="col-10 col-md-12">
                                <p class="advange-text text-left text-md-center">
                                    Profesores especializados en las materias que imparten, con <strong>
                                        amplia experiencia laboral.
                                    </strong>
                                </p>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div class="row m-3">
                            <div class="col-2 col-md-12">
                                <i class="fas fa-chalkboard-teacher fa-4x  blue-1"></i>
                            </div>
                            <div class="col-10 col-md-12">
                                <p class="advange-text text-left text-md-center">
                                    <strong>
                                        Capacitación constante
                                    </strong>
                                    en las materias y temas jurídicos de tendencia.
                                </p>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div class="row m-3">
                            <div class="col-2 col-md-12">
                                <i class="fas fa-chalkboard-teacher fa-4x  blue-1"></i>
                            </div>
                            <div class="col-10 col-md-12">
                                <p class="advange-text text-left text-md-center">

                                    <strong>
                                        Múltiples opciones de titulación:
                                    </strong> tesis, examen profesional, promedio, posgrado, etcétera.
                                </p>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div class="row m-3">
                            <div class="col-2 col-md-12">
                                <i class="fas fa-chalkboard-teacher fa-4x  blue-1"></i>
                            </div>
                            <div class="col-10 col-md-12">
                                <p class="advange-text text-left text-md-center">
                                    <strong>
                                        Vinculación académica y empresarial
                                    </strong>
                                    para posicionar a nuestros estudiantes en el ámbito laboral.
                                </p>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="m-t-50"></div>
        </section>

        {{-- galeria flex --}}
        <section class="m-t-50 m-b-50">
            <div class="container">
                <div class="row mt-5 text-center">
                    <div class="col-md-12">
                        <h2 style="color: #22418b;letter-spacing:2px">
                            Toda una gama de actividades para <br> complementar tu formación académica</h2>
                    </div>

                    <main class="gallery-grid mt-5">
                        <div>
                            <a href="https://localhost:3000/storage/academic_offert_gallery/ICf66zTqsvycEMxeB0e8rEdYa0raLQssXrOu5yX0.jpg"
                                data-lightbox="image-1" data-title="Futbol">
                                <img class="lazyload"
                                    data-src="https://localhost:3000/storage/academic_offert_gallery/ICf66zTqsvycEMxeB0e8rEdYa0raLQssXrOu5yX0.jpg"
                                    alt="Futbol">
                                <h4>Futbol</h4>
                            </a>
                        </div>
                        <div>
                            <a href="https://localhost:3000/storage/academic_offert_gallery/ICf66zTqsvycEMxeB0e8rEdYa0raLQssXrOu5yX0.jpg"
                                data-lightbox="image-1" data-title="Futbol">
                                <img class="lazyload"
                                    data-src="https://localhost:3000/storage/academic_offert_gallery/ICf66zTqsvycEMxeB0e8rEdYa0raLQssXrOu5yX0.jpg"
                                    alt="Futbol">
                                <h4>Futbol</h4>
                            </a>
                        </div>
                        <div>
                            <a href="https://localhost:3000/storage/academic_offert_gallery/ICf66zTqsvycEMxeB0e8rEdYa0raLQssXrOu5yX0.jpg"
                                data-lightbox="image-1" data-title="Futbol">
                                <img class="lazyload"
                                    data-src="https://localhost:3000/storage/academic_offert_gallery/ICf66zTqsvycEMxeB0e8rEdYa0raLQssXrOu5yX0.jpg"
                                    alt="Futbol">
                                <h4>Futbol</h4>
                            </a>
                        </div>
                        <div>
                            <a href="https://localhost:3000/storage/academic_offert_gallery/ICf66zTqsvycEMxeB0e8rEdYa0raLQssXrOu5yX0.jpg"
                                data-lightbox="image-1" data-title="Futbol">
                                <img class="lazyload"
                                    data-src="https://localhost:3000/storage/academic_offert_gallery/ICf66zTqsvycEMxeB0e8rEdYa0raLQssXrOu5yX0.jpg"
                                    alt="Futbol">
                                <h4>Futbol</h4>
                            </a>
                        </div>
                        <div>
                            <a href="https://localhost:3000/storage/academic_offert_gallery/ICf66zTqsvycEMxeB0e8rEdYa0raLQssXrOu5yX0.jpg"
                                data-lightbox="image-1" data-title="Futbol">
                                <img class="lazyload"
                                    data-src="https://localhost:3000/storage/academic_offert_gallery/ICf66zTqsvycEMxeB0e8rEdYa0raLQssXrOu5yX0.jpg"
                                    alt="Futbol">
                                <h4>Futbol</h4>
                            </a>
                        </div>
                        <div>
                            <a href="https://localhost:3000/storage/academic_offert_gallery/ICf66zTqsvycEMxeB0e8rEdYa0raLQssXrOu5yX0.jpg"
                                data-lightbox="image-1" data-title="Futbol">
                                <img class="lazyload"
                                    data-src="https://localhost:3000/storage/academic_offert_gallery/ICf66zTqsvycEMxeB0e8rEdYa0raLQssXrOu5yX0.jpg"
                                    alt="Futbol">
                                <h4>Futbol</h4>
                            </a>
                        </div>
                        <div>
                            <a href="https://localhost:3000/storage/academic_offert_gallery/ICf66zTqsvycEMxeB0e8rEdYa0raLQssXrOu5yX0.jpg"
                                data-lightbox="image-1" data-title="Futbol">
                                <img class="lazyload"
                                    data-src="https://localhost:3000/storage/academic_offert_gallery/ICf66zTqsvycEMxeB0e8rEdYa0raLQssXrOu5yX0.jpg"
                                    alt="Futbol">
                                <h4>Futbol</h4>
                            </a>
                        </div>
                        <div>
                            <a href="https://localhost:3000/storage/academic_offert_gallery/ICf66zTqsvycEMxeB0e8rEdYa0raLQssXrOu5yX0.jpg"
                                data-lightbox="image-1" data-title="Futbol">
                                <img class="lazyload"
                                    data-src="https://localhost:3000/storage/academic_offert_gallery/ICf66zTqsvycEMxeB0e8rEdYa0raLQssXrOu5yX0.jpg"
                                    alt="Futbol">
                                <h4>Futbol</h4>
                            </a>
                        </div>


                    </main>

                </div>
            </div>
        </section>

        <section class="mb-5">
            <div class="container">
                <div class="row">
                    <div class="col-md-6">
                        <h4 style="color: #22418b;font-size: 40px">Conoce nuestro <br> campus</h4>

                        <div class="list list-done text-justify mt-3">
                            <ul>
                                <li class="text-blue">El aula de juicios orales.</li>
                                <li class="text-blue">Los salones de clases.</li>
                                <li class="text-blue">El auditorio.</li>
                                <li class="text-blue">El Aula Magna.</li>
                                <li class="text-blue">Las instalaciones deportivas.</li>
                                <li class="text-blue">Las áreas verdes.</li>

                            </ul>
                        </div>

                    </div>
                    <div class="col-md-6">
                        <button type="button" class="video-btn" data-toggle="modal"
                            data-src="https://www.youtube.com/embed/IP7uGKgJL8U" data-target="#modalVideo">
                            <img src="/images/cliento/video-campus.webp" alt="video ucg">
                        </button>
                    </div>
                </div>
            </div>
        </section>

        <section class="background-gray p-3">

            <div class="wing-1"></div>
            <div class="wing-2"></div>


            <div class="container">

                <div class="row my-5 text-center">
                    <div class="col-md-12">
                        <h2 style="color: #22418b;letter-spacing:2px">Visítanos</h2>
                        <p class="mt-2" style="color: #087af4;font-size: 16px">Cada semana organizamos visitas al
                            campus con estudiantes <br> como tú que quieren conocer la universidad</p>
                    </div>
                </div>
                <div class="row">
                    <div class="col-12 col-md-6">
                        <p style="font-size: 18px">
                            Déjanos tu número de <strong>WhatApp</strong> y te agregamos al grupo para que conozcas las
                            <strong> fechas de visitas y nuestros próximos eventos.</strong>
                        </p>
                    </div>
                    <div class="col-12 col-md-6">

                        <script>
                            hbspt.forms.create({
                                region: "na1",
                                portalId: "21003095",
                                formId: "51285d44-2d50-4054-ae47-7d71a1af11ce"
                            });
                        </script>
                    </div>

                </div>

            </div>
        </section>

        <section>
            <div class="container">
                <div class="row mt-5 text-center">
                    <div class="col-md-12">
                        <h2 style="color: #22418b;letter-spacing:2px">¿Dónde trabajan nuestros egresados?</h2>
                        <p class="mt-2" style="color: #087af4;font-size: 18px">Cada semana organizamos visitas al
                            campus con estudiantes <br> como tú que quieren conocer la universidad</p>
                    </div>


                    <div class="col-md-12 mt-5">
                        <div class="owl-carousel owl-carousel-brands owl-theme d-none d-lg-block">
                            <div class="item">
                                <img src="/images/marcas/aliados-applebees.png" class="p-3" alt="ucg-marca-1">
                            </div>
                            <div class="item">
                                <img src="/images/marcas/aliados-atlas.png" class="p-3" alt="ucg-marca-2">
                            </div>
                            <div class="item">
                                <img src="/images/marcas/aliados-hilton.png" class="p-3" alt="ucg-marca-3">
                            </div>
                            <div class="item">
                                <img src="/images/marcas/aliados1.png" class="p-3" alt="ucg-marca-4">
                            </div>
                            <div class="item">
                                <img src="/images/marcas/logo-kary.png" class="p-3" alt="ucg-marca-5">
                            </div>
                            <div class="item">
                                <img src="/images/marcas/logo-siapa.png" class="p-3" alt="ucg-marca-6">
                            </div>

                        </div>

                        <div class="d-lg-none">
                            <img src="/images/cliento/brands.webp" class="p-3" alt="ucg-marcas">
                        </div>

                    </div>

                </div>
        </section>

        <section class="m-t-50 m-b-50">
            <div class="container  ">
                <div class="row m-b-50">
                    <div class="col-md-12">
                        <div class="text-center">
                            <h2 style="color: #22418b;letter-spacing:2px">Plan de estudios</h2>
                        </div>
                    </div>
                </div>

                <div class="owl-carousel owl-carousel-plan owl-theme owl-loaded dotsTransparent angle-cliento">
                    <div class="owl-stage-outer">
                        <div class="owl-stage">

                            <div id="a1" class="owl-item">
                                <article class="plan-body">
                                    <header class="mb-5">
                                        <div class="plan-author vcard">
                                            <b class="fn" style="color: #22418b; padding-bottom: 10px;">1er
                                                Cuatrimestre</b>
                                        </div>

                                    </header>
                                    <div class="plan-content">
                                        <div class="list list-dot text-justify">
                                            <ul>
                                                <li> Derecho Romano </li>
                                                <li> Fundamentos del Derecho </li>
                                                <li> Derechos de laspersonas y de la familia </li>
                                                <li> Teoría General del Estado </li>
                                                <li> Historia del Derecho en México </li>
                                                <li> Portafolio del líder </li>
                                            </ul>

                                        </div>
                                    </div>
                                </article>
                            </div>
                            <div id="a1" class="owl-item">
                                <article class="plan-body">
                                    <header class="mb-5">
                                        <div class="plan-author vcard">
                                            <b class="fn" style="color: #22418b; padding-bottom: 10px;">1er
                                                Cuatrimestre</b>
                                        </div>

                                    </header>
                                    <div class="plan-content">
                                        <div class="list list-dot text-justify">
                                            <ul>
                                                <li> Derecho Romano </li>
                                                <li> Fundamentos del Derecho </li>
                                                <li> Derechos de laspersonas y de la familia </li>
                                                <li> Teoría General del Estado </li>
                                                <li> Historia del Derecho en México </li>
                                                <li> Portafolio del líder </li>
                                            </ul>

                                        </div>
                                    </div>
                                </article>
                            </div>
                        </div>
                    </div>
                </div>

        </section>


        <section>
            <div class="container text-center">
                <div class="row">
                    <div class="col-md-12">
                        <h2 style="color: #22418b;letter-spacing:2px">Platica con el Director de la Carrera</h2>
                        <p class="mt-2" style="color: #087af4;font-size: 16px">
                            Visita el campus y toma un café con el Lic. Ernesto Galindo. <br>
                            Él te ayudará a responder todas tus dudas sobre la licenciatura.</p>
                    </div>
                </div>
                <div class="row m-5">
                    <div class="col-md-4">
                        <img src="/images/cliento/director.webp" alt="director carrera ucg">
                    </div>
                    <div class="col-md-8">

                        <script>
                            hbspt.forms.create({
                                region: "na1",
                                portalId: "21003095",
                                formId: "a5eae123-8d58-48b8-87d1-7db69e618a5d"
                            });
                        </script>
                    </div>

                </div>
            </div>
        </section>


        {{-- galeria instalaciones --}}
        <section class="m-t-50 m-b-50">
            <div class="container">
                <div class="row mt-5 text-center">
                    <div class="col-md-12">
                        <h2 style="color: #22418b;letter-spacing:2px">
                            Galería de la universidad
                        </h2>
                    </div>



                </div>
            </div>
        </section>


    </main>
    <!-- END MAIN-->


    <!-- Modal -->
    <div class="modal fade" id="modalVideo" tabindex="-1" role="dialog" aria-labelledby="modal-video" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered" role="document">
            <div class="modal-content">
                <div class="modal-body">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                    <!-- 16:9 aspect ratio -->
                    <div class="embed-responsive embed-responsive-16by9">
                        <iframe class="embed-responsive-item" src="" id="video" allowscriptaccess="always"
                            allow="autoplay"></iframe>
                    </div>
                </div>
            </div>
        </div>
    </div>



@endsection