@extends('layouts.master')

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

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

    <!-- Header -->
    <div class="sal-header">
        <div class="sal-header-title">
            <h2>Sales &amp; Dispatch Command Center</h2>
            <p>Welcome back, <strong>{{ auth()->user()->name }}</strong> — Daily turnover, volume dispatched &amp; customer recovery</p>
        </div>
        <div class="sal-header-actions">
            <div class="sal-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="sal-btn-primary">
                <i class="fa-solid fa-plus"></i>
                <span>New Sale Order</span>
            </a>
        </div>
    </div>

    <!-- 4 Key Sales KPIs -->
    <div class="sal-sec-title">
        <i class="fa-solid fa-gauge-high"></i> Sales Performance (Actuals)
    </div>
    <div class="sal-kpi-grid">
        <!-- 1. Gross Sales Turnover -->
        <div class="sal-kpi-card">
            <div class="sal-kpi-top">
                <span class="sal-kpi-label">Gross Turnover</span>
                <div class="sal-kpi-icon"><i class="fa-solid fa-receipt text-primary"></i></div>
            </div>
            <div class="sal-kpi-val">PKR {{ number_format($sales_total_amount, 2) }}</div>
            <div class="sal-kpi-sub">
                <span class="pill pill-cyan">{{ $sales_count }} Orders</span>
                <span>Total invoiced turnover</span>
            </div>
        </div>

        <!-- 2. Bori / Bags Sold -->
        <div class="sal-kpi-card">
            <div class="sal-kpi-top">
                <span class="sal-kpi-label">Bori (Bags) Dispatched</span>
                <div class="sal-kpi-icon"><i class="fa-solid fa-boxes-stacked text-success"></i></div>
            </div>
            <div class="sal-kpi-val">{{ number_format($total_bori) }}</div>
            <div class="sal-kpi-sub">
                <span class="pill pill-emerald">{{ number_format($today_bori) }} Today</span>
                <span>Mandi bags dispatched</span>
            </div>
        </div>

        <!-- 3. Total Weight Sold -->
        <div class="sal-kpi-card">
            <div class="sal-kpi-top">
                <span class="sal-kpi-label">Weight Dispatched</span>
                <div class="sal-kpi-icon"><i class="fa-solid fa-scale-balanced text-warning"></i></div>
            </div>
            <div class="sal-kpi-val">{{ number_format($total_weight) }}</div>
            <div class="sal-kpi-sub">
                <span class="pill pill-amber">{{ number_format($today_weight) }} Today</span>
                <span>Total weight (kg/mann)</span>
            </div>
        </div>

        <!-- 4. Active Buyers -->
        <div class="sal-kpi-card">
            <div class="sal-kpi-top">
                <span class="sal-kpi-label">Active Buyers</span>
                <div class="sal-kpi-icon"><i class="fa-solid fa-users text-secondary"></i></div>
            </div>
            <div class="sal-kpi-val">{{ number_format($customers_count) }}</div>
            <div class="sal-kpi-sub">
                <span class="pill pill-slate">Verified</span>
                <span>Registered customers</span>
            </div>
        </div>
    </div>

    <!-- Financial Splits: Recovery & Today Status -->
    <div class="sal-sec-title">
        <i class="fa-solid fa-hand-holding-dollar"></i> Recovery &amp; Collection Split
    </div>
    <div class="sal-fin-grid">
        <div class="sal-fin-card c-emerald">
            <div class="sal-fin-title">Realized / Paid Cash</div>
            <div class="sal-fin-val">PKR {{ number_format($sales_paid_amount, 2) }}</div>
            <div class="sal-fin-note">Collected cash &amp; bank payments</div>
        </div>

        <div class="sal-fin-card c-amber">
            <div class="sal-fin-title">Pending Receivables</div>
            <div class="sal-fin-val">PKR {{ number_format($sales_balance_amount, 2) }}</div>
            <div class="sal-fin-note">Customer balances pending collection</div>
        </div>

        <div class="sal-fin-card c-cyan">
            <div class="sal-fin-title">Today's Sales Value</div>
            <div class="sal-fin-val">PKR {{ number_format($sales_today_amount, 2) }}</div>
            <div class="sal-fin-note">{{ $sales_today_count }} invoice(s) generated today</div>
        </div>

        <div class="sal-fin-card c-slate">
            <div class="sal-fin-title">Unsettled Invoices</div>
            <div class="sal-fin-val">{{ number_format($unpaid_sales_count) }}</div>
            <div class="sal-fin-note">Invoices awaiting full settlement</div>
        </div>
    </div>

    <!-- Shortcuts -->
    <div class="sal-sec-title">
        <i class="fa-solid fa-bolt"></i> Sales Operations
    </div>
    <div class="sal-shortcuts-grid">
        <a href="{{ route('sales.create') }}" class="sal-shortcut-btn">
            <i class="fa-solid fa-file-circle-plus"></i>
            <span>New Sale</span>
        </a>
        <a href="{{ route('sales.list') }}" class="sal-shortcut-btn">
            <i class="fa-solid fa-table-list"></i>
            <span>Sales Register</span>
        </a>
        <a href="{{ url('customers/create') }}" class="sal-shortcut-btn">
            <i class="fa-solid fa-user-plus"></i>
            <span>Add Customer</span>
        </a>
        <a href="{{ route('dailySale') }}" class="sal-shortcut-btn">
            <i class="fa-solid fa-file-invoice"></i>
            <span>Daily Sale</span>
        </a>
        <a href="{{ route('customerWiseReport') }}" class="sal-shortcut-btn">
            <i class="fa-solid fa-address-book"></i>
            <span>Customer Report</span>
        </a>
        <a href="{{ route('receivables.report') }}" class="sal-shortcut-btn">
            <i class="fa-solid fa-file-invoice-dollar"></i>
            <span>Receivables</span>
        </a>
    </div>

    <!-- 2 Column: Sales Trends Chart & Mandi Summary -->
    <div class="sal-row-2col">
        <!-- Left: Sales Activity Trend Chart -->
        <div class="sal-card">
            <div class="sal-card-header">
                <div>
                    <h4 class="sal-card-title"><i class="fa-solid fa-chart-line text-primary"></i> Sales Volume &amp; Dispatches Trend</h4>
                    <span class="sal-card-sub">Invoiced orders &amp; mandi dispatch flow</span>
                </div>
            </div>
            <div class="flot-chart-box" id="flotChart-sales-trend"></div>
        </div>

        <!-- Right: Mandi Summary Breakdown -->
        <div class="sal-card">
            <div class="sal-card-header">
                <div>
                    <h4 class="sal-card-title"><i class="fa-solid fa-chart-pie text-secondary"></i> Recovery &amp; Volume Metrics</h4>
                    <span class="sal-card-sub">Real-time ratio analysis</span>
                </div>
            </div>
            <div class="sal-v-item">
                <span class="sal-v-name"><i class="fa-solid fa-circle text-success" style="font-size: 8px;"></i> Recovery Rate</span>
                <span class="sal-v-count">{{ $sales_total_amount > 0 ? number_format(($sales_paid_amount / $sales_total_amount) * 100, 1) : 0 }}%</span>
            </div>
            <div class="sal-v-item">
                <span class="sal-v-name"><i class="fa-solid fa-circle text-primary" style="font-size: 8px;"></i> Dispatched Bori</span>
                <span class="sal-v-count">{{ number_format($total_bori) }}</span>
            </div>
            <div class="sal-v-item">
                <span class="sal-v-name"><i class="fa-solid fa-circle text-warning" style="font-size: 8px;"></i> Dispatched Weight</span>
                <span class="sal-v-count">{{ number_format($total_weight) }}</span>
            </div>
            <div class="sal-v-item">
                <span class="sal-v-name"><i class="fa-solid fa-circle text-danger" style="font-size: 8px;"></i> Outstanding Dues</span>
                <span class="sal-v-count">PKR {{ number_format($sales_balance_amount, 0) }}</span>
            </div>
        </div>
    </div>

    <!-- Recent Sales Invoices -->
    <div class="sal-card">
        <div class="sal-card-header">
            <div>
                <h4 class="sal-card-title"><i class="fa-solid fa-clock-rotate-left text-info"></i> Recent Sales Orders</h4>
                <span class="sal-card-sub">Latest registered invoices &amp; settlement status</span>
            </div>
            <a href="{{ route('sales.list') }}" class="btn btn-sm btn-outline-secondary" style="font-size: 11px;">View All Sales</a>
        </div>
        <div class="table-responsive">
            <table class="sal-table">
                <thead>
                    <tr>
                        <th>Bill #</th>
                        <th>Customer</th>
                        <th>Date</th>
                        <th>Total Amount</th>
                        <th>Paid</th>
                        <th>Balance</th>
                        <th>Status</th>
                        <th>Action</th>
                    </tr>
                </thead>
                <tbody>
                    @forelse($recent_sales as $rs)
                        <tr>
                            <td><strong>#{{ $rs->bill_no ?? $rs->s_no ?? $rs->id_sales }}</strong></td>
                            <td>
                                <strong>{{ $rs->customer->customer_name ?? $rs->customer_name ?? 'Walk-in Customer' }}</strong>
                                @php $custPhone = $rs->customer->customer_cell ?? $rs->customer_phone ?? ''; @endphp
                                @if(!empty($custPhone))
                                    <div class="text-muted" style="font-size: 11px;">{{ $custPhone }}</div>
                                @endif
                            </td>
                            <td>{{ $rs->date ? \Carbon\Carbon::parse($rs->date)->format('d M, Y') : '-' }}</td>
                            <td><strong>{{ number_format($rs->total_amount, 2) }}</strong></td>
                            <td class="text-success">{{ number_format($rs->paid, 2) }}</td>
                            <td class="text-danger"><strong>{{ number_format($rs->balance, 2) }}</strong></td>
                            <td>
                                @if($rs->balance <= 0)
                                    <span class="badge-status badge-paid">Paid</span>
                                @elseif($rs->paid > 0)
                                    <span class="badge-status badge-partial">Partial</span>
                                @else
                                    <span class="badge-status badge-unpaid">Unpaid</span>
                                @endif
                            </td>
                            <td>
                                <a href="{{ route('sales.print', $rs->id_sales) }}" target="_blank" class="btn btn-xs btn-outline-secondary" style="font-size: 11px; padding: 2px 8px;">
                                    <i class="fa-solid fa-print"></i> Print
                                </a>
                            </td>
                        </tr>
                    @empty
                        <tr>
                            <td colspan="8" class="text-center text-muted py-3">No sales records found.</td>
                        </tr>
                    @endforelse
                </tbody>
            </table>
        </div>
    </div>

</div>
@endsection

@push('scripts')
    <script>
        $(function() {
            var salElem = $('#flotChart-sales-trend');
            if (salElem.length && $.plot) {
                var d1 = [[0, 5], [1, 12], [2, 8], [3, 15], [4, 10], [5, {{ max(1, $sales_today_count * 5) }}]];
                var d2 = [[0, 3], [1, 8], [2, 6], [3, 11], [4, 7], [5, {{ max(1, $today_bori > 0 ? 8 : 2) }}]];

                $.plot(salElem, [
                    { data: d1, color: '#00beda', label: 'Invoiced Orders', lines: { show: true, fill: 0.1, lineWidth: 2 } },
                    { data: d2, color: '#10b981', label: 'Dispatched Volume', 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