@extends("frontend.includes.layout")

@section('useLegacyJquery', '0')

@section('links')
    @vite('resources/scss/offert.scss')
    <link href="/vendor/mooviejs/css/moovie.css" rel="stylesheet" />
    <script>
        window.__hubspotAutoLoad = true;
    </script>
    @include('frontend.includes.hubspot-lazy-init')
@endsection

@section('scripts')
    <script defer src="/vendor/mooviejs/js/moovie.js" type="text/javascript"></script>
    <script>
        let video = null;

        document.addEventListener("DOMContentLoaded", function () {
            video = new Moovie({
                selector: "#video-main",
                dimensions: {
                    width: "100%"
                },
                config: {
                    controls: {
                        playtime: true,
                        mute: true,
                        volume: true,
                        subtitles: false,
                        config: false,
                        fullscreen: true,
                        submenuCaptions: false,
                        submenuOffset: false,
                        submenuSpeed: false,
                        allowLocalSubtitles: false
                    },
                },
                icons: {
                    path: "/vendor/mooviejs/icons/"
                }
            });
        });
    </script>

@endsection

@section('content')

    <!-- MAIN-->
    <main id="main">

        <!-- CAREER DETAIL-->
        <section class="section p-t-100 p-b-80">

            <div class="container">
                <article class="blog-detail-1">
                    <header class="entry-header">
                        <h1 class="project-style-1" style="font-size: 45px; letter-spacing: -2px; color: #22418b">
                            {{ $academic_offer->title ?? '' }}
                        </h1><br>
                        @if ($academic_offer->career_pdf)
                            <hr style="padding-bottom: 20px;">
                            <a download="Plan de estudios-{{ $academic_offer->title }}.pdf"
                                class="btn btn-outline-primary colors-ucg" target="_blank" style="font-size: initial;"
                                href="{{ $academic_offer->career_pdf_uri }}">
                                <i class="fas fa-file-download"></i>
                                Descargar Infografía
                            </a>
                        @endif
                    </header>
                </article>
            </div>


            <div class="container">

                <div class="row">
                    @if ($academic_offer->duration)
                        <div class="col-{{ $academic_offer->columns }}">
                            <div class="pitem-info-row">
                                <div class="pitem-info-label">
                                    <i class="fas fa-clock"></i>
                                    Duración:
                                </div>
                                <div class="pitem-info-label-text"> {{ $academic_offer->duration ?? '' }}</div>
                            </div>
                        </div>
                    @endif

                    @if ($academic_offer->modality)
                        <div class="col-{{ $academic_offer->columns }}">
                            <div class="pitem-info-row">
                                <div class="pitem-info-label">
                                    <i class="fas fa-user"></i>
                                    Modalidad:
                                </div>
                                <div class="pitem-info-label-text">{{ $academic_offer->modality ?? '' }}</div>
                            </div>
                        </div>
                    @endif

                    @if ($academic_offer->begin)
                        <div class="col-{{ $academic_offer->columns }}">
                            <div class="pitem-info-row">
                                <div class="pitem-info-label">
                                    <i class="fas fa-calendar-alt"></i>
                                    Inicio:
                                </div>
                                <div class="pitem-info-label-text">{{ $academic_offer->begin ?? '' }}</div>
                            </div>
                        </div>
                    @endif

                    @if ($academic_offer->rvoe)
                        <div class="col-{{ $academic_offer->columns }} ">
                            <div class="pitem-info-row">
                                <div class="pitem-info-label">
                                    <i class="fas fa-certificate"></i>
                                    RVOE:
                                </div>
                                <div class="pitem-info-label-text">{{ $academic_offer->rvoe ?? '' }}</div>
                            </div>
                        </div>
                    @endif
                </div>

                @if (count($academic_offer->gallery) > 0)


                    <div id="carousel-offert" class="carousel slide mb-5" data-ride="carousel">
                        <ol class="carousel-indicators">
                            @foreach ($academic_offer->gallery as $index => $gallery)
                                <li data-target="#carousel-offert" data-slide-to="{{ $index }}"
                                    class="{{ $index === 0 ? 'active' : '' }}"></li>
                            @endforeach

                        </ol>
                        <div class="carousel-inner">
                            @foreach ($academic_offer->gallery as $index => $gallery)
                                <div class="carousel-item {{ $index === 0 ? 'active' : '' }}">
                                    <img src="{{ $gallery->path }}" class="d-block w-100" alt="{{ $academic_offer->title }}">
                                </div>
                            @endforeach
                        </div>
                        <a class="carousel-control-prev" href="#carousel-offert" role="button" data-slide="prev">
                            <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                            <span class="sr-only">Previous</span>
                        </a>
                        <a class="carousel-control-next" href="#carousel-offert" role="button" data-slide="next">
                            <span class="carousel-control-next-icon" aria-hidden="true"></span>
                            <span class="sr-only">Next</span>
                        </a>
                    </div>


                    <hr class="mb-5">

                @endif


                <div class="row">


                    <div class="col-md-7 ">
                        <div class="video-js-offert mt-2">
                            @if ($academic_offer->video)
                                <video id="video-main"
                                    poster="{{ $academic_offer->img_prev_video_uri ? $academic_offer->img_prev_video_uri : '/images/bg-video.jpg' }}"
                                    class="elevate-card">
                                    <source src="{{ $academic_offer->video_uri }}" type="video/mp4" />
                                    <p class="vjs-no-js">
                                        Para ver este video, habilite JavaScript y considere actualizar a un navegador web.
                                    </p>
                                </video>
                            @else

                                <img src="/images/bg-video.png" alt="{{ $academic_offer->title }}">
                            @endif
                        </div>
                    </div>


                    <div class="col-md-5 elevate-card ml-minus-15">
                        {{-- <h2 style="padding-bottom: 10px; color: #22418b;">Solicitar información.</h2> --}}



                        <div class="">
                            <div class="text-center">
                                <h2 style="padding-bottom: 10px; color: #22418b;font-size: 20px;letter-spacing: 1px;">
                                    Conoce más sobre tu programa de interés</h2>
                                <p>Déjanos tus datos y una ejecutiva de admisiones se pondrá en contacto contigo para
                                    resolver todas tus dudas.
                                </p>
                                {{-- <img class="lazyload my-3" data-src="/images/logos/ucg-vertical-monocromatico.jpg"
                                    style="height:150px" alt="{{ $academic_offer->title }} - form 1"> --}}
                            </div>
                            <div class="ucg-crm-hubspot">
                                <div class="">
                                    @include("frontend.includes.forms.cliento.formTemporal")
                                    <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 style="margin-bottom: 50px;"></div>

                @if ($academic_offer->career_plan)
                    <div class="row">
                        <div class="col-md-12">
                            <h2 style="padding-bottom: 20px; color: #22418b;">Plan de la carrera<br>_</h2>
                            <div class="ql-editor">
                                {!! $academic_offer->career_plan !!}
                                <hr class="my-4">

                            </div>

                        </div>
                    </div>
                @endif
                @if ($academic_offer->objetive)
                    <div class="row">
                        <div class="col-md-12">
                            <h2 style="padding-bottom: 20px; color: #22418b;">Objetivo<br>_</h2>
                            <div class="ql-editor">
                                {!! $academic_offer->objetive !!}
                                <hr class="my-4">
                            </div>

                        </div>
                    </div>
                @endif
                @if ($academic_offer->profile)
                    <div class="row">
                        <div class="col-md-12">
                            <h2 style="padding-bottom: 20px; color: #22418b;">Perfil del Egreso<br>_</h2>
                            <div class="list list-done ql-editor">
                                {!! $academic_offer->profile !!}
                                <hr class="my-4">
                            </div>

                        </div>
                    </div>
                @endif

                @if ($academic_offer->advantage)
                    <div class="row">
                        <div class="col-md-12">
                            <h2 style="padding-bottom: 20px; color: #22418b;">Ventajas<br>_</h2>

                            <div class="list list-arrow-right ql-editor">
                                {!! $academic_offer->advantage !!}
                                <hr class="my-5">
                            </div>

                        </div>
                    </div>
                @endif

                @if ($academic_offer->img_scrollable_uri)
                    <div class="row">
                        <div class="col-md-12">

                            <div class="img-section" style="
                                                                            background: url({{ $academic_offer->img_scrollable_uri }}) no-repeat center center;
                                                                            background-size: cover;
                                                                            background-attachment: fixed;
                                                                            background-color: #707d9e;
                                                                            height: 250px;">
                                <div class="overlay">
                                    <div class="container">
                                        <div class="wrapper">

                                        </div> <!-- /.wrapper -->
                                    </div> <!-- /.container -->
                                </div> <!-- /.overlay -->
                            </div>
                        </div>
                    </div>

                @endif


                <hr class="my-5">


                <!-- PLAN DE ESTUDIOS – INICIA -->
                @if (count($academic_offer->plans) > 0)
                    <div class="row justify-content-center">
                        <div class="col-md-12">

                            <div class="comments-area">
                                <h2 style="padding-bottom: 40px; color: #22418b;">Plan de Estudios
                                    {{-- |
                                    {{ count($academic_offer->plans) }}{{ ' ' }}
                                    {{ $academic_offer->plan_type_in_plural ?? '' }} --}}
                                    <br>_
                                </h2>

                                <div class="owl-carousel owl-theme owl-loaded dotsBlue navAngle">
                                    <div class="owl-stage-outer">
                                        <div class="owl-stage">
                                            @foreach ($academic_offer->plans as $plan)
                                                <div id="owl-{{ $plan->id }}" class="owl-item">
                                                    <article class="comment-body">
                                                        <header class="comment-meta">
                                                            <div class="comment-author vcard">
                                                                <img class="avatar" src="/images/counts/{{ $plan->position }}.png"
                                                                    alt="Universidades en Santa Anita">
                                                                <b class="fn" style="color: #22418b; padding-bottom: 10px;">
                                                                    {{ $plan->title }}
                                                                </b>
                                                            </div>
                                                        </header>
                                                        <div class="comment-content"><br>
                                                            <div class="ql-editor w-100">
                                                                {!! $plan->content !!}
                                                            </div>
                                                        </div>
                                                    </article>
                                                </div>
                                            @endforeach
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                @endif
            </div>
        </section>
        <!-- END CAREER DETAIL-->
    </main>
    <!-- END MAIN-->
@endsection