@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="{{ $announcements->total() }} {{__('announcements.title')}}">
        <x-slot:headerRight>

            @can('create announcements')
                <a href="{{url('announcements/create')}}" class="btn-secondary-base"><x-svg-icon icon="icon-plus" />{{trans('forms.lbl_add_new')}}</a>
            @endcan
        </x-slot:headerRight>
    </x-content.header>

    <div id="folder-search-bar" class="flex gap-3 items-center">
        <div class="search-bar w-full lg:w-auto">
            <form id="filter-form" method="POST" onsubmit="return false;">
                <input name="_term" type="text" class="fitler_form search-input w-full lg:w-[320px]" placeholder="{{trans('forms.lbl_search')}}" />
                <x-svg-icon icon="icon-search" />
            </form>
        </div>
    </div>

    @if($user->hasAnyPermission(['delete announcements']))
        <div id="selected-count" class="hidden">
            <div class="bg-custom-orange-50 text-custom-grey-600 py-2 px-[7px] rounded-lg flex items-center">
                <x-svg-icon class="mr-2 selected-bar-close cursor-pointer" icon="icon-close" />

                <h1 id="show-selected-count" class="text-md-semibold">
                    <span class="selected_items">0</span> {{ trans('forms.lbl_items_selected') }}
                </h1>

                <a href="javascript:;"
                    data-uri="{{url('announcements')}}"
                    class="btn-folder-delete-all">
                    <x-svg-icon class="ml-6" icon="icon-trash" />
                </a>
            </div>
        </div>
    @endcan

    <div id="announcement-lists" class="laravel-pagination">
        @include('announcement::items')
    </div>

</div>
@endsection

@section('footer-script')
    <script type="text/javascript">

        var whiteList = $.fn.tooltip.Constructor.Default.whiteList
        whiteList.img = ['src', 'alt', 'title', 'width', 'height', 'data-toggle', 'clipboard-text', 'data-clipboard-text', 'data-title'];
        whiteList.a = ['target', 'href', 'title', 'rel', 'data-clipboard-text', 'data-id'];

        function setTooltip(message, el) {
          $(el).tooltip('hide')
            .attr('data-original-title', message)
            .tooltip('show');
        }

        function hideTooltip( el ) {
            setTimeout(function() {
                $(el).tooltip('hide');
            }, 1000);
        }

        $(document).tooltip({
            trigger: 'click',
            placement: 'bottom',
            selector: '.btn-reader'
        });

        function copyToClipboard(element) {
            var $temp = $("<textarea>");
            var brRegex = /<br\s*[\/]?>/gi;
            $("body").append($temp);
            $temp.val($(element).html().replace(brRegex, "\r\n")).select();
            document.execCommand("copy");
            $temp.remove();
        }

        $.fn.modal.Constructor.prototype._enforceFocus = function() {};

        $("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") {
                    window.PDTable.draw();
                }
            });
        });

        $("body").on("click", ".btn-reader", function(event) {
            event.preventDefault();
            copyToClipboard("#"+$(this).data('id'));
            setTooltip('Copied!', this);
            hideTooltip( this );
        });

        $("body").on("click", ".readers-popup", function(event) {

            event.preventDefault();

            PDRequest({
                type    : "GET",
                url     : $(this).data('uri'),
                event   : event
            }).then((response) => {
                if(response.status == "success") {
                    $(this).popover({
                        html: true,
                        trigger: 'focus',
                        content: function() {
                            return response.message;
                        },
                        whiteList : whiteList
                    });
                    $(this).popover('show');
                }
            });

            return false;
        });

        $('#filter-form input').on("keyup", function(event) {

            let url = '{{route('announcements.index.filter')}}';
            itemSearch($('#announcement-lists'), url);
        });

        $('html').on('click', function(e) {
             if ( !$(e.target).parents().is('.readers-popup') &&
                !$(e.target).parents().is('.popover.show')) {
                     $('[data-original-title]').popover('hide');
            }
        });


    </script>
@stop