@extends('layouts.app')
@section('title', trans('announcements.title'))

@section('content')
    @php $user = auth()->user(); @endphp
<div class="content">
    <x-content.header title="{{ __('announcements.title') }}" subTitle="{{trans('menu.created_at').' '.$announcement->created_at->diffForHumans()}}">
        <x-slot:headerRight>

            @if($user->can('update',  $announcement))
                <a class="btn-secondary-base" href="{{ url('announcements/'.$announcement->id."/edit") }}" data-id="{{ $announcement->id }}">
                    <x-svg-icon icon="icon-edit" /> {{ trans('forms.lbl_edit') }}
                </a>
            @endif

            @if( $announcement->status == "publish" && !$announcement->user_announcements->contains('id', request()->user()->id) )
                <button type="button" class="btn-secondary-base mark-as-read" data-id="{{$announcement->id}}" data-uri="{{route('announcements.mark-as-read', $announcement->id)}}">{{trans('label.read')}} <i class="mdi mdi-check float-right"></i></button>
            @endif

            <button type="button" class="btn-secondary-base print"  data-id="{{$announcement->id}}"><x-svg-icon icon="icon-printer" /></button>

            <a href="{{url('announcements')}}" class="btn-tertiary-base">
                {{trans('forms.lbl_cancel')}}
            </a>
        </x-slot:headerRight>
    </x-content.header>


    @include('announcement::details', ['preview' => false ])

</div>
@endsection

@section('footer-script')
    <script type="text/javascript">
        function setEndOfContenteditable(contentEditableElement)
        {
            var range,selection;
            if(document.createRange)//Firefox, Chrome, Opera, Safari, IE 9+
            {
                range = document.createRange();//Create a range (a range is a like the selection but invisible)
                range.selectNodeContents(contentEditableElement);//Select the entire contents of the element with the range
                range.collapse(false);//collapse the range to the end point. false means collapse to end rather than the start
                selection = window.getSelection();//get the selection object (allows you to change selection)
                selection.removeAllRanges();//remove any selections already made
                selection.addRange(range);//make the range you have just created the visible selection
            }
            else if(document.selection)//IE 8 and lower
            {
                range = document.body.createTextRange();//Create a range (a range is a like the selection but invisible)
                range.moveToElementText(contentEditableElement);//Select the entire contents of the element with the range
                range.collapse(false);//collapse the range to the end point. false means collapse to end rather than the start
                range.select();//Select the range (make it the visible selection
            }
        }

        $("body").on("click", ".mark-as-read", function(event) {
            event.preventDefault();
            let id = $(this).data('id');
            PDRequest({
                type    : "POST",
                url     : $(this).data('uri'),
                data    : {},
                event   : event
            }).then((response) => {
                if(response.status == "success") {
                    $(this).remove();
                }
            });
        });

        $("body").on("click", ".save-comment", function(event) {

            event.preventDefault();

            $comment_box = $("#comment-box-"+$(this).data('id')),
            $comments_section_id = $("#comments-"+$(this).data('id')),
            $commentBody = $comment_box.find("p#comment-body-"+$(this).data('id')).html();

            $url = "/announcements/"+$(this).data('id')+"/comments";

            let data = {body : $commentBody };

            PDRequest({
                type    : "POST",
                url     : $url,
                data    : data,
                isFlash : false,
                event   : event,
            }).then((response) => {

                if(response.status == "success") {

                    if($comments_section_id.find("p").hasClass('empty_list')){

                        $comments_section_id.find(".empty-list").remove();

                        $comments_section_id.html(response.message);

                    } else {

                        $comments_section_id.append(response.message);

                    }

                $comment_box.find("p#comment-body-"+$(this).data('id')).html("");
                }

            });

        });

        $('body').on('click', ".reply-create", function(event) {
			$("#comment-reply-form-"+$(this).data('id')).removeClass("hidden");
			$("#comment-reply-form-"+$(this).data('id')).find("p#reply-body-"+$(this).data('id')).html('<a id="%'+$(this).data('uid')+'%" href="javascript:;">@'+$(this).data('name')+'</a>&nbsp;');
			$("#comment-reply-form-"+$(this).data('id')).find("p#reply-body-"+$(this).data('id')).focus();
			setEndOfContenteditable(document.getElementById("reply-body-"+$(this).data('id')));
	    });


	    $("body").on("click", '.btn-reply', function(event) {
	        event.preventDefault();

	        var $id = $(this).data('id'), $reply_box = $("#reply-box-"+$id),
	            data = { body : $("#reply-body-"+$id).html() };

	        PDRequest({
	            type    : "POST",
	            url     : "/announcements/comments/"+$id+"/reply",
	            data    : data,
	            event   : event,
	            isFlash : false
	        }).then((response) => {
	            if(response.status == "success"){
	                $reply_box.append(response.message);
	                $("#reply-body-"+$id).html("");

	            }
	        });
	    });

        // Handling clicks for the second set of tabs
        $(".tab-btn").click(function() {
            // Reset all tabs and contents for the second set
            $(".tab-btn").removeClass(
                "active text-custom-grey-700 bg-base-white shadow-[rgba(50,_50,_105,_0.15)_0px_2px_5px_0px,_rgba(0,_0,_0,_0.05)_0px_1px_1px_0px]"
            );

            $(".tab-pane-box").addClass("hidden");

            // Set new active state for the clicked tab in the second set
            $(this).addClass(
                "active text-custom-grey-700 bg-base-white shadow-[rgba(50,_50,_105,_0.15)_0px_2px_5px_0px,_rgba(0,_0,_0,_0.05)_0px_1px_1px_0px]"
            );

            $("#content-"+$(this).data('content')).removeClass("hidden");
        });

    </script>
@stop