@extends('frontend.layouts.template')
@section('content')
<div class="row box-banner" style="background: #F0F0F0;">
    <div class="col-12 bg-what-detail" style="background-image: url('{{ asset( $blog->category->bg->path . $blog->category->bg->filename ) }}');">
        <div class="box-gradient" ></div>
        <div class="box-topic">
            <div class="row sub-what-res" style="padding-bottom: 200px;">
                <div class="col-sm-12 col-xl-1"></div>
                <div class="col-sm-12 col-xl-10 res-p-15">
                    <div class="naviagter-a">
                        <a href="{{ url('what-works') }}">WHAT WORKS</a>&nbsp; | <a href="{{ url('what-works/'. $blog->category->id .'/'. encodelink($blog->category->name) )}}">{{ $blog->category->name}}</a>&nbsp; | <span class="active">{{ $blog->subject }}</span>
                    </div>
                    <div class="text-center c-black f-topic-news" >
                        <b class="f-bold">{{ $blog->subject }}</b>

                    </div>
                    <div class="text-center c-black res-ma">
                        {{-- <a href="{{ asset( $blog->attach_blogs->path . $blog->attach_blogs->filename ) }}" target="_blank" class="stem-click-blu" style="padding: 5px 40px;font-size: 14px;display: inline-block;"> --}}
                        <a href="#" target="_blank" class="stem-click-blu click-modal" data-id="{{ $blog->id }}"  data-ready="{{ auth()->check() ? 'Y' : 'N' }}" style="padding: 5px 40px;font-size: 14px;display: inline-block;">
                            <img src="{{ asset('frontend/assetsnew/img/whatworks/icon/icon-b.png') }}" alt="" style="width:12px;">&nbsp;&nbsp;Download
                        </a>
                    </div>
                </div>
                <div class="col-sm-12 col-xl-1"></div>
            </div>
        </div>
    </div>
