@extends('layouts.app')

@section('content')

<!-- 🔹 Page Header -->
<div class="flex items-center justify-between mb-6">
    <h2 class="text-xl font-semibold">
        {{ __('Dashboard Overview') }}
    </h2>
</div>

<!-- 🔹 Cards -->
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 mb-6">

    <!-- Card 1 -->
    <div class="bg-white dark:bg-neutral-900 rounded-xl shadow-sm border border-gray-200 dark:border-neutral-800 p-6 hover:shadow-md transition">
        <div class="flex items-center">
            <div class="p-3 rounded-full bg-yellow-100 dark:bg-yellow-500/10 text-yellow-600 dark:text-yellow-400">
                <svg class="h-8 w-8" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                          d="M12 4.354a4 4 0 110 5.292M15 21H3v-1a6 6 0 0112 0v1z"/>
                </svg>
            </div>
            <div class="ml-4">
                <p class="text-sm text-gray-500 dark:text-gray-400">{{ __('Total Users') }}</p>
                <p class="text-2xl font-bold">1,257</p>
            </div>
        </div>
    </div>

    <!-- Card 2 -->
    <div class="bg-white dark:bg-neutral-900 rounded-xl shadow-sm border border-gray-200 dark:border-neutral-800 p-6 hover:shadow-md transition">
        <div class="flex items-center">
            <div class="p-3 rounded-full bg-yellow-100 dark:bg-yellow-500/10 text-yellow-600 dark:text-yellow-400">
                <svg class="h-8 w-8" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                          d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6"/>
                </svg>
            </div>
            <div class="ml-4">
                <p class="text-sm text-gray-500 dark:text-gray-400">{{ __('Total Sales') }}</p>
                <p class="text-2xl font-bold">$45,231</p>
            </div>
        </div>
    </div>

    <!-- Card 3 -->
    <div class="bg-white dark:bg-neutral-900 rounded-xl shadow-sm border border-gray-200 dark:border-neutral-800 p-6 hover:shadow-md transition">
        <div class="flex items-center">
            <div class="p-3 rounded-full bg-yellow-100 dark:bg-yellow-500/10 text-yellow-600 dark:text-yellow-400">
                <svg class="h-8 w-8" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                          d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7"/>
                </svg>
            </div>
            <div class="ml-4">
                <p class="text-sm text-gray-500 dark:text-gray-400">{{ __('New Orders') }}</p>
                <p class="text-2xl font-bold">54</p>
            </div>
        </div>
    </div>

</div>

<!-- 🔹 Recent Activity -->
<div class="bg-white dark:bg-neutral-900 rounded-xl shadow-sm border border-gray-200 dark:border-neutral-800 p-6">
    <h3 class="text-lg font-semibold mb-4">{{ __('Recent Activity') }}</h3>

    <ul class="divide-y divide-gray-200 dark:divide-neutral-800">

        <li class="py-4 flex items-center justify-between">
            <div class="flex items-center">
                <div class="h-9 w-9 rounded-full flex items-center justify-center text-xs bg-yellow-100 dark:bg-yellow-500/10">
                    JD
                </div>
                <div class="ml-3">
                    <p class="text-sm font-medium">John Doe placed a new order</p>
                    <p class="text-xs text-gray-500 dark:text-gray-400">2 minutes ago</p>
                </div>
            </div>
            <span class="px-3 py-1 text-xs rounded-full bg-green-100 text-green-700 dark:bg-green-900/30 dark:text-green-400">
                Completed
            </span>
        </li>

        <li class="py-4 flex items-center justify-between">
            <div class="flex items-center">
                <div class="h-9 w-9 rounded-full flex items-center justify-center text-xs bg-yellow-100 dark:bg-yellow-500/10">
                    AS
                </div>
                <div class="ml-3">
                    <p class="text-sm font-medium">Alice Smith updated profile</p>
                    <p class="text-xs text-gray-500 dark:text-gray-400">15 minutes ago</p>
                </div>
            </div>
            <span class="px-3 py-1 text-xs rounded-full bg-yellow-100 text-yellow-700 dark:bg-yellow-900/30 dark:text-yellow-400">
                Pending
            </span>
        </li>

        <li class="py-4 flex items-center justify-between">
            <div class="flex items-center">
                <div class="h-9 w-9 rounded-full flex items-center justify-center text-xs bg-yellow-100 dark:bg-yellow-500/10">
                    MJ
                </div>
                <div class="ml-3">
                    <p class="text-sm font-medium">Mike Johnson made a payment</p>
                    <p class="text-xs text-gray-500 dark:text-gray-400">1 hour ago</p>
                </div>
            </div>
            <span class="px-3 py-1 text-xs rounded-full bg-green-100 text-green-700 dark:bg-green-900/30 dark:text-green-400">
                Completed
            </span>
        </li>

    </ul>
</div>

@endsection