@extends('layout.app')

@section('content')
    <div class="space-y-6">

        <div>
            <h1 class="text-2xl font-bold text-gray-900">Dashboard</h1>
            <p class="text-sm text-gray-500 mt-1">Order overview</p>
        </div>

        {{-- Metrics --}}
        <div class="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-6">

            <div
                class="bg-white rounded-lg border border-gray-200 p-6 hover:shadow-lg transition-all duration-300 transform hover:-translate-y-1 cursor-pointer animate-fade-in">
                <div class="flex items-start justify-between">
                    <div>
                        <p class="text-sm text-gray-600">Total Orders</p>
                        <p class="text-3xl font-bold text-gray-900 mt-2">{{ $totalOrders }}</p>
                    </div>
                    <div class="p-3 rounded-lg bg-yellow-100">
                        <i class="fas fa-shopping-cart text-yellow-600"></i>
                    </div>
                </div>
            </div>

            <div
                class="bg-white rounded-lg border border-gray-200 p-6 hover:shadow-lg transition-all duration-300 transform hover:-translate-y-1 cursor-pointer animate-fade-in">
                <div class="flex items-start justify-between">
                    <div>
                        <p class="text-sm text-gray-600">Today's Orders</p>
                        <p class="text-3xl font-bold text-gray-900 mt-2">{{ $todayOrders }}</p>
                    </div>
                    <div class="p-3 rounded-lg bg-blue-100">
                        <i class="fa-solid fa-cart-arrow-down text-blue-600"></i>
                    </div>
                </div>
            </div>


            <div
                class="bg-white rounded-lg border border-gray-200 p-6 hover:shadow-lg transition-all duration-300 transform hover:-translate-y-1 cursor-pointer animate-fade-in">
                <div class="flex items-start justify-between">
                    <div>
                        <p class="text-sm text-gray-600">Total Revenue</p>
                        <p class="text-3xl font-bold text-gray-900 mt-2">{{ format_currency($totalRevenue) }}</p>
                    </div>
                    <div class="p-3 rounded-lg bg-green-100">
                        <i class="fa-solid fa-indian-rupee-sign text-green-600"></i>
                    </div>
                </div>
            </div>

        </div>


        {{-- Orders Table --}}
        <div class="bg-white rounded-lg border border-gray-200">

            <div class="p-6 border-b border-gray-200">
                <h2 class="font-semibold text-gray-900">Recent Orders</h2>
            </div>

            <div class="overflow-x-auto">

                <table class="w-full border border-gray-200">

                    <thead class="bg-gray-50">
                        <tr class="border border-gray-200">
                            <th class="px-6 py-3 text-left text-xs text-gray-600">Order</th>
                            <th class="px-6 py-3 text-left text-xs text-gray-600">Date</th>
                            <th class="px-6 py-3 text-left text-xs text-gray-600">Customer</th>
                            <th class="px-6 py-3 text-left text-xs text-gray-600">Mobile no</th>
                            <th class="px-6 py-3 text-left text-xs text-gray-600">Amount</th>
                        </tr>
                    </thead>

                    <tbody class="divide-y">

                        @forelse($orders as $order)
                            <tr class="hover:bg-gray-50 border border-gray-200">

                                <td class="px-6 py-3 text-sm">
                                    <a href="{{ route('order.show', $order->id) }}"
                                        class="text-blue-500 font-bold">{{ $order->order_no }}</a>
                                </td>

                                <td class="px-6 py-3 text-sm">
                                    {{ format_date($order->order_date) }}
                                </td>

                                <td class="px-6 py-3 text-sm">
                                    {{ $order->customer->name ?? '-' }}
                                </td>

                                <td class="px-6 py-3 text-sm">
                                    {{ $order->customer->phone ?? '-' }}
                                </td>

                                <td class="px-6 py-3 text-sm font-medium">
                                    {{ format_currency($order->grand_total) }}
                                </td>

                            </tr>

                        @empty
                            <tr>
                                <td colspan="5" class="px-6 py-3 text-center text-gray-500">
                                    No orders found
                                </td>
                            </tr>
                        @endforelse

                    </tbody>

                </table>

            </div>

        </div>

    </div>
@endsection