<div>
    <div class="px-4">
        <div class="sm:flex sm:flex-col sm:items-center">
            <div class="flex flex-col md:flex-row justify-between w-full my-4">
                <h1 class="text-base font-semibold leading-6 text-gray-900">{{ __('Mailing') }}</h1>
                <livewire:components.pending-message :project="$project"
                                                     type="mailings"></livewire:components.pending-message>
            </div>
            <div class="flex flex-col md:flex-row mt-4 items-center md:justify-between w-full gap-2">
                <x-search></x-search>
            </div>
        </div>
        <div class="mt-8 flow-root overflow-x-scroll">
            <div class="">
                <div class="relative">
                    <div class="inline-block min-w-full py-2 align-middle mb-10">
                        <div class="">
                            <table class="min-w-full divide-y divide-gray-300">
                                <thead>
                                <tr>
                                    <th scope="col"
                                        class="py-3.5 pl-4 pr-3 text-left text-sm font-semibold text-gray-900 sm:pl-6 lg:pl-8">
                                        Id
                                    </th>
                                    <th scope="col"
                                        class="py-3.5 pl-4 pr-3 text-left text-sm font-semibold text-gray-900 sm:pl-6 lg:pl-8">@lang('Subject')</th>
                                    <th scope="col"
                                        class="py-3.5 pl-4 pr-3 text-left text-sm font-semibold text-gray-900 sm:pl-6 lg:pl-8">@lang('Status')</th>
                                    <th scope="col" class="px-3 py-3.5 text-left text-sm font-semibold text-gray-900">
                                        #
                                    </th>
                                    <th scope="col"
                                        class="px-3 py-3.5 text-left text-sm font-semibold text-gray-900">@lang('Attachment')
                                    </th>
                                    <th scope="col" class="relative py-3.5 pl-3 pr-4 sm:pr-0">
                                        <span class="sr-only">Edit</span>
                                    </th>
                                </tr>
                                </thead>
                                <tbody class="divide-y divide-gray-200 bg-white">
                                @foreach($mailings as $mail)
                                    <tr>
                                        <td class="whitespace-nowrap py-4 pl-4 pr-3 text-sm font-medium text-gray-900 sm:pl-6 lg:pl-8">{{ $mail->id }}</td>
                                        <td class="whitespace-nowrap px-3 py-4 text-sm text-gray-500 max-w-[300px] truncate ...">{{ $mail->subject }}</td>
                                        <td class="whitespace-nowrap px-3 py-4 text-sm text-gray-500">
                                            <livewire:components.badge :status="$mail->status" :id="$mail->id"
                                                                       type="mailing"
                                                                       wire:key="{{$mail->id}}"></livewire:components.badge>
                                        </td>
                                        <td class="whitespace-nowrap px-3 py-4 text-sm text-gray-500">{{ $mail->recipients()->count() }}</td>
                                        <td class="whitespace-nowrap px-3 py-4 text-sm text-gray-500 max-w-[250px] truncate ...">
                                            {{ $mail->attachments()->pluck('name')->join( ', ') }}
                                        </td>
                                        <td class="relative whitespace-nowrap py-4 pl-3 pr-4 text-right text-sm font-medium sm:pr-0">
                                            <button type="button" wire:click="showMailingDetailsModal({{ $mail->id }})"
                                                    x-on:click="$dispatch('preview',{mail: {{$mail}}})"
                                                    class="text-indigo-600 hover:text-indigo-900"><i class="fa-solid fa-eye"></i>
                                            </button>
                                        </td>
                                    </tr>
                                @endforeach
                                </tbody>
                            </table>
                        </div>
                    </div>
                    <div class="pt-4 flex justify-between items-center">
                        <div class="text-gray-700 text-sm">
                            Results: {{ \Illuminate\Support\Number::format($mailings->total()) }}
                        </div>

                        {{ $mailings->links('livewire.pagination') }}
                    </div>
                </div>
            </div>
        </div>
    </div>
    <x-modal wire:model="mailingDetailsModal">
        <x-form-modal submit="saveProject">
            <x-slot name="title">
                <div class="text-xl font-semibold justify-center text-center text-black">
                    {{ __('Mailing') }}
                </div>
            </x-slot>

            <x-slot name="form">
                <div class="col-span-6 py-2">
                    <x-label for="recipients" value="{{ __('Recipients') }}"/>
                    <div class="flex flex-wrap gap-2 pt-2">
                        @foreach($formData['recipients'] as $key => $recipient)
                            <div class="flex bg-gray-100 text-gray-700 text-xs p-2 rounded-lg items-center gap-2">
                                <i class="fa-regular fa-address-card fa-lg"></i>
                                <div><span class="inline-block" for="recipients">[{{ $recipient['name'] }}]</span>
                                    <span class="inline-block" for="recipients">{{ $recipient['email'] }}</span></div>
                            </div>
                        @endforeach
                    </div>
                </div>

                <div class="flex flex-col gap-2 mt-2">
                    <x-label class="inline-flex " value="{{__('Preview')}}"/>
                    <div class=" h-full w-full border-2 border-indigo-500 rounded-2xl overflow-scroll"
                         x-data="{ inner: '<span></span>'}"

                         x-on:preview.window="inner='hallo'"
                    >
                        {!! $this->getMailPreview($formData) !!}


                    </div>
                </div>
                @empty($formData['attachments'])
                    <div class="col-span-6">
                        <x-label for="message" value="{{ __('Attachment') }}"/>
                        <x-label class="inline-block" for=""
                                 value="{{ __('No attachments where send with this message.') }}"/>
                    </div>
                @else
                    <div class="flex flex-wrap col-span-6 mt-4 gap-2">
                        @foreach($formData['attachments'] as $key => $attachment)
                            <div class="flex items-center gap-2 rounded-xl border p-2">
                                <i class="fa-solid fa-paperclip fa-lg"></i>
                                <span class="" for="recipients">{{ $attachment['name'] }}</span>
                            </div>
                        @endforeach
                    </div>
                @endempty
            </x-slot>
            <x-slot name="description">
                <div class="flex gap-2 justify-end">
                    <x-label for="created_at" value="{{ __('Created at') }}"/>
                    <x-label id="created_at"
                             value="{{ \Carbon\Carbon::parse($formData['created_at'])->format('Y-m-d H:i') }}"/>
                </div>
            </x-slot>
            <x-slot name="actions">
                <div class="flex gap-2">
                    <x-secondary-button type="button" @click="window.open('{{$this->getPreviewRoute($formData)}}','_blank')">
                        full page preview
                    </x-secondary-button>

                    <x-button class="mr-3"
                              type="button"
                              wire:click="closeMailingDetailsModal"
                    >
                        {{ __('Close') }}
                    </x-button>
                </div>
            </x-slot>
        </x-form-modal>
    </x-modal>
</div>


