@extends('layouts.app')
@section('css')
@endsection
@section('meta_title'){{$data->meta_title}}@endsection
@section('meta_desc'){{$data->meta_description}}@endsection
@section('meta_author'){{"Author"}}@endsection
@section('meta_keyword'){{"Keyword"}}@endsection
@section('canonical'){{url()->current()}}@endsection

@section('content')

    <section class="top-space-margin right-side-bar">
        <div class="container">
            <div class="row justify-content-center">
                <div class="col-12 col-lg-8 blog-standard md-mb-50px sm-mb-40px">
                    <div class="col-12 blog-details mb-12">
                        <div class="entry-meta mb-20px fs-15">
                            <span><i class="text-dark-gray feather icon-feather-calendar"></i>{{ $data->created_at->format('Y-m-d') }}</span>
                            <span><i class="text-dark-gray feather icon-feather-folder"></i><a href="{{ $data->category->slug }}">{{ $data->category->title }}</a></span>
                            <div class=" mb-2">
                                <nav aria-label="breadcrumb">
                                    <ol class="breadcrumb">
                                        <li class="breadcrumb-item"><a href="{{ route('home') }}"><i class="feather icon-feather-home align-middle icon-small"></i></a></li>
                                        <li class="breadcrumb-item active" aria-current="page" style="max-width: 80vw; white-space: nowrap;overflow: hidden; text-overflow: ellipsis;">
                                            <a href="{{ $data->slug }}">{{ $data->title }}</a>
                                        </li>
                                    </ol>
                                </nav>
                            </div>
                        </div>
                        <h5 class="text-dark-gray fw-600 w-80 sm-w-100 mb-6">{{ $data->title }}</h5>
                        <img src="{{ url('thumb.php') }}?src=/storage/{{$data->media->path}}&w=800&h=570" alt="" class="w-100 border-radius-6px mb-7">
                        <p>
                            {!! $data->content !!}
                        </p>
                    </div>
                    @if($data->tags->isNotEmpty())
                    <div class="col-lg-10">
                        <div class="row mb-30px">
                            <div class="tag-cloud col-12 col-md-9 text-center text-md-start sm-mb-15px">
                                    @foreach($data->tags as $tag)
                                        <a href="{{ route('tag.show', $tag->slug) }}">{{ $tag->name }}</a>
                                    @endforeach
                            </div>
                        </div>
                    </div>
                    @else

                    @endif

                </div>
                <!-- start sidebar -->
                <aside  class="col-12 col-xl-4 col-lg-4 col-md-7 ps-55px xl-ps-50px lg-ps-15px sidebar">
                    <div>
                        @livewire('categories')
                        @if($relatedPosts && $relatedPosts->isNotEmpty())
                            <div class="mb-15 md-mb-50px xs-mb-35px">
                                <div class="fw-600 fs-19 lh-22 ls-minus-05px text-dark-gray border-bottom border-color-dark-gray border-2 d-block mb-30px pb-15px position-relative"></div>
                                <div class="fw-600 fs-19 lh-22 ls-minus-05px text-dark-gray border-bottom border-color-dark-gray border-2 d-block mb-30px pb-15px position-relative">
                                    <a href="{{ $data->category->slug }}">İlgili yazılar</a>
                                </div>
                                <ul class="popular-post-sidebar position-relative">
                                    @foreach($relatedPosts as $post)
                                        <li class="d-flex align-items-center">
                                            <figure>
                                                <a href="{{ $post->slug }}">
                                                    <img src="{{ url('thumb.php') }}?src=/storage/{{$post->media->path}}&w=1190&h=700" alt="{{$data->title}}" alt="{{ $post->title }}" data-no-retina>
                                                </a>
                                            </figure>
                                            <div class="col media-body">
                                                <a href="{{ $post->slug }}" class="fw-600 fs-17 text-dark-gray d-inline-block mb-10px">
                                                    {{ $post->title }}
                                                </a>
                                            </div>
                                        </li>
                                    @endforeach
                                </ul>
                            </div>
                        @endif
                        <div style="position: sticky; top: 0; z-index: 1000;" class="mb-15 md-mb-50px xs-mb-35px elements-social social-icon-style-10">
                            <div class="fw-600 fs-19 lh-22 ls-minus-05px text-dark-gray border-bottom border-color-dark-gray border-2 d-block mb-30px pb-15px position-relative">Sosyal Medya</div>
                            <div class="row row-cols-2 row-cols-lg-2 justify-content-center align-items-center g-0">
                                @foreach ($social_media as $social)
                                    <div class="col  ps-25px pe-25px xl-ps-15px xl-pe-15px lg-ps-10px lg-pe-10px pt-10px pb-10px">
                                        <a class="facebook text-dark-gray" href="{!! $social['link'] !!}" target="_blank">
                                            <i class="fa-brands fa-{!! $social['name'] !!} fs-18 me-10px"></i>
                                            <span class="fw-500">{!! $social['name'] !!}</span>
                                        </a>
                                    </div>
                                @endforeach
                            </div>
                        </div>
                    </div>
                </aside>
                <!-- end sidebar -->
            </div>
        </div>
    </section>
    <!-- end section -->


{{--<section class="top-space-margin half-section pb-0" style="margin-top: 142px;">--}}
{{--    <div class="container">--}}
{{--        <div class="row">--}}
{{--            <div class="col-12 text-center">--}}
{{--                <img class="border-radius-6px" src="{{ url('thumb.php') }}?src=/storage/{{$data->media->path}}&w=1190&h=700" alt="{{$data->title}}" alt="" data-no-retina="">--}}
{{--            </div>--}}
{{--        </div>--}}
{{--    </div>--}}
{{--</section>--}}

