@extends('frontend.'.$temaadi.'.app')
@push("head")
    <title>{{ $galeriDetay->baslik }} Foto Galeri</title>
    <meta name="description" content="{{ $galeriDetay->metadesc }}" />
    <link rel="image_src" type="image/jpeg" href="{{ url('images/galeriler/'.$galeriDetay->resim) }}" />
    <meta name="DC.date.issued" content="{{ date('c',strtotime($galeriDetay->created_at)) }}" />
    <meta property="og:site_name" content="{{ config('ayarlar.baslik') }}" />
    <meta property="og:url" content="{{ URL::current() }}" />
    <meta property="og:title" content="{{ $galeriDetay->baslik }}" />
    <meta property="og:description" content="{{ $galeriDetay->metadesc }}" />
    <meta property="og:image" content="{{ url('images/galeriler/'.$galeriDetay->resim) }}" />
    <meta name="twitter:card" content="photo">
    <meta name="twitter:site" content="{{ '@'.config('ayarlar.twkullanici') }}">
    <meta name="twitter:url" content="{{ URL::current() }}">
    <meta name="twitter:title" content="{{ $galeriDetay->baslik }}" />
    <meta name="twitter:description" content="{{ $galeriDetay->metadesc }}" />
    <meta name="twitter:image" content="{{ url('images/galeriler/'.$galeriDetay->resim) }}" />
    <meta itemprop="interactionCount" content="İzlenme: {{ $galeriDetay->hit }}" />
    <meta itemprop="thumbnailUrl" content="{{ url('images/galeriler/'.$galeriDetay->resim) }}" />
    <meta itemprop="datePublished" content="{{ date('c',strtotime($galeriDetay->created_at)) }}" />
    <meta itemprop="dateCreated" content="{{ date('c',strtotime($galeriDetay->created_at)) }}" />
    <meta itemprop="dateModified" content="{{ date('c',strtotime($galeriDetay->updated_at)) }}" />
