@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('/uploads/semalarimiz.jpg');
    }

    .brcrumb_content {
        position: absolute;
        bottom: 20px;
        left: 1%;
        height: 30px;
        background-color: #ddd;
        padding: 10px;
        border-radius: 2px;
        display: flex;
        align-items: center;
        font-weight: 700;
        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;
    }

    .leftSideLink {
        color: #333;
        text-decoration: none
    }

    .brcrumb {
        background-image: url('/uploads/urunlerimiz.jpg');
        height: 250px;
        background-color: #000 !important;
        background-size: cover;

        background-position: center center;

    }

    .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;
    }

    ._icerik {
        min-height: 600px
    }

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

    @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: 140px !important;
        }
    }


    .vs_content .container-fluid,
    .vs_content .container {
        padding: 0 !important;
    }
</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="#"><span itemprop="name">Şemalar</span></a>
                                <meta itemprop="position" content="1">
                            </li>
                            <li itemprop="itemListElement" itemscope="" itemtype="http://schema.org/ListItem"><a itemprop="item" href="/urun/akilli-ev-guvenlik-sistemleri"><span itemprop="name">{{ (App::getLocale() == 'tr')  ? $data->page_title :$data->page_title_en }}</span></a>
                                <meta itemprop="position" content="2">
                            </li>
                          
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>




</div>


<div class="_content container mt-5 mb-5">

    <div class="row d-flex">

        <div class="col-md-3 col-12  order-2 order-md-1 py-3" style="border:1px solid #ddd;">
            <div class="col" style="background-color:#f22613;color:white;height:50px;line-height:50px;text-align:center;font-weight:700">{{ __('Şema Listesi') }}</div>
            <ul class="list-group mt-3 list-group-flush">

                @foreach($semaList as $item)
                <li class="list-group-item">
                    <a class="leftSideLink d-flex align-items-center" href="/sema/{{$item->page_title_seo}}">
                        <iconify-icon icon="bx:chevron-right"></iconify-icon><span>{{ (App::getLocale() == 'tr')  ? $item->page_title :$item->page_title_en }}
                        </span>
                    </a>
                </li>
                @endforeach
            </ul>
        </div>

        <div class="_icerik col-md-9 px-5 order-1 order-md-2" style="">
            <div class="master_title">
                <h1>{{ (App::getLocale() == 'tr')  ? $data->page_title :$data->page_title_en }}</h1>
            </div>
            <div class=" vs_content">
                {!! (App::getLocale() == 'tr') ? $data->content : $data->content_en !!}

            </div>
        </div>

    </div>


    <div style="width:100%;height:200px"></div>
</div>
@endsection