@extends('layouts.admin.app')

@section('content')
    <div class="dashboard-page-header mb-3">
        <div class="d-flex flex-wrap align-items-center justify-content-between gap-2 mb-1">
            <h2 class="h4 mb-0">{{ __('Dashboard') }}</h2>
            @php
                $packageAdmin = \App\Support\AdminAccess::currentAdmin();
            @endphp
            @if ($packageAdmin)
                <div class="dashboard-package-summary m-0">
                    <span>{{ __('Package') }}: <strong>{{ $packageAdmin->package?->name ?? __('Not assigned') }}</strong></span>
                    @if ($packageAdmin->package)
                        <span>
                            {{ $packageAdmin->isPackageExpired() ? __('Expired') : __('Expires') }}:
                            {{ $packageAdmin->package_expires_at?->format('d M Y') ?? __('Not set') }}
                        </span>
                    @endif
                </div>
            @endif
        </div>
        <p class="text-muted small mb-0">{{ __('Overview of your business') }}</p>
    </div>

    <div class="dashboard-stats-grid grid-cols-4 mb-4">
        <section class="dashboard-card stat-card stat-card--compact">
            <div class="dashboard-card__body">
                <div class="stat-card__row">
                    <div class="stat-card__content">
                        <p class="eyebrow">{{ __("Today's Total Sales") }}</p>
                        <div class="metric-stack" style="display: flex; flex-direction: column;">
                            <h2 class="metric eng-num text-success" style="margin: 0;">Rs. {{ number_format($todaySales, 2) }}</h2>
                            <p class="metric-note" style="margin: 0;">{{ __('Invoices today') }}</p>
                        </div>
                    </div>
                    <div class="stat-icon stat-icon--violet"><i class="fa-solid fa-file-invoice-dollar"></i></div>
                </div>
            </div>
        </section>

        <section class="dashboard-card stat-card stat-card--compact">
            <div class="dashboard-card__body">
                <div class="stat-card__row">
                    <div class="stat-card__content">
                        <p class="eyebrow">{{ __("Today's Total Purchases") }}</p>
                        <div class="metric-stack" style="display: flex; flex-direction: column;">
                            <h2 class="metric eng-num text-primary" style="margin: 0;">Rs. {{ number_format($todayPurchases, 2) }}</h2>
                            <p class="metric-note" style="margin: 0;">{{ __('Purchase bills today') }}</p>
                        </div>
                    </div>
                    <div class="stat-icon stat-icon--red"><i class="fa-solid fa-cart-shopping"></i></div>
                </div>
            </div>
        </section>

        <section class="dashboard-card stat-card stat-card--compact">
            <div class="dashboard-card__body">
                <div class="stat-card__row">
                    <div class="stat-card__content">
                        <p class="eyebrow">{{ __("Today's Total Customer Payments") }}</p>
                        <div class="metric-stack" style="display: flex; flex-direction: column; gap: 6px;">
                            <div class="d-flex justify-content-between align-items-center gap-2">
                                <span class="metric-note" style="margin: 0;">{{ __('Received') }}</span>
                                <strong class="metric eng-num text-success" style="margin: 0; font-size: 1rem;">Rs. {{ number_format($todayCustomerPaymentsReceived, 2) }}</strong>
                            </div>
                            <div class="d-flex justify-content-between align-items-center gap-2">
                                <span class="metric-note" style="margin: 0;">{{ __('Walk-in') }}</span>
                                <strong class="metric eng-num text-primary" style="margin: 0; font-size: 1rem;">Rs. {{ number_format($todayWalkInPayments, 2) }}</strong>
                            </div>
                            {{-- <div class="d-flex justify-content-between align-items-center gap-2">
                                <span class="metric-note" style="margin: 0;">{{ __('Paid') }}</span>
                                <strong class="metric eng-num text-danger" style="margin: 0; font-size: 1rem;">Rs. {{ number_format($todayCustomerPaymentsPaid, 2) }}</strong>
                            </div> --}}
                        </div>
                    </div>
                    <div class="stat-icon stat-icon--green"><i class="fa-solid fa-hand-holding-dollar"></i></div>
                </div>
            </div>
        </section>

        <section class="dashboard-card stat-card stat-card--compact">
            <div class="dashboard-card__body">
                <div class="stat-card__row">
                    <div class="stat-card__content">
                        <p class="eyebrow">{{ __("Today's Net Cash Flow") }}</p>
                        <div class="metric-stack" style="display: flex; flex-direction: column;">
                            <h2 class="metric eng-num {{ $todayNetCashFlow >= 0 ? 'text-success' : 'text-danger' }}" style="margin: 0;">Rs. {{ number_format($todayNetCashFlow, 2) }}</h2>
                            <p class="metric-note" style="margin: 0;">{{ __('Combined inflow / outflow') }}</p>
                        </div>
                    </div>
                    <div class="stat-icon stat-icon--gold"><i class="fa-solid fa-wallet"></i></div>
                </div>
            </div>
        </section>

        <section class="dashboard-card stat-card stat-card--compact">
            <div class="dashboard-card__body">
                <div class="stat-card__row">
                    <div class="stat-card__content">
                        <p class="eyebrow">{{ __("Today's Total Supplier Payments") }}</p>
                        <div class="metric-stack" style="display: flex; flex-direction: column;">
                            <h2 class="metric eng-num text-danger" style="margin: 0;">Rs. {{ number_format($todaySupplierPayments, 2) }}</h2>
                            <p class="metric-note" style="margin: 0;">{{ __('Payments to suppliers') }}</p>
                        </div>
                    </div>
                    <div class="stat-icon stat-icon--red"><i class="fa-solid fa-truck-fast"></i></div>
                </div>
            </div>
        </section>

        <section class="dashboard-card stat-card stat-card--compact">
            <div class="dashboard-card__body">
                <div class="stat-card__row">
                    <div class="stat-card__content">
                        <p class="eyebrow">{{ __("Today's Total Sales Return") }}</p>
                        <div class="metric-stack" style="display: flex; flex-direction: column;">
                            <h2 class="metric eng-num" style="margin: 0;">Rs. {{ number_format($todaySalesReturns, 2) }}</h2>
                            <p class="metric-note" style="margin: 0;">{{ __('Returned sales') }}</p>
                        </div>
                    </div>
                    <div class="stat-icon stat-icon--violet"><i class="fa-solid fa-rotate-left"></i></div>
                </div>
            </div>
        </section>

        <section class="dashboard-card stat-card stat-card--compact">
            <div class="dashboard-card__body">
                <div class="stat-card__row">
                    <div class="stat-card__content">
                        <p class="eyebrow">{{ __("Today's Total Purchases Return") }}</p>
                        <div class="metric-stack" style="display: flex; flex-direction: column;">
                            <h2 class="metric eng-num" style="margin: 0;">Rs. {{ number_format($todayPurchaseReturns, 2) }}</h2>
                            <p class="metric-note" style="margin: 0;">{{ __('Returned purchases') }}</p>
                        </div>
                    </div>
                    <div class="stat-icon stat-icon--green"><i class="fa-solid fa-rotate"></i></div>
                </div>
            </div>
        </section>

        <section class="dashboard-card stat-card stat-card--compact">
            <div class="dashboard-card__body">
                <div class="stat-card__row">
                    <div class="stat-card__content">
                        <p class="eyebrow">{{ __("Today's Total Expenses") }}</p>
                        <div class="metric-stack" style="display: flex; flex-direction: column;">
                            <h2 class="metric eng-num text-danger" style="margin: 0;">Rs. {{ number_format($todayExpenses + $todayPayrollPaid, 2) }}</h2>
                            <p class="metric-note" style="margin: 0;">{{ __('Paid expenses and staff salaries') }}</p>
                            <p class="metric-note" style="margin: 0;">{{ __('Staff Salary Paid') }}: Rs. {{ number_format($todayPayrollPaid, 2) }}</p>
                        </div>
                    </div>
                    <div class="stat-icon stat-icon--gold"><i class="fa-solid fa-money-bill-wave"></i></div>
                </div>
            </div>
        </section>
    </div>

    <div class="dashboard-grid dashboard-grid--compact">
        {{-- Chart + finance summary --}}
        <section class="dashboard-card chart-card span-8 span-lg-12">
            <div class="dashboard-card__body">
                <h3 class="chart-title">{{ __('Monthly Sales') }}</h3>
                <p class="chart-subtitle">{{ __('Last 6 months from invoices') }}</p>

                <div class="chart-plot">
                    <div class="chart-grid"><span></span><span></span><span></span><span></span></div>
                    <div class="chart-bars">
                        @foreach ($monthlySales as $month)
                            <div class="chart-group">
                                <div class="chart-group__bars">
                                    <span class="chart-bar chart-bar--gold" style="height: {{ $month['bar_height'] }}%;"></span>
                                </div>
                                <span class="chart-group__label">{{ $month['label'] }}</span>
                            </div>
                        @endforeach
                    </div>
                </div>

                <div class="chart-legend">
                    <span><i class="legend-dot legend-dot--gold"></i> {{ __('Sales amount') }}</span>
                </div>
            </div>
        </section>

        {{-- Low stock preview --}}
        <section class="dashboard-card span-4 span-lg-12">
            <div class="dashboard-card__body">
                <h3 class="widget-title">{{ __('Low Stock Report') }}</h3>
                <p class="widget-subtitle">
                    {{ __('Items below alert quantity') }} · {{ number_format((int) $lowStockItems) }} {{ __('items') }}
                </p>

                @if (empty($lowStockPreview))
                    <p class="text-muted small mt-3 mb-0">{{ __('No low stock items found.') }}</p>
                @else
                    <ul class="info-list mt-3">
                        @foreach ($lowStockPreview as $item)
                            <li>
                                <div class="info-list__meta">
                                    <span class="info-list__dot" style="background:#f59e0b;"></span>
                                    <div>
                                        <span>{{ $item['name'] }}</span>
                                        @if (!empty($item['group_name']))
                                            <small class="text-muted d-block">{{ $item['group_name'] }}</small>
                                        @endif
                                    </div>
                                </div>
                                <div class="text-end">
                                    <strong class="eng-num text-danger">{{ number_format((float) $item['stock'], 2) }}</strong>
                                    <small class="text-muted d-block">{{ __('Shortage') }}: {{ number_format((float) $item['shortage'], 2) }}</small>
                                </div>
                            </li>
                        @endforeach
                    </ul>
                @endif

                <a href="{{ route('admin.reports.low-stock') }}" class="btn btn-sm btn-outline-primary mt-3">
                    {{ __('View full report') }}
                </a>
            </div>
        </section>

        {{-- Recent sales --}}
        <section class="dashboard-card span-6 span-lg-12">
            <div class="dashboard-card__body">
                <h3 class="widget-title">{{ __('Recent Sales') }}</h3>
                <p class="widget-subtitle">{{ __('Latest invoices') }}</p>

                @if ($recentInvoices->isEmpty())
                    <p class="text-muted small mt-3 mb-0">{{ __('No sales yet.') }}</p>
                @else
                    <ul class="info-list mt-3">
                        @foreach ($recentInvoices as $invoice)
                            <li>
                                <div class="info-list__meta">
                                    <span>{{ $invoice->customer->name ?? __('Walk-in Customer') }}</span>
                                    <small class="text-muted d-block eng-num">{{ $invoice->created_at?->format('d M Y') }}</small>
                                </div>
                                <strong class="eng-num">Rs. {{ number_format((float) $invoice->total, 2) }}</strong>
                            </li>
                        @endforeach
                    </ul>
                @endif

                <a href="{{ route('admin.invoices') }}" class="btn btn-sm btn-outline-primary mt-3">{{ __('Sale List') }}</a>
            </div>
        </section>

        {{-- Recent purchases --}}
        <section class="dashboard-card span-6 span-lg-12">
            <div class="dashboard-card__body">
                <h3 class="widget-title">{{ __('Recent Purchases') }}</h3>
                <p class="widget-subtitle">{{ __('Latest purchase bills') }}</p>

                @if ($recentPurchases->isEmpty())
                    <p class="text-muted small mt-3 mb-0">{{ __('No purchases yet.') }}</p>
                @else
                    <ul class="info-list mt-3">
                        @foreach ($recentPurchases as $purchase)
                            <li>
                                <div class="info-list__meta">
                                    <span>{{ $purchase->supplier->name ?? '-' }}</span>
                                    <small class="text-muted d-block eng-num">{{ $purchase->purchase_date }}</small>
                                </div>
                                <strong class="eng-num">Rs. {{ number_format((float) $purchase->grand_total, 2) }}</strong>
                            </li>
                        @endforeach
                    </ul>
                @endif

                <a href="{{ route('admin.purchases') }}" class="btn btn-sm btn-outline-primary mt-3">{{ __('Purchases') }}</a>
            </div>
        </section>
    </div>

    {{-- <script src="{{ asset('js/responsive-cards.js') }}"></script> --}}
@endsection