@extends('layouts.admin')

@section('header', 'SMS Campaign Details')

@section('content')
<div class="space-y-8">
    <!-- Header -->
    <div class="flex flex-col md:flex-row md:items-center md:justify-between">
        <div>
            <h2 class="text-2xl font-bold text-gray-900">{{ $campaign->name }}</h2>
            <p class="mt-1 text-sm text-gray-500">
                Created {{ $campaign->created_at->format('M d, Y \a\t h:i A') }}
                @if($campaign->created_at != $campaign->updated_at)
                · Updated {{ $campaign->updated_at->format('M d, Y \a\t h:i A') }}
                @endif
            </p>
        </div>
        <div class="mt-4 flex flex-wrap gap-2 md:mt-0">
            <a href="{{ route('admin.sms-campaigns.index') }}" class="inline-flex items-center px-4 py-2 border border-gray-300 rounded-md shadow-sm text-sm font-medium text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-rose-500">
                <svg class="-ml-1 mr-2 h-5 w-5 text-gray-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 19l-7-7m0 0l7-7m-7 7h18" />
                </svg>
                Back to Campaigns
            </a>
            
            @if($campaign->status === 'draft' || $campaign->status === 'scheduled')
                <a href="{{ route('admin.sms-campaigns.edit', $campaign->id) }}" class="inline-flex items-center px-4 py-2 border border-gray-300 rounded-md shadow-sm text-sm font-medium text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-rose-500">
                    <svg class="-ml-1 mr-2 h-5 w-5 text-gray-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z" />
                    </svg>
                    Edit
                </a>
            @endif
            
            @if($campaign->status === 'draft')
                <form action="{{ route('admin.sms-campaigns.send', $campaign->id) }}" method="POST" class="inline">
                    @csrf
                    <button type="submit" class="inline-flex items-center px-4 py-2 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-rose-600 hover:bg-rose-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-rose-500">
                        <svg class="-ml-1 mr-2 h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 19l9 2-9-18-9 18 9-2zm0 0v-8" />
                        </svg>
                        Send Now
                    </button>
                </form>
            @endif
            
            @if($campaign->status === 'sent' || $campaign->status === 'sending')
                <a href="{{ route('admin.sms-campaigns.stats', $campaign->id) }}" class="inline-flex items-center px-4 py-2 border border-gray-300 rounded-md shadow-sm text-sm font-medium text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-rose-500">
                    <svg class="-ml-1 mr-2 h-5 w-5 text-gray-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z" />
                    </svg>
                    Detailed Stats
                </a>
            @endif
        </div>
    </div>

    <!-- Status Badge -->
    <div class="flex items-center">
        <span class="mr-2 text-sm font-medium">Status:</span>
        @switch($campaign->status)
            @case('draft')
                <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-gray-100 text-gray-800">
                    Draft
                </span>
                @break
            @case('scheduled')
                <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-blue-100 text-blue-800">
                    Scheduled for {{ $campaign->scheduled_at->format('M d, Y \a\t h:i A') }}
                </span>
                @break
            @case('sending')
                <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-yellow-100 text-yellow-800">
                    Sending
                </span>
                @break
            @case('sent')
                <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-green-100 text-green-800">
                    Sent on {{ $campaign->sent_at->format('M d, Y \a\t h:i A') }}
                </span>
                @break
            @case('failed')
                <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-red-100 text-red-800">
                    Failed
                </span>
                @break
            @default
                <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-gray-100 text-gray-800">
                    {{ ucfirst($campaign->status) }}
                </span>
        @endswitch
    </div>

    <!-- Campaign Summary -->
    @if($campaign->status === 'sent' || $campaign->status === 'sending')
        <div class="grid grid-cols-1 gap-5 sm:grid-cols-2 lg:grid-cols-4">
            <div class="bg-white overflow-hidden shadow rounded-lg">
                <div class="px-4 py-5 sm:p-6">
                    <div class="flex items-center">
                        <div class="flex-shrink-0 bg-rose-500 rounded-md p-3">
                            <svg class="h-6 w-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4.354a4 4 0 110 5.292M15 21H3v-1a6 6 0 0112 0v1zm0 0h6v-1a6 6 0 00-9-5.197M13 7a4 4 0 11-8 0 4 4 0 018 0z" />
                            </svg>
                        </div>
                        <div class="ml-5 w-0 flex-1">
                            <dl>
                                <dt class="text-sm font-medium text-gray-500 truncate">
                                    Recipients
                                </dt>
                                <dd>
                                    <div class="text-lg font-medium text-gray-900">
                                        {{ number_format($campaign->total_recipients) }}
                                    </div>
                                </dd>
                            </dl>
                        </div>
                    </div>
                </div>
            </div>

            <div class="bg-white overflow-hidden shadow rounded-lg">
                <div class="px-4 py-5 sm:p-6">
                    <div class="flex items-center">
                        <div class="flex-shrink-0 bg-green-500 rounded-md p-3">
                            <svg class="h-6 w-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
                            </svg>
                        </div>
                        <div class="ml-5 w-0 flex-1">
                            <dl>
                                <dt class="text-sm font-medium text-gray-500 truncate">
                                    Delivered
                                </dt>
                                <dd>
                                    <div class="text-lg font-medium text-gray-900">
                                        {{ number_format($campaign->delivered_count) }}
                                        <span class="text-sm text-gray-500">
                                            ({{ $campaign->total_recipients > 0 ? round(($campaign->delivered_count / $campaign->total_recipients) * 100) : 0 }}%)
                                        </span>
                                    </div>
                                </dd>
                            </dl>
                        </div>
                    </div>
                </div>
            </div>

            <div class="bg-white overflow-hidden shadow rounded-lg">
                <div class="px-4 py-5 sm:p-6">
                    <div class="flex items-center">
                        <div class="flex-shrink-0 bg-blue-500 rounded-md p-3">
                            <svg class="h-6 w-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7l5 5m0 0l-5 5m5-5H6" />
                            </svg>
                        </div>
                        <div class="ml-5 w-0 flex-1">
                            <dl>
                                <dt class="text-sm font-medium text-gray-500 truncate">
                                    Link Clicks
                                </dt>
                                <dd>
                                    <div class="text-lg font-medium text-gray-900">
                                        {{ number_format($campaign->clicks_count) }}
                                        <span class="text-sm text-gray-500">
                                            ({{ $campaign->delivered_count > 0 ? round(($campaign->clicks_count / $campaign->delivered_count) * 100) : 0 }}%)
                                        </span>
                                    </div>
                                </dd>
                            </dl>
                        </div>
                    </div>
                </div>
            </div>

            <div class="bg-white overflow-hidden shadow rounded-lg">
                <div class="px-4 py-5 sm:p-6">
                    <div class="flex items-center">
                        <div class="flex-shrink-0 bg-red-500 rounded-md p-3">
                            <svg class="h-6 w-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
                            </svg>
                        </div>
                        <div class="ml-5 w-0 flex-1">
                            <dl>
                                <dt class="text-sm font-medium text-gray-500 truncate">
                                    Failed
                                </dt>
                                <dd>
                                    <div class="text-lg font-medium text-gray-900">
                                        {{ number_format($campaign->failed_count) }}
                                        <span class="text-sm text-gray-500">
                                            ({{ $campaign->total_recipients > 0 ? round(($campaign->failed_count / $campaign->total_recipients) * 100) : 0 }}%)
                                        </span>
                                    </div>
                                </dd>
                            </dl>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    @endif

    <!-- Campaign Details -->
    <div class="bg-white shadow overflow-hidden sm:rounded-lg">
        <div class="px-4 py-5 sm:px-6 border-b border-gray-200">
            <h3 class="text-lg leading-6 font-medium text-gray-900">Campaign Details</h3>
        </div>
        <div class="border-t border-gray-200 px-4 py-5 sm:p-6">
            <dl class="grid grid-cols-1 gap-x-4 gap-y-8 sm:grid-cols-2">
                <div class="sm:col-span-1">
                    <dt class="text-sm font-medium text-gray-500">Campaign Name</dt>
                    <dd class="mt-1 text-sm text-gray-900">{{ $campaign->name }}</dd>
                </div>
                <div class="sm:col-span-1">
                    <dt class="text-sm font-medium text-gray-500">Sender ID</dt>
                    <dd class="mt-1 text-sm text-gray-900">{{ $campaign->sender_id }}</dd>
                </div>
                <div class="sm:col-span-1">
                    <dt class="text-sm font-medium text-gray-500">Status</dt>
                    <dd class="mt-1 text-sm text-gray-900">
                        <span class="px-2.5 py-0.5 rounded-full text-xs font-medium {{ $campaign->status_color_class }}">
                            {{ $campaign->status_label }}
                        </span>
                    </dd>
                </div>
                @if($campaign->scheduled_at)
                <div class="sm:col-span-1">
                    <dt class="text-sm font-medium text-gray-500">Scheduled At</dt>
                    <dd class="mt-1 text-sm text-gray-900">{{ $campaign->scheduled_at->format('M d, Y \a\t h:i A T') }}</dd>
                </div>
                @endif
                <div class="sm:col-span-2">
                    <dt class="text-sm font-medium text-gray-500">Recipient Lists</dt>
                    <dd class="mt-1 text-sm text-gray-900">
                        @if($campaign->recipientLists->count() > 0)
                            <div class="flex flex-wrap gap-2">
                                @foreach($campaign->recipientLists as $list)
                                    <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-gray-100 text-gray-800">
                                        {{ $list->name }} ({{ $list->subscribers_count }} contacts)
                                    </span>
                                @endforeach
                            </div>
                        @else
                            <span class="text-gray-500">No recipient lists selected</span>
                        @endif
                    </dd>
                </div>
                <div class="sm:col-span-2">
                    <dt class="text-sm font-medium text-gray-500">Message</dt>
                    <dd class="mt-1 text-sm text-gray-900 p-4 border border-gray-200 rounded-md bg-gray-50 whitespace-pre-wrap">{{ $campaign->message }}</dd>
                </div>
                <div class="sm:col-span-1">
                    <dt class="text-sm font-medium text-gray-500">Character Count</dt>
                    <dd class="mt-1 text-sm text-gray-900">
                        {{ strlen($campaign->message) }} characters
                        @php
                            $messageCount = 1;
                            if (strlen($campaign->message) > 160) {
                                $messageCount = ceil((strlen($campaign->message) - 160) / 153) + 1;
                            }
                        @endphp
                        ({{ $messageCount }} SMS {{ $messageCount == 1 ? 'message' : 'messages' }})
                    </dd>
                </div>
                <div class="sm:col-span-1">
                    <dt class="text-sm font-medium text-gray-500">Tracking Options</dt>
                    <dd class="mt-1 text-sm text-gray-900">
                        <ul class="list-disc list-inside space-y-1">
                            @if($campaign->track_clicks)
                                <li>Track link clicks</li>
                            @endif
                            @if($campaign->track_delivery)
                                <li>Track delivery status</li>
                            @endif
                            @if($campaign->opt_out_message)
                                <li>Include opt-out instructions</li>
                            @endif
                            @if(!$campaign->track_clicks && !$campaign->track_delivery && !$campaign->opt_out_message)
                                <li class="text-gray-500">No tracking options enabled</li>
                            @endif
                        </ul>
                    </dd>
                </div>
            </dl>
        </div>
    </div>

    <!-- Delete Campaign -->
    @if($campaign->status === 'draft' || $campaign->status === 'scheduled')
        <div class="bg-white shadow overflow-hidden sm:rounded-lg">
            <div class="px-4 py-5 sm:px-6 border-b border-gray-200">
                <h3 class="text-lg leading-6 font-medium text-gray-900">Danger Zone</h3>
            </div>
            <div class="border-t border-gray-200 px-4 py-5 sm:p-6">
                <div class="sm:flex sm:items-center sm:justify-between">
                    <div>
                        <h3 class="text-sm font-medium text-gray-900">Delete this campaign</h3>
                        <div class="mt-1 text-sm text-gray-500">
                            <p>Once you delete this campaign, it cannot be recovered.</p>
                        </div>
                    </div>
                    <div class="mt-5 sm:mt-0 sm:ml-6 sm:flex-shrink-0">
                        <form action="{{ route('admin.sms-campaigns.destroy', $campaign->id) }}" method="POST" onsubmit="return confirm('Are you sure you want to delete this campaign?');">
                            @csrf
                            @method('DELETE')
                            <button type="submit" class="inline-flex items-center px-4 py-2 border border-transparent shadow-sm text-sm font-medium rounded-md text-white bg-red-600 hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500">
                                Delete Campaign
                            </button>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    @endif
</div>
@endsection