@extends('layouts.master')

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

@section('content')
    <div class="acc-dash">

        <!-- Header -->
        <div class="acc-header">
            <div class="acc-header-title">
                <h2>Financial &amp; Accounts Dashboard</h2>
                <p>Welcome back, <strong>{{ auth()->user()->name }}</strong> — General ledger status, liquidity &amp; audit
                    summary</p>
            </div>
            <div class="acc-header-actions">
                <div class="acc-date-badge">
                    <i class="fa-regular fa-calendar-days text-muted"></i>
                    <span>{{ date('l, d M Y') }}</span>
                </div>
                <a href="{{ route('voucher.create') }}" class="acc-btn-primary">
                    <i class="fa-solid fa-plus"></i>
                    <span>New Journal Voucher</span>
                </a>
            </div>
        </div>

        <!-- 4 Main Balances KPI Cards -->
        <div class="acc-sec-title">
            <i class="fa-solid fa-scale-balanced"></i> Financial Position (Actuals)
        </div>
        <div class="acc-kpi-grid">
            <!-- 1. General Ledger Turnover -->
            <div class="acc-kpi-card">
                <div class="acc-kpi-top">
                    <span class="acc-kpi-label">Ledger Turnover</span>
                    <div class="acc-kpi-icon"><i class="fa-solid fa-book-journal-whills text-primary"></i></div>
                </div>
                <div class="acc-kpi-val">PKR {{ number_format($ledger_debit, 2) }}</div>
                <div class="acc-kpi-sub">
                    <span class="pill pill-emerald"><i class="fa-solid fa-check"></i> Balanced</span>
                    <span>Debit &amp; Credit</span>
                </div>
            </div>

            <!-- 2. Accounts Receivable -->
            <div class="acc-kpi-card">
                <div class="acc-kpi-top">
                    <span class="acc-kpi-label">Accounts Receivable</span>
                    <div class="acc-kpi-icon"><i class="fa-solid fa-hand-holding-dollar text-warning"></i></div>
                </div>
                <div class="acc-kpi-val">PKR {{ number_format($receivables_total, 2) }}</div>
                <div class="acc-kpi-sub">
                    <span class="pill pill-amber">Uncollected</span>
                    <span>Customer outstanding</span>
                </div>
            </div>

            <!-- 3. Settlement Payable -->
            <div class="acc-kpi-card">
                <div class="acc-kpi-top">
                    <span class="acc-kpi-label">B-Cheque Payable</span>
                    <div class="acc-kpi-icon"><i class="fa-solid fa-money-check text-success"></i></div>
                </div>
                <div class="acc-kpi-val">PKR {{ number_format($bcheque_settlement, 2) }}</div>
                <div class="acc-kpi-sub">
                    <span class="pill pill-cyan">Settlements</span>
                    <span>Grower net payable</span>
                </div>
            </div>

            <!-- 4. Operating Expenses -->
            <div class="acc-kpi-card">
                <div class="acc-kpi-top">
                    <span class="acc-kpi-label">Operating Expenses</span>
                    <div class="acc-kpi-icon"><i class="fa-solid fa-file-invoice-dollar text-danger"></i></div>
                </div>
                <div class="acc-kpi-val">PKR {{ number_format($total_expenses, 2) }}</div>
                <div class="acc-kpi-sub">
                    <span class="pill pill-slate">Mandi Charges</span>
                    <span>Mazdoori &amp; services</span>
                </div>
            </div>
        </div>

        <!-- Secondary Highlights -->
        <div class="acc-sec-title">
            <i class="fa-solid fa-chart-pie"></i> Cash Flow &amp; Chart of Accounts Audit
        </div>
        <div class="acc-fin-grid">
            <div class="acc-fin-card c-emerald">
                <div class="acc-fin-title">Realized Collections</div>
                <div class="acc-fin-val">PKR {{ number_format($sales_collected, 2) }}</div>
                <div class="acc-fin-note">Actual cash &amp; bank collections against sales</div>
            </div>

            <div class="acc-fin-card c-amber">
                <div class="acc-fin-title">Purchase Commitments</div>
                <div class="acc-fin-val">PKR {{ number_format($po_commitments, 2) }}</div>
                <div class="acc-fin-note">Active purchase order commitments</div>
            </div>

            <div class="acc-fin-card c-cyan">
                <div class="acc-fin-title">Total Financial Vouchers</div>
                <div class="acc-fin-val">{{ number_format($total_vouchers) }}</div>
                <div class="acc-fin-note">JV, PV, RV &amp; Service vouchers registered</div>
            </div>

            <div class="acc-fin-card c-slate">
                <div class="acc-fin-title">Posting Accounts (COA)</div>
                <div class="acc-fin-val">{{ number_format($coa_trans_count) }}</div>
                <div class="acc-fin-note">{{ $coa_control_count }} control &amp; {{ $coa_main_count }} main accounts</div>
            </div>
        </div>

        <!-- Quick Accounting Shortcuts -->
        <div class="acc-sec-title">
            <i class="fa-solid fa-bolt"></i> Financial Operations
        </div>
        <div class="acc-shortcuts-grid">
            <a href="{{ route('voucher.create') }}" class="acc-shortcut-btn">
                <i class="fa-solid fa-book"></i>
                <span>Journal Voucher</span>
            </a>
            <a href="{{ route('payment_voucher.create') }}" class="acc-shortcut-btn">
                <i class="fa-solid fa-arrow-up-right-from-square"></i>
                <span>Payment Voucher</span>
            </a>
            <a href="{{ route('receipt_voucher.create') }}" class="acc-shortcut-btn">
                <i class="fa-solid fa-arrow-down-left-and-up-right-to-center"></i>
                <span>Receipt Voucher</span>
            </a>
            <a href="{{ route('voucher.list') }}" class="acc-shortcut-btn">
                <i class="fa-solid fa-list-check"></i>
                <span>Vouchers List</span>
            </a>
            <a href="{{ route('general-ledger.index') }}" class="acc-shortcut-btn">
                <i class="fa-solid fa-book-journal-whills"></i>
                <span>General Ledger</span>
            </a>
            <a href="{{ url('/main_account') }}" class="acc-shortcut-btn">
                <i class="fa-solid fa-sitemap"></i>
                <span>Chart of Accounts</span>
            </a>
            <a href="{{ route('profit_loss') }}" class="acc-shortcut-btn">
                <i class="fa-solid fa-chart-line"></i>
                <span>Profit &amp; Loss</span>
            </a>
            <a href="{{ route('account-comparison.index') }}" class="acc-shortcut-btn">
                <i class="fa-solid fa-code-compare"></i>
                <span>Account Compare</span>
            </a>
        </div>

        <!-- 2 Column: Chart & Voucher Distribution -->
        <div class="acc-row-2col">
            <!-- Left: Voucher Volume Trend Chart -->
            <div class="acc-card">
                <div class="acc-card-header">
                    <div>
                        <h4 class="acc-card-title"><i class="fa-solid fa-chart-line text-primary"></i> Financial Flow Trends
                        </h4>
                        <span class="acc-card-sub">Receipts vs Payments posted activity</span>
                    </div>
                </div>
                <div class="flot-chart-box" id="flotChart-acc"></div>
            </div>

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

        <!-- Recent Vouchers Table -->
        <div class="acc-card">
            <div class="acc-card-header">
                <div>
                    <h4 class="acc-card-title"><i class="fa-solid fa-clock-rotate-left text-info"></i> Recent Audit Vouchers
                    </h4>
                    <span class="acc-card-sub">Latest voucher entries registered in system</span>
                </div>
                <a href="{{ route('voucher.list') }}" class="btn btn-sm btn-outline-secondary" style="font-size: 11px;">View
                    All</a>
            </div>
            <div class="table-responsive">
                <table class="acc-table">
                    <thead>
                        <tr>
                            <th>Voucher #</th>
                            <th>Type</th>
                            <th>Registered Date</th>
                            <th>Audit Status</th>
                            <th>Action</th>
                        </tr>
                    </thead>
                    <tbody>
                        @forelse($recent_vouchers as $rv)
                            <tr>
                                <td><strong>#{{ $rv->voucher_number ?? $rv->id_vouchers_unique_number }}</strong></td>
                                <td>
                                    <span
                                        class="acc-badge {{ str_contains(strtolower($rv->voucher_type ?? ''), 'payment') ? 'badge-amber' : (str_contains(strtolower($rv->voucher_type ?? ''), 'receipt') ? 'badge-emerald' : 'badge-cyan') }}">
                                        {{ $rv->voucher_type ?? 'Voucher' }}
                                    </span>
                                </td>
                                <td>{{ $rv->created_at ? \Carbon\Carbon::parse($rv->created_at)->format('d M, Y') : '-' }}</td>
                                <td>
                                    <span class="badge badge-light text-muted" style="font-size: 11px; font-weight: 600;">
                                        <i class="fa-solid fa-check-double text-success"></i> Posted
                                    </span>
                                </td>
                                <td>
                                    <a href="{{ route('voucher.list') }}" class="btn btn-xs btn-outline-info"
                                        style="font-size: 11px; padding: 2px 8px;">
                                        <i class="fa-solid fa-eye"></i> View
                                    </a>
                                </td>
                            </tr>
                        @empty
                            <tr>
                                <td colspan="5" class="text-center text-muted py-3">No vouchers generated yet.</td>
                            </tr>
                        @endforelse
                    </tbody>
                </table>
            </div>
        </div>

    </div>
@endsection

@push('scripts')
    <script>
        $(function () {
            var accElem = $('#flotChart-acc');
            if (accElem.length && $.plot) {
                var d1 = [[0, 10], [1, 20], [2, 15], [3, 25], [4, 20], [5, {{ max(1, $rv_count * 10) }}]];
                var d2 = [[0, 5], [1, 15], [2, 10], [3, 20], [4, 15], [5, {{ max(1, $pv_count * 10) }}]];

                $.plot(accElem, [
                    { data: d1, color: '#10b981', label: 'Receipts Flow', lines: { show: true, fill: 0.1, lineWidth: 2 } },
                    { data: d2, color: '#00beda', label: 'Disbursements', 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