@extends('Template.layouts.master')

@section('title','جزئیات طرح')

@section('content')
    <div class="main">

        <!--breadcrumb bar start-->
        {{--        <div class="breadcrumb-bar py-3 gray-light-bg border-bottom">--}}
        {{--            <div class="container">--}}
        {{--                <div class="row">--}}
        {{--                    <div class="col-12">--}}
        {{--                        <div class="custom-breadcrumb">--}}
        {{--                            <ol class="breadcrumb d-inline-block bg-transparent list-inline py-0 pl-0">--}}
        {{--                                <li class="list-inline-item breadcrumb-item"><a href="#">خانه</a></li>--}}
        {{--                                <li class="list-inline-item breadcrumb-item"><a href="#">صفحات جانبی</a></li>--}}
        {{--                                <li class="list-inline-item breadcrumb-item active">جزئیات وبلاگ</li>--}}
        {{--                            </ol>--}}
        {{--                        </div>--}}
        {{--                    </div>--}}
        {{--                </div>--}}
        {{--            </div>--}}
        {{--        </div>--}}
        <!--breadcrumb bar end-->

        <!--blog section start-->
        <div class="module py-5">
            <div class="container">
                <div class="row">
                    <div class="col-lg-{{($article->display_type=='blog') ?'8':'12'}} col-md-8">
                        <!-- Post-->
                        <article class="post">
                            <div class="post-preview">
                                @if($article['cover_img']!=null && file_exists(public_path('user_data/images/'.$article['cover_img'])))
                                    <img src="{{asset('user_data/images/'.$article->cover_img)}}"
                                         alt="article"
                                         class="img-fluid"/>
                                @endif
                            </div>
                            <div class="post-wrapper">
                                <div class="post-header">
                                    <h1 class="post-title">{{$article->title}}</h1>
                                    <ul class="post-meta mt-3">
                                        <li>{{$created_at}}</li>
                                        <li><span>{{$fullName}}</span></li>
                                        <li><a href="#">{{$totalComment . ' ' . 'نظر'}}</a></li>
                                    </ul>
                                </div>
                                <div class="post-content">
                                    <p>{!! $article->content !!}</p>
                                </div>
                                <div class="post-footer">
                                    <div class="post-tags">
                                        @foreach($tagList as $tag)
                                            <a href="#">{{$tag->title}}</a>
                                        @endforeach
                                    </div>
                                </div>
                            </div>
                        </article>
                        <!-- Post end-->

                        <!-- Comments area-->
                        <div class="comments-area">
                            @if($article->display_type=='blog')
                                <div class="border-bottom">
                                <span class="">
                                    <h2 class="" style="font-size: 25px;font-weight: 400;">
                                        نظرات
                                        <span class="fs-1"
                                              style="font-size: 19px;color: #909090;font-weight: 400;padding: 5px;">{{$totalComment . ' ' . 'نظر'}}</span>
                                    </h2>
                                </span>
                                </div>

                                <div class="comment-list">
                                    <x-replyComponent :article="$article" :comments="$comments"/>
                                </div>

                                <div class="comment-respond">
                                    <h5 class="comment-reply-title">ارسال نظر</h5>
                                    <form class="comment-form row" action="{{route('storeComment')}}" method="POST">
                                        {{csrf_field()}}
                                        {{method_field('POST')}}
                                        <div class="form-group col-md-12">
                                    <textarea class="form-control" rows="8" placeholder="نظر شما..."
                                              name="content"></textarea>
                                            <input type="hidden" name="article_id" value="{{$article->id}}">
                                        </div>
                                        <div class="form-submit col-md-12">
                                            <button class="btn primary-solid-btn" type="submit">ارسال نظر</button>
                                        </div>
                                    </form>
                                </div>
                            @endif

                        </div>
                        <!-- Comments area end-->
                    </div>

                    @if($article->display_type=='blog')
                        <div class="col-lg-4 col-md-4">
                            <div class="sidebar-right pl-4">

                                <!-- جستجو widget-->
                                <aside class="widget widget-search">
                                    <form>
                                        <input class="form-control" type="search" placeholder="کلمه کلیدی...">
                                        <button class="search-button" type="submit"><span class="ti-search"></span>
                                        </button>
                                    </form>
                                </aside>


                                <!-- دسته ها widget-->
                                <aside class="widget widget-categories">
                                    <div class="widget-title">
                                        <h6>دسته ها</h6>
                                    </div>
                                    <ul>
                                        @foreach($categories as $category)
                                            <li><a href="#">{{$category->title}} <span
                                                        class="float-right">{{$category->count}}</span></a></li>
                                        @endforeach
                                    </ul>
                                </aside>

                                <!-- Recent entries widget-->
                                <aside class="widget widget-recent-entries-custom">
                                    <div class="widget-title">
                                        <h6>پست های اخیر</h6>
                                    </div>
                                    <ul>
                                        @foreach($recent_articles as $recent_article)
                                            <li class="clearfix">
                                                <div class="wi">
                                                    <a href="{{route('blog-details',$recent_article->id)}}">
                                                        @if(file_exists(public_path('user_data/images/'.$recent_article->cover_img)))
                                                            <img
                                                                src="{{asset('user_data/images/'.$recent_article->cover_img)}}"
                                                                alt="recent post"
                                                                class="img-fluid rounded"/>
                                                        @else
                                                            <img
                                                                src="{{asset('template-style/img/blog/default_image.png')}}"
                                                                alt="recent post"
                                                                class="img-fluid rounded"/>
                                                        @endif
                                                    </a>
                                                </div>
                                                <div class="wb">
                                                    <a href="{{route('blog-details',$recent_article->id)}}">
                                                        {{$recent_article->title}}
                                                    </a>
                                                    <span
                                                        class="post-date">{{Morilog\Jalali\CalendarUtils::strftime('%A, %d %B %Y', strtotime($recent_article->created_at))}}
                                            </span>
                                                </div>
                                            </li>
                                        @endforeach
                                    </ul>
                                </aside>

                                <!-- Tags widget-->
                                <aside class="widget widget-tag-cloud">
                                    <div class="widget-title">
                                        <h6>تگ ها</h6>
                                    </div>
                                    <div class="tag-cloud">
                                        @foreach($tagList as $tag)
                                            <a href="#">{{$tag->title}}</a>
                                        @endforeach
                                    </div>
                                </aside>
                            </div>
                        </div>
                    @endif


                </div>
            </div>
        </div>
        <!--blog section end-->

    </div>
