@extends('layouts.app')
@section('content')
    <!-- Ionicons CSS dosyası -->
    <link rel="stylesheet" href="https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css">


    <!-- Ionicons JS dosyası -->
    <script src="https://code.ionicframework.com/ionicons/2.0.1/js/ionicons.min.js"></script>


    <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/insan-kaynaklari.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;
        }

        .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:first-child::after {
            content: ' ';
            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M16.5 13.1L7.6 22c-.8-.8-.8-2 0-2.8l6.1-6.1-6-6.1c-.8-.8-.8-2 0-2.8l8.8 8.9z'/%3E%3C/svg%3E");
            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;
        }

        .brcrumb_content .active {
            color: #f22613;
        }

        .active-menu {
            background-color: #f22613;
        }



        .w-5 {
            display: none;
        }

        .news_cover {
            background-repeat: no-repeat;
            background-size: cover;
            background-position: center;
        }


        .background-image {
            width: 100%;
            height: 100%;
            background-size: cover;
            background-position: center;
            position: absolute;
            top: 0;
            left: 0;
            transition: transform 0.7s ease;
        }

    








        /* galewri css kısmı */
    </style>

    @if (App::getLocale() == 'tr')
        <div style="min-height:600px">
            <div class="mb-5">
                <div class="col-12 brcrumb">
                    <div class="container" style="position: relative;height:100%;">
                        <div class="brcrumb_content">
                            <ul>
                                <li><a href="/">{{ App::getLocale() == 'tr' ? 'Anasayfa' : 'Home' }}</a></li>
                                <li><a class="active"
                                        href="javascript:;">{{ App::getLocale() == 'tr' ? 'Haberler' : 'News' }}</a>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
                {{-- <iframe
                    src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d7274.038362913563!2d32.523940882049295!3d39.95578389599414!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x14d3252f90764439%3A0xb1ba73aac64e71d0!2sNETELSAN!5e0!3m2!1str!2str!4v1677569130887!5m2!1str!2str"
                    width="100%" height="300" style="border:0;" allowfullscreen="" loading="lazy"
                    referrerpolicy="no-referrer-when-downgrade"></iframe> --}}

                <div class="container-fluid d-flex align-items-center shadow d-none d-md-block mb-4"
                    style="background-color: #fff;height:60px;margin-top:-5px;">
                    <div class="container">
                        <div class="col-12 d-flex justify-content-start barMenu">
                            {{-- <a class="active "
                                style="{{ $page->target == 'haberler' ? 'background-color:red; color:#fff' : '' }}"
                                href="/page/haberler" aria-current="true">
                                Haberler
                            </a> --}}


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




                <div class="container">
                    <div class="row mb-5">
                        <div class="col-12">
                            <div class="master_title">
                                <h1>Haberler</h1>
                            </div>
                        </div>

                    </div>






                    <div class="col-md-12 ps-2 col-12  ps-0 ps-md-4" style="margin-bottom: 100px">


                        {{-- @php print_r($news2[0]);  @endphp --}}

                        <div class="container mb-5">
                            <div class="row ">

                                <div class="col-md-7 mt-3 col-lg-7 news_cover p-0"
                                    style="height: 614px !important; overflow: hidden; position: relative; box-shadow: rgba(14, 30, 37, 0.12) 0px 2px 4px 0px, rgba(14, 30, 37, 0.32) 0px 2px 16px 0px;">
                                    <a href="/haber/{{ $news2[0]['page_title_seo'] }}"
                                        style="text-decoration:none!important;">
                                        <div class="background-image"
                                            style="width: 100%; height: 100%; background-image: url(/uploads/{{ $news2[0]['cover'] }});">
                                            <div
                                        style="width:100%; height:100%;background: rgb(195,34,34);
                                background: linear-gradient(0deg, rgba(0,0,0,1) 0%, rgba(231,204,207,0) 39%, rgba(237,232,235,0) 78%); display:flex; justify-content:center;align-items:flex-end;">
                                            <h2
                                                style="text-align:center; color:#fff;font-family: var(--bs-font-sans-serif);">
                                                {{ App::getLocale() == 'tr' ? $news2[0]['page_title'] : $news2[0]['page_title_en'] }}
                                            </h2>
                                        </div>
                                        </div>
                                    </a>
                                </div>

                                {{-- <div class="col-md-7 mt-3 col-lg-7 news_cover p-0 "
                                    style="height: 614px !important;overflow: hidden; background-image:url(/uploads/{{ $news2[0]['cover'] }});box-shadow: rgba(14, 30, 37, 0.12) 0px 2px 4px 0px, rgba(14, 30, 37, 0.32) 0px 2px 16px 0px;">
                                    <a href="/haber/{{ $news2[0]['page_title_seo'] }}" style="text-decoration:none!important;">
                                    <div
                                        style="width:100%; height:100%;background: rgb(0,0,0);
                                background: linear-gradient(0deg, rgba(0,0,0,1) 0%, rgba(231,204,207,0) 39%, rgba(237,232,235,0) 78%); display:flex; justify-content:center;align-items:flex-end;">

                                        <h2 style="text-align:center; color:#fff;font-family: var(--bs-font-sans-serif);">
                                            {{ App::getLocale() == 'tr' ? $news2[0]['page_title'] : $news2[0]['page_title_en'] }}
                                        </h2>
                                    </div>
                                </a>

                                </div> --}}

                                <div class="col">
                                    <div class="col-md-12 mt-3 col-lg-12 news_cover"
                                        style="height: 300px !important;overflow: hidden; position: relative; box-shadow: rgba(14, 30, 37, 0.12) 0px 2px 4px 0px, rgba(14, 30, 37, 0.32) 0px 2px 16px 0px;">
                                        <a href="/haber/{{ $news2[1]['page_title_seo'] }}"
                                            style="text-decoration:none!important;">
                                            <div class="background-image"
                                            style="width: 100%; height: 100%; background-image: url(/uploads/{{ $news2[1]['cover'] }});">
                                            <div
                                        style="width:100%; height:100%;background: rgb(195,34,34);
                                background: linear-gradient(0deg, rgba(0,0,0,1) 0%, rgba(231,204,207,0) 39%, rgba(237,232,235,0) 78%); display:flex; justify-content:center;align-items:flex-end;">
                                                <h4
                                                    style="text-align:center; color:#fff;font-family: var(--bs-font-sans-serif);">
                                                    {{ App::getLocale() == 'tr' ? $news2[1]['page_title'] : $news2[1]['page_title_en'] }}
                                                </h4>
                                            </div>
                                        </div>
                                        </a>
                                    </div>
                                    <div class="col-md-12 mt-3 col-lg-12 news_cover"
                                        style="height: 300px !important;overflow: hidden; position: relative; box-shadow: rgba(14, 30, 37, 0.12) 0px 2px 4px 0px, rgba(14, 30, 37, 0.32) 0px 2px 16px 0px;">
                                        <a href="/haber/{{ $news2[2]['page_title_seo'] }}"
                                            style="text-decoration:none!important;">
                                            <div class="background-image"
                                            style="width: 100%; height: 100%; background-image: url(/uploads/{{ $news2[2]['cover'] }});">
                                            <div
                                        style="width:100%; height:100%;background: rgb(195,34,34);
                                background: linear-gradient(0deg, rgba(0,0,0,1) 0%, rgba(231,204,207,0) 39%, rgba(237,232,235,0) 78%); display:flex; justify-content:center;align-items:flex-end;">
                                                <h4
                                                    style="text-align:center; color:#fff;font-family: var(--bs-font-sans-serif);">
                                                    {{ App::getLocale() == 'tr' ? $news2[2]['page_title'] : $news2[2]['page_title_en'] }}
                                                </h4>
                                            </div>
                                        </div>
                                        </a>
                                    </div>
                                </div>
                            </div>
                        </div>





                        <div class="row justify-content-center mt-5">

                            <div class="col-12">
                                @foreach ($news as $key => $newsItem)
                                    <a href="/haber/{{ $newsItem['page_title_seo'] }}"
                                        style="text-decoration:none!important;">

                                        <div class="card mx-2 mx-md-0 mb-4 wow fadeInUp"
                                            style="max-width: 100%; box-shadow: rgba(0, 0, 0, 0.16) 0px 10px 36px 0px, rgba(0, 0, 0, 0.06) 0px 0px 0px 1px;">
                                            <div class="row g-0 overflow-hidden">
                                                <div class="col-12 col-md-3 news_cover "
                                                    style="background-image:url(/uploads/{{ $newsItem['cover'] }}); min-height:200px;">
                                                </div>
                                                <div class="col-12 col-md-9">
                                                    <div class="card-body" style="min-height:200px;">
                                                        <h5 class="card-title" style="color:#f22613; ">
                                                            {{ App::getLocale() == 'tr' ? $newsItem['page_title'] : $newsItem['page_title_en'] }}
                                                        </h5>
                                                        <p class="card-text" style="color:#000;">
                                                            {{ substr(str_replace('&nbsp;', '', strip_tags(App::getLocale() == 'tr' ? $newsItem['content'] : $newsItem['content_en'])), 0, 135) }}{{ '...' }}
                                                        </p>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </a>
                                @endforeach

                            </div>

                            <center> {{ $news->onEachSide(0)->links() }} </center>
                        </div>


                    </div>








                </div>

            </div>





        </div>
    @else
        <div style="min-height:600px">
            <div class="mb-5">
                <div class="col-12 brcrumb">
                    <div class="container" style="position: relative;height:100%;">
                        <div class="brcrumb_content">
                            <ul>
                                <li><a href="/">{{ App::getLocale() == 'tr' ? 'Anasayfa' : 'Home' }}</a></li>
                                <li><a class="active"
                                        href="javascript:;">{{ App::getLocale() == 'tr' ? 'İnsan Kaynakları' : 'Human Resources' }}</a>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>

                <div class="container-fluid d-flex align-items-center shadow d-none d-md-block mb-4"
                    style="background-color: #fff;height:60px;margin-top:-5px;">
                    <div class="container">
                        <div class="col-12 d-flex justify-content-start barMenu">
                            {{-- <a class="active"
                                style="{{ $page->target == 'haberler' ? 'background-color:red; color:#fff' : '' }}"
                                href="/page/haberler" aria-current="true">
                                News
                            </a> --}}
                        </div>
                    </div>
                </div>

                <div class="container">
                    <div class="row mb-5">
                        <div class="col-12">
                            <div class="master_title">
                                <h1>News</h1>
                            </div>
                        </div>

                    </div>
                </div>








            </div>
        </div>
    @endif

@endsection