@extends('frontend.layouts.main', array('body_class' => 'cop-template', 'hasMaps' => true, 'noFade' => true))

@section('content')

    <div
        class="cop"
        data-controller="pages/cop"
        data-items="{{ json_encode($items) }}"
        data-topics="{{ json_encode($topics) }}"

    >
        <div class="cop__blur-mask _show" data-role="mask"></div>

        <div class="cop__map" data-aos="simplefade" data-aos-delay="1000"></div>

        <div class="cop__initial-modal" data-role="initial-modal">
            <button class="cop__initial-modal-close" data-action="explore">
                @include('frontend.svg.icon-close')
            </button>
            <div class="cop__logo-container">
                <img src="{{ path_asset('path.frontend.images_path') . '/logo-secundary-color.png' }}" alt="logo" />
            </div>
            <h2>{{ $object->title }}</h2>
            {!! $object->summary !!}
            <div class="cop__divider"></div>
            <div class="cop__initial-theme-container">

                @foreach($topics as $topic)
                    <span class="cop__initial-theme-item" data-action="initial-filter" data-filter="theme-{{ $topic['id'] }}" data-id="{{ $topic['id'] }}">
                        <div class="_background-color theme-{{ $topic['id'] }}-color">{!! $topic['svg'] !!}</div>
                        {{ $topic['title'] }}
                    </span>
                @endforeach

            </div>
            <button class="std-button cop__initial-explore-button" data-action="explore">Explore the Map @include('frontend.svg.icon-arrow-forward')</button>
        </div>

        <div class="cop__title-mobile" data-role="title-mobile">
            <h1>{{ $object->title }}</h1>
        </div>

        <div class="cop__topics-container" data-role="topics-container">
            <div class="cop__topics-wrapper">
                <div class="cop__title">
                    <h1>{{ $object->title }}</h1>
                </div>

                @foreach($topics as $topic)
                    <div class="cop__topic _theme-{{ $topic['id'] }}" data-action="filter" data-filter="theme-{{ $topic['id'] }}" data-id="{{ $topic['id'] }}">
                        <div class="cop__topic-image theme-{{ $topic['id'] }}-color">
                            {!! $topic['svg'] !!}
                        </div>

                        <div class="cop__topic-info">
                            <h4>{{ $topic['title'] }}</h4>
                            <p>{!! $topic['shortDescription'] !!}</p>
                            <a href="#" data-filter="theme-{{ $topic['id'] }}">Read more @include('frontend.svg.icon-arrow')</a>
                        </div>
                    </div>
                @endforeach

                <a href="#" class="cop__clear-filter" data-action="clear-filter">
                    Clear Filter
                </a>
            </div>
        </div>

        <div class="cop__topics-mobile-container" data-role="topics-mobile-container">

            <div class="cop__topics-mobile-bar">
                @foreach($topics as $topic)
                    <div class="cop__topic-mobile _theme-{{ $topic['id'] }} theme-{{ $topic['id'] }}-color" data-action="filter" data-filter="theme-{{ $topic['id'] }}" data-id="{{ $topic['id'] }}">
                        <div class="cop__topic-image-mobile theme-{{ $topic['id'] }}-color">
                            {!! $topic['svg'] !!}
                        </div>
                        <h4>{{ $topic['title'] }}</h4>
                        <div class="cop__topic-divider-mobile"></div>
                    </div>
                @endforeach
            </div>

            <div class="cop__topics-mobile-info-container">
                @foreach($topics as $topic)
                    <div class="cop__topics-mobile-info _background-color _theme-{{ $topic['id'] }} theme-{{ $topic['id'] }}-color" data-filter-id="theme-{{ $topic['id'] }}" data-role="description-mobile">
                        <span>{{ $topic['shortDescription'] }}</span>
                        <button data-action="open-description" data-filter="theme-{{ $topic['id'] }}">
                            @include('frontend.svg.icon-plus')
                        </button>
                    </div>
                @endforeach
            </div>

            <a href="#" class="cop__clear-filter-mobile" data-action="clear-filter">
                Clear Filter
            </a>
        </div>

        <div class="cop__video-layout _background-color" data-role="video-sidebar">
            <button class="cop__close-video-layout" data-action="close-sidebar">
                @include('frontend.svg.icon-sidebar-close')
            </button>
            <h3>Close and Back to map</h3>
            <div class="cop__video-container" data-role="video-container"></div>
            <div class="cop__video-content" data-role="video-content"></div>
        </div>

        <div class="cop__embed-layout _background-color" data-role="embed-sidebar">
            <button class="cop__close-embed-layout" data-action="close-sidebar">
                @include('frontend.svg.icon-sidebar-close')
            </button>
            <h3>Close and Back to map</h3>
            <div class="cop__embed-container" data-role="embed-container"></div>
        </div>

        <div class="cop__description-layout" data-role="description-sidebar">
            <button class="cop__toggle-description-layout" data-action="toggle-description">
                <span class="_icon_desktop">
                    @include('frontend.svg.icon-arrow')
                </span>
                <span class="_icon_mobile">
                    @include('frontend.svg.icon-sidebar-close')
                </span>
            </button>

            <h3>Close and Back to map</h3>


            @foreach($topics as $topic)
                <div class="cop__description-container" data-role="description-container" data-filter="theme-{{ $topic['id'] }}">
                    <div class="cop__description-container-scroll">
                        <div class="cop__description-image">
                            <img src="{{ $topic['image'] }}" alt="{{ $topic['title'] }}-image">
                        </div>
                        <div class="cop__description-content">
                            <h1>{{ $topic['title'] }}</h1>
                            <h4>
                                {!! $topic['shortDescription'] !!}
                            </h4>
                            <p>
                                {!! $topic['longDescription'] !!}
                            </p>
                        </div>
                    </div>
                    @if(!empty($topic['cta']))
                        {!! $topic['cta'] !!}
                    @endif
                </div>
            @endforeach
        </div>
    </div>

    <style>
        @foreach($topics as $topic)
            ._background-color.theme-{{ $topic['id'] }}-color {
                background-color: {{ $topic['color'] }};
            }

            .cop__topic-image.theme-{{ $topic['id'] }}-color {
                background-color: {{ $topic['color'] }};
            }
            ._filter-active .cop__topic-image.theme-{{ $topic['id'] }}-color {
                background-color: white;
            }
            ._filter-active .cop__topic-image.theme-{{ $topic['id'] }}-color path {
                fill: {{ $topic['color'] }};
            }
            ._active .cop__topic-image.theme-{{ $topic['id'] }}-color {
                background-color: {{ $topic['color'] }};
            }
            ._active .cop__topic-image.theme-{{ $topic['id'] }}-color path {
                fill: white;
            }
            .cop__topic:hover .cop__topic-image.theme-{{ $topic['id'] }}-color {
                background-color: {{ $topic['color'] }};
            }
            .cop__topic:hover .cop__topic-image.theme-{{ $topic['id'] }}-color path {
                fill: white;
            }

            .cop__description-layout.theme-{{ $topic['id'] }}-color {
                background-color: {{ $topic['color'] }};
            }

            .copitem-marker.theme-{{ $topic['id'] }}-color {
                background: {{ $topic['color'] }};
            }

            .cop__topic-image-mobile.theme-{{ $topic['id'] }}-color path {
                fill: {{ $topic['color'] }};
            }
            .cop__topic-mobile.theme-{{ $topic['id'] }}-color h4 {
                color: {{ $topic['color'] }};
            }
            ._active.cop__topic-mobile.theme-{{ $topic['id'] }}-color {
                background-color: {{ $topic['color'] }};
            }
            ._active .cop__topic-image-mobile.theme-{{ $topic['id'] }}-color path {
                fill: white;
            }
            ._active.cop__topic-mobile.theme-{{ $topic['id'] }}-color h4 {
                color: white;
            }

            ._color.theme-{{ $topic['id'] }}-color {
                color: {{ $topic['color'] }};
            }
            ._path.theme-{{ $topic['id'] }}-color path {
                fill: {{ $topic['color'] }};
            }
        @endforeach
    </style>

@stop