@endpush
@section("content")
    @if(!empty($medyaDetayUst))
        <section class="block-wrapper text-center reklam mt-0 pt-0 pb-0 mb-3">
            @if($medyaDetayUst->tip == 1)
                <a target="_blank" href="{{ $medyaDetayUst->link }}">
                    <img src="{{url('images/reklamlar/'.$medyaDetayUst->resim)}}" alt="{{ $medyaDetayUst->baslik }}">
                </a>
            @else
                {!! $medyaDetayUst->metin !!}
            @endif
        </section>
    @endif
    <section class="pt-30 bg-white box-shadow mt-15 mb-30 pb-30">
        <div class="container">
            <div class="row">
                <div class="col-md-12">
                    <div class="entry-header entry-header-1 mb-20">
                        <h1 class="post-title" itemprop="name">
                            {{ $galeriDetay->baslik }}
                        </h1>
                        <div class="breadcrumb">
                            <a class="color-grey" href="{{ url('/') }}">Ana Sayfa</a>
                            <span class="color-grey"></span>
                            <a class="color-grey" href="{{ url('fotogaleri') }}">Foto Galeri</a>
                            <span class="color-grey d-none d-md-inline-block"></span>
                            <a class="color-grey d-none d-md-inline-block" href="{{ url('galeri/kategoriler/'.\Illuminate\Support\Str::slug($galeriDetay->kategoriler->baslik).'-'.$galeriDetay->kategoriler->id) }}">{{ $galeriDetay->kategoriler->baslik }}</a>
                            <span class="color-grey d-none d-md-inline-block"></span>
                            {{ $galeriDetay->baslik }}
                        </div>
                        <blockquote class="wp-block-quote is-style-large mt-3 mt-md-3" itemprop="description">
                            <p class="mb-0">{{ $galeriDetay->metadesc }}</p>
                        </blockquote>
                        <div class="bt-1 border-color-1 mb-3 mt-0 mt-md-3"></div>
                    </div>
                </div>
                <div class="col-md-12">
                    <div class="photo-detail">
                        <div class="row news-detail">
                            <div class="col-md-8 pr-md-0">
                                @if(!empty($medyaIcerikUst))
                                    <section class="block-wrapper text-center reklam mt-0 pb-0 pt-0 mb-3">
                                        @if($medyaIcerikUst->tip == 1)
                                            <a target="_blank" href="{{ $medyaIcerikUst->link }}">
                                                <img src="{{url('images/reklamlar/'.$medyaIcerikUst->resim)}}" alt="{{ $medyaIcerikUst->baslik }}">
                                            </a>
                                        @else
                                            {!! $medyaIcerikUst->metin !!}
                                        @endif
                                    </section>
                                @endif


                                <div class="position-relative gallerydetail text-center">
                                    @if(count($galeriResimler) != 0)
                                        @if($galeriDetay->tip == 1)
                                        <a href="@if( $galeriResimler->nextPageUrl() != null ){{ $galeriResimler->nextPageUrl() }} @else {{ $galeriResimler->url(1) }} @endif">
                                            <img class="img-fluid" src="{{ url('images/galeriresim/'.$galeriResimler[0]->resim) }}" alt="{{ $galeriDetay->baslik }}">
                                        </a>
                                        @else
                                            <img class="img-fluid" src="{{ url('images/galeriresim/'.$galeriResimler[0]->resim) }}" alt="{{ $galeriDetay->baslik }}">
                                            @endif
                                    @else
                                        <div class="alert alert-danger" role="alert">
                                            Bu galeride resim bulunamadı!
                                        </div>
                                    @endif
                                </div>
                                @if(!empty($medyaIcerikAlt))
                                    <section class="block-wrapper text-center reklam mt-0 pb-0 pt-0 mb-3">
                                        @if($medyaIcerikAlt->tip == 1)
                                            <a target="_blank" href="{{ $medyaIcerikAlt->link }}">
                                                <img src="{{url('images/reklamlar/'.$medyaIcerikAlt->resim)}}" alt="{{ $medyaIcerikAlt->baslik }}">
                                            </a>
                                        @else
                                            {!! $medyaIcerikAlt->metin !!}
                                        @endif
                                    </section>
                                @endif
                                <div class="clearfix"></div>
                            </div>
                            <div class="col-md-4">
                                @if($galeriDetay->tip == 1)
                                    <div class="ts-pagination photopage text-center mb-3 mt-3 mt-md-0">
                                        {{ $galeriResimler->links() }}
                                    </div>
                                @endif

                                @if(count($galeriResimler) != 0)
                                    <p>
                                        {{ $galeriResimler[0]->metadesc }}
                                    </p>
                                @endif


                                <div class="right-sidebar">
                                    @if(!empty($medyaDetaySag1))
                                        <div class="sidebar-widget mb-15">
                                            @if($medyaDetaySag1->tip == 1)
                                                <a target="_blank" href="{{ $medyaDetaySag1->link }}">
                                                    <img src="{{url('images/reklamlar/'.$medyaDetaySag1->resim)}}" alt="{{ $medyaDetaySag1->baslik }}">
                                                </a>
                                            @else
                                                {!! $medyaDetaySag1->metin !!}
                                            @endif
                                        </div>
                                    @endif

                                    @if(!empty($medyaDetaySag2))
                                        <div class="sidebar-widget mb-15">
                                            @if($medyaDetaySag2->tip == 1)
                                                <a target="_blank" href="{{ $medyaDetaySag2->link }}">
                                                    <img src="{{url('images/reklamlar/'.$medyaDetaySag2->resim)}}" alt="{{ $medyaDetaySag2->baslik }}">
                                                </a>
                                            @else
                                                {!! $medyaDetaySag2->metin !!}
                                            @endif
                                        </div>
                                    @endif
                                </div>
                            </div>

                            <div class="col-md-12 item">
                                <div class="bar">
                                    @if($galeriDetay->tip == 2)
                                    <span class="page"><span>{{ $galeriResimler->currentPage() }}<small>{{ $galeriResimlerToplam }}</small></span></span>
                                    @endif
                                    <div class="sharing">
                                        <a onclick="myPopup('https://www.facebook.com/share.php?u={{ URL::current() }}', 'facebook', 620, 430);" href="javascript:;" class="facebook" title="Facebook'da paylaş">
                                            <span class="ti-facebook"></span>
                                        </a>
                                        <a onclick="myPopup('https://twitter.com/share?url={{ URL::current() }}&amp;text={{ urlencode(html_entity_decode($galeriDetay->baslik)) }}', 'twiiter', 620, 430);" href="javascript:;" class="twitter" title="Twitter'da paylaş">
                                            <span class="fa fa-twitter"></span>
                                        </a>
                                        <a href="whatsapp://send?text={{ $galeriDetay->baslik }} - {{ URL::current() }}" class="whatsapp" title="WHATSAPP' da paylaş">
                                            <span class="fa fa-whatsapp"></span>
                                        </a>
                                        <a onclick="myPopup('https://www.linkedin.com/sharing/share-offsite/?url={{ URL::current() }}', 'linkedin', 620, 430);" href="javascript:;" class="linkedin" title="Linkedin'de paylaş">
                                            <span class="fa fa-linkedin"></span>
                                        </a>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    @if($galeriResimler->nextPageUrl() != null && $galeriDetay->tip == 2)
                        <div class="scroller-status">
                            <div class="loader-ellips infinite-scroll-request">
                                <span class="loader-ellips__dot"></span>
                                <span class="loader-ellips__dot"></span>
                                <span class="loader-ellips__dot"></span>
                                <span class="loader-ellips__dot"></span>
                            </div>
                            <p class="scroller-status__message infinite-scroll-last text-center">Başka resim bulunmuyor!</p>
                        </div>
                        <p class="pagination">
                            <a class="pagination__next" rel="next"
                               href="{{ $galeriResimler->nextPageUrl() }}"></a>
                        </p>
                    @endif

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

    @if(!empty($medyaSonEklenenler))
        <section class="block-wrapper text-center reklam mt-0 pb-0 pt-0 mb-3">
            @if($medyaSonEklenenler->tip == 1)
                <a target="_blank" href="{{ $medyaSonEklenenler->link }}">
                    <img src="{{url('images/reklamlar/'.$medyaSonEklenenler->resim)}}" alt="{{ $medyaSonEklenenler->baslik }}">
                </a>
            @else
                {!! $medyaSonEklenenler->metin !!}
            @endif
        </section>
    @endif
    <section class="block-wrapper pt-20 pb-10">
            <div class="row">
                <div class="col-md-12">
                    <div class="sidebar-widget loop-grid">
                        <div class="row">
                            <div class="col-md-12">
                                <div class="widget-header position-relative mb-30">
                                    <h5 class="widget-title mb-30 text-uppercase color1 font-weight-ultra">Son Eklenen</h5>
                                    <div class="letter-background">Galeriler</div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-md-12 col-sm-12">
                    <div class="loop-metro post-module-1 row">
                        @if(count($galeriler) != 0)
                            @foreach($galeriler as $galeri)
                                <article class="col-lg-4 col-md-6 col-sm-12 mb-30">
                                    <div class="post-thumb position-relative">
                                        <div class="thumb-overlay img-hover-slide border-radius-5 position-relative" style="background-image: url({{ url('images/galeriler/'.$galeri->resim) }})">
                                            <a class="img-link yenisekme" href="{{ url('galeri/'.Illuminate\Support\Str::slug($galeri->baslik).'-'. $galeri->id) }}"></a>
                                            <div class="post-content-overlay">
                                                <h6 class="post-title">
                                                    <a class="color-white yenisekme" href="{{ url('galeri/'.Illuminate\Support\Str::slug($galeri->baslik).'-'. $galeri->id) }}">{{ $galeri->baslik }}</a>
                                                </h6>
                                            </div>
                                        </div>
                                    </div>
                                </article>
                            @endforeach
                        @else
                            <div class="col-lg-12">
                                <div class="alert alert-danger" role="alert">
                                    Foto galeri bulunamadı!
                                </div>
                            </div>
                        @endif
                    </div>
                </div>
            </div>
    </section>
    @if(!empty($medyaDetayAlt))
        <section class="block-wrapper text-center reklam mt-0 pb-0 mb-3">
                @if($medyaDetayAlt->tip == 1)
                    <a target="_blank" href="{{ $medyaDetayAlt->link }}">
                        <img src="{{url('images/reklamlar/'.$medyaDetayAlt->resim)}}" alt="{{ $medyaDetayAlt->baslik }}">
                    </a>
                @else
                    {!! $medyaDetayAlt->metin !!}
                @endif
        </section>
    @endif
