@extends('layout.index')

@section('seo')
    {{-- Title --}}
    <meta name="title" content="{{ $departamento->seo_title ?? $departamento->titulo }}" />
    <meta name="DC.title" content="{{ $departamento->seo_title ?? $departamento->titulo }}" />

    <meta property="og.title" content="{{ $departamento->seo_title ?? $departamento->titulo }}" />
    <meta property="og.site_name" content="{{ $departamento->seo_title ?? $departamento->titulo }}" />

    <meta name="twitter.site_name" content="{{ $departamento->seo_title ?? $departamento->titulo }}" />
    <meta name="twitter.site" content="{{ $departamento->seo_title ?? $departamento->titulo }}" />

    {{-- Description --}}
    <meta name="description" content="{{ $departamento->seo_description }}" />
    <meta property="og.description" content="{{ $departamento->seo_description }}" />
    <meta name="twitter.description" content="{{ $departamento->seo_description }}" />

    {{-- Keywords --}}
    <meta name="keywords" content="{{ $departamento->seo_keywords }}" />

    {{-- Meta --}}
    <meta property="og:type" content="article">
    <meta name="twitter:card" content="{{ $departamento->twitter_card ?? 'summary' }}">
    <meta name="robots" content="all">
    <meta name="copyright" content="Copyright (c) {{ date('Y') }}">

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

    {{-- Structured Data --}}
    @if(!empty($departamento->structured_data))
        <script type="application/ld+json">
            {!! json_encode($departamento->structured_data, JSON_UNESCAPED_UNICODE | JSON_UNESCAPED_SLASHES) !!}
        </script>
    @endif

    {{-- Custom SEO --}}
    {!! $departamento->meta_tags !!}
    {!! $departamento->custom_head_code !!}
@endsection

@section('content')
    <section class="bg-[#fef4e6]">
        @include('pages.departamentos.partials.hero', [
            'departamento' => $departamento, 
            'brochure' => \Modules\Core\Settings\Helpers\setting('site.brochure')
        ])
        @include('pages.departamentos.partials.galeria', ['departamento' => $departamento])
        @include('pages.departamentos.partials.plano', ['departamento' => $departamento])
        @include('pages.departamentos.partials.completo', ['departamento' => $departamento])

        <div class="h-5"></div>
    </section>

    @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>

        {!! $departamento->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