<!-- resources/views/admin/earnings.blade.php -->
@extends('layouts.admin')

@section('content')
<div class="max-w-7xl mx-auto space-y-6">
    <div class="flex flex-col sm:flex-row justify-between items-start sm:items-center gap-4">
        <div>
            <h1 class="text-3xl font-black text-gray-900">Advanced Analytics</h1>
            <p class="text-gray-500 font-bold mt-1">Platform commissions, GST, and gross revenue breakdown.</p>
        </div>
        <!-- Filter Options -->
        <select class="bg-white border border-gray-200 text-gray-900 text-sm font-black rounded-xl focus:ring-[#109E38] focus:border-[#109E38] block p-3 shadow-sm outline-none">
            <option>Today (June 5, 2026)</option>
            <option>This Week</option>
            <option>This Month</option>
            <option>All Time</option>
        </select>
    </div>

    <!-- Mega Stats -->
    <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
        <!-- Gross Value -->
        <div class="bg-white p-6 rounded-3xl border border-gray-100 shadow-sm relative overflow-hidden">
            <div class="absolute top-0 right-0 w-24 h-24 bg-blue-50 rounded-full blur-2xl -translate-y-1/2 translate-x-1/3"></div>
            <p class="text-gray-500 text-xs font-black uppercase tracking-widest mb-1">Gross Booking Value (GMV)</p>
            <h2 class="text-4xl font-black text-gray-900">₹4,50,000</h2>
            <p class="text-xs font-bold text-gray-400 mt-2">Total money generated by platform</p>
        </div>

        <!-- Platform Profit (God Level) -->
        <div class="bg-gray-900 text-white p-6 rounded-3xl shadow-xl relative overflow-hidden transform hover:scale-105 transition-transform duration-300">
            <div class="absolute top-0 right-0 w-32 h-32 bg-[#109E38]/20 rounded-full blur-2xl -translate-y-1/2 translate-x-1/3"></div>
            <p class="text-gray-400 text-xs font-black uppercase tracking-widest mb-1">Total Platform Commission</p>
            <h2 class="text-4xl font-black text-[#109E38]">₹85,000</h2>
            <p class="text-xs font-bold text-white mt-2 flex items-center gap-1"><i data-lucide="trending-up" class="w-4 h-4"></i> Instafix24 Net Profit</p>
        </div>

        <!-- Tech Earnings -->
        <div class="bg-white p-6 rounded-3xl border border-gray-100 shadow-sm relative overflow-hidden">
            <p class="text-gray-500 text-xs font-black uppercase tracking-widest mb-1">Technicians Earning</p>
            <h2 class="text-4xl font-black text-gray-900">₹3,65,000</h2>
            <p class="text-xs font-bold text-gray-400 mt-2">Money distributed to partners</p>
        </div>
    </div>

    <!-- Date-wise Breakdown Table -->
    <div class="bg-white rounded-3xl border border-gray-100 shadow-sm overflow-hidden mt-8">
        <div class="px-6 py-5 border-b border-gray-100 flex justify-between items-center bg-gray-50">
            <h3 class="text-lg font-black text-gray-900">Date-wise Breakdown</h3>
            <button class="text-sm font-bold text-gray-500 hover:text-gray-900 flex items-center gap-1"><i data-lucide="download" class="w-4 h-4"></i> Export CSV</button>
        </div>
        <div class="overflow-x-auto">
            <table class="w-full text-left border-collapse">
                <thead>
                    <tr class="bg-white border-b border-gray-100 text-xs font-black text-gray-400 uppercase tracking-wider">
                        <th class="px-6 py-4">Date</th>
                        <th class="px-6 py-4">Jobs Completed</th>
                        <th class="px-6 py-4">Gross Revenue</th>
                        <th class="px-6 py-4">Tech Paid</th>
                        <th class="px-6 py-4 text-right">Platform Profit</th>
                    </tr>
                </thead>
                <tbody class="text-sm font-bold divide-y divide-gray-50">
                    <tr class="hover:bg-gray-50 transition-colors">
                        <td class="px-6 py-4 text-gray-900 flex items-center gap-2"><i data-lucide="calendar" class="w-4 h-4 text-gray-400"></i> Today, June 5</td>
                        <td class="px-6 py-4">42 Jobs</td>
                        <td class="px-6 py-4">₹24,500</td>
                        <td class="px-6 py-4 text-red-500">-₹19,600</td>
                        <td class="px-6 py-4 text-right text-[#109E38] font-black">+₹4,900</td>
                    </tr>
                    <tr class="hover:bg-gray-50 transition-colors">
                        <td class="px-6 py-4 text-gray-900 flex items-center gap-2"><i data-lucide="calendar" class="w-4 h-4 text-gray-400"></i> Yesterday, June 4</td>
                        <td class="px-6 py-4">38 Jobs</td>
                        <td class="px-6 py-4">₹18,200</td>
                        <td class="px-6 py-4 text-red-500">-₹14,560</td>
                        <td class="px-6 py-4 text-right text-[#109E38] font-black">+₹3,640</td>
                    </tr>
                    <tr class="hover:bg-gray-50 transition-colors">
                        <td class="px-6 py-4 text-gray-900 flex items-center gap-2"><i data-lucide="calendar" class="w-4 h-4 text-gray-400"></i> Wed, June 3</td>
                        <td class="px-6 py-4">45 Jobs</td>
                        <td class="px-6 py-4">₹28,000</td>
                        <td class="px-6 py-4 text-red-500">-₹22,400</td>
                        <td class="px-6 py-4 text-right text-[#109E38] font-black">+₹5,600</td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
</div>
@endsection