@php
    $referrers = [
        ['url' => 'instagram.com',  'clicks' => 1240, 'unique' => 980, 'orders' => 82],
        ['url' => 'facebook.com',   'clicks' => 890,  'unique' => 720, 'orders' => 54],
        ['url' => 'direct / none',  'clicks' => 760,  'unique' => 640, 'orders' => 38],
        ['url' => 'tiktok.com',     'clicks' => 520,  'unique' => 430, 'orders' => 29],
        ['url' => 'youtube.com',    'clicks' => 380,  'unique' => 310, 'orders' => 21],
        ['url' => 'twitter.com',    'clicks' => 290,  'unique' => 245, 'orders' => 14],
        ['url' => 'pinterest.com',  'clicks' => 222,  'unique' => 190, 'orders' => 11],
    ];
@endphp

<x-admin-layout>
    <x-slot name="header">
        <div class="flex items-center justify-between flex-wrap gap-3">
            <div>
                <h2 class="font-semibold text-xl text-gray-800 leading-tight">Orders</h2>
                <p class="text-sm text-gray-400 mt-0.5">Combined orders across all affiliates</p>
            </div>
            @include('reports._picker')
        </div>
    </x-slot>

    <div class="py-8">
        <div class="max-w-7xl mx-auto px-6 lg:px-8">
            <div class="bg-white overflow-hidden shadow-sm sm:rounded-lg">
                <div class="p-6">
                    <p class="text-gray-700 text-[15px] mb-5" id="ordersSummary"></p>
                    <div id="ordersChart"></div>
                    <div class="flex items-center gap-5 mt-3 mb-6">
                        <div class="flex items-center gap-2">
                            <span class="inline-block w-3 h-3 rounded-full bg-indigo-600"></span>
                            <span class="text-sm text-gray-500" id="ordersLegendA"></span>
                        </div>
                        <div class="flex items-center gap-2 hidden" id="ordersLegendBWrap">
                            <span class="inline-block w-3 h-3 rounded-full" style="background:#F7CE46"></span>
                            <span class="text-sm text-gray-500" id="ordersLegendB"></span>
                        </div>
                    </div>
                    <div class="border-t border-gray-100"></div>
                    <table class="w-full text-sm mt-1">
                        <thead>
                            <tr class="border-b border-gray-100">
                                <th class="py-3 text-left text-[13px] font-semibold text-gray-400 tracking-wide">Metric</th>
                                <th class="py-3 text-right text-[13px] font-semibold text-gray-400 tracking-wide" id="ordersColA">Selected period</th>
                                <th class="py-3 text-right text-[13px] font-semibold text-gray-400 tracking-wide hidden" id="ordersColB">Comparison</th>
                                <th class="py-3 text-right text-[13px] font-semibold text-gray-400 tracking-wide hidden" id="ordersColGrowth">Growth</th>
                            </tr>
                        </thead>
                        <tbody class="divide-y divide-gray-100" id="ordersTableBody"></tbody>
                    </table>
                </div>
            </div>

            {{-- Referral URL breakdown --}}
            <div class="bg-white overflow-hidden shadow-sm sm:rounded-lg mt-6">
                <div class="p-6">
                    <h3 class="text-[15px] font-semibold text-gray-800 mb-1">Orders by referral URL</h3>
                    <p class="text-sm text-gray-400 mb-5">Which referral sources are driving the most orders across all affiliates over the selected period.</p>
                    <div class="border-t border-gray-100"></div>
                    <table class="w-full text-sm mt-1">
                        <thead>
                            <tr class="border-b border-gray-100">
                                <th class="py-3 text-left text-[13px] font-semibold text-gray-400 tracking-wide">Referral URL</th>
                                <th class="py-3 text-right text-[13px] font-semibold text-gray-400 tracking-wide">Orders</th>
                                <th class="py-3 text-right text-[13px] font-semibold text-gray-400 tracking-wide">Clicks</th>
                                <th class="py-3 text-right text-[13px] font-semibold text-gray-400 tracking-wide">Conv. rate</th>
                            </tr>
                        </thead>
                        <tbody class="divide-y divide-gray-100">
                            @foreach($referrers as $row)
                            @php $conv = $row['clicks'] > 0 ? ($row['orders'] / $row['clicks']) * 100 : 0; @endphp
                            <tr class="hover:bg-gray-50 transition-colors">
                                <td class="py-3 text-[15px] text-gray-800 font-medium">{{ $row['url'] }}</td>
                                <td class="py-3 text-right text-[15px] text-gray-900 font-medium tabular-nums">{{ number_format($row['orders']) }}</td>
                                <td class="py-3 text-right text-[15px] text-gray-500 tabular-nums">{{ number_format($row['clicks']) }}</td>
                                <td class="py-3 text-right text-[15px] text-gray-500 tabular-nums">{{ number_format($conv, 2) }}%</td>
                            </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>
    @include('reports._chart_script', ['chartType' => 'orders'])
</x-admin-layout>