@extends('layouts.master')

@section('title', 'Dashboard')

@section('content')
    <div class="space-y-6">
        {{-- Page Title --}}
        <div class="flex justify-between items-center">
            <h1 class="text-2xl font-bold text-amber-900">Transactions Overview</h1>
            <a href="#"
               class="bg-amber-700 hover:bg-amber-800 text-white text-sm px-4 py-2 rounded shadow">
                <i class="fas fa-plus mr-1"></i> New Transaction
            </a>
        </div>
        {{-- Stats Cards --}}
        <div class="grid grid-cols-1 md:grid-cols-4 gap-4">
            <!-- Card 1 -->
            <div class="bg-white shadow rounded-lg p-4 animate-pulse">
                <div class="h-4 bg-gray-200 rounded w-3/4 mb-2"></div>
                <div class="h-8 bg-gray-200 rounded w-1/2"></div>
            </div>

            <!-- Card 2 -->
            <div class="bg-white shadow rounded-lg p-4 animate-pulse">
                <div class="h-4 bg-gray-200 rounded w-3/4 mb-2"></div>
                <div class="h-8 bg-gray-200 rounded w-1/2"></div>
            </div>

            <!-- Card 3 -->
            <div class="bg-white shadow rounded-lg p-4 animate-pulse">
                <div class="h-4 bg-gray-200 rounded w-3/4 mb-2"></div>
                <div class="h-8 bg-gray-200 rounded w-1/2"></div>
            </div>

            <!-- Card 4 -->
            <div class="bg-white shadow rounded-lg p-4 animate-pulse">
                <div class="h-4 bg-gray-200 rounded w-3/4 mb-2"></div>
                <div class="h-8 bg-gray-200 rounded w-1/2"></div>
            </div>
        </div>

        {{-- Transaction Table --}}
        <div class="bg-white shadow rounded-lg overflow-hidden">
            <table class="min-w-full text-sm">
                <thead class="bg-amber-100 text-amber-900">
                <tr>
                    <th class="px-4 py-2 text-left">Transaction ID</th>
                    <th class="px-4 py-2 text-left">Date</th>
                    <th class="px-4 py-2 text-left">Customer</th>
                    <th class="px-4 py-2 text-left">Amount</th>
                    <th class="px-4 py-2 text-left">Status</th>
                    <th class="px-4 py-2 text-center">Action</th>
                </tr>
                </thead>
                <tbody class="divide-y divide-gray-200">
                {{-- Example Row --}}
                <tr>
                    <td class="px-4 py-2 font-mono">TXN-001</td>
                    <td class="px-4 py-2">2025-08-11</td>
                    <td class="px-4 py-2">John Doe</td>
                    <td class="px-4 py-2 text-green-600 font-bold">$150.00</td>
                    <td class="px-4 py-2">
                        <span class="px-2 py-1 text-xs bg-green-100 text-green-700 rounded">Completed</span>
                    </td>
                    <td class="px-4 py-2 text-center">
                        <a href="#" class="text-blue-600 hover:underline">View</a>
                    </td>
                </tr>
                <tr>
                    <td class="px-4 py-2 font-mono">TXN-002</td>
                    <td class="px-4 py-2">2025-08-10</td>
                    <td class="px-4 py-2">Jane Smith</td>
                    <td class="px-4 py-2 text-green-600 font-bold">$320.00</td>
                    <td class="px-4 py-2">
                        <span class="px-2 py-1 text-xs bg-yellow-100 text-yellow-700 rounded">Pending</span>
                    </td>
                    <td class="px-4 py-2 text-center">
                        <a href="#" class="text-blue-600 hover:underline">View</a>
                    </td>
                </tr>
                <tr>
                    <td class="px-4 py-2 font-mono">TXN-003</td>
                    <td class="px-4 py-2">2025-08-09</td>
                    <td class="px-4 py-2">Michael Brown</td>
                    <td class="px-4 py-2 text-green-600 font-bold">$75.00</td>
                    <td class="px-4 py-2">
                        <span class="px-2 py-1 text-xs bg-red-100 text-red-700 rounded">Failed</span>
                    </td>
                    <td class="px-4 py-2 text-center">
                        <a href="#" class="text-blue-600 hover:underline">View</a>
                    </td>
                </tr>
                </tbody>
            </table>
        </div>
    </div>
@endsection