@extends('layouts.app')

@section('content')
    <div class="content">
        @php
            $user = request()->user();
        @endphp
        <x-content.header title="{{ $thread->subject }}">
            <x-slot:headerRight>
                <button onclick="Livewire.dispatch('openLiveModal', {actionType: 'compose'})" class="btn-secondary-base">
                    <x-svg-icon icon="icon-plus" />
                    {{ trans('menu.compose') }}
                </button>
            </x-slot:headerRight>
        </x-content.header>
        <div class="flex gap-2 text-custom-grey-500 cursor-pointer" onclick="location.href='{{ route('emails.index') }}'">
            <x-svg-icon icon="icon-back" />
            <div class="text-md-medium">{{ __('title.back') }}</div>
        </div>

        @foreach ($thread->messages->sortBy('updated_at') as $index => $message)
            @if (!$message->is_draft || ($message->is_draft && $message->user->id == auth()->id()))
                @if (
                    ($message->user->id == auth()->id() ||
                        ($message->single_reply_id ? $message->single_reply_id == auth()->id() : true)) &&
                        ($status == 'sent' ? $message->user->id == auth()->id() : true))
                    <div class="mt-5">
                        <div class="flex flex-col sm:flex-row justify-between gap-5">
                            <div class="flex gap-5">
                                <div class="rounded-img w-14 h-14 user-img {{ $message->user?->status ? '': 'inactive' }}">
                                    <img src="{{ getMediaUrl($message->user, 'photograph', 'thumb') }}" />
                                </div>
                                <div>
                                    <h1 class="text-md-semibold {{ $message->user?->status ? 'text-custom-grey-900': 'text-custom-grey-400' }}">
                                        {{ $message->user->display_name }}
                                    </h1>
                                    <div class="flex gap-2 items-center">
                                        <p class="text-md-medium text-custom-grey-500">{{ trans('label.to') }} :
                                            @php
                                                $recipents = [];
                                                $i = 0;
                                            @endphp
                                            @if ($message->single_reply_id)
                                                <a
                                                    href="{{ route('users.profile.show', $message->single_reply_id) }}">{{ $message->singleRepliedTo->display_name }}</a>
                                            @else
                                                @foreach ($thread->participants as $key => $p)
                                                    @if ($p->user->id != $message->user->id)
                                                        @if ($i == 0)
                                                            <a
                                                                href="{{ route('users.profile.show', $p->user->id) }}">{{ $p->user->display_name }}</a>
                                                            @php $i++ @endphp
                                                        @else
                                                            @php $recipents[] = $p->user->display_name; @endphp
                                                        @endif
                                                    @endif
                                                @endforeach
                                            @endif
                                        </p>

                                        @if (count($recipents) > 0 && !$message->single_reply_id)
                                            <i data-toggle="tooltip" data-placement="top"
                                                data-original-title="{{ implode(', ', $recipents) }}"
                                                class="mdi mdi-account-multiple-plus text-custom-grey-500"
                                                style="font-size: 24px;line-height: 20px;"></i>
                                        @endif
                                    </div>
                                </div>
                            </div>
                            <div class="text_md_medium text-custom-grey-700">
                                {{ parseFromFormat($message->created_at)->format(config('settings.date_format')) . ' ' . parseFromFormat($message->created_at)->format(config('settings.time_format')) }}
                                </br> {{ $message->created_at->diffForHumans() }}
                            </div>
                        </div>

                        {{-- Collapsible section --}}
                        <div class="mt-8 text-md-medium text-custom-grey-800">
                            @if ($loop->last || $message->is_draft)
                                {{-- Last message: always expanded --}}
                                {!! $message->body !!}
                            @else
                                {{-- Other messages: collapsed by default --}}
                                <button
                                    class="btn-toggle-body text-custom-grey-500 flex items-center bg-custom-grey-100 hover:bg-custom-grey-200 px-2 py-0 rounded-lg"
                                    onclick="toggleMessageBody(this)">
                                    <i class="mdi mdi-dots-horizontal text-2xl leading-6"></i>
                                </button>
                                <div class="message-body mt-5 hidden">
                                    {!! $message->body !!}
                                </div>
                            @endif
                        </div>

                        {{-- Attachments --}}
                        <div class="mt-8 text-md-medium text-custom-grey-800">
                            <div class="tw-card px-2">
                                @php $assets = $message->getMedia('attachments'); @endphp
                                @if ($assets->count() > 0)
                                    <div class="attachments-sections">{!! get_email_formatted_assets($assets) !!} </div>
                                @endif
                            </div>
                        </div>

                        {{-- Buttons --}}
                        <div class="flex gap-4 mt-8">
                            @if ($status != 'trash')
                                @if ($message->user->id !== auth()->id())
                                    <button onclick="Livewire.dispatch('openLiveModal', {actionType: 'reply', modelId: {{ $message->id }}})"
                                        class="btn-secondary-base">
                                        <x-svg-icon icon="icon-send" />
                                        {{ __('label.reply') }}
                                    </button>
                                @elseif($message->user->id == auth()->id() && $message->is_draft)
                                    <button onclick="Livewire.dispatch('openLiveModal', {actionType: 'sendDraft', modelId: {{ $message->id }}})"
                                        class="btn-secondary-base">
                                        <i class="fa fa-edit"></i>
                                        {{ __('forms.lbl_send') }} {{ __('forms.lbl_draft') }}
                                    </button>
                                @endif
                                @if (!$message->is_draft)
                                    <button onclick="Livewire.dispatch('openLiveModal', {actionType: 'replyall', modelId: {{ $message->id }}})"
                                        class="btn-secondary-base">
                                        <i class="fa fa-reply-all"></i>
                                        {{ __('label.reply_all') }}
                                    </button>
                                @endif
                            @endif
                            @if ($message->is_draft)
                                <button type="button" class="btn-secondary-base btn-delete"
                                    data-uri="{{ route('messages.delete', ['messageId' => $message->id, 'status' => $status]) }}"
                                    data-redirect="{{ route('emails.index') }}" data-id="{{ $message->id }}"
                                    data-status="{{ $status }}" href="javascript:;"><i
                                        class="mdi mdi-delete text-primary mr-1"></i> {{ trans('label.delete') }}
                                </button>
                            @endif
                        </div>
                    </div>
                @endif
            @endif
        @endforeach

        <livewire:emails::livewire.email-modal :modalId="'modal-email'" :users="$users" />
    </div>

@stop

@section('footer-script')
    <script src="{{ asset('js/jquery-file-upload.js') }}"></script>
    <script>
        function toggleMessageBody(button) {
            const $this = $(button);
            const body = $this.next('.message-body');

            body.toggleClass('hidden');

            const icon = $this.find('i');
            if (body.hasClass('hidden')) {
                icon.removeClass('mdi-chevron-up').addClass('mdi-dots-horizontal');
            } else {
                icon.removeClass('mdi-dots-horizontal').addClass('mdi-chevron-up');
            }
        }
    </script>
@stop