@extends('backend.layouts.app')

@section('title', 'Email Logs')

@section('content')
    @php
        $pageTitle = 'Email Logs';
        $indexRoute = 'email-template.index';
        $indexLabel = 'Email Templates';
    @endphp
    @include('backend.layouts.partials._page_header')

    <div class="space-y-5">
        <div class="rounded-2xl border border-gray-200 bg-white dark:border-gray-800 dark:bg-white/[0.03]">
            <div class="px-5 py-4 sm:px-6 sm:py-5">
                <div class="flex flex-wrap items-center justify-between gap-3">
                    <div>
                        <h3 class="text-lg font-semibold text-gray-800 dark:text-white/90">Manual Email Logs</h3>
                        <p class="mt-1 text-sm text-gray-500 dark:text-gray-400">Delivery results for emails sent through the Send Email screen.</p>
                    </div>
                    @can('email-send.create')
                        <a href="{{ route('email-send.create') }}"
                            class="inline-flex w-full items-center justify-center rounded-lg bg-brand-500 px-4 py-2.5 text-theme-sm font-medium text-white hover:bg-brand-600 sm:w-auto">Send Email</a>
                    @endcan
                </div>

                <form method="GET" action="{{ route('email-log.index') }}" class="mt-4 flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-end">
                    <input type="text" name="search" value="{{ $search ?? '' }}" placeholder="Search recipient or subject..."
                        oninput="clearTimeout(window.emailLogTimer); window.emailLogTimer = setTimeout(() => this.form.submit(), 700)"
                        class="dark:bg-dark-900 shadow-theme-xs focus:border-brand-300 focus:ring-brand-500/10 dark:focus:border-brand-800 h-10 w-full sm:max-w-xs rounded-lg border border-gray-300 bg-transparent px-4 py-2 text-sm text-gray-800 placeholder:text-gray-400 focus:ring-3 focus:outline-hidden dark:border-gray-700 dark:bg-gray-900 dark:text-white/90 dark:placeholder:text-white/30">
                </form>
            </div>

            <div class="overflow-hidden border-t border-gray-100 dark:border-gray-800">
                <div class="max-w-full overflow-x-auto">
                    <table class="w-full min-w-[900px]">
                        <thead>
                            <tr class="border-b border-gray-100 dark:border-gray-800">
                                <th class="px-5 py-3 text-center">
                                    <span class="text-xs font-medium uppercase tracking-wider text-gray-500 dark:text-gray-400">Recipient</span>
                                </th>
                                <th class="px-5 py-3 text-center">
                                    <span class="text-xs font-medium uppercase tracking-wider text-gray-500 dark:text-gray-400">Subject</span>
                                </th>
                                <th class="px-5 py-3 text-center">
                                    <span class="text-xs font-medium uppercase tracking-wider text-gray-500 dark:text-gray-400">Template</span>
                                </th>
                                <th class="px-5 py-3 text-center">
                                    <span class="text-xs font-medium uppercase tracking-wider text-gray-500 dark:text-gray-400">Status</span>
                                </th>
                                <th class="px-5 py-3 text-center">
                                    <span class="text-xs font-medium uppercase tracking-wider text-gray-500 dark:text-gray-400">Sent</span>
                                </th>
                            </tr>
                        </thead>
                        <tbody class="divide-y divide-gray-100 dark:divide-gray-800">
                            @forelse ($logs as $log)
                                <tr class="hover:bg-gray-50 dark:hover:bg-white/[0.02]">
                                    <td class="px-5 py-4 text-sm text-gray-800 dark:text-white/90">{{ $log->recipient }}</td>
                                    <td class="px-5 py-4 text-sm text-gray-600 dark:text-gray-400">{{ $log->subject }}</td>
                                    <td class="px-5 py-4 text-sm text-gray-600 dark:text-gray-400">{{ $log->template?->template_name ?? '-' }}</td>
                                    <td class="px-5 py-4 text-center">
                                        @if ($log->status === 'sent')
                                            <span class="inline-flex items-center rounded-md bg-success-50 px-2 py-1 text-xs font-medium text-success-600 dark:bg-success-500/10 dark:text-success-400">Sent</span>
                                        @else
                                            <span class="inline-flex items-center rounded-md bg-error-50 px-2 py-1 text-xs font-medium text-error-600 dark:bg-error-500/10 dark:text-error-400">Failed</span>
                                        @endif
                                    </td>
                                    <td class="px-5 py-4 text-sm text-gray-500 dark:text-gray-400">{{ $log->created_at?->format('d M Y, H:i') }}</td>
                                </tr>
                            @empty
                                <tr>
                                    <td colspan="5" class="px-5 py-12 text-center">
                                        <h4 class="mb-1 text-base font-medium text-gray-700 dark:text-gray-300">No email logs yet</h4>
                                        <p class="text-sm text-gray-500 dark:text-gray-500">Manual sends will appear here.</p>
                                    </td>
                                </tr>
                            @endforelse
                        </tbody>
                    </table>
                </div>
            </div>

            <div class="border-t border-gray-100 px-5 py-4 dark:border-gray-800">
                {{ $logs->appends(request()->query())->links('vendor.pagination.custom') }}
            </div>
        </div>
    </div>
@endsection