@extends('user::layouts.backend-master')
@section('breadcrumb_title', 'Newsletter Details')

@section('content')

 <div class="flex justify-between items-center mb-6">
        <h1 class="text-2xl font-bold">Newsletter Details</h1>
        <a href="{{ route('admin.newsletter.index') }}"
            class="btn btn-primary">
            <i class="fas fa-arrow-left mr-2"></i> Back to Newsletters
        </a>
    </div>

<!-- Newsletter Information -->
<div class="bg-white shadow rounded-lg mb-6">
    <div class="px-6 py-4 border-b">
        <h4 class="text-lg font-semibold">Newsletter Information</h4>
    </div>
    <div class="p-6 space-y-2">
        <p><strong>Subject:</strong> {{ $newsletter->subject_name }}</p>
        <p class="mb-0"><strong>Message:</strong> {!! clean($newsletter->message) !!}</p>
        <p><strong>Send Date:</strong> {{ customDateTimeFormate($newsletter->created_at) }}</p>
        <p><strong>Total Recipients:</strong> {{ $newsletter->subscribers_count ?? $newsletter->subscribers()->count() }}</p>
    </div>
</div>

<!-- Subscribers List -->
<div class="bg-white shadow rounded-lg">
    <div class="px-6 py-4 flex flex-col sm:flex-row justify-between items-center border-b gap-3">
        <h4 class="text-lg font-semibold">Recipients ({{ $subscribers->total() }})</h4>

        <!-- Search Form -->
        <form method="GET" class="flex flex-wrap items-center gap-2">
            <input type="text" name="search" 
                   class="border border-gray-300 rounded-md px-2 py-1 text-sm focus:outline-none focus:ring-1 focus:ring-indigo-500 focus:border-indigo-500"
                   placeholder="Search subscribers..." value="{{ request('search') }}" style="width: 200px;">
            <button type="submit" 
                    class="px-3 py-1 text-sm bg-indigo-600 text-white rounded-md hover:bg-indigo-700 transition" style="background-color: #1f61ec;">
                Search
            </button>
            @if (request('search'))
                <a href="{{ route('admin.newsletter.show', $newsletter->id) }}" 
                   class="px-3 py-1 text-sm border border-gray-400 text-gray-700 rounded-md hover:bg-gray-100 transition">
                    Clear
                </a>
            @endif
        </form>
    </div>

    <div class="overflow-x-auto">
        @if ($subscribers->count() > 0)
            <table class="min-w-full divide-y divide-gray-200">
                <thead class="bg-gray-50">
                    <tr>
                        <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">#</th>
                        <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Name</th>
                        <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Email</th>
                        <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Subscribed Date</th>
                        <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Status</th>
                    </tr>
                </thead>
                <tbody class="bg-white divide-y divide-gray-200">
                    @foreach ($subscribers as $index => $subscriber)
                        <tr>
                            <td class="px-6 py-2 text-sm text-gray-700">{{ $subscribers->firstItem() + $index }}</td>
                            <td class="px-6 py-2 text-sm text-gray-700">{{ $subscriber?->name ?? 'Anonymous' }}</td>
                            <td class="px-6 py-2 text-sm text-gray-700">{{ $subscriber->email }}</td>
                            <td class="px-6 py-2 text-sm text-gray-700">{{ customDateTimeFormate($subscriber->created_at) }}</td>
                            <td class="px-6 py-2 text-sm">
                                <span class="inline-block px-2 py-1 text-xs font-semibold rounded 
                                            {{ $subscriber->status == 'active' ? 'bg-green-100 text-green-800' : 'bg-gray-200 text-gray-700' }}">
                                    {{ ucfirst($subscriber->status) }}
                                </span>
                            </td>
                        </tr>
                    @endforeach
                </tbody>
            </table>

            <!-- Pagination -->
            <div class="px-6 py-4 flex flex-col sm:flex-row justify-between items-center">
                <div class="text-gray-500 text-sm">
                    Showing {{ $subscribers->firstItem() }} to {{ $subscribers->lastItem() }} of {{ $subscribers->total() }} results
                </div>
                <div class="mt-2 sm:mt-0">
                    {{ $subscribers->links() }}
                </div>
            </div>

        @else
            <div class="text-center p-10 mb-6">
                <i class="fas fa-users fa-3x text-gray-400 mb-3"></i>
                <h5 class="text-gray-500 m-2">No subscribers found</h5>
                @if (request('search'))
                    <p class="text-gray-400">No subscribers match your search criteria.</p>
                    <a href="{{ route('admin.newsletter.show', $newsletter->id) }}" 
                       class="btn btn-primary">
                        View All Subscribers
                    </a>
                @endif
            </div>
        @endif
    </div>
</div>

@endsection