@extends('layouts.master')

@push('styles')
    <link rel="stylesheet" href="{{ asset('css/admin-dashboard.css') }}">
@endpush

@section('content')
<div class="adm-dash">
        <!-- Top Header -->
        <div class="adm-header">
            <div class="adm-header-title">
                <h2>Admin Command Center</h2>
                <p>Welcome back, <strong>{{ auth()->user()->name }}</strong> — Live system status and metrics</p>
            </div>
            <div class="adm-header-actions">
                <div class="adm-date-badge">
                    <i class="fa-regular fa-calendar-days text-muted"></i>
                    <span>{{ date('l, d M Y') }}</span>
                </div>
                <a href="{{ route('sales.create') }}" class="adm-btn-primary">
                    <i class="fa-solid fa-plus"></i>
                    <span>New Sale Order</span>
                </a>
            </div>
        </div>

        <!-- 8 Core Operational KPI Cards (All Real DB Data) -->
        <div class="adm-sec-title">
            <i class="fa-solid fa-gauge-high"></i> Core Operations (Real Live Data)
        </div>
        <div class="adm-kpi-grid">
            <!-- 1. Sales -->
            <div class="adm-kpi-card">
                <div class="adm-kpi-top">
                    <span class="adm-kpi-label">Sales Invoices</span>
                    <div class="adm-kpi-icon"><i class="fa-solid fa-receipt text-primary"></i></div>
                </div>
                <div class="adm-kpi-val">{{ number_format($sales_count) }}</div>
                <div class="adm-kpi-sub">
                    <span class="pill pill-cyan">{{ $sales_today_count }} Today</span>
                    <span>Total invoices</span>
                </div>
            </div>

            <!-- 2. Purchase Orders -->
            <div class="adm-kpi-card">
                <div class="adm-kpi-top">
                    <span class="adm-kpi-label">Purchase Orders</span>
                    <div class="adm-kpi-icon"><i class="fa-solid fa-cart-shopping text-secondary"></i></div>
                </div>
                <div class="adm-kpi-val">{{ number_format($po_count) }}</div>
                <div class="adm-kpi-sub">
                    <span class="pill pill-slate">{{ $po_today_count }} Today</span>
                    <span>Total orders</span>
                </div>
            </div>

            <!-- 3. Good Receipts -->
            <div class="adm-kpi-card">
                <div class="adm-kpi-top">
                    <span class="adm-kpi-label">Good Receipts</span>
                    <div class="adm-kpi-icon"><i class="fa-solid fa-truck-ramp-box text-success"></i></div>
                </div>
                <div class="adm-kpi-val">{{ number_format($gr_count) }}</div>
                <div class="adm-kpi-sub">
                    <span class="pill pill-emerald">{{ $gr_trucks_count }} Trucks</span>
                    <span>{{ $gr_today_count }} arrived today</span>
                </div>
            </div>

            <!-- 4. B-Cheques -->
            <div class="adm-kpi-card">
                <div class="adm-kpi-top">
                    <span class="adm-kpi-label">B-Cheques</span>
                    <div class="adm-kpi-icon"><i class="fa-solid fa-money-check text-warning"></i></div>
                </div>
                <div class="adm-kpi-val">{{ number_format($b_cheque_count) }}</div>
                <div class="adm-kpi-sub">
                    <span class="pill pill-amber">Settlement</span>
                    <span>PKR {{ number_format($b_cheque_save_amount, 0) }}</span>
                </div>
            </div>

            <!-- 5. Mandi Expenses -->
            <div class="adm-kpi-card">
                <div class="adm-kpi-top">
                    <span class="adm-kpi-label">Total Expenses</span>
                    <div class="adm-kpi-icon"><i class="fa-solid fa-hand-holding-dollar text-danger"></i></div>
                </div>
                <div class="adm-kpi-val">PKR {{ number_format($total_expenses, 0) }}</div>
                <div class="adm-kpi-sub">
                    <span class="pill pill-slate">Mandi + Services</span>
                    <span>Recorded expense</span>
                </div>
            </div>

            <!-- 6. Customers -->
            <div class="adm-kpi-card">
                <div class="adm-kpi-top">
                    <span class="adm-kpi-label">Customers</span>
                    <div class="adm-kpi-icon"><i class="fa-solid fa-users text-info"></i></div>
                </div>
                <div class="adm-kpi-val">{{ number_format($customers_count) }}</div>
                <div class="adm-kpi-sub">
                    <span class="pill pill-cyan">Buyers</span>
                    <span>Registered clients</span>
                </div>
            </div>

            <!-- 7. Suppliers -->
            <div class="adm-kpi-card">
                <div class="adm-kpi-top">
                    <span class="adm-kpi-label">Suppliers</span>
                    <div class="adm-kpi-icon"><i class="fa-solid fa-boxes-packing text-muted"></i></div>
                </div>
                <div class="adm-kpi-val">{{ number_format($suppliers_count) }}</div>
                <div class="adm-kpi-sub">
                    <span class="pill pill-slate">Growers</span>
                    <span>Active suppliers</span>
                </div>
            </div>

            <!-- 8. Total Stock -->
            <div class="adm-kpi-card">
                <div class="adm-kpi-top">
                    <span class="adm-kpi-label">Stock Balance</span>
                    <div class="adm-kpi-icon"><i class="fa-solid fa-warehouse text-primary"></i></div>
                </div>
                <div class="adm-kpi-val">{{ number_format($stocks_remain_qty) }}</div>
                <div class="adm-kpi-sub">
                    <span class="pill pill-slate">{{ $stocks_count }} Lots</span>
                    <span>Remaining inventory</span>
                </div>
            </div>
        </div>

        <!-- Financial Overview (Real Database Calculations) -->
        <div class="adm-sec-title">
            <i class="fa-solid fa-chart-pie"></i> Financial Performance (Actuals)
        </div>
        <div class="adm-fin-grid">
            <div class="adm-fin-card c-cyan">
                <div class="adm-fin-title">Total Sales Turnover</div>
                <div class="adm-fin-val">PKR {{ number_format($sales_total_amount, 2) }}</div>
                <div class="adm-fin-note">Gross invoiced amount across {{ $sales_count }} sales</div>
            </div>

            <div class="adm-fin-card c-emerald">
                <div class="adm-fin-title">Collected / Paid</div>
                <div class="adm-fin-val">PKR {{ number_format($sales_paid_amount, 2) }}</div>
                <div class="adm-fin-note">Realized cash / bank collections</div>
            </div>

            <div class="adm-fin-card c-amber">
                <div class="adm-fin-title">Outstanding Receivables</div>
                <div class="adm-fin-val">PKR {{ number_format($sales_balance_amount, 2) }}</div>
                <div class="adm-fin-note">Pending customer receivables balance</div>
            </div>

            <div class="adm-fin-card c-slate">
                <div class="adm-fin-title">Purchase Commitments</div>
                <div class="adm-fin-val">PKR {{ number_format($po_grand_total, 2) }}</div>
                <div class="adm-fin-note">Total value of active purchase orders</div>
            </div>
        </div>

        <!-- Quick Shortcuts Grid -->
        <div class="adm-sec-title">
            <i class="fa-solid fa-bolt"></i> Quick Operations
        </div>
        <div class="adm-shortcuts-grid">
            <a href="{{ route('sales.create') }}" class="adm-shortcut-btn">
                <i class="fa-solid fa-file-circle-plus"></i>
                <span>New Sale</span>
            </a>
            <a href="{{ route('sales.list') }}" class="adm-shortcut-btn">
                <i class="fa-solid fa-table-list"></i>
                <span>Sales List</span>
            </a>
            <a href="{{ route('po.create') }}" class="adm-shortcut-btn">
                <i class="fa-solid fa-cart-plus"></i>
                <span>New PO</span>
            </a>
            <a href="{{ route('good_receipts.create') }}" class="adm-shortcut-btn">
                <i class="fa-solid fa-truck-ramp-box"></i>
                <span>Inward (GR)</span>
            </a>
            <a href="{{ route('b_cheque.create') }}" class="adm-shortcut-btn">
                <i class="fa-solid fa-money-check"></i>
                <span>B-Cheque</span>
            </a>
            <a href="{{ route('voucher.create') }}" class="adm-shortcut-btn">
                <i class="fa-solid fa-receipt"></i>
                <span>New Voucher</span>
            </a>
            <a href="{{ route('voucher.list') }}" class="adm-shortcut-btn">
                <i class="fa-solid fa-list-check"></i>
                <span>Vouchers</span>
            </a>
            <a href="{{ url('customers/create') }}" class="adm-shortcut-btn">
                <i class="fa-solid fa-user-plus"></i>
                <span>Add Customer</span>
            </a>
            <a href="{{ route('supplier.create') }}" class="adm-shortcut-btn">
                <i class="fa-solid fa-user-tie"></i>
                <span>Add Supplier</span>
            </a>
            <a href="{{ route('general-ledger.index') }}" class="adm-shortcut-btn">
                <i class="fa-solid fa-book-journal-whills"></i>
                <span>General Ledger</span>
            </a>
        </div>

        <!-- 2 Column: Charts & Voucher Breakdown -->
        <div class="adm-row-2col">
            <!-- Left Chart -->
            <div class="adm-card">
                <div class="adm-card-header">
                    <div>
                        <h4 class="adm-card-title"><i class="fa-solid fa-chart-line text-primary"></i> Goods Arrival & Sales Activity</h4>
                        <span class="adm-card-sub">Comparative volume trend</span>
                    </div>
                </div>
                <div class="flot-chart-box" id="flotChart-sales"></div>
            </div>

            <!-- Right: Vouchers Distribution -->
            <div class="adm-card">
                <div class="adm-card-header">
                    <div>
                        <h4 class="adm-card-title"><i class="fa-solid fa-receipt text-secondary"></i> Voucher Distribution</h4>
                        <span class="adm-card-sub">Live audit count ({{ $total_vouchers_count }} Total)</span>
                    </div>
                </div>
                <div class="adm-v-item">
                    <span class="adm-v-name"><i class="fa-solid fa-book text-primary"></i> Journal Vouchers</span>
                    <span class="adm-v-count">{{ $jv_count }}</span>
                </div>
                <div class="adm-v-item">
                    <span class="adm-v-name"><i class="fa-solid fa-arrow-up-right-from-square text-danger"></i> Payment Vouchers</span>
                    <span class="adm-v-count">{{ $pv_count }}</span>
                </div>
                <div class="adm-v-item">
                    <span class="adm-v-name"><i class="fa-solid fa-arrow-down-left-and-up-right-to-center text-success"></i> Receipt Vouchers</span>
                    <span class="adm-v-count">{{ $rv_count }}</span>
                </div>
                <div class="adm-v-item">
                    <span class="adm-v-name"><i class="fa-solid fa-screwdriver-wrench text-muted"></i> Service Vouchers</span>
                    <span class="adm-v-count">{{ $sv_count }}</span>
                </div>
            </div>
        </div>

        <!-- User Login History Table -->
        <div class="adm-card">
            <div class="adm-card-header">
                <div>
                    <h4 class="adm-card-title"><i class="fa-solid fa-user-clock text-info"></i> User Login Activity</h4>
                    <span class="adm-card-sub">Registered users audit & login state</span>
                </div>
            </div>
            <div class="table-responsive">
                <table class="adm-table">
                    <thead>
                        <tr>
                            <th>User</th>
                            <th>Role</th>
                            <th>Last Active</th>
                            <th>Status</th>
                        </tr>
                    </thead>
                    <tbody>
                        @forelse($users as $u)
                            <tr>
                                <td>
                                    <div class="adm-user-cell">
                                        <div class="adm-avatar">
                                            {{ strtoupper(substr($u->name ?? 'U', 0, 2)) }}
                                        </div>
                                        <div>
                                            <div class="adm-user-name">{{ $u->name }}</div>
                                            <div class="adm-user-email">{{ $u->email }}</div>
                                        </div>
                                    </div>
                                </td>
                                <td>
                                    <span class="adm-role-badge">
                                        @if($u->role_id == 1) Administrator
                                        @elseif($u->role_id == 3) Accounts
                                        @elseif($u->role_id == 4) Sales
                                        @elseif($u->role_id == 5) Manager
                                        @else Staff (Role {{ $u->role_id }})
                                        @endif
                                    </span>
                                </td>
                                <td>
                                    <span class="text-muted">
                                        {{ $u->updated_at ? \Carbon\Carbon::parse($u->updated_at)->diffForHumans() : 'Never' }}
                                    </span>
                                </td>
                                <td>
                                    @if($u->updated_at && \Carbon\Carbon::parse($u->updated_at)->gt(now()->subHours(24)))
                                        <span class="adm-status-dot text-success"><span class="dot-green"></span> Active</span>
                                    @else
                                        <span class="adm-status-dot text-muted"><span class="dot-gray"></span> Offline</span>
                                    @endif
                                </td>
                            </tr>
                        @empty
                            <tr>
                                <td colspan="4" class="text-center text-muted py-4">No user records available</td>
                            </tr>
                        @endforelse
                    </tbody>
                </table>
            </div>
        </div>

</div>
@endsection

@push('scripts')
    <script>
        $(function() {
            var salesElem = $('#flotChart-sales');
            if (salesElem.length && $.plot) {
                var d1 = [[0, 2], [1, 4], [2, 3], [3, 6], [4, 5], [5, {{ max(1, $sales_today_count) }}]];
                var d2 = [[0, 1], [1, 2], [2, 4], [3, 3], [4, 4], [5, {{ max(1, $gr_today_count) }}]];

                $.plot(salesElem, [
                    { data: d1, color: '#00beda', label: 'Sales', lines: { show: true, fill: 0.1, lineWidth: 2 } },
                    { data: d2, color: '#10b981', label: 'Good Receipts', lines: { show: true, fill: 0.1, lineWidth: 2 } }
                ], {
                    grid: { borderWidth: 1, borderColor: '#f1f5f9', hoverable: true },
                    yaxis: { show: true, tickColor: '#f8fafc', font: { color: '#94a3b8', size: 10 } },
                    xaxis: { show: true, tickColor: '#f8fafc', font: { color: '#94a3b8', size: 10 } },
                    legend: { position: 'nw', backgroundOpacity: 0 }
                });
            }
        });
    </script>
@endpush