@extends('frontend::layouts.app')
@section('title', $metaTags['metaTitle'])
@section('description', $metaTags['metaDescription'])
@section('keywords', $metaTags['metaKeywords'])
@section('other_meta_tags')
    {!! $metaTags['otherMetaTags'] !!}
@endsection
@push('css')
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fancyapps/fancybox@3.5.7/dist/jquery.fancybox.min.css">
@endpush
@section('content')
    <div id="pageWrapper" class="SneekPage InnerPage">

        <!-- Cmn_Banner -->
        <section id="InnerBanner">
            <picture>
                <source media="(min-width: 468px)" srcset="{{ $pageBanner['image'] }}" />
                <img src="{{ $pageBanner['mobileImage'] }}" width="1920" height="480" alt="{{ $pageBanner['name'] }}"
                    loading="lazy" />
            </picture>
        </section>

        <!-- Projects -->
        <section id="SneekList">
            <div class="container">
                <div class="tleWrap wow animate__fadeInUp" data-wow-duration="1s">
                    <h2 class="mTle">{{ $cms->title }}</h2>
                    {!! $cms->description !!}
                </div>
                @if ($locations->isNotEmpty())
                    <div class="dFlx">
                        <div class="lftSd">
                            <div class="accordion" id="SneekPeek">
                                <div class="accordion-item">
                                    <h2 class="accordion-header">
                                        <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
                                            data-bs-target="#collapseOne" aria-expanded="false" aria-controls="collapseOne"
                                            aria-label="All Places">
                                            All Places
                                        </button>
                                    </h2>
                                    <div id="collapseOne" class="accordion-collapse collapse show"
                                        data-bs-parent="#SneekPeek">
                                        <div class="accordion-body">
                                            <div class="SneekLinks">
                                                @foreach ($locations as $location)
                                                    <div class="item">
                                                        <div class="sneekBx">
                                                            <a href="{{ route('sneak-peak', $location->slug) }}"
                                                                class="place{{ $selectedLocation->slug == $location->slug ? ' active' : '' }}"
                                                                aria-label="Sneak Peek: {{ $location->title }}">
                                                                {{ $location->title }}
                                                            </a>
                                                            <div class="icon">
                                                                <svg xmlns="http://www.w3.org/2000/svg" width="8"
                                                                    height="10.124" viewBox="0 0 8 10.124">
                                                                    <path id="Path_104073" data-name="Path 104073"
                                                                        d="M72.881,58.816,67.5,55.23V62.4Zm1.087-.681a.819.819,0,0,1,0,1.363L67.6,63.739a.819.819,0,0,1-1.273-.681V54.575a.819.819,0,0,1,1.273-.681Z"
                                                                        transform="translate(-66.332 -53.755)"
                                                                        fill-rule="evenodd" />
                                                                </svg>
                                                            </div>
                                                        </div>
                                                    </div>
                                                @endforeach
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="ritSd">
                            <div class="Projects">
                                <div class="SneekList">
                                    @foreach ($videos as $video)
                                        <div class="item">
                                            <a class="proBx" href="{{ $video->video_value }}" aria-label="Sneak Peek"
                                                data-fancybox="group">
                                                <img src="{{ $video->thumbnail_value }}" loading="lazy" width="615"
                                                    height="357" alt="{{ $video->title }}">
                                                <!-- <video src=""></video> -->
                                                <div class="CntBx">
                                                    <div class="ttl">{{ $video->title }}</div>
                                                    <div class="subt">{{ $video->subtitle }}</div>
                                                </div>
                                                <div class="backDrp">
                                                    <svg xmlns="http://www.w3.org/2000/svg" width="37.619" height="37.619"
                                                        viewBox="0 0 37.619 37.619">
                                                        <g id="Group_23540" data-name="Group 23540"
                                                            transform="translate(-1277 -7960)">
                                                            <g id="play" transform="translate(1277 7960)">
                                                                <g id="Group_23538" data-name="Group 23538">
                                                                    <path id="Path_104072" data-name="Path 104072"
                                                                        d="M18.809,35.738A16.929,16.929,0,1,0,1.881,18.809,16.928,16.928,0,0,0,18.809,35.738Zm0,1.881A18.809,18.809,0,1,0,0,18.809,18.81,18.81,0,0,0,18.809,37.619Z"
                                                                        fill-rule="evenodd" />
                                                                </g>
                                                                <g id="Group_23539" data-name="Group 23539"
                                                                    transform="translate(12.884 10.334)">
                                                                    <path id="Path_104073" data-name="Path 104073"
                                                                        d="M77.3,62.23l-9.007-6V68.235Zm1.82-1.141a1.371,1.371,0,0,1,0,2.282l-10.653,7.1a1.371,1.371,0,0,1-2.132-1.141v-14.2a1.371,1.371,0,0,1,2.132-1.141Z"
                                                                        transform="translate(-66.332 -53.755)"
                                                                        fill-rule="evenodd" />
                                                                </g>
                                                            </g>
                                                        </g>
                                                    </svg>
                                                </div>
                                            </a>
                                        </div>
                                    @endforeach
                                </div>
                            </div>
                        </div>
                    </div>
                @endif
            </div>
        </section>
    </div>
@endsection
@push('js')
    <script src="https://cdn.jsdelivr.net/npm/@fancyapps/fancybox@3.5.7/dist/jquery.fancybox.min.js"></script>

    <script>
        document.addEventListener("DOMContentLoaded", function() {
            if (window.innerWidth <= 992) {
                var accordions = document.querySelectorAll("#SneekPeek .accordion-collapse");
                accordions.forEach(function(accordion) {
                    accordion.classList.remove("show");
                    var button = accordion.previousElementSibling.querySelector(".accordion-button");
                    button.classList.add("collapsed");
                    button.setAttribute("aria-expanded", "false");
                });
            }
        });
    </script>
@endpush