@push('title')
CLIX FLOW Reports
@endpush
<x-app-layout>


    <div class="content-wrapper">
        <div class="flex flex-wrap -mx-1">
            <div class="w-full md:w-1/2 px-1">
                <!-- Today's SubID Report -->
                <div class="my-2 bg-white shadow rounded-lg">
                    <div class="px-4 py-2">
                        <table class="w-full" id="todayReportTableBody">
                            <thead>
                                <tr class="border-b border-gray-200 text-lg">
                                    <th class="pb-1">Today</th>
                                    <th class="pb-1">Clicks</th>
                                    <th class="pb-1">Sales</th>
                                    <th class="pb-1">EPC</th>
                                    <th class="pb-1">Earnings</th>
                                </tr>
                            </thead>
                            <tbody>
                                <!-- Data will be populated by AJAX -->
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>

            <div class="w-full md:w-1/2 px-1">
                <!-- General Report -->
                <div class="my-2 bg-white shadow rounded-lg">
                    <div class="px-4 py-2">
                        <table class="w-full" id="generalReportTableBody">
                            <thead>
                                <tr class="border-b border-gray-200 text-lg">
                                    <th class="pb-1">MTD</th>
                                    <th class="pb-1">Clicks</th>
                                    <th class="pb-1">Sales</th>
                                    <th class="pb-1">EPC</th>
                                    <th class="pb-1">Earnings</th>
                                </tr>
                            </thead>
                            <tbody>
                                <!-- Data will be populated by AJAX -->
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>

            <!-- Today's Campaigns Report -->
            <div class="w-full px-1">
                <div class="my-2 bg-white shadow rounded-lg">
                    <div class="px-4 py-2">
                        <table class="w-full" id="campaignsReportTableBody">
                            <thead>
                                <tr class="border-b border-gray-200 text-lg">
                                    <th class="pb-1">Today's Campaigns</th>
                                    <th class="pb-1">Clicks</th>
                                    <th class="pb-1">Sales</th>
                                    <th class="pb-1">EPC</th>
                                    <th class="pb-1">Earnings</th>
                                </tr>
                            </thead>
                            <tbody>
                                <!-- Data will be populated by AJAX -->
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <audio id="notificationSound" muted>
        <source src="{{ asset('sounds/ching-sound.mp3') }}" type="audio/mpeg">
    </audio>

    <audio id="clickSound" muted>
        <source src="{{ asset('sounds/click.mp3') }}" type="audio/mpeg">
    </audio>


    @vite('resources/js/reports.js')

           
</x-app-layout>