@extends('layouts.app')
@section('content')
<style>
    .barMenu {
        overflow-x: auto;
        overflow-y: hidden;
    }

    .barMenu a {
        display: block;
        text-decoration: none;
        color: #333;
        height: 60px;
        display: flex;
        align-items: center;
        padding: 0px 6px;
        text-align: center;
        font-size: 14px;
        -webkit-transition: all .5s ease-in-out;
        -moz-transition: all .5s ease-in-out;
        -o-transition: all .5s ease-in-out;
        transition: all .5s ease-in-out;
        border-right: 1px solid #eeeeeec4;
        color: #333;
    }

    .barMenu a:last-child {
        border: none;
    }

    .barMenu a:hover {
        color: #fff;
        background-color: #333;
    }


    .brcrumb {

        height: 250px;
        background-color: #000 !important;
        background-size: cover;

        background-position: center center;
        background-image: url('/assets/images/bread.jpg');
    }

    .brcrumb_content {
        position: absolute;
        bottom: 20px;
        left: 1%;

        height: 30px;
        background-color: #fff;
        padding: 10px;
        border-radius: 2px;
        display: flex;
        align-items: center;
        font-weight: 500;
        border: 1px solid #ddd;
        -webkit-transition: all .5s ease-in-out;
        -moz-transition: all .5s ease-in-out;
        -o-transition: all .5s ease-in-out;
        transition: all .5s ease-in-out;
    }

    .brcrumb_content:hover {
        background-color: #fff;
        border: 1px solid #fff;
    }

    .brcrumb_content ul {
        padding: 0;
        margin: 0;
        display: flex;
        align-items: center;
        justify-content: center;

    }

    .brcrumb_content ul li {
        display: block;
        margin-right: 5px;
        position: relative;
    }

    .brcrumb_content ul li::after {
        content: '/';
        height: 15px;
        width: 20px;
        display: block;
        position: absolute;
        z-index: 2;
        right: -13px;
        top: 1px;
        background-repeat: no-repeat;
        color: #adadad;

    }

    .brcrumb_content ul li:last-child::after {
        content: ' ';
        background-image: none;
        height: 15px;
        width: 20px;
        display: block;
        position: absolute;
        z-index: 2;
        right: -10px;
        top: 5px;

    }

    .brcrumb_content ul li a {
        margin-right: 10px;
        text-decoration: none;
        color: #333;
        font-weight: 400;
        font-size: 13px
    }


    .brcrumb_content li:last-child a {
        color: #f22613;
    }

    @media only screen and (max-width: 600px) {
        ._icerik {
            min-height: 100px;
        }

        .brcontainer {
            margin-bottom: 120px;
        }

        .brcrumb_content {
            width: 100%;
            height: auto;
            justify-content: center;
            align-items: center;
            bottom: -40%;
            background: transparent;
            border: 1px solid #eee;
            left: 0px;

        }

        .brcrumb_content ul {


            width: 100%;
            align-items: unset;
            flex-wrap: wrap;
            justify-content: flex-start
        }

        .brcrumb_content ul li {}

        .brcrumb_content ul li:last-child {
            border-bottom: none;
        }


        .brcrumb_content ul li::after {
            top: -1px;
            right: -14px;

        }

        ._content {
            margin-top: 120px !important;
        }
    }

    .another_news a {
        color: #333;
        text-decoration: none;
        -webkit-transition: all .5s ease-in-out;
        -moz-transition: all .5s ease-in-out;
        -o-transition: all .5s ease-in-out;
        transition: all .5s ease-in-out;
    }

    .another_news h7 {
        font-size: 13px;
    }

    .another_news img {
        border-radius: 4px;
        min-height: 40px
    }

    .another_news a:hover {
        color: #f22613;
        text-decoration: none;
    }

    .another_news .row {
        border-bottom: 1px solid #ddd;
        padding-bottom: 15px;
    }

    .another_news .row:last-child {
        border-bottom: 1px solid transparent;
        padding-bottom: 15px;
    }

    @media only screen and (max-width: 600px) {
        .newsArea img {
            width: 100% !important;
            min-height: 300px;
        }
    }