</div>
<div class="row" style="background: #F0F0F0;">
    <div class="col-12">
        <div class="box-topic-detail">
            <div class="row" >
                <div class="col-sm-12 col-xl-1"></div>
                <div class="col-sm-12 col-xl-10 res-p-15">
                    <div  class="mb-3 c-black box-blog">
                        @php
                            $tags = @json_decode($blog->tags );
                            // $writers = ($blog->writer && strpos($blog->writer,']') === false) ? json_decode(jsonEncode([ ['text' => $blog->writer]])) : json_decode( $blog->writer );
                            $writers = objTags($blog->writer);
                            $blog_date = $blog->event_date ? $blog->event_date : $blog->created_at;
                            if( $blog->image_blogs && $blog->image_blogs->id ){
                                $blog_bg = $blog->image_blogs->path . $blog->image_blogs->filename;
                            }else{
                                $blog_bg = $blog->category->bg->path . $blog->category->bg->filename;
                            }
                        @endphp
                        <div style="padding: 0px 0 5px;">
                            @if ($writers)
                                @foreach ($writers as $writer)
                                    <span style="text-decoration: underline;font-size: 14px;margin-right: 15px;color: #666666"><a href="{{ url('what-works/tags?writer='. $writer->text ) }}" class="writer-link">{{ $writer->text }}</a></span>
                                @endforeach
                            @endif
                            <img src="{{ asset('frontend/assetsnew/img/whatworks/icon/icon-a.png') }}" alt="" style="width:20px;">
                            <span style="font-size: 14px;margin-left: 5px;color: #666666">{{ date('d-m-Y',strtotime( $blog_date ) ) }}</span>
                        </div>
                        <div class="mb-3">

                            @if( $tags)
                                @foreach ($tags as $tag)
                                    <span style="font-size: 12px;background: #D8D8D8;padding:2px 10px"><a href="{{ url('what-works/blogs/'. $id .'/'. $subject .'?tag='. $tag->text ) }}" class="tag-link">{{ $tag->text }}</a></span>
                                @endforeach
                            @endif
                        </div>
                        <div class="row" >
                            <div class="col-sm-12 col-xl-9">
                                <hr style="border-top: 1px solid #ABABAB;margin-top: 0;">
                                <div class="mt-4">
                                    {!! $blog->detail !!}
                                </div>
                            </div>
                            <div class="col-sm-12 col-xl-3 col-image">
                                @if ( $blog->attach_blogs && $blog->attach_blogs->id )
                                <div class="box-img-w">
                                    <div class="click-news-what-blog" style="background: url({{ asset( $blog_bg ) }});"></div>
                                    <img src="{{ asset('frontend/assetsnew/img/whatworks/w1.jpg') }}" alt="" id="imageid" style="display: none;">
                                    <div style="position: absolute;top: 0;background: rgba(0,0,0,0.5);width: 100%;height: 100%;">
                                        <a href="" class="cc a-center-absolute" data-toggle="modal" data-target="#blog-preview"  data-id="{{ $blog->attach_blogs->id }}"  data-title="pdf">
                                            <div style="font-size: 32px;color: #fff;"><i class="fa fa-search" aria-hidden="true"></i></div>
                                            <div style="font-size: 12px;color: #fff">View Preview</div>
                                        </a>
                                    </div>
                                </div>
                                @endif
                            </div>
                        </div>
                    </div>
                @php
                    $cNo = 1;
                @endphp
                @if( $blog->comments )
                @foreach ($blog->comments as $comment)
                    <div style="border-left: 13px solid #EE3424;" class="mb-3 c-black  box-blog">
                        <div>
                            <h5 class="mb-0"><b>Comment No.{{ $cNo }}</b></h5>
                        </div>
                        <div style="padding: 0px 0 5px;">
                            <img src="{{ asset('frontend/assetsnew/img/whatworks/icon/icon-a.png') }}" alt="" style="width:18px;">
                            <span style="font-size: 14px;margin-left: 5px;color: #666666">{{ date('d-m-Y', strtotime( $comment->created_at ) ) }}</span>
                        </div>

                        <div class="row" >
                            <div class="col-sm-12 col-xl-12">
                                <div class="mt-1">
                                    {!! nl2br($comment->message) !!}
                                </div>
                                <div class="mt-4 pt-3" style="font-size: 14px;border-top: 1px solid #ABABAB;position: relative;">
                                    <div><b>Fullname : {{ $comment->user ? $comment->user->name ? $comment->user->name : $comment->user->firstname .' ' . $comment->user->lastname : '' }}</b></div>
                                    <div><b>Occupation : {{ ( $comment->user && $comment->user->occupation )? $comment->user->occupation : '' }}</b></div>
                                    <div class="position-absolute" style="right: 0;top: 50%;transform: translate(0px, -50%);">
                                        @if ( auth()->check() )
                                        <a href="javascript:;" class="stem-click-blu reply mr-1" data-id="{{ $comment->id }}" style="font-size: 12px;padding: 5px 20px;"><i class="fa fa-reply" aria-hidden="true"></i> Reply</a>
                                            @if ( $comment->user->id == auth()->user()->id  || auth()->user()->level == 'admin')
                                                <a href="{{ url('comment/delete/'. $comment->id ) }}" class="del-click-black" style="font-size: 12px;padding: 5px 7px;"><i class="fa fa-trash" aria-hidden="true"></i></a>
                                            @endif
                                        @endif
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="box-p-60">
                        @if( $comment->reply)
                        @php
                            $refNo = $cNo;
                        @endphp
                        @foreach ($comment->reply as $reply)
                        <div style="display: none;" class="c-black  box-blog comment-sub comment-sub-{{ $comment->id }}">
                            <div>
                                <h5 class="mb-0"><b>Comment No.{{ $refNo + 0.1 }}</b></h5>
                            </div>
                            <div style="padding: 0px 0 5px;">
                                <img src="{{ asset('frontend/assetsnew/img/whatworks/icon/icon-a.png') }}" alt="" style="width:18px;">
                                <span style="font-size: 14px;margin-left: 5px;color: #666666">{{ date('d-m-Y', strtotime( $reply->created_at ) ) }}</span>
                            </div>

                            <div class="row" >
                                <div class="col-sm-12 col-xl-12">
                                    <div class="mt-1">
                                        {!! nl2br($reply->message) !!}
                                    </div>
                                    <div class="mt-4 pt-3" style="font-size: 14px;border-top: 1px solid #ABABAB;position: relative;">
                                        <div><b>Fullname : {{ $comment->user ? $comment->user->name ? $comment->user->name : $comment->user->firstname .' ' . $comment->user->lastname : '' }}</b></div>
                                        <div><b>Occupation : {{ ( $comment->user && $comment->user->occupation )? $comment->user->occupation : '' }}</b></div>
                                            {{-- <div><b>Fullname : {{ $reply->user->name }}</b></div>
                                        <div><b>Occupation : {{ $reply->user->occupation }}</b></div> --}}
                                        <div class="position-absolute" style="right: 0;top: 50%;transform: translate(0px, -50%);">
                                            @if ( auth()->check() )
                                                <a href="javascript:;" class="stem-click-blu reply mr-1" data-id="2" style="font-size: 12px;padding: 5px 20px;"><i class="fa fa-reply" aria-hidden="true"></i> Reply</a>
                                            @if ( $comment->user->id == auth()->user()->id || auth()->user()->level == 'admin' )
                                                <a href="{{ url('comment/delete/'. $reply->id ) }}" class="del-click-black" style="font-size: 12px;padding: 5px 7px;"><i class="fa fa-trash" aria-hidden="true"></i></a>
                                            @endif
                                        @endif
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        @endforeach
                        @endif

                            <div class="mt-3 mb-3 c-black  box-blog-comment comment-{{ $comment->id }}" style="display: none;">
                            @if( auth()->check() )
                            <form method="POST" action="{{ url('sender/comment/'. $id) }}">
                                {{ csrf_field() }}
                                <input type="hidden" name="ref_id" value="{{ $comment->id }}">
                                <div>
                                    <h3>
                                        <img src="{{ asset('frontend/assetsnew/img/whatworks/icon/icon-c.png') }}" alt="" style="width:35px;display: inline-block">
                                        <b class="c-black" style="vertical-align: middle;display: inline-block;"> COMMENT</b>
                                    </h3>
                                </div>
                                <div style="padding: 10px 0 5px;">
                                    <textarea class="form-control border-r0" name="comment" rows="5" id="" placeholder="Type here…"></textarea>
                                </div>
                                <div class="text-right mt-3">
                                    <button type="submit" class="btn button-b text-center border-r0" data-toggle="modal" data-target="#myModal" style="padding-left: 60px;padding-right: 60px;">SEND</button>
                                </div>
                            </form>
                            @endif
                            </div>
                        @if (count($comment->reply) > 0)
                            <div class="text-center mb-3" style="background: #707070;color: #fff;padding: 5px;">
                                <span class="show-reply" data-id="{{ $comment->id }}" style="cursor: pointer;"><b>SHOW REPLY <i class="ml-2 fa fa-caret-down sorn" aria-hidden="true"></i></b></span>
                            </div>
                        @endif
                    </div>
                    @php
                        $cNo++;
                    @endphp
                @endforeach
                @endif
                @if( auth()->check() )
                    <form method="POST" action="{{ url('sender/comment/'. $id) }}">
                        {{ csrf_field() }}
                        <input type="hidden" name="ref_id" value="0">

                        <div  class="mb-3 c-black  box-blog-comment">
                            <div>
                                <h3>
                                    <img src="{{ asset('frontend/assetsnew/img/whatworks/icon/icon-c.png') }}" alt="" style="width:35px;display: inline-block">
                                    <b class="c-black" style="vertical-align: middle;display: inline-block;"> COMMENT</b>
                                </h3>
                            </div>
                            <div style="padding: 10px 0 5px;">
                                <textarea class="form-control border-r0" name="comment" rows="5" id="" placeholder="Type here…"></textarea>
                            </div>
                            <div class="text-right mt-3">
                                <button type="submit" class="btn button-b text-center border-r0" data-toggle="modal" data-target="#myModal" style="padding-left: 60px;padding-right: 60px;">SEND</button>
                            </div>


                        </div>
                    </form>
                @endif
                    <div class="text-right" style="margin: 30px 0 60px;">
                        <a href="javascript:" onclick="goBack()" class="back-click" >BACK</a>
                    </div>
                </div>
                <div class="col-sm-12 col-xl-1"></div>
            </div>
        </div>
    </div>