@endsection

@push("customJs")
    @if($galeriDetay->tip == 2)
        <script src="{{asset('assets/frontend/'.$temaadi.'/js/infinite-scroll.pkgd.min.js')}}"></script>
        <script>
            let nextURL = "";

            function updateNextURL(doc) {
                nextURL = $(doc).find('.pagination__next').attr('href');
                if (!nextURL){
                    nextURL = false;
                }
            }
            updateNextURL(document);
            var $container = $('.photo-detail').infiniteScroll({
                path: function () {
                    if(nextURL !== false){
                        return nextURL;
                    }else{
                        return '';
                    }
                },
                historyTitle: true,
                history: 'push',
                prefill: true,
                append: '.news-detail',
                status: '.scroller-status',
                hideNav: '.pagination'
            });
            $container.on('history.infiniteScroll', function (event, title, path) {
                ga('set', 'page', location.pathname);
                ga('send', 'pageview');
            });

            $container.on('load.infiniteScroll', function (event, response, path) {
                updateNextURL(response);
            });

            $container.on('append.infiniteScroll', function (event, error, path) {


            });
        </script>
    @endif
    <script>
        function myPopup(myURL, title, myWidth, myHeight) {
            var left = (screen.width - myWidth) / 2;
            var top = (screen.height - myHeight) / 4;
            var myWindow = window.open(myURL, title, 'toolbar=no, location=no, directories=no, status=no, menubar=no, scrollbars=no, resizable=no, copyhistory=no, width=' + myWidth + ', height=' + myHeight + ', top=' + top + ', left=' + left);
        }
    </script>
@endpush

@push("customCss")
    <style>
        .loader-ellips {
            font-size: 20px;
            position: relative;
            width: 4em;
            height: 1em;
            margin: 10px auto;
        }

        .loader-ellips__dot {
            display: block;
            width: 1em;
            height: 1em;
            border-radius: 0.5em;
            background: #555;
            position: absolute;
            animation-duration: 0.5s;
            animation-timing-function: ease;
            animation-iteration-count: infinite;
        }

        .loader-ellips__dot:nth-child(1),
        .loader-ellips__dot:nth-child(2) {
            left: 0;
        }
        .loader-ellips__dot:nth-child(3) { left: 1.5em; }
        .loader-ellips__dot:nth-child(4) { left: 3em; }

        @keyframes reveal {
            from { transform: scale(0.001); }
            to { transform: scale(1); }
        }

        @keyframes slide {
            to { transform: translateX(1.5em) }
        }

        .loader-ellips__dot:nth-child(1) {
            animation-name: reveal;
        }

        .loader-ellips__dot:nth-child(2),
        .loader-ellips__dot:nth-child(3) {
            animation-name: slide;
        }

        .loader-ellips__dot:nth-child(4) {
            animation-name: reveal;
            animation-direction: reverse;
        }
    </style>
@endpush