@extends('layouts.admin.app')

@section('content')
    <div class="dashboard-page-header mb-3">
        <h2 class="h4 mb-1">{{ __('Dashboard') }}</h2>
        <p class="text-muted small mb-0">{{ __('Overview of your mandi business') }}</p>
    </div>

   <div class="dashboard-stats-grid grid-cols-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">{{ __('Customers') }}</p>
                    <div class="metric-stack" style="display: flex; flex-direction: column;">
                        <h2 class="metric eng-num" style="margin: 0;">{{ number_format($customerCount) }}</h2>
                        <p class="metric-note" style="margin: 0;">{{ __('Total registered') }}</p>
                    </div>
                </div>
                <div class="stat-icon stat-icon--violet"><i class="fa-solid fa-users"></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">{{ __('Suppliers') }}</p>
                    <div class="metric-stack" style="display: flex; flex-direction: column;">
                        <h2 class="metric eng-num" style="margin: 0;">{{ number_format($supplierCount) }}</h2>
                        <p class="metric-note" style="margin: 0;">{{ __('Total registered') }}</p>
                    </div>
                </div>
                <div class="stat-icon stat-icon--green"><i class="fa-solid fa-truck-field"></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">{{ __('Products') }}</p>
                    <div class="metric-stack" style="display: flex; flex-direction: column;">
                        <h2 class="metric eng-num" style="margin: 0;">{{ number_format($productCount) }}</h2>
                        <p class="metric-note" style="margin: 0;">{{ __('In inventory') }}</p>
                    </div>
                </div>
                <div class="stat-icon stat-icon--gold"><i class="fa-solid fa-boxes-stacked"></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 Sales') }}</p>
                    <div class="metric-stack" style="display: flex; flex-direction: column;">
                        <h2 class="metric eng-num" style="margin: 0;">Rs. {{ number_format($todaySales, 0) }}</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 Purchases') }}</p>
                    <div class="metric-stack" style="display: flex; flex-direction: column;">
                        <h2 class="metric eng-num" style="margin: 0;">Rs. {{ number_format($todayPurchases, 0) }}</h2>
                        <p class="metric-note" style="margin: 0;">{{ __('Purchases 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">{{ __('Month Profit') }}</p>
                    <div class="metric-stack" style="display: flex; flex-direction: column;">
                        <h2 class="metric eng-num {{ $monthProfit >= 0 ? 'text-success' : 'text-danger' }}" style="margin: 0;">
                            Rs. {{ number_format($monthProfit, 0) }}
                        </h2>
                        <p class="metric-note" style="margin: 0;">{{ $periodLabel }}</p>
                    </div>
                </div>
                <div class="stat-icon stat-icon--green"><i class="fa-solid fa-sack-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">{{ __('Cash & Bank') }}</p>
                    <div class="metric-stack" style="display: flex; flex-direction: column;">
                        <h2 class="metric eng-num" style="margin: 0;">Rs. {{ number_format($cashAndBank, 0) }}</h2>
                        <p class="metric-note" style="margin: 0;">{{ __('Account balances') }}</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">{{ __('Stock Value') }}</p>
                    <div class="metric-stack" style="display: flex; flex-direction: column;">
                        <h2 class="metric eng-num" style="margin: 0;">Rs. {{ number_format($stockValue, 0) }}</h2>
                        <p class="metric-note" style="margin: 0;">{{ __('At purchase rate') }}</p>
                    </div>
                </div>
                <div class="stat-icon stat-icon--violet"><i class="fa-solid fa-warehouse"></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>

        {{-- Finance summary --}}
        <section class="dashboard-card span-4 span-lg-12">
            <div class="dashboard-card__body">
                <h3 class="widget-title">{{ __('Finance Summary') }}</h3>
                <p class="widget-subtitle">{{ $periodLabel }}</p>

                <ul class="info-list mt-3">
                    <li>
                        <div class="info-list__meta">
                            <span class="info-list__dot" style="background:#696cff;"></span>
                            <span>{{ __('Net Sales (This Month)') }}</span>
                        </div>
                        <strong class="eng-num">Rs. {{ number_format($monthNetSales, 2) }}</strong>
                    </li>
                    <li>
                        <div class="info-list__meta">
                            <span class="info-list__dot" style="background:#35c76f;"></span>
                            <span>{{ __('Estimated Profit') }}</span>
                        </div>
                        <strong class="eng-num {{ $monthProfit >= 0 ? 'text-success' : 'text-danger' }}">
                            Rs. {{ number_format($monthProfit, 2) }}
                        </strong>
                    </li>
                    <li>
                        <div class="info-list__meta">
                            <span class="info-list__dot" style="background:#f5b71b;"></span>
                            <span>{{ __('Customer Receivable') }}</span>
                        </div>
                        <strong class="eng-num">Rs. {{ number_format($customerReceivable, 2) }}</strong>
                    </li>
                    <li>
                        <div class="info-list__meta">
                            <span class="info-list__dot" style="background:#ef5350;"></span>
                            <span>{{ __('Supplier Payable') }}</span>
                        </div>
                        <strong class="eng-num">Rs. {{ number_format($supplierPayable, 2) }}</strong>
                    </li>
                </ul>

                <a href="{{ route('admin.reports.loss-profit') }}" 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->invoice_date?->format('d M Y') ?? $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