</style>
<div class="container-fluid">
    <div class="row">
        <div class="col-12 brcrumb">
            <div class="container" style="position: relative;height:100%;">
                <div class="brcrumb_content">
                    <div itemscope="" itemtype="http://schema.org/BreadcrumbList" style="width:100%">
                        <ul class="brul">
                            <li itemprop="itemListElement" itemscope="" itemtype="http://schema.org/ListItem"><a itemprop="item" href="/"><span itemprop="name">Anasayfa</span></a>
                                <meta itemprop="position" content="0">
                            </li>
                            <li itemprop="itemListElement" itemscope="" itemtype="http://schema.org/ListItem"><a itemprop="item" href="/blog"><span itemprop="name">Blog</span></a>
                                <meta itemprop="position" content="1">
                            </li>

                            <li itemprop="itemListElement" itemscope="" itemtype="http://schema.org/ListItem"><a itemprop="item" href="#"><span itemprop="name">{{ (App::getLocale() == 'tr')  ? $singleBlog->title :$singleBlog->title_en }}</span></a>
                                <meta itemprop="position" content="2">
                            </li>


                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>

</div>
<div class="container-fluid d-flex align-items-center shadow d-none d-md-block" style="background-color: #fff;height:60px;">
    <div class="container">
        <div class="col-12 d-flex justify-content-start barMenu">
            {{-- @if ($categoryPages)
                @foreach ($categoryPages as $pg)
                <a class="" style=" {{ ($pages->page_id == $pg->page_id) ? 'background-color:#f22613;color:white' : '' }} " href="/page/{{ $pg->page_title_seo }}" aria-current="true">
            {{ (App::getLocale() == 'tr')  ? $pg->page_title :$pg->page_title_en  }}
            </a>
            @endforeach
            @else
            <a class="" style="background-color:#f22613;color:white;" href="#" aria-current="true">
                {{ (App::getLocale() == 'tr')  ? $pages->page_title :$pages->page_title_en  }}
            </a>

            @endif --}}
        </div>
    </div>
</div>

<div class="container mt-5" style="margin-bottom: 500px;">
    <div class="row mb-5">
        <div class="col-12">
            <div class="master_title">
                {{-- <h1>{{ (App::getLocale() == 'tr')  ? $pages->page_title :$pages->page_title_en }}</h1> --}}
            </div>
        </div>
    </div>
    <div class="row px-2">
        <div class="col-12 col-md-9 px-2 px-md-5 mb-4 newsArea">
            <div class="d-block col-12">
                <img class="img img-thumbnail" style="width:100%;margin-right:15px;margin-bottom:15px;  max-height:500px;" src="/uploads/{!! $singleBlog->image_path !!}" alt="">
            </div>
            <div class="d-block">
                <h2 class="mb-4 text-left" style="color:#f22613"> {{ App::getLocale() == 'tr' ? $singleBlog->title : $singleBlog->title_en }}</h2>

            </div>
            <hr>
            <div class="row" style="margin-left:-26px !important;padding:0px !important">
                {!! App::getLocale() == 'tr' ? $singleBlog->content : $singleBlog->content_en !!}
            </div>
        </div>





















        <div class="col-12 col-md-3 another_news" style="background-color: #fff; padding: 10px; border-radius: 4px; border: 1px solid #ddd; height:min-content;">
            <p style="color:#f22613;font-size: 2rem; font-weight: 500;line-height: 1.2;">{!! App::getLocale() == 'tr' ? "Diğer Yazılar" : "Other Posts" !!}</p>
            <hr>

            @foreach ($otherBlog as $key => $nws)
            <a href="/blog/{{ $nws->slug }}">
                <div class="row mb-3">
                    <div class="col-4 d-flex align-items-center">
                        <img style="width: 100%;" src="/uploads/{!! $nws->image_path !!}" alt="">
                    </div>
                    <div class="col-8 d-flex align-items-center">
                        <h7 style="font-weight:500">{!! App::getLocale() == 'tr' ? $nws->title : $nws->title_en !!}</h7>
                    </div>
                </div>
            </a>
            @endforeach
        </div>
    </div>
</div>
@endsection