@extends('frontend::layouts.app')
@section('title', $metaTags['metaTitle'])
@section('description', $metaTags['metaDescription'])
@section('keywords', $metaTags['metaKeywords'])
@section('other_meta_tags')
    {!! $metaTags['otherMetaTags'] !!}
@endsection
@section('content')
    <div id="pageWrapper" class="ResourcesPage InnerPage">
        <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>
        <div class="HeadSec">
            <div class="container">
                <div class="tleWrap wow animate__fadeInUp" data-wow-duration="1s">
                    <h2 class="mTle">{!! $cms->title !!}</h2>
                    {!! $cms->description !!}
                </div>
            </div>
        </div>
        @if ($resourceCategories->isNotEmpty())
            <!-- Resources-Slider -->
            <section id="Resources">
                <div class="container">
                    <div class="SLiderWrp">
                        <div id="ThumbSlide" class="splide ThumbSlide">
                            <div class="splide__track">
                                <ul class="splide__list">
                                    @foreach ($resourceCategories as $resourceCategory)
                                        <li class="splide__slide">
                                            <div class="cntWrap">
                                                <div class="headttl">{{ $resourceCategory->title }}</div>
                                            </div>
                                        </li>
                                    @endforeach
                                </ul>
                            </div>
                        </div>
                    </div>
                    <div class="backDrp">
                        <div id="LeadSlide" class="splide MainSlide wow animate__fadeInUp" data-wow-duration="1s">
                            <div class="splide__track">
                                <ul class="splide__list">
                                    @foreach ($resourceCategories as $resourceCategory)
                                        <li class="splide__slide">
                                            <div class="innerBx">
                                                <div class="headSec">
                                                    <div class="ttl">{{ $resourceCategory->title }}</div>
                                                    {!! $resourceCategory->description !!}
                                                </div>
                                                <div class="imgWrap">
                                                    <div class="item">
                                                        <div class="imgBx">
                                                            <img src="{{ $resourceCategory->image_value }}" loading="lazy"
                                                                width="276" height="276"
                                                                alt="{{ $resourceCategory->title }}">
                                                        </div>
                                                    </div>
                                                    @foreach ($resourceCategory->resources as $resource)
                                                        <div class="item">
                                                            <div class="imgBx">
                                                                <img src="{{ $resource->image_value }}" loading="lazy"
                                                                    width="276" height="276"
                                                                    alt="{{ $resourceCategory->title }}">
                                                            </div>
                                                            <!-- resource-modal-btn -->
                                                            <div class="btnSec">
                                                                <button type="submit" class="downloadBtnn hoveranim"
                                                                    data-bs-toggle="modal" data-bs-target="#Resources-Sec"
                                                                    data-id="{{ base64_encode($resource->id) }}"
                                                                    aria-label="Download Resource">
                                                                    <span>Download</span>
                                                                </button>
                                                            </div>
                                                        </div>
                                                    @endforeach
                                                </div>
                                            </div>
                                        </li>
                                    @endforeach
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
            </section>
            @include('frontend::frontend.modals.resource-modal')
        @endif
    </div>
@endsection
@push('js')
    <!-- RESOURCES_SLIDER CDN --->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/splidejs/4.1.4/css/splide.min.css"
        integrity="sha512-KhFXpe+VJEu5HYbJyKQs9VvwGB+jQepqb4ZnlhUF/jQGxYJcjdxOTf6cr445hOc791FFLs18DKVpfrQnONOB1g=="
        crossorigin="anonymous" referrerpolicy="no-referrer" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/splidejs/4.1.4/js/splide.min.js"
        integrity="sha512-4TcjHXQMLM7Y6eqfiasrsnRCc8D/unDeY1UGKGgfwyLUCTsHYMxF7/UHayjItKQKIoP6TTQ6AMamb9w2GMAvNg=="
        crossorigin="anonymous" referrerpolicy="no-referrer"></script>
    <script>
        // RESOURCES
        document.addEventListener('DOMContentLoaded', function() {
            var main = new Splide('#LeadSlide', {
                type: 'fade',
                rewind: true,
                pagination: false,
                arrows: false,
                autoplay: false,
                pauseOnHover: true,
                direction: 'ltr',
                breakpoints: {
                    992: {
                        // focus: 'left',
                    }
                },
                accessibility: {
                    slideRole: 'group',
                    slideLabel: 'Main Gallery Slide',
                }
            });
            var resourceCategories = "{{ $resourceCategories->count() }}";
            var thumbnails = new Splide('#ThumbSlide', {
                type: resourceCategories > 8 ? 'loop' : 'slide',
                autoWidth: true,
                rewind: true,
                pagination: false,
                arrows: true,
                isNavigation: true,
                perPage: 8,
                perMove: 1,
                accessibility: {
                    slideRole: 'group',
                    slideLabel: 'Thumbnail Navigation Slide',
                }
            });
            main.sync(thumbnails);
            main.mount();
            thumbnails.mount();
        });
        $(document).on("click", ".downloadBtnn", function() {
            $("#resource_id").val($(this).data("id"));
        });
    </script>
@endpush