@php
    /* @var $getData */
     $title = $getData->title;
     $text = $getData->text;
     $slug = $getData->slug;
     $identifier = $getData->slug;
     $created_at = $getData->created_at;
     $updated_at = $getData->updated_at;
@endphp

@extends('themes.'.config('smartekcms.themes.frontend').'.app', [
    'title' => $title,
    'meta_description' => Illuminate\Support\Str::limit(strip_tags(htmlspecialchars_decode($text)), 156),
    'published_time' => $created_at->format('c'),
    'modified_time' => $updated_at->format('c'),
    'identifier' => $slug,
    'section' => trans('front.dynamicpage.pages'),
    'cover_image' => $coverImage ?? $generalSettingsCoverImage,
    'model_type' => 'dynamicpage',
])

@section('head')
    <link rel="stylesheet" href="{{ asset('themes/smartblue/css/magnific-popup.min.css') }}">

    <script type="application/ld+json">
    {
      "@context": "https://schema.org",
      "@type": "BreadcrumbList",
      "itemListElement": [{
        "@type": "ListItem",
        "position": 1,
        "name": "{{ trans('front.general.home') }}",
        "item": "{{ route('home') }}"
      },{
        "@type": "ListItem",
        "position": 2,
        "name": "{{ trans('front.dynamicpage.pages') }}",
        "item": "{{ route('dynamicpages', ['pages' => trans('route.frontend.pages') ]) }}"
      },{
        "@type": "ListItem",
        "position": 3,
        "name": "{{ $getData->title }}",
        "item": "{{ route('dynamicpage', ['pages' => trans('route.frontend.pages'), 'slug' => $getData->slug ]) }}"
      }]
    }
    </script>
@endsection

@section('content')

    <!-- ====== Banner Start ====== -->
    <section class="st-page-banner">
        <!--v2 banner-->
        <div class="card">
            <div class="card-img-overlay" style="background-image: url('{{ $generalSettingsCoverImage = $general_settings->getFirstMediaUrlTraitAttribute('dynamic-page', 'default') }}');"></div>
            <div class="container" style="z-index: 1">
                <div class="st-banner-content">
                    <h1 class="text-center">{{ $getData->title }}</h1>
                </div>
                <ul class="st-breadcrumb">
                    <li><a href="{{ route('home') }}">{{ trans('front.general.home') }}</a></li>
                    <li><a href="{{ route('dynamicpages', ['pages' => trans('route.frontend.pages') ]) }}">{{ trans('front.dynamicpage.pages') }}</a></li>
                    <li class="active"><a href="{{ route('dynamicpage', ['pages' => trans('route.frontend.pages'), 'slug' => $getData->slug ]) }}">{{ $getData->title }}</a></li>
                </ul>
            </div>
        </div>
    </section>
    <!-- ====== Banner End ====== -->

    <!-- ====== Page Details Start ====== -->
    <section class="st-page mt-4 mt-md-5 pt-2">
        <div class="container">
            <!--        <p class="redirect-title st-before-h position-relative mb-3 mb-lg-4 pt-2">Proje Detayları</p>-->
            <div class="row">
                <div class="col-lg-12 wow fadeInUp" data-wow-delay=".15s">
                @if($coverImage = $getData->getFirstMediaUrlTraitAttribute('cover', 'default'))
                    <!-- ===== images section Start ===== -->
                    <div class="ratio ratio-21x9" style="max-height: 300px">
                        <img src="{{ $coverImage }}" alt="{{ $getData->slug }} dynamic page cover image"/>
                        <div class="ud-blog-overlay opacity-25">
                        </div>
                    </div>
                    <!-- ===== images section End ===== -->
                @endif

                    <!-- ===== Article section Start ===== -->
                    <div class="ud-blog-details-content py-4 wow fadeInUp" data-wow-delay=".15s">
                        <h2 class="ud-blog-details-title st-befor-h position-relative mb-3 mb-lg-4">
                            {{ $getData->title }}
                        </h2>
                        <div class="st-page-article st-before-v position-relative">
                            <div class="ud-blog-details-para">
                                {!! $getData->text !!}
                            </div>
                        </div>
                    </div>
                    <!-- ===== Article section End ===== -->
                </div>
            </div>
        </div>
        <!-- ===== Gallery section Start ===== -->
        <div class="st-page-gallery">
            @if($gallery = $getData->getMediaTraitAttribute('gallery'))
            <div class="container">
                <div class="col-lg-12 wow fadeInUp" data-wow-delay=".8s">
                    <div class="owl-carousel popup-gallery">
                        @foreach($gallery as $k => $media)
                        <div class="ratio ratio-4x3" href="{{ $media->getUrl('default') }}" data-effect="mfp-zoom-in">
                            <img src="{{ $media->getUrl('default') }}" alt="{{ $getData->slug }} dynamic page gallery image {{ $k+1 }}"/>
                            <div class="ud-blog-overlay opacity-50"></div>
                        </div>
                        @endforeach
                    </div>
                </div>
            </div>
            @endif
        </div>
        <!-- ===== Gallery section End ===== -->
    </section>
    <!-- ====== Blog Details End ====== -->

@endsection

@section('js')
    <!--====== OwlCarousel2 Start ======-->
    <script src="{{ asset('themes/smartblue/js/owl/owl.carousel.min.js') }}"></script>
    <script src="{{ asset('themes/smartblue/js/jquery.magnific-popup.min.js') }}"></script>
    <script type="text/javascript">
        $(document).ready(function() {
            $('.owl-carousel').owlCarousel({
                rtl: {{ (app()->getLocale() === 'ar' || app()->getLocale() === 'fa') ? 'true' : 'false' }},
                items: 1,
                margin: 10,
                // autoHeight: tru
                loop: true,
                nav: true,
                autoplay: true,
                smartSpeed: 1500,
                dots: false,
                navContainerClass: 'practice_arrow',
                navText: ['<i class="lni lni-arrow-left"></i>','<i class="lni lni-arrow-right"></i>'],
                responsive : {
                    520 : { items : 1  }, // from zero to 520 screen width 1 items
                    768 : { items : 2  }, // from 520 screen widthto 768 2 items
                    992 : { items : 2  }, // from 768 screen widthto 992 2 items
                    1200 : { items : 3  }, // from 992 screen widthto 1200 and < ... 3 items
                    // 1024 : { items : 1 },  // from 768 screen width to 1024 8 items
                },
            });

            $('.popup-gallery').magnificPopup({
                delegate: '.owl-item:not(.cloned) .ratio',
                type: 'image',
                removalDelay: 500, //delay removal by X to allow out-animation
                gallery:{
                    enabled:true
                }
            });
        })
    </script>
    <!--====== OwlCarousel2 End ======-->
	@parent
@endsection