@extends('frontend.'.$temaadi.'.app')
@push("head")
    <title>{{ $haberDetay->baslik }}</title>
    <meta name="keywords" content="{{ $haberDetay->metakey }}" />
    <meta name="description" content="{{ $haberDetay->metadesc }}" />
    @if($ayarlar->amp == 1)
    <link rel="amphtml" href="{{ url('amp/'.$haberDetay->slug.'-'.$haberDetay->id) }}">
    @endif
    <link rel="image_src" type="image/jpeg" href="{{ url('images/haberler/'.$haberDetay->resim) }}" />
    <meta name="DC.date.issued" content="{{ date('c',strtotime($haberDetay->tarih)) }}" />
    <meta itemprop="keywords" name="news_keywords" content="{{ $haberDetay->metakey }}" />
    <meta property="og:type" content="article" />
    <meta property="og:site_name" content="{{ $ayarlar->baslik }}" />
    <meta property="og:url" content="{{ URL::current() }}" />
    <meta property="og:title" content="{{ $haberDetay->baslik }}" />
    <meta property="og:description" content="{{ $haberDetay->metadesc }}" />
    <meta property="og:image" content="{{ url('images/haberler/'.$haberDetay->resim) }}" />
    <meta property="og:image:width" content="645" />
    <meta property="og:image:height" content="425" />
    <meta name="twitter:card" content="summary_large_image">
    <meta name="twitter:image" content="{{ url('images/haberler/'.$haberDetay->resim) }}" />
    <meta name="twitter:site" content="{{ '@'.$ayarlar->twkullanici }}">
    <meta name="twitter:url" content="{{ URL::current() }}">
    <meta name="twitter:title" content="{{ $haberDetay->baslik }}" />
    <meta name="twitter:description" content="{{ $haberDetay->metadesc }}" />
    <meta itemprop="author" content="{{ $ayarlar->baslik }}" />
    <meta itemprop="url" content="{{ URL::current() }}" />
    <meta itemprop="thumbnailUrl" content="{{ url('images/tn/'.$haberDetay->resim) }}" />
    <meta itemprop="articleSection" content="{{ $haberDetay->haberkat->baslik }}" />
    <meta itemprop="dateCreated" content="{{ date('c',strtotime($haberDetay->tarih)) }}" />
    <meta itemprop="dateModified" content="{{ date('c',strtotime($haberDetay->tarih)) }}" />
    <meta itemprop="mainEntityOfPage" content="{{ URL::current() }}" />
    <meta itemprop="headline" content="{{ $haberDetay->baslik }}" />
    <meta itemprop="image" content="{{ url('images/haberler/'.$haberDetay->resim) }}" />
