@extends(get_view('index'))
@section('title'){{ $post->content->title }} - @endsection
@section('description'){{ $post->content->description ?? $post->content->title }}@endsection
@section('author'){{ $post->user->name }}@endsection
@section('header')
    <style>
        pre {
            margin-bottom: 0px !important;
        }

    </style>
@endsection
@section('content')

    <nav aria-label="breadcrumb">
        <ol class="breadcrumb">
            <li class="breadcrumb-item"><a href="{{ url('/') }}">{{ translate('homepage') }}</a></li>
            @foreach ($post->category->getTopCategories() as $key => $cat)
                <li class="breadcrumb-item"><a
                        href="{{ route('post.category', ['category_url' => $cat->content->url]) }}">{{ $cat->content->name ?? '' }}</a>
                </li>
            @endforeach
            <li class="breadcrumb-item active" aria-current="page">{{ $post->content->title ?? ''}}</li>
        </ol>
    </nav>


    <div class="row justify-content-center mt-5">
        <div class="col-sm-8 col-12">
            <div class="row">
                
                <div class="col-12">
                    <div class="mb-4">
                        <h1 class="mb-0 text-uppercase">{{ $post->content->title ?? '' }}</h1>
                    </div>
                </div>

                <div class="col-sm-2 col-12">
                    <div class="post-user sticky-top" style="top: 20px;">
                        <p class="m-0" style="font-size: 12px;"><b>{{ translate('shared_by') }}:</b></p>
                        <p class="m-0 mb-2 text-uppercase">{{ $post->user->name }}</p>
                        <p class="m-0" style="font-size: 12px;"><b>{{ translate('date') }}:</b></p>
                        <p class="m-0">{{ $post->created_at->diffForHumans() }}</p>
                    </div>
                </div>
                <div class="col-sm-10 col-12">                
                    @if ( $post->image != null )
                        <img src="{{ Common::get_post_original_image($post->id, $post->image) }}" alt="{{ $post->content->title }}"
                            style="width: 100%">
                    @endif
                
                    <div class="bg-white shadow-sm p-4 mb-4">
                        <div class="post-description">
                            <p class="fs-14">{!! $post->content->description !!}</p>
                        </div>
                        <div class="post-content">
                            {!! $post->content->content !!}
                        </div>
                    </div>

                    <div class="p-3 bg-white shadow-sm">
                        <h4 class="fs-1">Bir cevap yazın</h4>
                        <p>E-posta adresiniz yayınlanmayacak gerekli alanlar * ile işaretlenmiştir.</p>
                        <form action="{{url('blog/add_comments')}}" method="POST" id="commentForm">
                            @csrf
    
                            <span class="text-success" id="commentsSuccess"></span>
                            <span class="text-danger" id="commentsError"></span>
                            <div class="">
                                <input type="hidden" name="user_id" value="{{ Auth::user()->id ?? '' }}">
                                <input type="hidden" name="category_id" value="{{ $post->category_id ?? '' }}">

                                @if ( !Auth::check() )
                                <input type="text" class="form-control mb-2" name="name" placeholder="{{ translate('name') }}">
                                <input type="text" class="form-control mb-2" name="surname" placeholder="{{ translate('surname') }}">
                                <input type="text" class="form-control mb-2" name="email" placeholder="{{ translate('email') }}">
                                @endif

                                <textarea name="comment_text" id="comment_text" class="form-control" rows="3" placeholder="{{ translate('add_comment') }}">{{ old('comment_text') }}</textarea>

                                <button type="button" class="btn btn-primary mt-3" id="commentSend">{{ translate('comment') }}</button>

                                <div class="alert alert-success mt-3" id="successAlert" style="display: none">
                                    <div class="d-flex">
                                        <div class="flex-grown-0">
                                            <i class="fa fa-check-circle text-success fs-1"></i>
                                        </div>
                                        <div class="flex-grown-1 ms-2">
                                            <p class="m-0 p-0"><b>Yorumunuz kaydedildi!</b></p>
                                            <p class="m-0 p-0 fs-12">Yorumunuz yöneticiler tarafından onaylandığında yayına alınacaktır.</p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </form>
                    </div>

                    
                    @foreach($comments as $comment)
                    <div class="bg-white p-3 shadow-sm mt-2 mb-2">
                        <p class="m-0">{{ $comment->getUser->name }}</p>
                        <p class="m-0">{{ $comment->comment_text }}</p>
                        <p class="m-0" style="font-size: 12px;"><i>{{ $comment->created_at->diffForHumans() }}</i></p>
                    </div>
                    @endforeach
                    

                    <div class="bg-light pl-4 pr-5 pt-3 pb-3 mb-3 text-center">
                        <a href="http://www.facebook.com/share.php?u={{ url()->full() }}" target="_blank" rel="noreferrer"
                        class="d-inline p-2"><i class="fab fa-facebook"></i></a>
                        <a href="https://twitter.com/share?url={{ url()->full() }}&amp;text={{ env('APP_NAME') }}" target="_blank"
                        rel="noreferrer" class="d-inline p-2"><i class="fab fa-twitter"></i></a>
                        <a href="https://web.whatsapp.com/send?text={{ url()->full() }}" target="_blank" rel="noreferrer"
                        class="d-inline p-2"><i class="fab fa-whatsapp"></i></a>
                        <a href="http://www.linkedin.com/shareArticle?mini=true&amp;url={{ url()->full() }}" target="_blank"
                        rel="noreferrer" class="d-inline p-2"><i class="fab fa-linkedin"></i></a>
                        <p style="font-size: 12px; margin:0px; padding:0px;">{{ translate('share_on_social_media') }}</p>
                    </div>

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

