@extends('layout.index')

@section('seo')

    {{-- Title --}}
    <meta name="title" content="{{ $oferta->seo_title ?? $oferta->nombre }}" />
    <meta property="og:title" content="{{ $oferta->seo_title ?? $oferta->nombre }}" />
    <meta property="og:site_name" content="{{ $oferta->seo_title ?? $oferta->nombre }}" />
    <meta name="twitter:title" content="{{ $oferta->seo_title ?? $oferta->nombre }}" />

    {{-- Description --}}
    <meta name="description" content="{{ $oferta->seo_description ?? Str::limit(strip_tags($oferta->objetivo),150) }}" />
    <meta property="og:description" content="{{ $oferta->seo_description ?? Str::limit(strip_tags($oferta->objetivo),150) }}" />
    <meta name="twitter:description" content="{{ $oferta->seo_description ?? Str::limit(strip_tags($oferta->objetivo),150) }}" />

    {{-- Keywords --}}
    @if($oferta->seo_keywords)
        <meta name="keywords" content="{{ $oferta->seo_keywords }}" />
    @endif

    {{-- Meta --}}
    <meta property="og:type" content="article">
    <meta name="twitter:card" content="summary_large_image">
    <meta name="robots" content="all">

    {{-- Image --}}
    @if($oferta->og_image)
        <meta property="og:image" content="{{ Storage::url($oferta->og_image) }}">
        <meta name="twitter:image" content="{{ Storage::url($oferta->og_image) }}">
    @elseif($oferta->imagen_listado)
        <meta property="og:image" content="{{ Storage::url($oferta->imagen_listado) }}">
        <meta name="twitter:image" content="{{ Storage::url($oferta->imagen_listado) }}">
    @endif

    {{-- Canonical --}}
    <link rel="canonical" href="{{ url()->current() }}" />

    {{-- Schema --}}
    @if($oferta->schema_json)
        <script type="application/ld+json">
            {!! $oferta->schema_json !!}
        </script>
    @endif

@endsection

@section('content')
    @include('pages.oferta-academica.partials.hero')
    @include('pages.oferta-academica.partials.objetivo')
    @include('pages.oferta-academica.partials.perfiles')
    @include('pages.oferta-academica.partials.requisitos')
    @include('pages.oferta-academica.partials.plan_estudios')
    @include('pages.oferta-academica.partials.campos_clinicos')
    @include('pages.oferta-academica.partials.formulario')
    @include('pages.home.sections.alianzas')

    @push('after-css')
        <link rel="preload" href="{{ asset('plugins/glide/glide.core.min.css') }}" as="style"
              onload="this.onload=null;this.rel='stylesheet'">
        <link rel="preload" href="{{ asset('plugins/glide/glide.theme.min.css') }}" as="style"
              onload="this.onload=null;this.rel='stylesheet'">
        <noscript>
            <link rel="stylesheet" href="{{ asset('plugins/glide/glide.core.min.css') }}">
            <link rel="stylesheet" href="{{ asset('plugins/glide/glide.theme.min.css') }}">
        </noscript>
    @endpush

    @push('scripts')
        <script src="{{ asset('plugins/glide/glide.min.js') }}" defer></script>
            <script src="https://cdn.jsdelivr.net/npm/fslightbox/index.js"></script>

        {!! $oferta->custom_body_code !!}
        <script>
            function changeImage(newSrc) {
                // Obtén la imagen por su ID
                const imageElement = document.getElementById('submenu-image');
                // Cambia el atributo src de la imagen
                imageElement.src = newSrc;
            }
        document.addEventListener('DOMContentLoaded', () => {
                Livewire.on('download-brochure', ({ url }) => {
                    setTimeout(() => {
                    window.location.assign(url);
                    }, 150);
                });

                Livewire.on('form-submitted-and-modal-should-close', () => {
                    console.log('Formulario enviado y modal cerrado');
                });

                Livewire.on('swal', ({ title, message, type }) => {
                    Swal.fire({ title, text: message, icon: type, confirmButtonText: 'OK' });
                });
            });
            document.addEventListener("DOMContentLoaded", function () {
                new Glide('.departamento-glide', {
                    type: 'carousel',
                    perView: 1,
                    gap: 0
                }).mount();
            });
        </script>
    @endpush
@endsection