{{--<section class="pb-0 pt-40px">--}}
{{--    <div class="container">--}}
{{--        <div class="row justify-content-center">--}}
{{--            <div class="col-lg-10 text-center">--}}
{{--                <h1 class="alt-font fw-700 text-dark-gray fs-50 mx-auto w-80 xl-w-100 mb-5">{{ $data->title }}</h1>--}}
{{--            </div>--}}
{{--            <div class="d-flex justify-content-center">--}}
{{--                <nav aria-label="breadcrumb">--}}
{{--                    <ol class="breadcrumb">--}}
{{--                        <li class="breadcrumb-item"><a href="{{ route('home') }}"><i class="feather icon-feather-home align-middle icon-small"></i></a></li>--}}
{{--                        <li class="breadcrumb-item active" aria-current="page" style="max-width: 80vw; white-space: nowrap;overflow: hidden; text-overflow: ellipsis;">--}}
{{--                            <a href="{{ $data->slug }}">{{ $data->title }}</a>--}}
{{--                        </li>--}}
{{--                    </ol>--}}
{{--                </nav>--}}
{{--            </div>--}}

{{--        </div>--}}
{{--    </div>--}}
{{--</section>--}}


{{--<section class="top-space-margin right-side-bar">--}}
{{--    <div class="container">--}}
{{--        <div class="row justify-content-center">--}}
{{--            <div class="col-12 col-lg-8 blog-standard md-mb-50px sm-mb-40px">--}}
{{--                <div class="col-12 blog-details mb-12">--}}
{{--                    <div class="entry-meta mb-20px fs-15">--}}
{{--                        <span><i class="text-dark-gray feather icon-feather-calendar"></i><a href="blog-grid.html">26 August 2023</a></span>--}}
{{--                        <span><i class="text-dark-gray feather icon-feather-folder"></i><a href="blog-grid.html">Creative</a></span>--}}
{{--                    </div>--}}
{{--                    <h5 class="text-dark-gray fw-600 w-80 sm-w-100 mb-6">{{ $data->title }}</h5>--}}
{{--                    <p>--}}
{{--                        {!! $data->content !!}--}}
{{--                    </p>--}}
{{--                </div>--}}
{{--            </div>--}}

{{--            <aside class="col-12 col-xl-4 col-lg-4 col-md-7 ps-55px xl-ps-50px lg-ps-15px sidebar">--}}
{{--                <div class="mb-15 md-mb-50px xs-mb-35px">--}}
{{--                    @livewire('categories')--}}
{{--                </div>--}}
{{--                @if($relatedPosts && $relatedPosts->isNotEmpty())--}}
{{--                    <div class="mb-15 md-mb-50px xs-mb-35px">--}}
{{--                        <div class="fw-600 fs-19 lh-22 ls-minus-05px text-dark-gray border-bottom border-color-dark-gray border-2 d-block mb-30px pb-15px position-relative">İlgili yazılar</div>--}}
{{--                        <ul class="popular-post-sidebar position-relative">--}}
{{--                            @foreach($relatedPosts as $post)--}}
{{--                                <li class="d-flex align-items-center">--}}
{{--                                    <figure>--}}
{{--                                        <a href="{{ $post->slug }}">--}}
{{--                                            <img src="{{ $post->media->url }}" alt="{{ $post->title }}" data-no-retina>--}}
{{--                                        </a>--}}
{{--                                    </figure>--}}
{{--                                    <div class="col media-body">--}}
{{--                                        <a href="{{ $post->slug }}" class="fw-600 fs-17 text-dark-gray d-inline-block mb-10px">--}}
{{--                                            {{ $post->title }}--}}
{{--                                        </a>--}}
{{--                                        <div>--}}
{{--                                            <a href="{{ $post->category?->slug }}" class="d-inline-block fs-15">--}}
{{--                                                {{ $post->created_at->format('d F Y') }}--}}
{{--                                            </a>--}}
{{--                                        </div>--}}
{{--                                    </div>--}}
{{--                                </li>--}}
{{--                            @endforeach--}}
{{--                        </ul>--}}
{{--                    </div>--}}
{{--                @endif--}}

{{--                <div class="mb-15 md-mb-50px xs-mb-35px elements-social social-icon-style-10">--}}
{{--                    <div class="fw-600 fs-19 lh-22 ls-minus-05px text-dark-gray border-bottom border-color-dark-gray border-2 d-block mb-30px pb-15px position-relative">Sosyal Medya</div>--}}
{{--                    <div class="row row-cols-2 row-cols-lg-2 justify-content-center align-items-center g-0">--}}
{{--                        @foreach ($social_media as $social)--}}
{{--                            <div class="col border-bottom border-end border-color-extra-medium-gray ps-25px pe-25px xl-ps-15px xl-pe-15px lg-ps-10px lg-pe-10px pt-10px pb-10px">--}}
{{--                                <a class="facebook text-dark-gray" href="{!! $social['link'] !!}" target="_blank">--}}
{{--                                    <i class="fa-brands fa-{!! $social['name'] !!} fs-18 me-10px"></i>--}}
{{--                                    <span class="fw-500">{!! $social['name'] !!}</span>--}}
{{--                                </a>--}}
{{--                            </div>--}}
{{--                        @endforeach--}}
{{--                    </div>--}}
{{--                </div>--}}
{{--            </aside>--}}
{{--        </div>--}}
{{--    </div>--}}
{{--</section>--}}



<!-- start section -->
@livewire('more-details')
<!-- end section -->




@section('js')
@endsection
@endsection