@endsection
@section('footer')
<script>
    document.addEventListener('DOMContentLoaded', (event) => {
        document.querySelectorAll('pre').forEach((el) => {
            hljs.highlightElement(el);
        });
    });

    $(document).ready(function () {
        $('#commentSend').click(function () {
            $('#commentsError').html(" ");

            var $inputs = $('#commentForm :input');
            // not sure if you wanted this, but I thought I'd add it.
            // get an associative array of just the values.
            var data = {};
            $inputs.each(function () {
                data[this.name] = $(this).val();
            });

            $.ajaxSetup({
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                }
            });
            $.ajax({
                type: 'POST',
                url: "{{ route('add_comments') }}",
                data: data,
                success: function (response) {
                    if (response.success == true) {
                        $("#successAlert").show();
                        $("#commentForm").trigger('reset');
                        $("#commentSend").hide();
                    } else {
                        $("#successAlert").hide();
                        var html = "<ul>";
                        if ( typeof response.errors != null ) {
                            if ( typeof response.errors == "object" ) {
                                var errors = response.errors;

                                if ( typeof errors.category_id != "undefined" ) {
                                    errors.category_id.forEach(err => {
                                        html += "<li>" + err + "</li>";
                                    });
                                }
                                if ( typeof errors.comment_text != "undefined" ) {
                                    errors.comment_text.forEach(err => {
                                        html += "<li>" + err + "</li>";
                                    });
                                }
                                if ( typeof errors.user_id != "undefined" ) {
                                    errors.user_id.forEach(err => {
                                        html += "<li>" + err + "</li>";
                                    });
                                }
                                if ( typeof errors.name != "undefined" ) {
                                    errors.name.forEach(err => {
                                        html += "<li>" + err + "</li>";
                                    });
                                }
                                if ( typeof errors.surname != "undefined" ) {
                                    errors.surname.forEach(err => {
                                        html += "<li>" + err + "</li>";
                                    });
                                }
                                if ( typeof errors.email != "undefined" ) {
                                    errors.email.forEach(err => {
                                        html += "<li>" + err + "</li>";
                                    });
                                }
                            }
                        }
                        html += "</ul>";
                        $('#commentsError').html(html);
                    }
                }
            });
        });
    });
</script>
@endsection