@extends('layouts.dashboard')

@section('title', 'Landing Page Details - Media World')
@section('page-title', 'Landing Page Performance Details')

@section('content')
<!-- Breadcrumb -->
<div class="mb-6">
    <a href="{{ route('dashboard.campaigns') }}" class="text-indigo-600 hover:text-indigo-800">
        <i class="fas fa-arrow-left mr-2"></i>Back to Campaigns
    </a>
</div>

<!-- Service Header -->
<div class="bg-white rounded-xl shadow-lg p-6 mb-6">
    <div class="flex items-center justify-between">
        <div>
            <h2 class="text-2xl font-bold text-gray-800">{{ $service->name }}</h2>
            <p class="text-gray-600 mt-1">Service ID: {{ $service->service_id }}</p>
            <p class="text-sm text-gray-500 mt-2">
                <span class="inline-flex items-center px-3 py-1 rounded-full text-sm font-semibold 
                    {{ strpos(strtolower($service->name), 'otp') !== false ? 'bg-blue-100 text-blue-800' : 'bg-purple-100 text-purple-800' }}">
                    {{ strpos(strtolower($service->name), 'otp') !== false ? 'OTP Flow' : 'Header Enrichment Flow' }}
                </span>
            </p>
        </div>
        <div class="flex space-x-2">
            <a href="{{ route('dashboard.campaigns') }}?days={{ $days }}" 
               class="px-4 py-2 {{ $days == 7 ? 'bg-indigo-600 text-white' : 'bg-gray-200 text-gray-700' }} rounded-lg hover:bg-indigo-700">
                Last 7 Days
            </a>
            <a href="{{ route('dashboard.campaigns') }}?days=30" 
               class="px-4 py-2 {{ $days == 30 ? 'bg-indigo-600 text-white' : 'bg-gray-200 text-gray-700' }} rounded-lg hover:bg-indigo-700">
                Last 30 Days
            </a>
            <a href="{{ route('dashboard.campaigns') }}?days=90" 
               class="px-4 py-2 {{ $days == 90 ? 'bg-indigo-600 text-white' : 'bg-gray-200 text-gray-700' }} rounded-lg hover:bg-indigo-700">
                Last 90 Days
            </a>
        </div>
    </div>
</div>

<!-- Key Metrics -->
<div class="grid md:grid-cols-4 gap-6 mb-8">
    @php
        $totalVisits = $dailyStats->sum('visits');
        $totalSubs = $dailyStats->sum('subscriptions');
        $conversionRate = $totalVisits > 0 ? ($totalSubs / $totalVisits) * 100 : 0;
        $avgDailyVisits = $dailyStats->count() > 0 ? $totalVisits / $dailyStats->count() : 0;
    @endphp

    <div class="bg-gradient-to-br from-blue-500 to-blue-600 rounded-xl p-6 text-white shadow-lg">
        <div class="flex items-center justify-between">
            <div>
                <p class="text-blue-100 text-sm mb-1">Total Visits</p>
                <h3 class="text-3xl font-bold">{{ number_format($totalVisits) }}</h3>
                <p class="text-blue-100 text-xs mt-2">last {{ $days }} days</p>
            </div>
            <i class="fas fa-eye text-5xl text-blue-200"></i>
        </div>
    </div>

    <div class="bg-gradient-to-br from-green-500 to-green-600 rounded-xl p-6 text-white shadow-lg">
        <div class="flex items-center justify-between">
            <div>
                <p class="text-green-100 text-sm mb-1">Total Conversions</p>
                <h3 class="text-3xl font-bold">{{ number_format($totalSubs) }}</h3>
                <p class="text-green-100 text-xs mt-2">successful signups</p>
            </div>
            <i class="fas fa-check-circle text-5xl text-green-200"></i>
        </div>
    </div>

    <div class="bg-gradient-to-br from-purple-500 to-purple-600 rounded-xl p-6 text-white shadow-lg">
        <div class="flex items-center justify-between">
            <div>
                <p class="text-purple-100 text-sm mb-1">Conversion Rate</p>
                <h3 class="text-3xl font-bold">{{ number_format($conversionRate, 2) }}%</h3>
                <p class="text-purple-100 text-xs mt-2">visits to subscribers</p>
            </div>
            <i class="fas fa-percentage text-5xl text-purple-200"></i>
        </div>
    </div>

    <div class="bg-gradient-to-br from-orange-500 to-orange-600 rounded-xl p-6 text-white shadow-lg">
        <div class="flex items-center justify-between">
            <div>
                <p class="text-orange-100 text-sm mb-1">Active Campaigns</p>
                <h3 class="text-3xl font-bold">{{ count($campaigns) }}</h3>
                <p class="text-orange-100 text-xs mt-2">driving traffic</p>
            </div>
            <i class="fas fa-bullhorn text-5xl text-orange-200"></i>
        </div>
    </div>
