@extends('landing.master')

@section('title', $blog->title)
@section('meta_title', $blog->title)
@section('keywords', $blog->keywords)
@section('description', $blog->description)
{{-- facebook meta tags --}}
@section('fb_meta_title', $blog->title)
@section('fb_description',  $blog->description)
@section('fb_route', url()->full())
@section('fb_type', 'website')
@section('fb_image', $blog->image)

{{--twitter meta tags --}}
@section('twitter_meta_title',  $blog->title)
@section('twitter_description', $blog->description)
@section('twitter_url',  url()->full())

@section('content')
    <section class="w-full block relative pb-10 md:pb-20 pt-20 sm:pt-[90px] xl:pt-[160px] overflow-x-hidden">
        <div class="mx-auto max-w-[1024px] min-[1600px]:max-w-[1440px] px-5 block relative overflow-hidden">
            
            <div data-aos="fade-down" data-aos-duration="2000" data-aos-delay="100" class="block w-full mb-5">
                <div class="flex flex-row flex-wrap -mx-3 md:-mx-6 items-center">
                    <div class="px-3 md:px-6 py-2 relative">
                        <a href="{{ route('index') }}" class="text-neutral-400 transition-all text-base md:text-lg lg:text-xl hover:text-colormain [&.active]:text-colormain font-medium">{{ __('Почетна') }}</a>
                    </div>
                    <div class="px-3 md:px-6 py-2 relative">
                        <svg class="w-[6px] md:w-[8px] h-auto absolute left-0 top-1/2 -translate-y-1/2" width="8" height="15" viewBox="0 0 8 15" fill="none" xmlns="http://www.w3.org/2000/svg">
                            <path d="M1.42467 14.7253C1.26634 14.7253 1.10801 14.6669 0.983008 14.5419C0.741341 14.3003 0.741341 13.9003 0.983008 13.6586L6.41634 8.22526C6.81634 7.82526 6.81634 7.17526 6.41634 6.77526L0.983008 1.34193C0.741341 1.10026 0.741341 0.70026 0.983008 0.458594C1.22467 0.216927 1.62467 0.216927 1.86634 0.458594L7.29967 5.89193C7.72467 6.31693 7.96634 6.89193 7.96634 7.50026C7.96634 8.10859 7.73301 8.68359 7.29967 9.10859L1.86634 14.5419C1.74134 14.6586 1.58301 14.7253 1.42467 14.7253Z" fill="#292D32"/>
                        </svg>
                        <a href="{{ route('list_blogs', ['main_slug' => $settings->blogs_slug]) }}" class="text-neutral-400 transition-all text-base md:text-lg lg:text-xl hover:text-colormain [&.active]:text-colormain font-medium">{{ __('Новости') }}</a>
                    </div>
                    <div class="px-3 md:px-6 py-2 relative">
                        <svg class="w-[6px] md:w-[8px] h-auto absolute left-0 top-1/2 -translate-y-1/2" width="8" height="15" viewBox="0 0 8 15" fill="none" xmlns="http://www.w3.org/2000/svg">
                            <path d="M1.42467 14.7253C1.26634 14.7253 1.10801 14.6669 0.983008 14.5419C0.741341 14.3003 0.741341 13.9003 0.983008 13.6586L6.41634 8.22526C6.81634 7.82526 6.81634 7.17526 6.41634 6.77526L0.983008 1.34193C0.741341 1.10026 0.741341 0.70026 0.983008 0.458594C1.22467 0.216927 1.62467 0.216927 1.86634 0.458594L7.29967 5.89193C7.72467 6.31693 7.96634 6.89193 7.96634 7.50026C7.96634 8.10859 7.73301 8.68359 7.29967 9.10859L1.86634 14.5419C1.74134 14.6586 1.58301 14.7253 1.42467 14.7253Z" fill="#292D32"/>
                        </svg>
                        <a class="active text-neutral-400 transition-all text-base md:text-lg lg:text-xl hover:text-colormain [&.active]:text-colormain font-medium">
                            @guest
                                @if(session()->has('locale'))
                                    @if(session('locale') == 'mk')
                                        {{ Str::words($blog->title, 40, '... ') }}
                                    @endif
                                    @if(session('locale') == 'en')
                                        @if($blog->title_eng != null)
                                            {{ Str::words($blog->title_eng, 40, '... ') }}
                                        @else
                                            {{ Str::words($blog->title, 40, '... ') }}
                                        @endif
                                    @endif
                                    @if(session('locale') == 'al')
                                        @if($blog->title_alb != null)
                                            {{ Str::words($blog->title_alb, 40, '... ') }}
                                        @else
                                            {{ Str::words($blog->title, 40, '... ') }}
                                        @endif
                                    @endif
                                @else
                                    {{ Str::words($blog->title, 40, '... ') }}
                                @endif
                            @else
                                @if(\App\Models\User::where('id', Auth::user()->id)->first()->lang == "mk")
                                    {{ Str::words($blog->title, 40, '... ') }}
                                @endif
                                @if(\App\Models\User::where('id', Auth::user()->id)->first()->lang == "en")
                                    @if($blog->title_eng != null)
                                        {{ Str::words($blog->title_eng, 40, '... ') }}
                                    @else
                                        {{ Str::words($blog->title, 40, '... ') }}
                                    @endif
                                @endif
                                @if(\App\Models\User::where('id', Auth::user()->id)->first()->lang == "al")
                                    @if($blog->title_alb != null)
                                        {{ Str::words($blog->title_alb, 40, '... ') }}
                                    @else
                                        {{ Str::words($blog->title, 40, '... ') }}
                                    @endif
                                @endif
                            @endguest
                        </a>
                    </div>
                </div>
            </div>

            <h1 data-aos="fade-down" data-aos-duration="2000" data-aos-delay="100" class="xl:w-[820px] max-w-full font-medium text-colormain text-3xl sm:text-4xl lg:text-5xl">
                @guest
                    @if(session()->has('locale'))
                        @if(session('locale') == 'mk')
                            {{ $blog->title }}
                        @endif
                        @if(session('locale') == 'en')
                            @if($blog->title_eng != null)
                                {{ $blog->title_eng }}
                            @else
                                {{ $blog->title }}
                            @endif
                        @endif
                        @if(session('locale') == 'al')
                            @if($blog->title_alb != null)
                                {{ $blog->title_alb }}
                            @else
                                {{ $blog->title }}
                            @endif
                        @endif
                    @else
                        {{ $blog->title }}
                    @endif
                @else
                    @if(\App\Models\User::where('id', Auth::user()->id)->first()->lang == "mk")
                        {{ $blog->title }}
                    @endif
                    @if(\App\Models\User::where('id', Auth::user()->id)->first()->lang == "en")
                        @if($blog->title_eng != null)
                            {{ $blog->title_eng }}
                        @else
                            {{ $blog->title }}
                        @endif
                    @endif
                    @if(\App\Models\User::where('id', Auth::user()->id)->first()->lang == "al")
                        @if($blog->title_alb != null)
                            {{ $blog->title_alb }}
                        @else
                            {{ $blog->title }}
                        @endif
                    @endif
                @endguest

            </h1>
            <div data-aos="fade-down" data-aos-duration="2000" data-aos-delay="100" class="py-3 md:py-5 flex flex-col sm:flex-row justify-between items-start sm:items-center -mx-2 font-medium text-sm sm:text-base lg:text-lg text-neutral-500">
                <div class="flex flex-wrap items-center justify-between p-2">
                    <div>
                        <div class="pl-7 pr-2.5 relative !leading-tight">
                            <svg class="absolute left-0 top-1/2 -translate-y-1/2 w-auto h-auto max-h-[16px]" width="18" height="16" viewBox="0 0 18 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                                <g clip-path="url(#clip0_719_2308)">
                                <path d="M18 10.3968C17.9725 11.6292 17.5519 12.6757 16.6723 13.5332C15.9427 14.2445 15.2097 14.9527 14.4734 15.6578C14.1452 15.9728 13.7516 16.0783 13.3103 15.9428C12.8861 15.8124 12.624 15.5207 12.5395 15.0951C12.4674 14.7305 12.5593 14.3959 12.8299 14.1311C13.5589 13.4187 14.3002 12.7189 15.0306 12.0065C15.6761 11.3757 15.8919 10.6171 15.6172 9.76816C15.3444 8.92536 14.7297 8.41555 13.8325 8.26985C13.07 8.14589 12.4109 8.38067 11.8659 8.9106C10.4677 10.2683 9.09102 11.6456 7.67414 12.984C6.39351 14.1947 4.85 14.5558 3.15535 14.0355C1.4607 13.5153 0.41517 12.3467 0.0862059 10.6399C-0.202567 9.14163 0.239264 7.8239 1.33489 6.73532C2.44291 5.6336 3.56938 4.54985 4.69033 3.4618C5.25164 2.91657 6.11107 3.00029 6.50721 3.6338C6.63876 3.84596 6.69321 4.0951 6.6618 4.3411C6.63039 4.5871 6.51494 4.81563 6.33405 4.98989C5.20557 6.09037 4.07682 7.19093 2.94778 8.29159C2.05063 9.1698 2.04843 10.5474 2.9376 11.4081C3.35776 11.8138 3.92554 12.041 4.51696 12.0401C5.10838 12.0392 5.67542 11.8103 6.09428 11.4033C7.46666 10.066 8.8385 8.72815 10.2098 7.38976C10.9167 6.69722 11.7514 6.25932 12.7424 6.08679C15.0283 5.68887 17.3473 7.17161 17.866 9.37668C17.9097 9.5645 17.9436 9.75233 17.9692 9.94337C17.989 10.1022 17.9912 10.2637 18 10.3968Z" fill="#0D153D"/>
                                <path d="M8.72641 1.37344e-06C8.94919 0.000869652 9.16667 0.0662283 9.35127 0.187783C9.53587 0.309337 9.67926 0.481606 9.76324 0.682728C9.84722 0.88385 9.868 1.10476 9.82295 1.31741C9.7779 1.53007 9.66905 1.72488 9.51021 1.87713C9.35138 2.02939 9.14971 2.13221 8.93082 2.17256C8.71192 2.2129 8.48566 2.18896 8.28075 2.10375C8.07585 2.01854 7.90153 1.87592 7.77992 1.69398C7.65832 1.51205 7.59491 1.299 7.59775 1.08187C7.60223 0.793144 7.72318 0.517748 7.9344 0.315277C8.14563 0.112807 8.43016 -0.000454933 8.72641 1.37344e-06Z" fill="#0D153D"/>
                                </g>
                                <defs>
                                <clipPath id="clip0_719_2308">
                                <rect width="18" height="16" fill="white"/>
                                </clipPath>
                                </defs>
                            </svg>
                            {{ __('Смарт Инвест Гроуп') }}
                        </div>
                    </div>
                    <div class="pl-4 relative !leading-tight">
                        <svg class="absolute left-0 top-1/2 -translate-y-1/2 w-auto h-auto max-h-[7px]" width="7" height="7" viewBox="0 0 7 7" fill="none" xmlns="http://www.w3.org/2000/svg">
                            <circle cx="3.5" cy="3.5" r="3.5" fill="#737373"/>
                        </svg>
                        
                        @guest
                            @if(session()->has('locale'))
                                @if(session('locale') == 'mk')
                                    {{ $blog->created_at->locale('mk')->translatedFormat('d F, Y') }}
                                @endif
                                @if(session('locale') == 'en')
                                    {{ $blog->created_at->format('M d, Y') }}
                                @endif
                                @if(session('locale') == 'al')
                                    {{ $blog->created_at->locale('sq')->translatedFormat('d F Y') }}
                                @endif
                            @else
                                {{ $blog->created_at->locale('mk')->translatedFormat('d F, Y') }}
                            @endif
                        @else
                            @if(\App\Models\User::where('id', Auth::user()->id)->first()->lang == "mk")
                                {{ $blog->created_at->locale('mk')->translatedFormat('d F, Y') }}
                            @endif
                            @if(\App\Models\User::where('id', Auth::user()->id)->first()->lang == "en")
                                {{ $blog->created_at->format('M d, Y') }}
                            @endif
                            @if(\App\Models\User::where('id', Auth::user()->id)->first()->lang == "al")
                                {{ $blog->created_at->locale('sq')->translatedFormat('d F Y') }}
                            @endif
                        @endguest

                    </div>
                </div>
                <div class="flex items-center p-2">
                    <div class="pr-2">{{ __('Сподели') }}: </div>
                    <div class="flex flex-row -mx-1 justify-center">
                        <div class="p-1 flex items-center">
                            <a href="https://www.facebook.com/sharer/sharer.php?u={!! route('list_blog', ['main_slug' => $settings->blogs_slug, 'slug' => $blog->slug]) !!}" class="group inline-block">
                                <svg class="fill-colormain group-hover:fill-coloryellow transition-all duration-300 w-auto h-4"width="15" height="15" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg">
                                    <path d="M7.5 0C3.3579 0 0 3.3579 0 7.5C0 11.0172 2.4216 13.9686 5.6883 14.7792V9.792H4.1418V7.5H5.6883V6.5124C5.6883 3.9597 6.8436 2.7765 9.3498 2.7765C9.825 2.7765 10.6449 2.8698 10.9803 2.9628V5.0403C10.8033 5.0217 10.4958 5.0124 10.1139 5.0124C8.8842 5.0124 8.409 5.4783 8.409 6.6894V7.5H10.8588L10.4379 9.792H8.409V14.9451C12.1227 14.4966 15.0003 11.3346 15.0003 7.5C15 3.3579 11.6421 0 7.5 0Z" />
                                </svg>
                            </a>
                        </div>
                        <div class="p-1 flex items-center">
                            <a href="https://www.linkedin.com/sharing/share-offsite/?url={!! route('list_blog', ['main_slug' => $settings->blogs_slug, 'slug' => $blog->slug]) !!}" target="_blank" class="group inline-block">
                                <svg class="fill-colormain group-hover:fill-coloryellow transition-all duration-300 w-auto h-4" width="15" height="15" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg">
                                    <g clip-path="url(#clip0_529_7009)">
                                    <path d="M13.8896 0H1.10742C0.495117 0 0 0.483399 0 1.08105V13.916C0 14.5137 0.495117 15 1.10742 15H13.8896C14.502 15 15 14.5137 15 13.9189V1.08105C15 0.483399 14.502 0 13.8896 0ZM4.4502 12.7822H2.22363V5.62207H4.4502V12.7822ZM3.33691 4.64648C2.62207 4.64648 2.04492 4.06934 2.04492 3.35742C2.04492 2.64551 2.62207 2.06836 3.33691 2.06836C4.04883 2.06836 4.62598 2.64551 4.62598 3.35742C4.62598 4.06641 4.04883 4.64648 3.33691 4.64648ZM12.7822 12.7822H10.5586V9.30176C10.5586 8.47266 10.5439 7.40332 9.40137 7.40332C8.24414 7.40332 8.06836 8.30859 8.06836 9.24316V12.7822H5.84766V5.62207H7.98047V6.60059H8.00977C8.30566 6.03809 9.03223 5.44336 10.1133 5.44336C12.3662 5.44336 12.7822 6.92578 12.7822 8.85352V12.7822V12.7822Z"/>
                                    </g>
                                    <defs>
                                    <clipPath id="clip0_529_7009">
                                    <rect width="15" height="15" fill="white"/>
                                    </clipPath>
                                    </defs>
                                </svg>
                            </a>
                        </div>
                        <div class="p-1 flex items-center">
                            <a href="https://twitter.com/intent/tweet?text={!! route('list_blog', ['main_slug' => $settings->blogs_slug, 'slug' => $blog->slug]) !!}" class="group inline-block">
                                <svg class="fill-colormain group-hover:fill-coloryellow transition-all duration-300 w-auto h-4" width="26" height="26" viewBox="0 0 26 26" fill="none" xmlns="http://www.w3.org/2000/svg">
                                    <path d="M20.475 0.765137H24.4623L15.7523 11.1293L26 25.2349H17.9771L11.6889 16.6816L4.50171 25.2349H0.510714L9.82614 14.1456L0 0.767065H8.22714L13.9026 8.58357L20.475 0.765137ZM19.0729 22.7509H21.2829L7.02 3.11992H4.65029L19.0729 22.7509Z"></path>
                                </svg>
                            </a>
                        </div>
                    </div>
                </div>
            </div>
            <div data-aos="fade-up" data-aos-duration="2000" data-aos-delay="300" class="text-base sm:text-lg lg:text-xl text-neutral-500 overflow-hidden">
                <div class="h-[352px] w-full rounded-[10px]">
                    @if ($blog->image != null)
                        <img class="w-full h-full object-cover object-center rounded-lg" loading="lazy" src="{{ $blog->image }}" alt="{{ $blog->title }}">
                    @else
                        <img class="w-full h-full object-cover object-center rounded-lg" loading="lazy" src="{{ Vite::asset('resources/images/homepage/blog-empty-image.jpg')}}" alt="{{ $blog->title }}">
                    @endif
                </div>
                <p class="py-5">
                    @guest
                        @if(session()->has('locale'))
                            @if(session('locale') == 'mk')
                                {!! $blog->description !!}
                            @endif
                            @if(session('locale') == 'en')
                                @if($blog->description_eng != null)
                                    {!! $blog->description_eng !!}
                                @else
                                    {!! $blog->description !!}
                                @endif
                            @endif
                            @if(session('locale') == 'al')
                                @if($blog->description_alb != null)
                                    {!! $blog->description_alb !!}
                                @else
                                    {!! $blog->description !!}
                                @endif
                            @endif
                        @else
                            {!! $blog->description !!}
                        @endif
                    @else
                        @if(\App\Models\User::where('id', Auth::user()->id)->first()->lang == "mk")
                            {!! $blog->description !!}
                        @endif
                        @if(\App\Models\User::where('id', Auth::user()->id)->first()->lang == "en")
                            @if($blog->description_eng != null)
                                {!! $blog->description_eng !!}
                            @else
                                {!! $blog->description !!}
                            @endif
                        @endif
                        @if(\App\Models\User::where('id', Auth::user()->id)->first()->lang == "al")
                            @if($blog->description_alb != null)
                                {!! $blog->description_alb !!}
                            @else
                                {!! $blog->description !!}
                            @endif
                        @endif
                    @endguest
                </p>
                <div>
                    @guest
                        @if(session()->has('locale'))
                            @if(session('locale') == 'mk')
                                {!! $blog->body !!}
                            @endif
                            @if(session('locale') == 'en')
                                @if($blog->body_eng != null)
                                    {!! $blog->body_eng !!}
                                @else
                                    {!! $blog->body !!}
                                @endif
                            @endif
                            @if(session('locale') == 'al')
                                @if($blog->body_alb != null)
                                    {!! $blog->body_alb !!}
                                @else
                                    {!! $blog->body !!}
                                @endif
                            @endif
                        @else
                            {!! $blog->body !!}
                        @endif
                    @else
                        @if(\App\Models\User::where('id', Auth::user()->id)->first()->lang == "mk")
                            {!! $blog->body !!}
                        @endif
                        @if(\App\Models\User::where('id', Auth::user()->id)->first()->lang == "en")
                            @if($blog->body_eng != null)
                                {!! $blog->body_eng !!}
                            @else
                                {!! $blog->body !!}
                            @endif
                        @endif
                        @if(\App\Models\User::where('id', Auth::user()->id)->first()->lang == "al")
                            @if($blog->body_alb != null)
                                {!! $blog->body_alb !!}
                            @else
                                {!! $blog->body !!}
                            @endif
                        @endif
                    @endguest
                </div>
            </div>
            <div class="mt-4 flex items-center flex-wrap justify-center sm:justify-between -mx-1">
                <div class="p-1">
                    @if($previous_blog_slug != null)
                        <a href="{{ route('list_blog', ['main_slug' => 'blogs', 'slug' => $previous_blog_slug]) }}" class="w-[180px] rounded-[30px] flex items-center justify-center min-h-[42px] lg:min-h-[50px] pl-[50px] px-2 py-2 text-white font-medium text-base !leading-tight text-center align-middle bg-colormain border border-colormain transition-all duration-300 hover:bg-transparent hover:text-colormain hover:border-colormain  relative group">
                            <svg class="absolute z-10 left-[25px] rounded-full fill-white group-hover:fill-colormain transition duration-300 cursor-pointer group-hover:-ml-1" width="20" height="14" viewBox="0 0 20 14" xmlns="http://www.w3.org/2000/svg">
                                <path d="M7.57043 13.8201C7.38043 13.8201 7.19043 13.7501 7.04043 13.6001L0.97043 7.53012C0.68043 7.24012 0.68043 6.76012 0.97043 6.47012L7.04043 0.400117C7.33043 0.110117 7.81043 0.110117 8.10043 0.400117C8.39043 0.690117 8.39043 1.17012 8.10043 1.46012L2.56043 7.00012L8.10043 12.5401C8.39043 12.8301 8.39043 13.3101 8.10043 13.6001C7.96043 13.7501 7.76043 13.8201 7.57043 13.8201Z"/>
                                <path d="M18.4999 7.75H1.66992C1.25992 7.75 0.919922 7.41 0.919922 7C0.919922 6.59 1.25992 6.25 1.66992 6.25H18.4999C18.9099 6.25 19.2499 6.59 19.2499 7C19.2499 7.41 18.9099 7.75 18.4999 7.75Z"/>
                            </svg>
                            {{ __('Претходно') }}
                        </a>
                    @endif
                </div>
                <div class="p-1">
                    @if($next_blog_slug != null)
                        <a href="{{ route('list_blog', ['main_slug' => 'blogs', 'slug' => $next_blog_slug]) }}" class="w-[180px] rounded-[30px] flex items-center justify-center min-h-[42px] lg:min-h-[50px] pr-[50px] px-2 py-2 text-white font-medium text-base !leading-tight text-center align-middle bg-colormain border border-colormain transition-all duration-300 hover:bg-transparent hover:text-colormain hover:border-colormain  relative group">
                            <svg class="absolute z-10 right-[25px] rounded-full fill-white group-hover:fill-colormain transition duration-300 cursor-pointer group-hover:-mr-1" width="20" height="14" viewBox="0 0 20 14" fill="none" xmlns="http://www.w3.org/2000/svg">
                                <path d="M12.4301 13.8201C12.2401 13.8201 12.0501 13.7501 11.9001 13.6001C11.6101 13.3101 11.6101 12.8301 11.9001 12.5401L17.4401 7.00012L11.9001 1.46012C11.6101 1.17012 11.6101 0.690117 11.9001 0.400117C12.1901 0.110117 12.6701 0.110117 12.9601 0.400117L19.0301 6.47012C19.3201 6.76012 19.3201 7.24012 19.0301 7.53012L12.9601 13.6001C12.8101 13.7501 12.6201 13.8201 12.4301 13.8201Z"/>
                                <path d="M18.33 7.75H1.5C1.09 7.75 0.75 7.41 0.75 7C0.75 6.59 1.09 6.25 1.5 6.25H18.33C18.74 6.25 19.08 6.59 19.08 7C19.08 7.41 18.74 7.75 18.33 7.75Z"/>
                            </svg>
                            {{ __('Следно') }}
                        </a>
                    @endif
                </div>
            </div>
        </div>
    </section>
@endsection