@php
    // All dummy data — replace with @@json($dailyMap) from your controller
@endphp

<x-app-layout>
    <x-slot name="header">
        <div class="flex items-center justify-between flex-wrap gap-3">
            <h2 class="font-semibold text-xl text-gray-800 leading-tight">Earnings</h2>
            @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="earningsSummary"></p>
                    <div id="earningsChart"></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" style="background:#16A34A"></span>
                            <span class="text-sm text-gray-500" id="earningsLegendA"></span>
                        </div>
                        <div class="flex items-center gap-2 hidden" id="earningsLegendBWrap">
                            <span class="inline-block w-3 h-3 rounded-full" style="background:#F7CE46"></span>
                            <span class="text-sm text-gray-500" id="earningsLegendB"></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="earningsColA">Selected period</th>
                                <th class="py-3 text-right text-[13px] font-semibold text-gray-400 tracking-wide hidden" id="earningsColB">Comparison</th>
                                <th class="py-3 text-right text-[13px] font-semibold text-gray-400 tracking-wide hidden" id="earningsColGrowth">Growth</th>
                            </tr>
                        </thead>
                        <tbody class="divide-y divide-gray-100" id="earningsTableBody"></tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>

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