</div>

<!-- Daily Performance Chart -->
<div class="bg-white rounded-xl shadow-lg p-6 mb-8">
    <h3 class="text-xl font-bold text-gray-800 mb-6">
        <i class="fas fa-chart-line text-indigo-600 mr-2"></i>
        Daily Performance Trend
    </h3>
    <canvas id="performanceChart" class="w-full" style="max-height: 300px;"></canvas>
</div>

<!-- Campaigns Performance Table -->
<div class="bg-white rounded-xl shadow-lg p-6 mb-8">
    <h3 class="text-xl font-bold text-gray-800 mb-6">
        <i class="fas fa-bullhorn text-indigo-600 mr-2"></i>
        Campaigns Using This Landing Page
    </h3>

    @if(count($campaigns) > 0)
        <div class="overflow-x-auto">
            <table class="w-full">
                <thead>
                    <tr class="bg-gray-100">
                        <th class="px-4 py-3 text-left text-sm font-semibold text-gray-700">Campaign</th>
                        <th class="px-4 py-3 text-right text-sm font-semibold text-gray-700">Visits</th>
                        <th class="px-4 py-3 text-right text-sm font-semibold text-gray-700">Form Starts</th>
                        <th class="px-4 py-3 text-right text-sm font-semibold text-gray-700">Conversions</th>
                        <th class="px-4 py-3 text-right text-sm font-semibold text-gray-700">Rate</th>
                        <th class="px-4 py-3 text-center text-sm font-semibold text-gray-700">Actions</th>
                    </tr>
                </thead>
                <tbody>
                    @foreach($campaigns as $campaign)
                        <tr class="border-b hover:bg-gray-50">
                            <td class="px-4 py-3">
                                <span class="font-semibold text-indigo-600">{{ $campaign['campaign_id'] }}</span>
                            </td>
                            <td class="px-4 py-3 text-right">{{ number_format($campaign['visits']) }}</td>
                            <td class="px-4 py-3 text-right">{{ number_format($campaign['form_starts']) }}</td>
                            <td class="px-4 py-3 text-right">
                                <span class="font-semibold text-green-600">{{ number_format($campaign['subscriptions']) }}</span>
                            </td>
                            <td class="px-4 py-3 text-right">
                                <span class="px-2 py-1 rounded text-sm 
                                    {{ $campaign['conversion_rate'] >= 5 ? 'bg-green-100 text-green-800' : 
                                       ($campaign['conversion_rate'] >= 2 ? 'bg-yellow-100 text-yellow-800' : 'bg-red-100 text-red-800') }}">
                                    {{ number_format($campaign['conversion_rate'], 2) }}%
                                </span>
                            </td>
                            <td class="px-4 py-3 text-center">
                                <a href="{{ route('dashboard.campaigns.show', $campaign['campaign_id']) }}?days={{ $days }}" 
                                   class="inline-flex items-center px-3 py-1 bg-indigo-600 text-white rounded-lg hover:bg-indigo-700 text-sm font-semibold">
                                    <i class="fas fa-chart-bar mr-2"></i> View Campaign
                                </a>
                            </td>
                        </tr>
                    @endforeach
                </tbody>
            </table>
        </div>
    @else
        <div class="text-center py-8 text-gray-500">
            <i class="fas fa-inbox text-4xl mb-3"></i>
            <p>No campaign data available for this landing page</p>
        </div>
    @endif
</div>

