@extends('frontend.app')

@section('title'){{$seo['title']}}@endsection
@section('desc'){{$seo['desc']}}@endsection
@section('keywords'){{$seo['keywords']}}@endsection


@section('content')

    @include('frontend.inc_slider')
    @include('frontend.inc_kampusler')

    <div class="container2 st-pd">
        <div id="card" class="shadow bg-white rounded">
            <div style="padding:25px 25px 25px 25px">
                <div class="row">
                    <div class="col-md-4">
                        <div class="card" style="max-width: 25rem;">
                            <div class="card-header"><b>BİZDEN HABERLER</b></div>
                            <ul class="list-group list-group-flush">
                                @foreach($sonHaberler as $sonHaber)
                                    <li class="list-group-item"><i class="fa fa-file-text" style="color:#f2791e;"></i> <a href="{{route('fHaber',$sonHaber->seo)}}#card">{{$sonHaber->baslik}}</a></li>
                                @endforeach
                            </ul>
                        </div>
                    </div>
                    <div class="col-md-8">
                        <h2 class="gh2">{{$icerik->baslik}}</h2>
                        <p class="nDesc">{{$icerik->descreption}}</p>
                        <div class="content-wrapper text-justify">
                            <div class="content notification">
                                <div class="news-image mr-4 mt-0 pt-0 ml-0">
                                    <img src="/uploads/img/icerik/{{$icerik->icerikResmi->resim}}" class="rounded float-left">

                                </div>
                                <div class="content-subinfo">
                                    <div class="row">
                                        <div class="col-12 col-md-12 p-0">
                                            <span class="content-date">{{$icerik->created_at}}</span>
                                        </div>
                                    </div>
                                </div>
                                <div class="not-content">
                                    <div class="nDet">{!! $icerik->detay !!}</div>
                                <div class="clearfix"></div>
                            </div>
                                @php $galerilerCount = $galeriler->count(); @endphp

                                @if($galerilerCount>1)
                                    <br><br>
                                    <h6 style="color: #f2791e;">İÇERİĞE AİT RESİM GALERİSİ</h6>
                                    <hr>
                                    <div class="row">
                                    @foreach($galeriler as $galeri)
                                            <div class="col-lg-2 col-md-2 col-xs-2 thumb">
                                                <a class="thumbnail" href="#" data-image-id="" data-toggle="modal" data-title=""
                                                   data-image="/uploads/img/icerik/{{$galeri->resim}}"
                                                   data-target="#image-gallery">
                                                    <img class="img-thumbnail"
                                                         src="/uploads/img/icerik/{{$galeri->resim}}"
                                                         alt="">
                                                </a>
                                            </div>

                                            <div class="modal fade" id="image-gallery" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
                                                <div class="modal-dialog modal-lg">
                                                    <div class="modal-content">
                                                        <div class="modal-header">
                                                            <h4 class="modal-title" id="image-gallery-title"></h4>
                                                            <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span>
                                                            </button>
                                                        </div>
                                                        <div class="modal-body">
                                                            <img id="image-gallery-image" class="img-responsive col-md-12" src="">
                                                        </div>
                                                        <div class="modal-footer">
                                                            <button type="button" class="btn btn-secondary float-left" id="show-previous-image"><i class="fa fa-arrow-left"></i>
                                                            </button>

                                                            <button type="button" id="show-next-image" class="btn btn-secondary float-right"><i class="fa fa-arrow-right"></i>
                                                            </button>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                    @endforeach
                                    </div>
                                @endif
                        </div>
                    </div>
                </div>
            </div>
        </div>
        </div>
    </div>
    <br> <br> <br> <br>
@endsection

@section('css')
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
@endsection
@section('js')
    <script type="text/javascript">
        let modalId = $('#image-gallery');

        $(document)
            .ready(function () {

                loadGallery(true, 'a.thumbnail');

                //This function disables buttons when needed
                function disableButtons(counter_max, counter_current) {
                    $('#show-previous-image, #show-next-image')
                        .show();
                    if (counter_max === counter_current) {
                        $('#show-next-image')
                            .hide();
                    } else if (counter_current === 1) {
                        $('#show-previous-image')
                            .hide();
                    }
                }

                /**
                 *
                 * @param setIDs        Sets IDs when DOM is loaded. If using a PHP counter, set to false.
                 * @param setClickAttr  Sets the attribute for the click handler.
                 */

                function loadGallery(setIDs, setClickAttr) {
                    let current_image,
                        selector,
                        counter = 0;

                    $('#show-next-image, #show-previous-image')
                        .click(function () {
                            if ($(this)
                                .attr('id') === 'show-previous-image') {
                                current_image--;
                            } else {
                                current_image++;
                            }

                            selector = $('[data-image-id="' + current_image + '"]');
                            updateGallery(selector);
                        });

                    function updateGallery(selector) {
                        let $sel = selector;
                        current_image = $sel.data('image-id');
                        $('#image-gallery-title')
                            .text($sel.data('title'));
                        $('#image-gallery-image')
                            .attr('src', $sel.data('image'));
                        disableButtons(counter, $sel.data('image-id'));
                    }

                    if (setIDs == true) {
                        $('[data-image-id]')
                            .each(function () {
                                counter++;
                                $(this)
                                    .attr('data-image-id', counter);
                            });
                    }
                    $(setClickAttr)
                        .on('click', function () {
                            updateGallery($(this));
                        });
                }
            });

        // build key actions
        $(document)
            .keydown(function (e) {
                switch (e.which) {
                    case 37: // left
                        if ((modalId.data('bs.modal') || {})._isShown && $('#show-previous-image').is(":visible")) {
                            $('#show-previous-image')
                                .click();
                        }
                        break;

                    case 39: // right
                        if ((modalId.data('bs.modal') || {})._isShown && $('#show-next-image').is(":visible")) {
                            $('#show-next-image')
                                .click();
                        }
                        break;

                    default:
                        return; // exit this handler for other keys
                }
                e.preventDefault(); // prevent the default action (scroll / move caret)
            });
    </script>
@endsection