@php $expiredAt = parseFromFormat($announcement->expired_at)->diffForHumans();@endphp

<div id="outprint" class="flex flex-wrap gap-8 pb-8">

    <div class="w-full lg:w-[calc(100%-328px-32px)] flex flex-col">

        <h1 class="text-lg-semibold text-custom-grey-700">{{ $announcement->name }}</h1>

        <div class="text-sm-regular text-custom-grey-500">
            {!! $announcement->message !!}
        </div>

        @php $assets = $announcement->getMedia('attachments');@endphp

        @if (!$preview && $assets->count() > 0)
            <div class="mt-4 no-print">
                <h1 class="text-sm-semibold text-custom-grey-700 mb-4">{{trans("title.lbl_attachments")}}</h1>
                <div class="flex gap-3 overflow-x-scroll no-scrollbar light-gallery lightGallery readers">
                    @foreach ($assets as $asset)
                        <div class="flex justify-center flex-col items-center">
                            <div class='flex justify-center items-center h-[80px] w-[121.75px] px-[36.87px] py-4 bg-custom-blue-25 rounded-lg reader'>
                                {!! get_formatted_asset($asset, true) !!}
                            </div>

                            <a class="mt-4" href="{{ route('media.download', $asset->id) }}">
                                <x-svg-icon icon="icon-download" />
                            </a>
                        </div>

                    @endforeach

                </div>
            </div>
        @endif

        @if (!$preview && $announcement->comment == 0)
            <div class="mt-4 w-full no-print">
                <h1 class="text-sm-semibold text-custom-grey-700">Comments</h1>
                <div id="replies-{{ $announcement->id }}">
                    @include('comments.index', [
                        'item' => $announcement,
                        'joinDiscussion' => $announcement->id,
                        'type' => 'announcement',
                    ])
                </div>
            </div>
        @endif
    </div>

    <div class="w-full lg:w-[328px] bg-custom-grey-50 rounded-lg px-5 py-6 flex flex-col gap-4">

        <div class="flex gap-3 items-center">
            <img class="h-9 w-9 object-cover user-img {{ $announcement->createdby?->status ? '': 'inactive' }}" src="{{ getMediaUrl($announcement->createdby, 'photograph', 'thumb') }}" />
            <h1 class="text-lg-semibold text-custom-grey-900">
                @if ($user->can('view', $announcement->createdby) && $announcement->createdby?->status)
                    <a href='{{ route('users.profile.show', $announcement->createdby?->id) }}'>{{ $announcement->createdby?->name }}</a>
                @else
                    <span class="text-custom-grey-400">{{ $announcement->createdby?->display_name }}</span>
                @endif
            </h1>
        </div>

        <div class="flex flex-col gap-1">
            <h1 class="text-xs-semibold text-custom-grey-900">
                {{trans('menu.created_on')}}
            </h1>
            <p class="text-sm-regular text-custom-grey-600">
                {{ $announcement->created_at->diffForHumans() }}
            </p>
        </div>

        <div class="flex flex-col gap-1">
            <h1 class="text-xs-semibold text-custom-grey-900">
                {{ __('announcements.expiry') }}
            </h1>
            <p class="text-sm-regular text-custom-grey-600">
                {{ $expiredAt }}
            </p>
        </div>

        <div class="flex flex-col gap-1 no-print">
            <h1 class="text_xs_semibold text-custom-grey-900">{{ __('announcements.location') }}</h1>
            @if ($announcement->locations->count() > 0)
                 @foreach ($announcement->locations as $key => $value)
                    <p class="text-sm-regular text-custom-grey-600">
                        {{ $value->name }}
                    </p>
                @endforeach
            @endif

        </div>
        <div class="no-print">
            <h1 class="text-xs-semibold text-custom-grey-900 mb-[3px]">
                {{trans("onboarding.assign_to")}}
            </h1>
            <div class="mt-[3px] w-full rounded-lg bg-custom-grey-100 px-3 py-4">
                <div class="flex pb-4 w-full items-center overflow-x-scroll no-scrollbar">
                    <div>
                        <button data-content="1" class="tab-btn active inline-block py-[8px] px-[12px] font-semibold text-sm rounded-[6px]  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]">
                            {{ __('forms.lbl_people') }}({{ $announcement->users->count() }})
                        </button>
                    </div>
                    <div>
                        <button data-content="2" class="tab-btn inline-block py-[8px] px-[12px] text-custom-grey-500 font-semibold text-sm rounded-[6px]">
                            {{ __('forms.lbl_group') }}({{ $announcement->groups->count() }})
                        </button>
                    </div>
                    <div>
                        <button data-content="3" class="tab-btn inline-block py-[8px] px-[12px] text-custom-grey-500 font-semibold text-sm rounded-[6px]">
                            {{ __('forms.lbl_position') }}({{ $announcement->positions->count() }})
                        </button>
                    </div>
                </div>
                <div class="tab-contents">
                    <div id="content-1" class="tab-pane-box">
                        <div class="flex flex-col gap-4 px-1">
                            @foreach ($announcement->users as $usr)
                                <div class="flex gap-2 items-center">
                                    <img class="rounded-full h-6 w-6 object-cover" src="{{ getMediaUrl($usr, 'photograph', 'thumb') }}" />
                                    <h1 class="text-sm-medium text-custom-grey-700">
                                        {{ $usr->display_name }}
                                    </h1>
                                </div>
                            @endforeach
                        </div>
                    </div>

                    <div id="content-2" class="hidden tab-pane-box">
                        <div class="flex flex-col gap-4 px-1">
                            @foreach ($announcement->groups as $group)
                                <div class="flex gap-2 items-center">
                                    {{-- <img class="rounded-full h-6 w-6 object-cover" src="{{ getMediaUrl($usr, 'photograph', 'thumb') }}" /> --}}
                                    <h1 class="text-sm-medium text-custom-grey-700">
                                        {{ $group->name }}
                                    </h1>
                                </div>
                            @endforeach
                        </div>
                    </div>

                    <div id="content-3" class="hidden tab-pane-box">
                        <div class="flex flex-col gap-4 px-1">
                            @foreach ($announcement->positions as $position)
                                <div class="flex gap-2 items-center">
                                    {{-- <img class="rounded-full h-6 w-6 object-cover" src="{{ getMediaUrl($usr, 'photograph', 'thumb') }}" /> --}}
                                    <h1 class="text-sm-medium text-custom-grey-700">
                                        {{ $position->name }}
                                    </h1>
                                </div>
                            @endforeach
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>