@extends('front.app')
@section('meta')
    <x-meta :meta="$meta"/>
@stop

@section('container')

    <div class="page-content">

        <div class="inner-page-head">
            @include('front.templates.background-header')
        </div>

        <div class="inner-page account video-message">
            @include('front.templates.background-inner-page')
            <div class="container">
                <div class="inner-page-content">
                    {{--<div class="breadcrumbs-wrapper">
                        @if($parent_menu->itemByLang)
                            {{ Breadcrumbs::render($parent_menu->alias, $parent_menu) }}
                        @endif
                    </div>--}}
                    <h1 class="h2 text-center">{{ $scenario->short_descr ?? '' }}</h1>

                    @if($scenario->children->isNotEmpty())
                        <div class="tab-wrapper pt-3">
                            <ul class="justify-content-center">
                                @foreach($scenario->children as $one_item)
                                    @if($one_item->children->isEmpty() && $loop->iteration <= 2)
                                        <li>
                                            <button type="button" class="tab-btn{{ $loop->first ? ' active' : '' }}"
                                                    onclick="openTab(event, 'tab-{{ $one_item->id }}')">{{ $one_item->itemByLang->name }}</button>
                                        </li>
                                    @endif
                                @endforeach
                            </ul>
                        </div>

                        @foreach($scenario->children as $one_item)
                            <div id="tab-{{ $one_item->id }}" class="tab-content{{ $loop->first ? ' active' : '' }}">
                                <div class="account-inner">
                                    <a href="https://www.youtube.com/watch?v={{ FindYoutubeImg($one_item->youtube_link) }}"
                                       class="account-video" data-fancybox="video">
                                        <img
                                            src="https://img.youtube.com/vi/{{ FindYoutubeImg($one_item->youtube_link) }}/maxresdefault.jpg"
                                            alt="{{ $one_item->itemByLang->name ?? '' }}" width="1000" height="562">
                                    </a>
                                    <div class="account-link">
                                        <a href="{{ $scenario->itemByLang->link_create_video ?: route('create-video') }}"
                                           class="button">{{ ShowLabelById(22) }}</a>
                                        <a href="{{ route('menu', 'faq') }}"
                                           class="button button--inversed">{{ ShowLabelById(24) }}</a>
                                    </div>
                                </div>
                            </div>
                        @endforeach
                    @endif
                </div>
            </div>
        </div>

        @if($example_page_content && $example_page_content->children->isNotEmpty())
            <div class="inner-page two-columns">
                <div class="container">
                    <div class="two-columns-list">
                        @foreach($example_page_content->children as $one_item)
                            <div class="two-columns-item">
                                <div class="two-columns-img">
                                    <img
                                        src="{{ $one_item->oImage && $one_item->oImage->img && file_exists('upfiles/menu/' . $one_item->oImage->img) ? asset('upfiles/menu/'. $one_item->oImage->img) : asset('front-assets/img/no-image.png') }}"
                                        loading="lazy"
                                        alt="{{ $one_item->alias ?? '' }}" width="168" height="169">
                                </div>
                                <div class="two-columns-text">
                                    <h3>{{ $one_item->name ?? '' }}</h3>
                                    <p>{{ $one_item->short_descr ?? '' }}</p>
                                </div>
                            </div>
                        @endforeach
                    </div>
                </div>
            </div>
        @endif

        @if($pay_types && $pay_types->goodsItems->isNotEmpty())
            <div class="inner-page options video-message">
                <div class="item-decor item-decor--left">
                    <img src="{{ asset('front-assets/img/candy-left.png') }}" alt="Candy left">
                </div>
                <div class="container">
                    <div class="inner-page-content pt-0">
                        <h1 class="h2 text-center">{{ ShowLabelById(19) }}</h1>
                        <div class="options-list">
                            <ul>
                                @foreach($pay_types->goodsItems as $one_pay_type)
                                    <li>
                                        <span class="video-message-label">
                                            <span
                                                class="options-name">{{ $one_pay_type->itemByLang->name ?? '' }}</span>
                                            <span class="options-text">
                                                {!! $one_pay_type->itemByLang->body ?? '' !!}
                                            </span>
                                            <span class="options-desc">
                                                <ul>
                                                    <li>
                                                        <img
                                                            src="{{ $loop->first ? asset('front-assets/img/icons/star-silver.svg') : asset('front-assets/img/icons/star.svg') }}"
                                                            alt="Start 1" width="18" height="18">
                                                        <p>{{ $one_pay_type->itemByLang->page_title ?? '' }}</p>
                                                    </li>
                                                    <li>
                                                        <img
                                                            src="{{ $loop->first ? asset('front-assets/img/icons/star-silver.svg') : asset('front-assets/img/icons/star.svg') }}"
                                                            alt="Star 2" width="18" height="18">
                                                        <p>{{ $one_pay_type->itemByLang->h1_title ?? '' }}</p>
                                                    </li>
                                                </ul>
                                            </span>
                                            <span class="options-footer">
                                                <span class="options-price">
                                                    @if($one_pay_type->price_old > 0)
                                                        <span class="options-price-current"
                                                              style="color: #F53D3D;">{{ getDefaultPriceFormat($one_pay_type->price) }} {{ ShowLabelById(21) }}</span>
                                                        <span
                                                            class="options-price-old">{{ getDefaultPriceFormat($one_pay_type->price_old) }} {{ ShowLabelById(21) }}</span>
                                                    @else
                                                        <span
                                                            class="options-price-current">{{ getDefaultPriceFormat($one_pay_type->price) }} {{ ShowLabelById(21) }}</span>
                                                    @endif
                                                </span>
                                                <span
                                                    class="options-info">{{ $one_pay_type->itemByLang->meta_title ?? '' }}</span>
                                            </span>
                                        </span>
                                    </li>
                                @endforeach
                            </ul>
                        </div>
                        <div class="options-link">
                            <a href="{{ $scenario->itemByLang->link_create_video ?: route('create-video') }}"
                               class="button">{{ ShowLabelById(20) }}</a>
                        </div>
                    </div>
                </div>
            </div>
        @endif
        @include('front.templates.background-bottom')

    </div>

@stop