<!-- Daily Breakdown Table -->
<div class="bg-white rounded-xl shadow-lg p-6">
    <h3 class="text-xl font-bold text-gray-800 mb-6">
        <i class="fas fa-table text-indigo-600 mr-2"></i>
        Daily Breakdown
    </h3>

    @if($dailyStats->count() > 0)
        <div class="overflow-x-auto">
            <table class="w-full">
                <thead>
                    <tr class="bg-gray-100">
                        <th class="px-4 py-3 text-left text-sm font-semibold text-gray-700">Date</th>
                        <th class="px-4 py-3 text-right text-sm font-semibold text-gray-700">Visits</th>
                        <th class="px-4 py-3 text-right text-sm font-semibold text-gray-700">Conversions</th>
                        <th class="px-4 py-3 text-right text-sm font-semibold text-gray-700">Rate</th>
                    </tr>
                </thead>
                <tbody>
                    @foreach($dailyStats->sortByDesc('date') as $stat)
                        @php
                            $dailyRate = $stat->visits > 0 ? ($stat->subscriptions / $stat->visits) * 100 : 0;
                        @endphp
                        <tr class="border-b hover:bg-gray-50">
                            <td class="px-4 py-3">{{ \Carbon\Carbon::parse($stat->date)->format('M d, Y') }}</td>
                            <td class="px-4 py-3 text-right font-semibold">{{ number_format($stat->visits) }}</td>
                            <td class="px-4 py-3 text-right">
                                <span class="font-semibold text-green-600">{{ number_format($stat->subscriptions) }}</span>
                            </td>
                            <td class="px-4 py-3 text-right">
                                <span class="px-2 py-1 rounded text-sm 
                                    {{ $dailyRate >= 5 ? 'bg-green-100 text-green-800' : 
                                       ($dailyRate >= 2 ? 'bg-yellow-100 text-yellow-800' : 'bg-red-100 text-red-800') }}">
                                    {{ number_format($dailyRate, 2) }}%
                                </span>
                            </td>
                        </tr>
                    @endforeach
                </tbody>
            </table>
        </div>
    @else
        <div class="text-center py-8 text-gray-500">
            <i class="fas fa-inbox text-4xl mb-3"></i>
            <p>No daily data available for the selected period</p>
        </div>
    @endif
</div>

<script>
// Chart.js - Daily Performance Chart
const ctx = document.getElementById('performanceChart').getContext('2d');
const dailyData = @json($dailyStats->sortBy('date')->values());

new Chart(ctx, {
    type: 'line',
    data: {
        labels: dailyData.map(d => {
            const date = new Date(d.date);
            return date.toLocaleDateString('en-US', { month: 'short', day: 'numeric' });
        }),
        datasets: [
            {
                label: 'Visits',
                data: dailyData.map(d => d.visits),
                borderColor: 'rgb(59, 130, 246)',
                backgroundColor: 'rgba(59, 130, 246, 0.1)',
                tension: 0.3,
                fill: true,
                yAxisID: 'y'
            },
            {
                label: 'Conversions',
                data: dailyData.map(d => d.subscriptions),
                borderColor: 'rgb(34, 197, 94)',
                backgroundColor: 'rgba(34, 197, 94, 0.1)',
                tension: 0.3,
                fill: true,
                yAxisID: 'y1'
            }
        ]
    },
    options: {
        responsive: true,
        maintainAspectRatio: true,
        interaction: {
            mode: 'index',
            intersect: false,
        },
        plugins: {
            legend: {
                position: 'top',
            },
            tooltip: {
                callbacks: {
                    afterLabel: function(context) {
                        const dataIndex = context.dataIndex;
                        const visits = dailyData[dataIndex].visits;
                        const subs = dailyData[dataIndex].subscriptions;
                        const rate = visits > 0 ? ((subs / visits) * 100).toFixed(2) : 0;
                        return `Rate: ${rate}%`;
                    }
                }
            }
        },
        scales: {
            y: {
                type: 'linear',
                display: true,
                position: 'left',
                title: {
                    display: true,
                    text: 'Visits'
                }
            },
            y1: {
                type: 'linear',
                display: true,
                position: 'right',
                title: {
                    display: true,
                    text: 'Conversions'
                },
                grid: {
                    drawOnChartArea: false,
                }
            }
        }
    }
});
</script>
@endsection