@extends('layouts.admin')

@section('header', 'Newsletter Details')

@section('content')
    <div class="container mx-auto px-4 sm:px-6 lg:px-8 py-8">
        <!-- Header with back button and actions -->
        <div class="flex flex-col md:flex-row md:items-center md:justify-between mb-8">
            <div class="flex items-center">
                <a href="{{ route('admin.newsletter.index') }}" class="mr-4 inline-flex items-center justify-center p-2 border border-gray-300 rounded-md shadow-sm text-gray-700 bg-white hover:bg-gray-50">
                    <i class="fas fa-arrow-left"></i>
                </a>
                <div>
                    <h1 class="text-2xl font-bold text-gray-900 sm:text-3xl">Newsletter Details</h1>
                    <p class="mt-1 text-sm text-gray-500">View newsletter information and content</p>
                </div>
            </div>
            <div class="mt-4 md:mt-0 flex flex-col sm:flex-row space-y-2 sm:space-y-0 sm:space-x-3">
                @if($newsletter->status === 'draft')
                    <a href="{{ route('admin.newsletter.edit', $newsletter) }}" class="inline-flex items-center justify-center px-4 py-2 border border-gray-300 shadow-sm text-sm font-medium rounded-lg text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-rose-500">
                        <i class="fas fa-edit mr-2"></i>
                        Edit Newsletter
                    </a>
                @endif

                @if($newsletter->status !== 'sent')
                    <form action="{{ route('admin.newsletter.send', $newsletter) }}" method="POST" class="inline-block">
                        @csrf
                        <button type="submit" onclick="return confirm('Are you sure you want to send this newsletter now to all subscribers? This action cannot be undone.')" class="inline-flex items-center justify-center px-4 py-2 border border-transparent text-sm font-medium rounded-lg shadow-sm text-white bg-rose-600 hover:bg-rose-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-rose-500">
                            <i class="fas fa-paper-plane mr-2"></i>
                            Send Newsletter
                        </button>
                    </form>
                @endif
            </div>
        </div>

        <!-- Newsletter details -->
        <div class="bg-white shadow overflow-hidden sm:rounded-lg mb-6">
            <div class="px-4 py-5 sm:p-6">
                <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
                    <div class="md:col-span-2">
                        <div class="mb-5">
                            <h3 class="text-lg font-medium text-gray-900 mb-1">Subject</h3>
                            <p class="text-gray-800 text-xl">{{ $newsletter->subject }}</p>
                        </div>
                        
                        @if($newsletter->preview_text)
                        <div class="mb-5">
                            <h3 class="text-lg font-medium text-gray-900 mb-1">Preview Text</h3>
                            <p class="text-gray-600">{{ $newsletter->preview_text }}</p>
                        </div>
                        @endif
                    </div>
                    
                    <div class="bg-gray-50 p-4 rounded-lg">
                        <h3 class="font-medium text-gray-900 mb-2">Information</h3>
                        <dl class="space-y-3">
                            <div class="flex justify-between">
                                <dt class="text-sm font-medium text-gray-500">Status</dt>
                                <dd class="text-sm text-right">
                                    @if($newsletter->status === 'draft')
                                        <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-yellow-100 text-yellow-800">
                                            Draft
                                        </span>
                                    @elseif($newsletter->status === 'scheduled')
                                        <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-blue-100 text-blue-800">
                                            Scheduled
                                        </span>
                                    @elseif($newsletter->status === 'sent')
                                        <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">
                                            Sent
                                        </span>
                                    @endif
                                </dd>
                            </div>
                            <div class="flex justify-between">
                                <dt class="text-sm font-medium text-gray-500">Created</dt>
                                <dd class="text-sm text-gray-900">{{ $newsletter->created_at->format('M d, Y H:i') }}</dd>
                            </div>
                            <div class="flex justify-between">
                                <dt class="text-sm font-medium text-gray-500">Last Updated</dt>
                                <dd class="text-sm text-gray-900">{{ $newsletter->updated_at->format('M d, Y H:i') }}</dd>
                            </div>
                            
                            @if($newsletter->status === 'sent')
                            <div class="flex justify-between">
                                <dt class="text-sm font-medium text-gray-500">Sent Date</dt>
                                <dd class="text-sm text-gray-900">{{ $newsletter->sent_at->format('M d, Y H:i') }}</dd>
                            </div>
                            @if($newsletter->recipients_count)
                            <div class="flex justify-between">
                                <dt class="text-sm font-medium text-gray-500">Recipients</dt>
                                <dd class="text-sm text-gray-900">{{ $newsletter->recipients_count }}</dd>
                            </div>
                            @endif
                            @if($newsletter->open_rate)
                            <div class="flex justify-between">
                                <dt class="text-sm font-medium text-gray-500">Open Rate</dt>
                                <dd class="text-sm text-gray-900">{{ $newsletter->open_rate }}%</dd>
                            </div>
                            @endif
                            @endif
                            
                            @if($newsletter->status === 'scheduled')
                            <div class="flex justify-between">
                                <dt class="text-sm font-medium text-gray-500">Scheduled For</dt>
                                <dd class="text-sm text-gray-900">{{ $newsletter->scheduled_at->format('M d, Y H:i') }}</dd>
                            </div>
                            @endif
                        </dl>
                    </div>
                </div>
            </div>
        </div>

        <!-- Newsletter Content Preview -->
        <div class="bg-white shadow overflow-hidden sm:rounded-lg">
            <div class="px-4 py-5 border-b border-gray-200 sm:px-6">
                <h3 class="text-lg font-medium leading-6 text-gray-900">Newsletter Content</h3>
                <p class="mt-1 text-sm text-gray-500">Preview how the newsletter will appear to subscribers</p>
            </div>
            <div class="px-4 py-5 sm:p-6">
                <div class="border rounded-lg overflow-hidden">
                    <div class="p-4 border-b bg-gray-50">
                        <div class="flex items-center">
                            <div class="w-3 h-3 bg-red-500 rounded-full mr-2"></div>
                            <div class="w-3 h-3 bg-yellow-500 rounded-full mr-2"></div>
                            <div class="w-3 h-3 bg-green-500 rounded-full"></div>
                            <div class="ml-4 text-sm text-gray-500">Email Preview</div>
                        </div>
                    </div>
                    <div class="bg-white p-6 overflow-auto" style="max-height: 600px;">
                        <div class="prose max-w-none">
                            {!! $newsletter->content !!}
                        </div>
                    </div>
                </div>
            </div>
        </div>
        
        @if($newsletter->status === 'sent')
        <!-- Analytics Section (for sent newsletters) -->
        <div class="mt-8 bg-white shadow overflow-hidden sm:rounded-lg">
            <div class="px-4 py-5 border-b border-gray-200 sm:px-6">
                <h3 class="text-lg font-medium leading-6 text-gray-900">Newsletter Analytics</h3>
                <p class="mt-1 text-sm text-gray-500">Performance metrics for this newsletter</p>
            </div>
            <div class="px-4 py-5 sm:p-6">
                <div class="grid grid-cols-1 md:grid-cols-4 gap-5">
                    <div class="bg-gray-50 rounded-lg p-5 text-center">
                        <div class="text-2xl font-bold text-gray-900">{{ $newsletter->recipients_count ?? 0 }}</div>
                        <div class="text-sm text-gray-500 mt-1">Recipients</div>
                    </div>
                    <div class="bg-gray-50 rounded-lg p-5 text-center">
                        <div class="text-2xl font-bold text-gray-900">{{ $newsletter->opens_count ?? 0 }}</div>
                        <div class="text-sm text-gray-500 mt-1">Opens</div>
                    </div>
                    <div class="bg-gray-50 rounded-lg p-5 text-center">
                        <div class="text-2xl font-bold text-gray-900">{{ $newsletter->clicks_count ?? 0 }}</div>
                        <div class="text-sm text-gray-500 mt-1">Clicks</div>
                    </div>
                    <div class="bg-gray-50 rounded-lg p-5 text-center">
                        <div class="text-2xl font-bold text-gray-900">{{ $newsletter->open_rate ?? 0 }}%</div>
                        <div class="text-sm text-gray-500 mt-1">Open Rate</div>
                    </div>
                </div>
            </div>
        </div>
        @endif
    </div>
@endsection