@endpush
@section("content")
    <section class="single-post-wrapper pt-2">
        <div class="container">
            <div class="row">
                <div class="col-lg-12">
                    <ol class="breadcrumb">
                        <li>
                            <a href="{{ url('/') }}">
                                <i class="fa fa-home"></i>
                                Ana Sayfa
                            </a>
                        </li>
                        <li>
                            <a href="{{ url('kategori/'.$haberDetay->haberkat->slug.'/'.$haberDetay->kategori) }}">{{ $haberDetay->haberkat->baslik }}</a>
                        </li>
                    </ol>
                </div>
                <div class="col-lg-8 pr-0">
                    <div class="ts-grid-box content-wrapper single-post">
                        <div class="entry-header">
                            <h1 class="post-title lg" itemprop="name">{{ $haberDetay->baslik }}</h1>
                            <ul class="post-meta-info">
                                <li class="d-none d-sm-inline-block">
                                    <a href="{{ url('kategori/'.$haberDetay->haberkat->slug.'/'.$haberDetay->kategori) }}" class="post-cat ts-yellow-bg">{{ $haberDetay->haberkat->baslik }}</a>
                                </li>
                                <li>
                                    <i class="fa fa-clock-o d-inline-block"></i>
                                    <div class="d-inline-block" itemprop="datePublished" content="{{ date('c',strtotime($haberDetay->tarih)) }}">{{ \Carbon\Carbon::parse($haberDetay->tarih)->formatLocalized('%d %B, %Y, %A %R')  }}</div>
                                </li>
                                @if($ayarlar->okunma == 1)
                                    <li>
                                        <i class="fa fa-eye"></i>
                                        {{ $haberDetay->hit }}
                                    </li>
                                @endif
                                @if($haberDetay->sehir != 0)
                                <li>
                                    <i class="fa fa-map-marker"></i> <a target="_blank" href="{{ url('yerel-haberler/'.$haberDetay->haberili->slug.'-'.$haberDetay->haberili->id) }}" class="text-dark">{{ $haberDetay->haberili->il_adi }}</a>
                                </li>
                                @endif
                            </ul>
                        </div>
                        <!-- single post header end-->
                        <div class="post-content-area">
                            <div class="post-media post-featured-image">
                                @if($haberDetay->resim != null)
                                        <img src="{{ url('images/haberler/'.$haberDetay->resim) }}" class="img-fluid" alt="{{ $haberDetay->baslik }}">
                                    @else
                                        <img src="{{ url('images/genel/'.$ayarlar->resimsiz) }}" class="img-fluid" alt="{{ $haberDetay->baslik }}">
                                    @endif
                            </div>
                            <div class="entry-content mt-2">
                                @if($haberDetay->metadesc != null)
                                <blockquote itemprop="description">
                                    {{ $haberDetay->metadesc }}
                                </blockquote>
                                @endif
                                <div itemprop="articleBody">
                                {!! $haberDetay->detay !!}
                                </div>
                                @if($haberDetay->embed != null)
                                    <div class="post-video contentvideo">
                                        {!! $haberDetay->embed !!}
                                    </div>
                                    @endif

                                @if(isset($iliskilihaberler))
                                        <ul class="list-unstyled pl-0">
                                            @foreach($iliskilihaberler as $iliskili)
                                                <li>
                                                    <div class="alert alert-secondary clearfix">
                                                        <a class="text-dark font-weight-bold d-flex align-items-center" href="{{ url('haber/'.$iliskili->slug.'-'.$iliskili->id) }}">
                                                            <img class="img-thumbnail float-left mr-3" width="100" src="{{ url('images/tn/'.$iliskili->resim) }}" alt="{{ $iliskili->baslik }}">
                                                            {{ $iliskili->baslik }}
                                                        </a>
                                                    </div>
                                                </li>
                                                @endforeach
                                        </ul>
                                    @endif
                                    @if($haberDetay->kaynak != 0)
                                        <p><small class="text-muted"><strong>Kaynak:</strong> <a class="text-muted" target="_blank" rel="nofollow" href="{{ $haberDetay->haberkaynagi->url }}">{{ $haberDetay->haberkaynagi->baslik }}</a></small></p>
                                    @endif
                            </div>
                        </div>
                        <div id="share"></div>
                        <div class="social-share d-none">
                            <a href="https://www.facebook.com/sharer/sharer.php?u={{ URL::current() }}" onclick="window.open(this.href, 'face-share', 'width=605,height=370');return false;" target="_blank" class="button facebook"><span><i class="fa fa-facebook"></i></span><p>Facebook Paylaş</p></a>
                            <a href="https://twitter.com/intent/tweet?text={{ $haberDetay->baslik }}&url={{ URL::current() }}&via={{ $ayarlar->twkullanici }}" onclick="window.open(this.href, 'twit-share', 'width=605,height=370');return false;" class="button twitter"><span><i class="fa fa-twitter"></i></span><p>Twitter Paylaş</p></a>
                        </div>
                        @if(isset($etiketler))
                            <strong>Anahtar Kelimeler:</strong>
                            <div class="newstags">
                                @foreach($etiketler as $etiket)
                                    @if(!empty($etiket))
                                    <a href="{{ url('etiketler/'.Illuminate\Support\Str::slug($etiket).'-haberleri') }}">{{ trim($etiket) }}</a>
                                    @endif
                                @endforeach
                            </div>
                        @endif

                        @if($ayarlar->emoji == 1)
                            <hr>
                        <div class="reactions">
                            <ul class="reactions-box">
                                <li class="reaction liked" data-item-icon="liked" data-item-id="1">
                                    <div class="count" style="height: 28.97px">
                                        <span class="count-text">0</span>
                                    </div>
                                    <div class="emoji">
                                        <span class="emoji-img"></span>
                                        <span class="emoji-text">SEVDİM</span>
                                    </div>
                                </li>

                                <li class="reaction unhappy" data-item-icon="unhappy" data-item-id="2">
                                    <div class="count" style="height:2px">
                                        <span class="count-text">0</span>
                                    </div>
                                    <div class="emoji">
                                        <span class="emoji-img"></span>
                                        <span class="emoji-text">ÜZGÜN</span>
                                    </div>
                                </li>

                                <li class="reaction angry" data-item-icon="angry" data-item-id="3">
                                    <div class="count" style="height:2px">
                                        <span class="count-text">0</span>
                                    </div>
                                    <div class="emoji">
                                        <span class="emoji-img"></span>
                                        <span class="emoji-text">KIZGIN</span>
                                    </div>
                                </li>

                                <li class="reaction shocked" data-item-icon="shocked" data-item-id="4">
                                    <div class="count" style="height:2px">
                                        <span class="count-text">0</span>
                                    </div>
                                    <div class="emoji">
                                        <span class="emoji-img"></span>
                                        <span class="emoji-text">İNANILMAZ</span>
                                    </div>
                                </li>

                                <li class="reaction hahaha" data-item-icon="hahaha" data-item-id="7">
                                    <div class="count" style="height:2px">
                                        <span class="count-text">0</span>
                                    </div>
                                    <div class="emoji">
                                        <span class="emoji-img"></span>
                                        <span class="emoji-text">KOMİK</span>
                                    </div>
                                </li>

                                <li class="reaction clap" data-item-icon="clap" data-item-id="8">
                                    <div class="count" style="height:2px">
                                        <span class="count-text">0</span>
                                    </div>
                                    <div class="emoji">
                                        <span class="emoji-img"></span>
                                        <span class="emoji-text">ALKIŞ</span>
                                    </div>
                                </li>

                            </ul>
                        </div>
                        @endif

                        @if($ayarlar->editor == 1)
                        <div class="author-box">
                            @if($haberDetay->habereditoru->photo == null)
                                <img class="author-img" src="{{ url('images/kullanicilar/no_photo.jpeg') }}" alt="{{ $haberDetay->habereditoru->name }}">
                                @else
                                <img class="author-img" src="{{ url('images/kullanicilar/'.$haberDetay->habereditoru->photo) }}" alt="{{ $haberDetay->habereditoru->name }}">
                            @endif
                            <div class="author-info">
                                <h4 class="author-name">{{ $haberDetay->habereditoru->name }}</h4>
                                <div class="authors-social">
                                    <a target="_blank" href="{{ $haberDetay->habereditoru->twitter }}" class="ts-twitter">
                                        <i class="fa fa-twitter"></i>
                                    </a>
                                    <a target="_blank" href="{{ $haberDetay->habereditoru->facebook }}" class="ts-facebook">
                                        <i class="fa fa-facebook"></i>
                                    </a>
                                    <a target="_blank" href="{{ $haberDetay->habereditoru->instagram }}" class="ts-google-plus">
                                        <i class="fa fa-instagram"></i>
                                    </a>
                                </div>
                                <div class="clearfix"></div>
                                <p>
                                    <a class="text-dark" href="{{ url('editorler/'.Illuminate\Support\Str::slug($haberDetay->habereditoru->name).'-'.$haberDetay->habereditoru->id) }}">Editörün Diğer Yazıları</a>
                                </p>
                                <p>
                                    <a class="text-dark" href="mailto:{{ $haberDetay->habereditoru->email }}">Mail: {{ $haberDetay->habereditoru->email }}</a>
                                </p>
                            </div>
                        </div>
                        @endif

                        <div class="post-navigation clearfix">
                            @if($oncekiHaber)
                                <div class="post-previous float-left">
                                    <a title="{{ $oncekiHaber->baslik }}" href="{{ url('haber/'.$oncekiHaber->slug.'-'.$oncekiHaber->id) }}">
                                        @if($oncekiHaber->resim != null)
                                            <img src="{{ url('images/tn/'.$oncekiHaber->resim) }}" alt="{{ $oncekiHaber->baslik }}">
                                        @else
                                            <img src="{{ url('images/genel/'.$ayarlar->resimsiz) }}" alt="{{ $oncekiHaber->baslik }}">
                                        @endif
                                        <span>Önceki Haber</span>
                                        <p>
                                            {{ Illuminate\Support\Str::limit($oncekiHaber->baslik,40) }}
                                        </p>
                                    </a>
                                </div>
                            @endif
                            @if($sonrakiHaber)
                                <div class="post-next float-right">
                                    <a title="{{ $sonrakiHaber->baslik }}" href="{{ url('haber/'.$sonrakiHaber->slug.'-'.$sonrakiHaber->id) }}">
                                        @if($sonrakiHaber->resim != null)
                                            <img src="{{ url('images/tn/'.$sonrakiHaber->resim) }}" alt="{{ $sonrakiHaber->baslik }}">
                                            @else
                                            <img src="{{ url('images/genel/'.$ayarlar->resimsiz) }}" alt="{{ $sonrakiHaber->baslik }}">
                                        @endif
                                        <span>Sonraki Haber</span>
                                        <p>
                                            {{ Illuminate\Support\Str::limit($sonrakiHaber->baslik,40) }}
                                        </p>
                                    </a>
                                </div>
                            @endif
                        </div>
                    </div>
                    @if($haberDetay->yorum == 1)
                        @if($haberDetay->haberyorumlari->count() != 0)
                            <div class="ts-grid-box">
                                <h3 class="comment-reply-title">Haber Yorumları</h3>
                                <ul class="comment-section">
                                    @foreach($haberDetay->haberyorumlari as $haberyorum)
                                        <li class="comment user-comment">
                                            <div class="info">
                                                <a href="javascript:;">{{ $haberyorum->isim }}</a>
                                                <span>{{ date('d-m-Y H:i',strtotime($haberyorum->created_at)) }}</span>
                                            </div>
                                            <p>{{ $haberyorum->yorum }}</p>
                                        </li>
                                    @endforeach
                                </ul>
                            </div>
                        @endif
                    <div class="comments-form ts-grid-box">
                        <h3 class="comment-reply-title">Yorum Yazın</h3>
                        <div class="callback_message"></div>
                        <form role="form" class="ts-form" id="frmComments">
                            @csrf
                            <div class="row">
                                <div class="col-md-12">
                                    <div class="form-group">
                                        <input class="form-control" name="isim" id="isim" placeholder="İsminiz" type="text" required="">
                                    </div>
                                    <div class="form-group">
                                        <input class="form-control" name="email" id="email" placeholder="E-Posta Adresiniz" type="email">
                                    </div>
                                    <div class="form-group">
                                        <textarea class="form-control msg-box" id="yorum" name="yorum" placeholder="Yorumunuz" rows="5" required=""></textarea>
                                    </div>
                                </div>
                            </div>
                            <input type="hidden" name="haberid" id="haberid" value="{{ $haberDetay->id }}">
                            <div class="clearfix">
                                <button class="comments-btn btn btn-dark" type="submit">Yorumu Gönder</button>
                            </div>
                        </form>
                    </div>
                    @endif

                    @if($ayarlar->detaymanset == 1)
                        <div class="widget-thin-slider mb-3">
                            <div class="swiper-container slider">
                                <div class="swiper-wrapper">
                                    @if(count($anaManset) != 0)
                                        @foreach($anaManset as $normalmanset)
                                            <div class="swiper-slide color-yellow">
                                                <a class="yenisekme"
                                                   href="{{ url('haber/'.$normalmanset->slug.'-'.$normalmanset->id) }}"
                                                   title="{{ $normalmanset->baslik }}">
                                                    <figure>
                                                        <div class="img">
                                                            @if($normalmanset->resim != null)
                                                                <img class="maxwidth w-100 swiper-lazy" height="{{ $ayarlar->mansety }}"
                                                                     src="{{ url('images/transparent.gif') }}"
                                                                     data-src="{{ url('images/haberler/'.$normalmanset->resim) }}"
                                                                     alt="{{ $normalmanset->baslik }}">
                                                            @else
                                                                <img class="maxwidth w-100 swiper-lazy" height="{{ $ayarlar->mansety }}"
                                                                     src="{{ url('images/transparent.gif') }}"
                                                                     data-src="{{ url('images/genel/'.$ayarlar->resimsiz) }}"
                                                                     alt="{{ $normalmanset->baslik }}">
                                                            @endif
                                                        </div>
                                                        @if($normalmanset->mansetbaslik == 1)
                                                            <figcaption style="background-color: {{$normalmanset->renk}}">
                                                                <span class="title">{{ $normalmanset->baslik }}</span>
                                                            </figcaption>
                                                        @endif
                                                    </figure>
                                                </a>
                                                <div class="swiper-lazy-preloader swiper-lazy-preloader-white"></div>
                                            </div>
                                        @endforeach
                                    @endif
                                </div>
                                <div class="swiper-button-prev navigation"></div>
                                <div class="swiper-button-next navigation"></div>
                                <ul class="indicator type1 left">
                                    <li>
                                        <div class="swiper-pagination pagination"></div>
                                    </li>
                                </ul>
                            </div>
                        </div>
                    @endif

                    @if($ayarlar->benzer == 1)
                    <div class="ts-grid-box mb-30">
                        <h2 class="ts-title mb-3">Benzer Haberler</h2>
                        <div class="row p-row-sm">
                            @if($benzerHaberler != null)
                                @foreach($benzerHaberler as $benzer)
                                    <div class="col-md-4 mb-3">
                                        <div class="ts-post-thumb h-auto">
                                            <a href="{{ url('haber/'.$benzer->slug.'-'.$benzer->id) }}">
                                                @if($benzer->resim != null)
                                                    <img class="img-fluid no-src lazyload" data-src="{{ url('images/tn/'.$benzer->resim) }}" alt="{{ $benzer->baslik }}">
                                                @else
                                                    <img class="img-fluid no-src lazyload" data-src="{{ url('images/genel/'.$ayarlar->resimsiz) }}" alt="{{ $benzer->baslik }}">
                                                @endif
                                            </a>
                                        </div>
                                        <div class="post-content">
                                            <h3 class="post-title">
                                                <a title="{{ $benzer->baslik }}" href="{{ url('haber/'.$benzer->slug.'-'.$benzer->id) }}">{{ Illuminate\Support\Str::limit($benzer->baslik,45) }}</a>
                                            </h3>
                                        </div>
                                    </div>
                                @endforeach
                            @endif
                        </div>
                    </div>
                    @endif
                </div>
                <div class="col-lg-4">
                    @include('frontend.'.$temaadi.'.blocks.sidebar')
                </div>
            </div>
        </div>

    </section>