@endsection

@section('script')
    {{--    strat sweet alert cdn--}}
    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11.7.3/dist/sweetalert2.all.min.js"></script>

    <script>
        $('.comment-reply a').click(function (e) {
            e.preventDefault();

            $('.comment-form').addClass('d-none');
            $(this).parent().parent().find('form').removeClass('d-none');
        });

        @if ($errors->any())
        @foreach ($errors->all() as $error)
        Swal.fire('Error', '{{ $error }}', 'error');


        @if(session()->has('signup_link') && session()->get('signup_link')!=null)
        Swal.fire({
            position: 'top-end',
            background: '#ff5252',
            color: 'white',
            icon: 'error',
            iconColor: 'white',
            toast: true,
            title: '{{ $error }} <a href="{{ session()->get('signup_link') }}">وارد شوید</a> .',
            showConfirmButton: false,
            timer: 4000
        });
        @else
        Swal.fire({
            position: 'top-end',
            background: '#ff5252',
            color: 'white',
            icon: 'error',
            iconColor: 'white',
            toast: true,
            title: '{{ $error }}',
            showConfirmButton: false,
            timer: 4000
        });
        @endif
        @endforeach
        @elseif(session()->has('success'))
        Swal.fire({
            position: 'top-end',
            background: '#4caf50',
            color: 'white',
            icon: 'success',
            iconColor: 'white',
            toast: true,
            title: '{{ session()->get('success') }}',
            showConfirmButton: false,
            timer: 4000
        });
        @endif
    </script>
@endsection