@extends('panel.includes.base.head')

@section('title',__('panel/general/description.title'))
@section('seo_description', __('panel/general/description.description'))
<link rel="stylesheet"
      href="{{ asset('assets/panel/css/description.css')}}?v={{ config('app.version') }}">
<style>
    .about__container {
        position: relative;
        overflow: visible;
    }
    .box-desc {
        overflow: visible !important;
    }
    .about__inav {
        position: sticky;
        top: 0;
        z-index: 100;
        padding: 0!important;
    }
    .inav__el {
        list-style: none!important;
    }
    @media (max-width: 999px) {
        .about__inav{
            position: relative!important;
        }
    }
</style>
<script>
    document.addEventListener('DOMContentLoaded', function () {
        const currentRoute = window.location.pathname; // Получаем текущий путь
        const layoutMenu = document.querySelector('.layout-menu');
        const layoutWrapper = document.querySelector('.layout-wrapper');
        const layoutLogo = document.querySelector('.menu-heading');
        const layoutBtn = document.querySelector('.btn-minimaz');
        const layoutBadge = document.querySelector('.badge');

        if (currentRoute.includes('description')) {
            layoutMenu.classList.add('_is-minimized');
            layoutWrapper.classList.add('layout-wrapper-short');
            layoutLogo.style.display = 'none';
            layoutBtn.style.display = 'none';
            layoutBadge.style.display = 'none';
        } else {
            layoutMenu.classList.remove('_is-minimized');
            layoutWrapper.classList.remove('layout-wrapper-short');
        }
    });

</script>
@section('content.main')
    @if($descriptions->isNotEmpty())
        <x-moonshine::box class="box-desc" style="padding: 0;overflow-x: auto">
            <section class="section" data-section="about">
                <div class="container_main p-2" data-container="about">
                    <div class="about">
                        <div class="about__head">
                            <h2 class="about__ttl ttl">{{ __('panel/general/description.main.0', ['project' => server()->getName() . ' х' . server()->getRate()]) }}</h2>
                        </div>
                        <div class="about__container">

                            <ul style="border-bottom: none;" class="about__inav inav" data-inav="">
                                @foreach($descriptions as $description)
                                    <li class="inav__el">
                                        <div class="inav__item" data-open-tab="content-{{ $description->id }}" data-open-tab-group="about">
                                            <div class="inav__ico">
                                                <p><img src="{{ $description->image ? asset($description->image) : asset('assets/panel/images/rating1.webp') }}" alt="{{ (string) $description->{"title_{$currentLang}"} }}"
                                                        class="inav__img"></p>
                                            </div>
                                            <div class="inav__content">
                                                <div class="inav__title">{{ (string)$description->{"title_{$currentLang}"} }}</div>
                                                <div class="inav__desc">{{ $description->{"name_{$currentLang}"} }}</div>
                                            </div>
                                        </div>
                                    </li>
                                @endforeach
                            </ul>


                            <div class="about__content-list" style="overflow: auto" data-about-content-list="">
                                @foreach($descriptions as $description)
                                    <div class="about__content content-{{ $description->id }}" data-tab="content-{{ $description->id }}" data-tab-group="about"
                                         style="display: block;">
                                        <div class="about__content-head">
                                            <div class="inav__ico_2">
                                                <p><img src="{{ $description->image ? asset($description->image) : asset('assets/panel/images/rating1.webp') }}" alt="i0"
                                                        class="inav__img_2"></p>
                                            </div>
                                            <div class="inav__c_2">
                                                <h3 class="about__content-ttl ttl">{{(string) $description->{"title_{$currentLang}"} }}</h3>
                                                <p class="about__content-inf inf">{{ $description->{"name_{$currentLang}"} }}</p>
                                            </div>
                                        </div>
                                        <div class="main_br"></div>
                                        <div class="mt-4 main_br1">
                                            {!! bbcodeToHtmlAll($description->{"description_{$currentLang}"}) !!}
                                        </div>
                                    </div>
                                @endforeach
                            </div> <!-- about__content-list END -->
                        </div>
                    </div> <!-- END  about -->
                </div> <!-- END  container -->
            </section>

        </x-moonshine::box>

        <script src="{{ asset('assets/panel/js/jquery.js') }}?v={{ config('app.version') }}"></script>
        <script src="{{ asset('assets/panel/js/app.js') }}?v={{ config('app.version') }}"></script>
    @else
        <x-moonshine.error title="{{ __('panel/general/description.main.1') }}"
                           text="{{ __('panel/general/description.main.2') }}"/>
    @endif
@endsection