@endsection

@push("customJs")
    <script src="{{asset('assets/frontend/'.$temaadi.'/js/jssocials.min.js')}}"></script>
    <script>
        $("#share").jsSocials({
            shareIn: "popup",
            showCount: true,
            text: "{{ $haberDetay->baslik }}",
            shares: [
                { share: "facebook", label: "Facebook Paylaş" },
                { share: "twitter", label: "Twitter Paylaş", via: "{{ $ayarlar->twkullanici }}" },
                { share: "pinterest", label: "Pinle" },
                "whatsapp"
            ]
        });
    </script>
    <script src="{{asset('assets/frontend/'.$temaadi.'/js/scrollgress.js')}}"></script>
    <script type="text/javascript">
        $('.single-post-wrapper').scrollgress({color: '#d72923'});
    </script>
    <script>
        $('#frmComments').on('submit', function(e) {
            e.preventDefault();
            let isim = $('#isim').val();
            let email = $('#email').val();
            let yorum = $('#yorum').val();
            let haberid = $('#haberid').val();
            $.ajax({
                headers: {
                    'X-CSRF-TOKEN': '{{csrf_token()}}'
                },
                type: "POST",
                url: '/haberyorum',
                data: {isim:isim,email:email,yorum:yorum,haberid:haberid},
                dataType: 'json',
                success: function(response) {
                    $(".callback_message").append("<div class='alert alert-success'>"+response.msg+"</div>");
                    $('#frmComments')[0].reset();
                    setTimeout(function(){
                        $('.callback_message').hide();
                    },2000);
                },
                error:function(){ $(".callback_message").append("<div class='alert alert-danger'>Bir hata oluştu lütfen tekrar deneyiniz.</div>");
                    setTimeout(function(){
                        $('.callback_message').hide();
                    },2000);
                }
            });
        });
    </script>
@endpush

@push("customCss")
    <link rel="stylesheet" href="{{asset('assets/frontend/tema8/css/jssocials.css')}}">
    <link rel="stylesheet" href="{{asset('assets/frontend/tema8/css/jssocials-theme-flat.css')}}">
    <style>
        .scrollgress {
            z-index: 99999;
        }
    </style>
@endpush