</div>
@endsection

@section('modals')
    <div id="myModal-del" class="modal fade" role="dialog">
        <div class="modal-dialog modal-md" style="transform: translate(0,-50%);top: 45%;">
            <div class="modal-content border-r0" style="background: unset;border: none;">
                <div class="modal-header" style="border:none">
                    <button type="button" class="close" data-dismiss="modal" style="padding: 0;font-size: 40px;">&times;</button>
                    <h4 class="modal-title"></h4>
                </div>
                <div class="modal-body" style="background: #fff;">
                    @if( auth()->check() )
                    <div class="c-black">
                        <div class="box-p-50 text-center">
                            <div class="">
                                <div >
                                    <img src="{{ asset('frontend/assetsnew/img/whatworks/icon/icon-d.png') }}" alt="" style="width: 35px;">
                                </div>
                                <div class="mt-2"><b>Delete Comment ?</b></div>
                            </div>
                            <div class="mt-3 mb-3">
                                <a href="javascript:;" class="button-close" data-dismiss="modal" style="font-size: 12px;padding: 7px 42px;box-shadow: unset;">CANCEL</a>
                                <a href="javascript:;" class="button-b" id="" style="font-size: 12px;padding: 7px 50px;box-shadow: unset;">CONFIRM</a>
                            </div>
                        </div>
                    </div>
                    @else
                        @php
                            redirect('login');
                        @endphp
                    @endif

                </div>
            </div>

        </div>
    </div>
    <div id="blog-preview" class="modal fade" role="dialog">
        <div class="modal-dialog modal-lg" style="transform: translate(0,-50%);top: 45%;">
            <div class="modal-content border-r0" style="background: unset;border: none;">
                <div class="modal-body" style="background: #fff;">

                    <img src="{{ asset( $blog_bg ) }}" style="width:100%;" />

                </div>
            </div>

        </div>
    </div>
    @include('frontend.modals.documents')
@endsection

@section('stylesheet')
	<link href="{{ asset('frontend/assetsnew/css/resources.css')}}" rel="stylesheet">
	<link href="{{ asset('frontend/assetsnew/css/about.css')}}" rel="stylesheet">
@endsection

@section('javascript')
    <script type="text/javascript" src="{{ asset('frontend/assetsnew/js/reader.js') }}"></script>
    <script type="text/javascript">
        var imgWidth = $(".col-image").width();

        $('.box-img-w').css({
            'height': imgWidth * 1.2
        })
        $(".reply").click(function() {
            var id = $(this).data("id");
            $(".comment-" + id).toggle();
        });

        $(".show-reply").click(function() {
            var id = $(this).data("id");
            $('.sorn').toggleClass("rotatee");
            $(".comment-sub-" + id).toggle();
        });
        function goBack() {
		    window.history.back();
	    }
        (function($){
            $('.del-click-black').on('click',function(e){
                e.preventDefault();
                const urlDel = $(this).attr('href');
                console.log( 'url for delete : ', urlDel );
                $('#myModal-del .button-b').attr('href',urlDel);
                $('#myModal-del').modal('show');
            })
        }(jQuery));

    </script>
@endsection