@php
    /** @var $getData */
    $title = $getData->title;
    $perex = $getData->perex;
    $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($perex ??= $text)), 156),
    'meta_keywords' => Illuminate\Support\Str::limit(strip_tags(htmlspecialchars_decode($title)), 40). ', ' .$general_settings->meta_keywords,
    'section' => $getData->projectCategory->title,
    'cover_image' => $coverImage ?? $general_settings->getFirstMediaUrlTraitAttribute('project', 'default'),
    'model_type' => 'project',
])

@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.projects.projects') }}",
        "item": "{{ route('projects/', ['projects' => trans('route.frontend.projects') ]) }}"
      },{
        "@type": "ListItem",
        "position": 3,
        "name": "{{ $getData->projectCategory->title }}",
        "item": "{{ route('projects/category', ['projects' => trans('route.frontend.projects'), 'categorySlug' => $getData->projectCategory->slug ]) }}"
      },{
        "@type": "ListItem",
        "position": 4,
        "name": "{{ $getData->title }}",
        "item": "{{ route('projects/project', ['projects' => trans('route.frontend.projects'), 'categorySlug' => $getData->projectCategory->slug, 'slug'=> $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('{{ $getData->projectCategory->getFirstMediaUrlTraitAttribute('cover', '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('projects/', ['projects' => trans('route.frontend.projects') ]) }}">{{ trans('front.projects.projects') }}</a></li>
                    <li><a href="{{ route('projects/category', ['projects' => trans('route.frontend.projects'), 'categorySlug' => $getData->projectCategory->slug ]) }}">{{ $getData->projectCategory->title }}</a></li>
                    <li class="active"><a href="{{ route('projects/project', ['projects' => trans('route.frontend.projects'), 'categorySlug' => $getData->projectCategory->slug, 'slug'=> $slug]) }}">{{ $getData->title }}</a></li>
                </ul>
            </div>
        </div>
    </section>
    <!-- ====== Banner End ====== -->

    <!-- ====== Blog Details Start ====== -->
    <section class="st-project my-4 my-md-5">
        <div class="container">
            <p class="redirect-title st-before-h position-relative mb-3 mb-lg-4 pt-2 text-capitalize">{{ trans('front.project.project_detials') }}</p>
            <div class="row">
                @if($coverImage = $getData->getFirstMediaUrlTraitAttribute('cover', 'default'))
                    <div class="col-lg-8 wow fadeInUp" data-wow-delay=".15s">
                        <!-- ===== images section Start ===== -->
                        <div class="ratio ratio-16x9">
                            <img src="{{ $coverImage }}" alt="{{ $getData->slug }} project cover image"/>
                            <div class="ud-blog-overlay opacity-50"></div>
                        </div>
                        <!-- ===== images section End ===== -->
                    </div>
                @endif
                <div @class(['wow fadeInRight', 'col-lg-4' => $coverImage, 'col-lg-12' => ! $coverImage]) data-wow-delay=".15s">
                    <div class="st-project-table ms-2 mt-2 mt-lg-0">
                        <span class="project-table-title">{{ trans('front.project.project_name') }} :</span>
                        <p class="project-table-desc">{{ $getData->title }}</p>
                        <span class="project-table-title">{{ trans('front.project.description') }} :</span>
                        <p class="project-table-desc">{{ $getData->perex }}</p>
                        <span class="project-table-category">{{ trans('front.project.category') }} : <span>{{ $getData->projectCategory->title }}</span></span>
                    </div>
                </div>
            </div>
            <p class="redirect-title st-before-h position-relative mt-5 mt-sm-4 pt-2 text-capitalize">{{ trans('front.project.about_project') }}</p>
            <div class="row mt-1">
                <h2 class="ud-blog-details-title wow fadeInRight mb-3 mb-lg-4" data-wow-delay=".4s">
                    {{ $getData->title }}
                </h2>
                <div class="row col-12">
                    <div class="col-lg wow fadeInUp" data-wow-delay=".15s">
                        <div class="ud-blog-details-content st-before-v position-relative p-0">
                            <div class="ud-blog-details-para">
                                {!! $getData->text !!}
                            </div>
                        </div>
                    </div>
                    @if($gallery = $getData->getMediaTraitAttribute('gallery'))
                        <div class="col-lg-4 wow fadeInUp" data-wow-delay=".8s">
                            <div class="owl-carousel popup-gallery">
                                @foreach($gallery as $k => $media)
                                    <div class="ratio ratio-9x16" href="{{ $media->getUrl('default') }}" data-effect="mfp-zoom-in">
                                        <img src="{{ $media->getUrl('thumb_450x800') }}" alt="{{ $getData->slug }} project gallery image {{ $k + 1 }}"/>
                                        <div class="ud-blog-overlay opacity-50"></div>
                                    </div>
                                @endforeach
                            </div>
                        </div>
                    @endif
                </div>
            </div>
        </div>
    </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: false,
                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 : 2  }, // from zero to 480 screen width 4 items
                    768 : { items : 2  }, // from 480 screen widthto 768 6 items
                    992 : { items : 1  }, // from 480 screen widthto 768 6 items
                    // 1200 : { items : 1  }, // from 480 screen widthto 768 6 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