@extends('panel.layouts.base')

@section('title',__('panel/general/files.title'))
@section('seo_description', __('panel/general/files.description'))
<style>
    :is(.dark .files-box) {
        box-shadow: 0 0 10px -4px rgba(255, 255, 255, 0.4);
    }

    :is(.dark .file-btn) {
        text-transform: uppercase;
    }

    :is(.dark .file-btn-reg) {
        text-transform: uppercase;
    }

    .file-anime {
        transform: translateY(-100%);
        opacity: 0;
    }
</style>
@section('content.main')
    <div class="h-full flex flex-col justify-center">
        <x-moonshine::box class="file-anime w-full mx-auto" style="max-width: 600px;">
            <div class="flex items-center gap-2 mb-4 text-center justify-center">
                <h2 class="text-xl" style="font-family: f2;">{{ __('panel/general/files.main.0') }}</h2>
            </div>
            @foreach($files as $file)
                <div>
                    <div class="flex items-center justify-between border-button1" style="margin: 0">
                        <div style="font-family: f2;">
                            <span class="text-">{{ $file->{"type_name_{$currentLang}"} }}</span>
                            @if($file->{"description_{$currentLang}"})
                                <hr style="margin: 0 0 3px 0">
                                <p class="text--sub"
                                   style="font-size: 12px;">{{ $file->{"description_{$currentLang}"} }}</p>
                            @endif
                        </div>
                        @if($file->links->isNotEmpty())
                            <div class="flex gap-2">
                                @foreach($file->links as $link)
                                    <a href="{{ $link->download_url }}" class="floating-button"
                                       style="max-width: 100%;@if($link->image) display: flex;align-items: center;gap: 5px @endif">
                                        @if($link->image)
                                            <img style="width: 22px;height: 22px;" src="{{ asset($link->image) }}"
                                                 alt="{{ $file->{"type_name_{$currentLang}"} }}">
                                        @endif
                                        <span>
                                            {{ $link->{"platform_name_{$currentLang}"} }}
                                        </span>
                                    </a>
                                @endforeach
                            </div>
                        @else
                            <p class="text--sub"
                               style="font-size: 12px;">Ссылки еще не добавлены</p>
                        @endif
                    </div>
                    @if($loop->count > 1)
                        <hr class=" my-1">
                    @endif
                </div>
            @endforeach
            <hr class="">
            <x-dashboard.modal-register :prefix="config('website.register.settings.prefix')">
                @auth()
                    <a class="floating-button"
                       style="height: 45px;line-height: 45px;display: block;margin: 0 auto;max-width: 100%"
                       @click.prevent="toggleModal; document.body.classList.add('overflow-hidden')">
                        {{ __('panel/general/files.main.4') }}
                    </a>
                @elseguest()
                    <a href="{{ route('register') }}" class="floating-button"
                       style="height: 45px;line-height: 45px;display: block;margin: 0 auto;max-width: 100%"
                    >
                        {{ __('panel/general/files.main.4') }}
                    </a>
                @endif
            </x-dashboard.modal-register>
        </x-moonshine::box>
    </div>

    <style>

        .border-button1 {
            display: flex !important;
            box-shadow: 0 0 2px 1px rgba(4, 4, 4, 0.12);
            text-decoration: none;
            padding: 5px 10px;
            position: relative;
            color: white;
            background: none;
            font-weight: 300;
            font-family: 'Montserrat', sans-serif;
            letter-spacing: 2px;
        }

        .dark .border-button1 {
            /*border: 1px solid rgba(255, 255, 255, 0.08);*/
            box-shadow: 0 0 2px 1px #ffffff0d;
        }

        .border-button1:before, .border-button1:after {
            content: "";
            position: absolute;
            width: 0;
            height: 0;
            opacity: 0;
            box-sizing: border-box;
        }

        .border-button1:before {
            bottom: 0;
            left: 0;
            border-left: 1px solid rgba(37, 36, 36, 0.29);
            border-top: 1px solid rgba(124, 112, 112, 0.29);
            box-shadow: 0 0 5px -3px rgba(69, 60, 60, 0.29);
            transition: 0s ease-in-out opacity .8s, .2s ease width .4s, .2s ease height .6s;
        }

        .border-button1:after {
            top: 0;
            right: 0;
            border-right: 1px solid rgba(39, 36, 36, 0.29);
            border-bottom: 1px solid rgba(67, 63, 63, 0.29);
            transition: 0s ease-in-out opacity .4s, .2s ease width, .2s ease height .2s;
        }

        .dark .border-button1:before {
            bottom: 0;
            left: 0;
            border-left: 1px solid rgba(253, 253, 253, 0.39);
            border-top: 1px solid rgba(253, 253, 253, 0.39);
            box-shadow: 0 0 5px -3px rgba(253, 253, 253, 0.39);
            transition: 0s ease-in-out opacity .8s, .2s ease width .4s, .2s ease height .6s;
        }

        .dark .border-button1:after {
            top: 0;
            right: 0;
            border-right: 1px solid rgba(253, 253, 253, 0.39);
            border-bottom: 1px solid rgba(253, 253, 253, 0.39);
            transition: 0s ease-in-out opacity .4s, .2s ease width, .2s ease height .2s;
        }

        .dark hr {
            opacity: .4;
        }

        .text- {
            color: rgba(11, 10, 10, 0.78);
        }

        .text--sub {
            color: rgba(11, 10, 10, 0.53);
        }

        .dark .text- {
            color: rgba(255, 255, 255, 0.77);
        }

        .dark .text--sub {
            color: rgba(255, 255, 255, 0.54);
        }

        .border-button1:hover {
            background: transparent !important;
        }

        .border-button1:hover:before {
            transition: 0s ease-in-out opacity 0s, .2s ease height, .2s ease width .2s;
        }

        .border-button1:hover:after {
            transition: 0s ease-in-out opacity .4s, .2s ease height .4s, .2s ease width .6s;
        }

        .border-button1:hover:before,
        .border-button1:hover:after {
            height: 100%;
            width: 100%;
            opacity: 1;
        }
    </style>

    <style>
        .floating-button {
            cursor: pointer;
            font-family: f2;
            text-decoration: none;
            display: inline-block;
            padding: 0 10px;
            height: 35px;
            line-height: 35px;
            border-radius: 5px;
            font-size: 13px;
            text-transform: uppercase;
            text-align: center;
            letter-spacing: 3px;
            font-weight: 600;
            transition: .3s;
            z-index: 1241;
            color: rgba(0, 0, 0, 0.73);
            background: #fdfdfd;
            box-shadow: 0 8px 15px rgba(0, 0, 0, 0.21);
        }

        .dark .floating-button {
            color: #fff;
            background: #283350;
            box-shadow: 0 8px 15px #00000042;
        }

        .floating-button:hover {
            background: rgba(255, 255, 255, 0.95);
            box-shadow: 0 15px 20px rgba(38, 37, 66, 0.4);
            color: rgba(0, 0, 0, 0.73);
            transform: translateY(-7px);
        }

        .dark .floating-button:hover {
            background: #28334e;
            box-shadow: 0 15px 20px rgba(38, 37, 66, 0.4);
            color: white;
            transform: translateY(-7px);
        }
    </style>
@endsection