@extends('layouts.dashboard')

@section('title', 'Dashboard')

@section('page_content')
    <div class="row g-3">
        <div class="col-xl-3 col-md-6">
            <div class="card metric-card h-100">
                <div class="card-body">
                    <div class="d-flex justify-content-between align-items-start">
                        <div>
                            <div class="metric-label">Total Sales</div>
                            <div class="metric-value">{{ number_format($salesTotal, 2) }}</div>
                        </div>
                        <div class="metric-icon bg-primary-subtle text-primary"><i class="feather-trending-up"></i></div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-xl-3 col-md-6">
            <div class="card metric-card h-100">
                <div class="card-body">
                    <div class="d-flex justify-content-between align-items-start">
                        <div>
                            <div class="metric-label">Total Purchases</div>
                            <div class="metric-value">{{ number_format($purchaseTotal, 2) }}</div>
                        </div>
                        <div class="metric-icon bg-warning-subtle text-warning"><i class="feather-shopping-bag"></i></div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-xl-3 col-md-6">
            <div class="card metric-card h-100">
                <div class="card-body">
                    <div class="d-flex justify-content-between align-items-start">
                        <div>
                            <div class="metric-label">Total Payments</div>
                            <div class="metric-value">{{ number_format($paymentTotal, 2) }}</div>
                        </div>
                        <div class="metric-icon bg-success-subtle text-success"><i class="feather-credit-card"></i></div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-xl-3 col-md-6">
            <div class="card metric-card h-100">
                <div class="card-body">
                    <div class="d-flex justify-content-between align-items-start">
                        <div>
                            <div class="metric-label">Today Entries</div>
                            <div class="metric-value">{{ $todayTransactions }}</div>
                        </div>
                        <div class="metric-icon bg-info-subtle text-info"><i class="feather-activity"></i></div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="row g-3 mt-1">
        <div class="col-xl-6">
            <div class="card h-100">
                <div class="card-header d-flex justify-content-between align-items-center">
                    <h6 class="mb-0">Operational Snapshot</h6>
                    <i class="feather-layers text-muted"></i>
                </div>
                <div class="card-body">
                    <div class="row g-3">
                        <div class="col-6">
                            <div class="mini-stat">
                                <div class="mini-label">Open Sales</div>
                                <div class="mini-value">{{ $openSales }}</div>
                            </div>
                        </div>
                        <div class="col-6">
                            <div class="mini-stat">
                                <div class="mini-label">Open Purchases</div>
                                <div class="mini-value">{{ $openPurchases }}</div>
                            </div>
                        </div>
                        <div class="col-6">
                            <div class="mini-stat">
                                <div class="mini-label">Products</div>
                                <div class="mini-value">{{ $productsCount }}</div>
                            </div>
                        </div>
                        <div class="col-6">
                            <div class="mini-stat">
                                <div class="mini-label">Warehouses</div>
                                <div class="mini-value">{{ $warehousesCount }}</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-xl-6">
            <div class="card h-100">
                <div class="card-header d-flex justify-content-between align-items-center">
                    <h6 class="mb-0">Quick Actions</h6>
                    <i class="feather-zap text-muted"></i>
                </div>
                <div class="card-body">
                    <div class="row g-2">
                        <div class="col-md-6"><a class="btn btn-outline-secondary w-100" href="{{ route('sales.add') }}"><i class="feather-plus-circle me-1"></i> Add Sale</a></div>
                        <div class="col-md-6"><a class="btn btn-outline-secondary w-100" href="{{ route('purchases.add') }}"><i class="feather-plus-circle me-1"></i> Add Purchase</a></div>
                        <div class="col-md-6"><a class="btn btn-outline-secondary w-100" href="{{ route('payments.add') }}"><i class="feather-credit-card me-1"></i> Add Payment</a></div>
                        <div class="col-md-6"><a class="btn btn-outline-secondary w-100" href="{{ route('transfers.add') }}"><i class="feather-repeat me-1"></i> Add Transfer</a></div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="row g-3 mt-1">
        <div class="col-xl-8">
            <div class="card h-100">
                <div class="card-header d-flex justify-content-between align-items-center">
                    <h6 class="mb-0">Recent Transactions</h6>
                    <a href="{{ route('reports.invoice_view') }}" class="btn btn-sm btn-light-brand">View More</a>
                </div>
                <div class="card-body p-0">
                    <div class="table-responsive">
                        <table class="table table-hover align-middle mb-0">
                            <thead>
                                <tr>
                                    <th>Ref</th>
                                    <th>Type</th>
                                    <th>Party</th>
                                    <th>Warehouse</th>
                                    <th>Date</th>
                                    <th class="text-end">Amount</th>
                                    <th>Status</th>
                                </tr>
                            </thead>
                            <tbody>
                                @forelse ($recentTransactions as $row)
                                    <tr>
                                        <td>{{ $row->transaction_no }}</td>
                                        <td>{{ strtoupper(str_replace('_', ' ', $row->type)) }}</td>
                                        <td>{{ $row->party?->name ?? '-' }}</td>
                                        <td>{{ $row->warehouse?->name ?? '-' }}</td>
                                        <td>{{ $row->date?->format('Y-m-d') ?? '-' }}</td>
                                        <td class="text-end">{{ number_format((float) $row->amount, 2) }}</td>
                                        <td>
                                            <span class="badge {{ $row->status === 'closed' ? 'bg-soft-success text-success' : 'bg-soft-warning text-warning' }}">
                                                {{ ucfirst($row->status) }}
                                            </span>
                                        </td>
                                    </tr>
                                @empty
                                    <tr>
                                        <td colspan="7" class="text-center text-muted py-4">No transactions found.</td>
                                    </tr>
                                @endforelse
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-xl-4">
            <div class="card h-100">
                <div class="card-header d-flex justify-content-between align-items-center">
                    <h6 class="mb-0">Recent Payments</h6>
                    <a href="{{ route('payments.index') }}" class="btn btn-sm btn-light-brand">View All</a>
                </div>
                <div class="card-body">
                    @forelse ($recentPayments as $payment)
                        <div class="d-flex justify-content-between align-items-center payment-row">
                            <div>
                                <div class="fw-semibold">{{ $payment->reference_no ?? 'PAY' }}</div>
                                <div class="text-muted fs-12">{{ $payment->party?->name ?? '-' }} | {{ $payment->mode }}</div>
                                @if (!empty($payment->description))
                                    <div class="text-muted fs-12">{{ $payment->description }}</div>
                                @endif
                            </div>
                            <div class="text-end">
                                <div class="fw-semibold">{{ number_format((float) $payment->amount, 2) }}</div>
                                <div class="text-muted fs-12">{{ $payment->date?->format('Y-m-d') ?? '-' }}</div>
                            </div>
                        </div>
                    @empty
                        <div class="text-muted text-center py-4">No payments recorded.</div>
                    @endforelse
                </div>
            </div>
        </div>
    </div>

    <style>
        .metric-card {
            background: linear-gradient(180deg, #ffffff 0%, #f6fbfb 100%) !important;
        }
        .metric-card .metric-label { font-size: 12px; color: #5a7087; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
        .metric-card .metric-value { font-size: 30px; font-weight: 800; color: #16324d; margin-top: 2px; line-height: 1.2; }
        .metric-card .metric-icon {
            width: 52px;
            height: 52px;
            border-radius: 16px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            font-size: 21px;
            border: 1px solid #d7e7e4;
            background: linear-gradient(180deg, #f0f8f6 0%, #e6f3f0 100%);
        }
        .mini-stat { border: 1px dashed #cfe0de; border-radius: 12px; padding: 12px; background: #f8fcfc; }
        .mini-label { font-size: 11px; font-weight: 700; letter-spacing: .05em; color: #63738a; text-transform: uppercase; }
        .mini-value { font-size: 24px; font-weight: 800; color: #142842; margin-top: 4px; }
        .payment-row { padding: 10px 0; border-bottom: 1px solid #e8f1f0; }
        .payment-row:last-child { border-bottom: 0; }
    </style>
@endsection