<div class="mt-12">

    <!-- Action buttons -->
    <div class="mb-6 flex items-center justify-between">
        <x-jetstream.button wire:click="openCreateModal" class="bg-theme-brand hover:bg-opacity-80">
            {{ __('Create Mailing') }}
        </x-jetstream.button>

        <!-- Bulk Delete Button -->
        <x-jetstream.danger-button
                :disabled="$bulkDisabled"
                class=""
                title="{{ __('Delete') . ' ' . __('selection') }}"
                wire:click.prevent="openBulkDeleteModal">
            <x-icon class="mr-3 h-5 w-5" name="trash" />
            {{ __('Delete') }} {{ __('selection') }}
        </x-jetstream.danger-button>
    </div>

    <!-- Search and Filter -->
    <div class="mb-6">
        <!-- Search box -->
        <div class="mb-4 flex items-center">
            <div class="relative w-2/3">
                <input class="w-full rounded-md border border-theme-primary px-3 py-1 pr-10 text-theme-primary shadow-sm focus:border-theme-accent focus:outline-none focus:ring-1 focus:ring-theme-accent sm:text-sm"
                    placeholder="{{ __('Search mailings') . '...' }}" type="text"
                    wire:model.live="search">

                @if ($search)
                    <button class="absolute inset-y-0 right-0 flex items-center pr-3 text-theme-secondary hover:text-theme-primary focus:outline-none"
                        wire:click.prevent="$set('search', '')">
                        <x-icon mini name="backspace" solid />
                    </button>
                @endif
            </div>
        </div>

        <!-- Filter dropdowns -->
        <div class="mb-4 flex flex-wrap items-center gap-3">
            <!-- Type Filter -->
            <div>
                <x-select :clearable="true" class="!w-60"
                    placeholder="{{ __('Type') }}" wire:model.live="typeFilter">
                    <x-select.option label="{{ __('Local Newsletter') }}" value="local_newsletter" />
                    <x-select.option label="{{ __('General Newsletter') }}" value="general_newsletter" />
                    <x-select.option label="{{ __('System Message') }}" value="system_message" />
                </x-select>
            </div>

            <!-- Status Filter -->
            <div>
                <x-select :clearable="true" class="!w-60"
                    placeholder="{{ __('Status') }}" wire:model.live="statusFilter">
                    <x-select.option label="{{ __('Draft') }}" value="draft" />
                    <x-select.option label="{{ __('Scheduled') }}" value="scheduled" />
                    <x-select.option label="{{ __('Sending') }}" value="sending" />
                    <x-select.option label="{{ __('Sent') }}" value="sent" />
                    <x-select.option label="{{ __('Cancelled') }}" value="cancelled" />
                </x-select>
            </div>
        </div>
    </div>

    <!-- Mailings Table -->
    <div class="bg-white shadow-sm rounded-lg" x-data="{
        initScrollSync() {
            if (this.$refs.topScroll && this.$refs.bottomScroll && this.$refs.table && this.$refs.topScrollContent) {
                const topScroll = this.$refs.topScroll;
                const bottomScroll = this.$refs.bottomScroll;
                const table = this.$refs.table;

                // Set the width of the dummy div to match table width
                this.$refs.topScrollContent.style.width = table.scrollWidth + 'px';
            }
        }
    }" x-init="setTimeout(() => initScrollSync(), 100)">

        <!-- Top scrollbar -->
        <div class="overflow-x-auto border-b border-gray-200" x-ref="topScroll" @scroll="$refs.bottomScroll.scrollLeft = $event.target.scrollLeft">
            <div x-ref="topScrollContent" style="height: 20px;"></div>
        </div>

        <!-- Table with bottom scrollbar -->
        <div class="overflow-x-auto" x-ref="bottomScroll" @scroll="$refs.topScroll.scrollLeft = $event.target.scrollLeft">
            <table class="min-w-full divide-y divide-gray-200" x-ref="table">
            <thead class="bg-gray-50">
                <tr>
                    <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                        <!-- Select all checkbox could go here -->
                    </th>
                    <th class="px-3 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider cursor-pointer align-middle"
                        wire:click="sortBy('title')">
                        <div class="flex items-center space-x-1">
                            <span>{{ __('Title') }}</span>
                            @if($sortField === 'title')
                                <span class="text-gray-400">@if($sortDirection === 'asc') ↑ @else ↓ @endif</span>
                            @endif
                        </div>
                    </th>
                    <th class="px-3 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider cursor-pointer align-middle"
                        wire:click="sortBy('type')">
                        <div class="flex items-center space-x-1">
                            <span>{{ __('Type') }}</span>
                            @if($sortField === 'type')
                                <span class="text-gray-400">@if($sortDirection === 'asc') ↑ @else ↓ @endif</span>
                            @endif
                        </div>
                    </th>
                    <th class="px-3 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider cursor-pointer align-middle"
                        wire:click="sortBy('status')">
                        <div class="flex items-center space-x-1">
                            <span>{{ __('Status') }}</span>
                            @if($sortField === 'status')
                                <span class="text-gray-400">@if($sortDirection === 'asc') ↑ @else ↓ @endif</span>
                            @endif
                        </div>
                    </th>
                    <th class="px-3 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider align-middle">
                        {{ __('Recipients') }}
                    </th>
                    <th class="px-3 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider cursor-pointer align-middle"
                        wire:click="sortBy('scheduled_at')">
                        <div class="flex items-center space-x-1">
                            <span>{{ __('Scheduled') }}</span>
                            @if($sortField === 'scheduled_at')
                                <span class="text-gray-400">@if($sortDirection === 'asc') ↑ @else ↓ @endif</span>
                            @endif
                        </div>
                    </th>
                    <th class="px-3 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider cursor-pointer align-middle"
                        wire:click="sortBy('updated_at')">
                        <div class="flex items-center space-x-1">
                            <span>{{ __('Updated') }}</span>
                            @if($sortField === 'updated_at')
                                <span class="text-gray-400">@if($sortDirection === 'asc') ↑ @else ↓ @endif</span>
                            @endif
                        </div>
                    </th>
                    <th class="px-3 py-3 text-center text-xs font-medium text-gray-500 uppercase tracking-wider align-middle w-32">
                        {{ __('Actions') }}
                    </th>
                </tr>
            </thead>
            <tbody class="bg-white divide-y divide-gray-200">
                @forelse($mailings as $mailing)
                    <tr>
                        <td class="px-3 py-4 whitespace-nowrap">
                            <input type="checkbox" value="{{ $mailing->id }}" wire:model.live="bulkSelected" class="rounded border-gray-300 text-theme-brand focus:border-theme-accent focus:ring-1 focus:ring-theme-accent">
                        </td>
                        <td class="px-3 py-4 whitespace-nowrap">
                            <div>
                                <div class="text-sm font-medium text-gray-900">{{ $mailing->title }}</div>
                                <div class="text-sm text-gray-500">{{ Str::limit($mailing->getSubjectForLocale(), 50) }}</div>
                            </div>
                        </td>
                        <td class="px-3 py-4 whitespace-nowrap text-sm text-gray-500">
                            {{ ucfirst(str_replace('_', ' ', $mailing->type)) }}
                        </td>
                        <td class="px-3 py-4 whitespace-nowrap">
                            <span class="inline-flex px-2 py-1 text-xs font-medium rounded-full
                                @if($mailing->status === 'draft') bg-gray-100 text-gray-800
                                @elseif($mailing->status === 'scheduled') bg-yellow-100 text-yellow-800
                                @elseif($mailing->status === 'sending') bg-theme-surface text-theme-primary
                                @elseif($mailing->status === 'sent') bg-green-100 text-green-800
                                @else bg-theme-danger-light text-theme-danger-dark @endif">
                                {{ ucfirst($mailing->status) }}
                            </span>
                        </td>
                        <td class="px-3 py-4 whitespace-nowrap text-sm text-gray-900">
                            {{ number_format($mailing->getEffectiveRecipientsCount()) }}
                            @if($mailing->sent_count > 0)
                                <div class="text-xs text-gray-500 mt-1">
                                    {{ number_format($mailing->sent_count) }} {{ __('sent') }}
                                    @if($mailing->failed_count > 0)
                                        <br>{{ number_format($mailing->failed_count) }} {{ __('failed') }}
                                    @endif
                                    @if($mailing->bounced_count > 0)
                                        <br>{{ number_format($mailing->bounced_count) }} {{ __('bounced') }}
                                    @endif
                                </div>
                            @endif
                        </td>
                        <td class="px-3 py-4 text-sm text-gray-500">
                            @if($mailing->scheduled_at)
                                <div class="leading-tight">
                                    <div>{{ $mailing->scheduled_at->format('M j') }}</div>
                                    <div>{{ $mailing->scheduled_at->format('Y') }}</div>
                                    <div class="text-xs">{{ $mailing->scheduled_at->format('H:i') }}</div>
                                </div>
                            @else
                                -
                            @endif
                        </td>
                        <td class="px-3 py-4">
                            <div class="flex items-center space-x-2">
                                @if($mailing->updatedByUser)
                                    <div class="relative block cursor-pointer flex-shrink-0"
                                        onclick="window.location='{{ url('user/' . $mailing->updatedByUser->id) }}'"
                                        title="{{ $mailing->updatedByUser->name }}">
                                        <img class="h-6 w-6 rounded-full profile-photo object-cover outline outline-1 outline-offset-0 outline-gray-600"
                                             src="{{ $mailing->updatedByUser->profile_photo_path ? Storage::url($mailing->updatedByUser->profile_photo_path) : Storage::url(timebank_config('profiles.user.profile_photo_path_default')) }}"
                                             alt="profile">
                                    </div>
                                @endif
                                <div class="text-sm text-gray-500 leading-tight">
                                    <div>{{ $mailing->updated_at->format('M j') }}</div>
                                    <div>{{ $mailing->updated_at->format('Y') }}</div>
                                    <div class="text-xs">{{ $mailing->updated_at->format('H:i') }}</div>
                                </div>
                            </div>
                        </td>
                        
                        <!-- Action Buttons -->
                        <td class="px-3 py-4 whitespace-nowrap text-center text-sm font-medium">
                            <div class="flex items-center justify-center space-x-1">

                                <!-- Edit Button -->
                                @if($mailing->status === 'draft')
                                    <x-jetstream.secondary-button
                                        class=""
                                        title="{{ __('Edit') }}"
                                        wire:click="openEditModal({{ $mailing->id }})">
                                        <x-icon class="h-5 w-5" name="pencil-square" />
                                    </x-jetstream.secondary-button>
                                @endif

                                <!-- Test Mail Button -->
                                @if(in_array($mailing->status, ['draft', 'scheduled', 'sending']) && !empty($mailing->content_blocks))
                                    <x-jetstream.secondary-button
                                        wire:click="sendTestMail({{ $mailing->id }})"
                                        wire:loading.attr="disabled"
                                        wire:target="sendTestMail({{ $mailing->id }})"
                                        class=""
                                        title="{{ __('Preview and Send test mailing emails') }}">
                                        <span wire:loading.remove wire:target="sendTestMail({{ $mailing->id }})">
                                            <x-icon class="h-5 w-5" name="document-magnifying-glass" />
                                        </span>
                                        <span wire:loading wire:target="sendTestMail({{ $mailing->id }})">
                                            <x-icon class="h-5 w-5 animate-spin" name="arrow-path" />
                                        </span>
                                    </x-jetstream.secondary-button>
                                @endif

                                <!-- Send Button -->
                                @if($mailing->canBeSent())
                                    <x-jetstream.secondary-button wire:click="openSendConfirmModal({{ $mailing->id }})"
                                            class=""
                                            title="{{ __('Send Now') }}">
                                        <x-icon class="h-5 w-5" name="paper-airplane" />
                                    </x-jetstream.secondary-button>
                                @endif

                                <!-- Unschedule Button -->
                                @if($mailing->canBeCancelled())
                                    <x-jetstream.danger-button wire:click="cancelMailing({{ $mailing->id }})"
                                            class=""
                                            title="{{ __('Unschedule') }}">
                                        <span wire:loading.remove wire:target="cancelMailing">
                                            <x-icon class="h-5 w-5" name="stop-circle" solid />
                                        </span>
                                    </x-jetstream.danger-button>
                                @endif
                            </div>
                        </td>
                    </tr>
                @empty
                    <tr>
                        <td colspan="8" class="px-6 py-12 text-center text-gray-500">
                            {{ __('No mailings found.') }}
                        </td>
                    </tr>
                @endforelse
            </tbody>
        </table>
        </div>
    </div>

    <!-- Pagination -->
    @if($mailings->hasPages())
        <div class="bg-white shadow-sm rounded-lg mt-4">
            <div class="px-6 py-3 border-t border-gray-200">
                {{ $mailings->links('livewire.long-paginator') }}
            </div>
        </div>
    @endif

    <!-- Create/Edit Modal -->
    <x-jetstream.dialog-modal wire:model.live="showCreateModal" wire:key="showCreateModal" maxWidth="4xl" closeButton="true">
        <x-slot name="title">
            {{ __('Create mailing') }}
        </x-slot>

        <x-slot name="content">
            @include('livewire.mailings.partials.create-edit-form')
        </x-slot>

        <x-slot name="footer">
            <x-jetstream.secondary-button wire:click="closeModals">
                {{ __('Cancel') }}
            </x-jetstream.secondary-button>

            <x-jetstream.button wire:click="saveMailing" class="ml-3 bg-theme-brand">
                @if(isset($editingMailing) && $editingMailing)
                    {{ __('Update mailings') }}
                @else
                    @if($scheduledAt)
                        {{ __('Schedule mailing') }}
                    @else
                        {{ __('Save as draft') }}
                    @endif
                @endif
            </x-jetstream.button>
        </x-slot>
    </x-jetstream.dialog-modal>

    <x-jetstream.dialog-modal wire:model.live="showEditModal" wire:key="showEditModal" maxWidth="4xl" closeButton="true">
        <x-slot name="title">
            {{ __('Edit mailing') }}
        </x-slot>

        <x-slot name="content">
            @include('livewire.mailings.partials.create-edit-form')
        </x-slot>

        <x-slot name="footer">
            <x-jetstream.secondary-button wire:click="closeModals">
                {{ __('Cancel') }}
            </x-jetstream.secondary-button>

            <x-jetstream.button wire:click="saveMailing" class="ml-3 bg-theme-brand">
                @if(isset($editingMailing) && $editingMailing)
                    {{ __('Update mailing') }}
                @else
                    @if($scheduledAt)
                        {{ __('Schedule mailing') }}
                    @else
                        {{ __('Save as draft') }}
                    @endif
                @endif
            </x-jetstream.button>
        </x-slot>
    </x-jetstream.dialog-modal>

    <!-- Post Selector Modal -->
    <x-jetstream.dialog-modal wire:model.live="showPostSelector" wire:key="showPostSelector" maxWidth="4xl" closeButton="true">
        <x-slot name="title">
            {{ __('Select posts for mailing') }}
        </x-slot>

        <x-slot name="content">
            @include('livewire.mailings.partials.post-selector')
        </x-slot>

        <x-slot name="footer">
            <x-jetstream.secondary-button no-spinner wire:click="$set('showPostSelector', false)">
                {{ __('Cancel') }}
            </x-jetstream.secondary-button>

            <x-jetstream.button wire:click="addSelectedPosts" class="ml-3 bg-theme-brand" :disabled="count($selectedPostIds) === 0">
                {{ __('Add selected posts') }}
            </x-jetstream.button>
        </x-slot>
    </x-jetstream.dialog-modal>

    <!-- Test Mail Modal -->
    <x-jetstream.dialog-modal wire:model.live="showTestMailModal" wire:key="showTestMailModal" maxWidth="2xl">
        <x-slot name="title">
            {{ __('Test mail status') }}
        </x-slot>

        <x-slot name="content">
            <div class="whitespace-pre-line text-sm text-gray-700">
                {{ $testMailMessage }}
            </div>
        </x-slot>

        <x-slot name="footer">
            <x-jetstream.button wire:click="$set('showTestMailModal', false)" class="bg-theme-brand">
                {{ __('OK') }}
            </x-jetstream.button>
        </x-slot>
    </x-jetstream.dialog-modal>

    <!-- Test Email Selection Modal -->
    <x-jetstream.dialog-modal wire:model.live="showTestEmailSelectionModal" wire:key="showTestEmailSelectionModal" maxWidth="4xl" closeButton="true">
        <x-slot name="title">
            {{ __('Preview your mailing') }}
        </x-slot>
        <x-slot name="content">
            <div class="space-y-6">
                <!-- Email Preview - Top section -->
                <div>
                    <h3 class="text-sm font-medium text-gray-700 mb-3">{{ __('Email Preview') }}</h3>
                    @if($mailingForTest)
                        <div class="flex justify-center">
                            <div class="border border-gray-300 rounded-3xl overflow-hidden bg-white shadow-inner shadow-2xl" style="width: 322px; height: 570px;">
                                <iframe
                                    srcdoc="{!! e($this->getMailingPreviewHtml()) !!}"
                                    style="width:100%;height:100%;border:0;background:#f4f4f4;"
                                ></iframe>
                            </div>
                        </div>
                    @else
                        <p class="text-sm text-gray-500 text-center">{{ __('No preview available') }}</p>
                    @endif
                </div>

                <!-- Recipient Selection - Bottom section -->
                <div class="border-t border-gray-200 pt-6">
                    <h3 class="text-sm font-medium text-gray-700 mb-3">{{ __('Select Recipients') }}</h3>
                    <p class="text-sm text-gray-600 mb-4">
                        {{ __('Choose which email addresses should receive the test mailing.') }}
                    </p>

                    <!-- Available email options -->
                    <div class="space-y-3">
                    @if(isset($availableTestEmails['auth_user']))
                        <label class="flex items-center space-x-3">
                            <input
                                type="checkbox"
                                wire:model="sendToAuthUser"
                                class="rounded border-gray-300 text-theme-brand shadow-sm focus:border-theme-brand focus:ring focus:ring-theme-brand focus:ring-opacity-50"
                            >
                            <span class="text-sm text-gray-700">
                                {{ $availableTestEmails['auth_user']['label'] }}
                            </span>
                        </label>
                    @endif

                    @if(isset($availableTestEmails['active_profile']))
                        <label class="flex items-center space-x-3">
                            <input
                                type="checkbox"
                                wire:model="sendToActiveProfile"
                                class="rounded border-gray-300 text-theme-brand shadow-sm focus:border-theme-brand focus:ring focus:ring-theme-brand focus:ring-opacity-50"
                            >
                            <span class="text-sm text-gray-700">
                                {{ $availableTestEmails['active_profile']['label'] }}
                            </span>
                        </label>
                    @endif

                    <!-- Custom email input -->
                    <div>
                        <label class="block text-sm text-gray-700 mb-2">
                            {{ __('Custom email address:') }}
                        </label>
                        <div>
                            <x-input
                                wire:model="customTestEmail"
                                type="email"
                                placeholder="{{ __('Enter email address') }}"
                                class="w-full"
                            />
                            @error('customTestEmail')
                                <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                            @enderror
                        </div>
                    </div>
                </div>

                    @if($mailingForTest)
                        <div class="mt-4 p-3 bg-theme-surface rounded-md border border-theme-border">
                            <p class="text-sm text-theme-primary">
                                <strong>{{ __('Mailing:') }}</strong> {{ $mailingForTest->title }}
                            </p>
                            <p class="text-sm text-theme-secondary mt-1">
                                {{ __('Test emails will be sent in all available languages for this mailing.') }}
                            </p>
                        </div>
                    @endif
                </div>
            </div>
        </x-slot>
        <x-slot name="footer">
            <x-jetstream.secondary-button wire:click="cancelTestEmailSelection" class="mr-3">
                {{ __('Cancel') }}
            </x-jetstream.secondary-button>
            <x-jetstream.button
                wire:click="sendTestMailToSelected"
                wire:loading.attr="disabled"
                wire:target="sendTestMailToSelected"
                class="bg-theme-brand"
            >
                <span wire:loading.remove wire:target="sendTestMailToSelected">
                    {{ __('Send test mailing') }}
                </span>
                <span wire:loading wire:target="sendTestMailToSelected">
                    {{ __('Sending...') }}
                </span>
            </x-jetstream.button>
        </x-slot>
    </x-jetstream.dialog-modal>

    <!-- Bulk Delete Confirmation Modal -->
    <x-jetstream.dialog-modal wire:model.live="showBulkDeleteModal" wire:key="showBulkDeleteModal" maxWidth="2xl">
        <x-slot name="title">
            {{ __('Delete selected mailings') }}
        </x-slot>

        <x-slot name="content">
            {{ __('Are you sure you want to delete the selected mailings?') }}<br>
            {{ __('Only draft and scheduled mailings will be deleted. This action cannot be undone.') }}
            <br><br>
            <strong>{{ count($bulkSelected) }} {{ __('mailing(s) selected') }}</strong>
        </x-slot>

        <x-slot name="footer">
            <x-jetstream.secondary-button no-spinner wire:click="$set('showBulkDeleteModal', false)">
                {{ __('Cancel') }}
            </x-jetstream.secondary-button>

            <x-jetstream.danger-button wire:click="bulkDeleteMailings" class="ml-3">
                {{ __('Delete selected') }}
            </x-jetstream.danger-button>
        </x-slot>
    </x-jetstream.dialog-modal>

    <!-- Send Confirmation Modal -->
    <x-jetstream.dialog-modal wire:model.live="showSendConfirmModal" wire:key="showSendConfirmModal" maxWidth="2xl">

        <x-slot name="title">
            {{ __('Send mailing') }}
        </x-slot>

        <x-slot name="content">
            @if($mailingToSend)
                {{ __('Are you sure you want to send this mailing?') }}<br>
                {{ __('This action cannot be undone and the mailing will be delivered immediately to all recipients.') }}
                <br><br>
                <strong>{{ __('Mailing') }}: {{ $mailingToSend->title }}</strong><br>
                <strong>{{ __('Recipients') }}: {{ number_format($mailingToSend->getEffectiveRecipientsCount()) }}</strong>
            @endif
        </x-slot>

        <x-slot name="footer">
            <x-jetstream.secondary-button no-spinner wire:click="$set('showSendConfirmModal', false)">
                {{ __('Cancel') }}
            </x-jetstream.secondary-button>

            <x-jetstream.button wire:click="sendMailing" class="ml-3 bg-green-600">
                {{ __('Send Now') }}
            </x-jetstream.button>
        </x-slot>
    </x-jetstream.dialog-modal>

</div>
