@php $s = $opticalStats; @endphp
<style>
.optical-dashboard {
    background: linear-gradient(180deg, #f0f4f8 0%, #e8eef3 100%);
    min-height: calc(100vh - 120px);
}
.optical-dashboard .dash-header {
    background: linear-gradient(135deg, #1a2332 0%, #2c3e50 50%, #17a2b8 100%);
    border-radius: 12px;
    color: #fff;
    padding: 1.5rem 2rem;
    margin-bottom: 1.5rem;
    box-shadow: 0 8px 24px rgba(26, 35, 50, 0.2);
}
.optical-dashboard .dash-header h4 {
    color: #fff;
    margin-bottom: 0.25rem;
    font-weight: 700;
}
.optical-dashboard .dash-header .sub {
    opacity: 0.85;
    font-size: 0.95rem;
}
.optical-dashboard .stat-card {
    border: none;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 16px rgba(0,0,0,0.08);
    transition: transform 0.2s, box-shadow 0.2s;
    height: 100%;
    cursor: pointer;
}
.optical-dashboard .stat-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 24px rgba(0,0,0,0.12);
}
.optical-dashboard .stat-card:focus {
    outline: 2px solid rgba(255,255,255,0.6);
    outline-offset: 2px;
}
.optical-dashboard .stat-card .card-body {
    padding: 1.25rem;
    color: #fff;
    position: relative;
}
.optical-dashboard .stat-card .stat-icon {
    position: absolute;
    right: 1rem;
    top: 50%;
    transform: translateY(-50%);
    font-size: 2.5rem;
    opacity: 0.25;
}
.optical-dashboard .stat-card .stat-label {
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    opacity: 0.9;
    margin-bottom: 0.35rem;
}
.optical-dashboard .stat-card .stat-value {
    font-size: 1.75rem;
    font-weight: 700;
    line-height: 1.2;
}
.optical-dashboard .stat-card .stat-sub {
    font-size: 0.78rem;
    opacity: 0.85;
    margin-top: 0.35rem;
}
.optical-dashboard .bg-sale { background: linear-gradient(135deg, #e74c3c, #c0392b); }
.optical-dashboard .bg-collection { background: linear-gradient(135deg, #17a2b8, #138496); }
.optical-dashboard .bg-pending { background: linear-gradient(135deg, #f39c12, #e67e22); }
.optical-dashboard .bg-outstanding { background: linear-gradient(135deg, #8e44ad, #6c3483); }
.optical-dashboard .bg-month { background: linear-gradient(135deg, #3498db, #2980b9); }
.optical-dashboard .bg-total { background: linear-gradient(135deg, #2ecc71, #27ae60); }
.optical-dashboard .bg-completed { background: linear-gradient(135deg, #1abc9c, #16a085); }
.optical-dashboard .bg-receipt { background: linear-gradient(135deg, #34495e, #2c3e50); }
.optical-dashboard .bg-cash { background: linear-gradient(135deg, #27ae60, #1e8449); }
.optical-dashboard .bg-online { background: linear-gradient(135deg, #3498db, #2980b9); }
.optical-dashboard .panel-card {
    border: none;
    border-radius: 12px;
    box-shadow: 0 2px 12px rgba(0,0,0,0.06);
    height: 100%;
}
.optical-dashboard .panel-card .card-header {
    background: #fff;
    border-bottom: 1px solid #eef1f4;
    font-weight: 600;
    padding: 0.85rem 1.25rem;
    border-radius: 12px 12px 0 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.optical-dashboard .panel-card .card-header i {
    color: #17a2b8;
    margin-right: 0.5rem;
}
.optical-dashboard .panel-card .card-header .view-all {
    font-size: 0.75rem;
    color: #17a2b8;
    cursor: pointer;
    text-decoration: none;
    font-weight: 500;
}
.optical-dashboard .panel-card .card-header .view-all:hover {
    text-decoration: underline;
}
.optical-dashboard .panel-card .table {
    margin-bottom: 0;
    font-size: 0.875rem;
}
.optical-dashboard .panel-card .table th {
    border-top: none;
    font-weight: 600;
    color: #6c757d;
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    white-space: nowrap;
}
.optical-dashboard .panel-card .table td {
    vertical-align: middle;
}
.optical-dashboard .quick-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}
.optical-dashboard .quick-actions .btn {
    border-radius: 8px;
    font-size: 0.85rem;
    font-weight: 500;
    padding: 0.45rem 1rem;
}
.optical-dashboard .dash-header .quick-actions .btn-light {
    color: #1a2332;
    background: #fff;
    border-color: #fff;
}
.optical-dashboard .dash-header .quick-actions .btn-light:hover {
    color: #1a2332;
    background: #f0f4f8;
    border-color: #f0f4f8;
}
.optical-dashboard .dash-header .quick-actions .btn-dash {
    color: #fff;
    background: rgba(255, 255, 255, 0.18);
    border: 1px solid rgba(255, 255, 255, 0.9);
}
.optical-dashboard .dash-header .quick-actions .btn-dash:hover {
    color: #1a2332;
    background: #fff;
    border-color: #fff;
}
.optical-dashboard .empty-state {
    text-align: center;
    padding: 2rem 1rem;
    color: #adb5bd;
}
.optical-dashboard .empty-state i {
    font-size: 2rem;
    margin-bottom: 0.5rem;
    display: block;
}
.optical-dashboard .amount {
    font-weight: 600;
    color: #2c3e50;
}
.optical-dashboard .badge-soft {
    font-size: 0.7rem;
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
}
.optical-dashboard .badge-soft-success { background: #d4edda; color: #155724; }
.optical-dashboard .badge-soft-warning { background: #fff3cd; color: #856404; }
.optical-dashboard .badge-soft-info { background: #d1ecf1; color: #0c5460; }
.optical-dashboard .panel-card .card-header .badge {
    font-size: 0.75rem;
    font-weight: 600;
}
.optical-dashboard .chart-wrap {
    position: relative;
    height: 300px;
}
.optical-dashboard .chart-wrap-sm {
    position: relative;
    height: 300px;
}
</style>

<div class="optical-dashboard px-3 pb-3">
    <div class="dash-header d-flex flex-wrap justify-content-between align-items-center">
        <div>
            <h4 class="mb-0"><i class="fas fa-glasses mr-2"></i>Vision Optical Dashboard</h4>
            <div class="sub">{{ $s['todayFormatted'] ?? date('d M Y, l') }}</div>
        </div>
        <div class="quick-actions mt-2 mt-md-0">
            <button type="button" class="btn btn-light btn-sm" onclick="openSaleBill()"><i class="fas fa-plus mr-1"></i> New Sale Bill</button>
            <button type="button" class="btn btn-dash btn-sm" onclick="openNewWindow('makeOrder','600','1300','20','40','20','40')"><i class="fas fa-clipboard-list mr-1"></i> Make Order</button>
            <button type="button" class="btn btn-dash btn-sm" onclick="openNewWindow('completedOrder','600','1300','20','40','20','40')"><i class="fas fa-check-circle mr-1"></i> Complete Order</button>
            <button type="button" class="btn btn-dash btn-sm" onclick="openNewWindow('deliveryOrders','600','1300','20','40','20','40')"><i class="fas fa-truck mr-1"></i> Spect Ready For Deliver</button>
        </div>
    </div>

    @if($showFullDashboard ?? false)
@php
    $today = $s['today'];
    $monthStart = $s['monthStart'];
    $wideFrom = '2020-01-01';
    $isOpticalAdmin = isOpticalAdminUserType();
    $isOpticalStaff = isOpticalStaffUserType();
    $statCol = $isOpticalAdmin ? 'col-xl-3 col-md-6 mb-3' : 'col-xl-4 col-md-6 mb-3';
    $statColWide = $isOpticalAdmin ? 'col-xl-3 col-md-6 mb-3' : 'col-xl-6 col-md-6 mb-3';
    $staffStatCol = 'col-xl col-lg col-md-4 col-sm-6 mb-3';
    $opticalDashFrom = $s['opticalDashFromDate'] ?? opticalDashboardFromDate();
    $opticalDashFromLabel = date('d M Y', strtotime($opticalDashFrom));
@endphp

    @if($isOpticalStaff)
    {{-- Optical staff: summary cards only --}}
    <div class="row mb-4">
        <div class="{{ $staffStatCol }}">
            <div class="card stat-card bg-sale" tabindex="0" role="link"
                onclick="openOpticalDashPage('opticalSaleReport', {FromDate: '{{ $today }}', ToDate: '{{ $today }}'})"
                onkeydown="if(event.key==='Enter'){openOpticalDashPage('opticalSaleReport', {FromDate: '{{ $today }}', ToDate: '{{ $today }}'})}">
                <div class="card-body">
                    <i class="fas fa-shopping-cart stat-icon"></i>
                    <div class="stat-label">Today's Orders</div>
                    <div class="stat-value">{{ number_format($s['todayOrderCount']) }}</div>
                    <div class="stat-sub">&#8377;{{ number_format($s['todayOrderAmount'], 0) }} bill amount · Click to view</div>
                </div>
            </div>
        </div>
        <div class="{{ $staffStatCol }}">
            <div class="card stat-card bg-pending" tabindex="0" role="link"
                onclick="openOpticalDashPage('makeOrder', {FromDate: '{{ $today }}', ToDate: '{{ $today }}'})"
                onkeydown="if(event.key==='Enter'){openOpticalDashPage('makeOrder', {FromDate: '{{ $today }}', ToDate: '{{ $today }}'})}">
                <div class="card-body">
                    <i class="fas fa-truck stat-icon"></i>
                    <div class="stat-label">Today's Delivery</div>
                    <div class="stat-value">{{ number_format($s['todayDeliveryCount']) }}</div>
                    <div class="stat-sub">&#8377;{{ number_format($s['todayDeliveryAmount'], 0) }} scheduled today · Click to view</div>
                </div>
            </div>
        </div>
        <div class="{{ $staffStatCol }}">
            <div class="card stat-card bg-collection" tabindex="0" role="link"
                onclick="openOpticalDashPage('opticalCollectionReport', {FromDate: '{{ $today }}', ToDate: '{{ $today }}'})"
                onkeydown="if(event.key==='Enter'){openOpticalDashPage('opticalCollectionReport', {FromDate: '{{ $today }}', ToDate: '{{ $today }}'})}">
                <div class="card-body">
                    <i class="fas fa-hand-holding-usd stat-icon"></i>
                    <div class="stat-label">Today's Collection</div>
                    <div class="stat-value">&#8377;{{ number_format($s['todayCollection'], 0) }}</div>
                    <div class="stat-sub">Advance + receipts · Click to view</div>
                </div>
            </div>
        </div>
        <div class="{{ $staffStatCol }}">
            <div class="card stat-card bg-cash" tabindex="0" role="link"
                onclick="openOpticalDashPage('opticalCollectionReport', {FromDate: '{{ $today }}', ToDate: '{{ $today }}'})"
                onkeydown="if(event.key==='Enter'){openOpticalDashPage('opticalCollectionReport', {FromDate: '{{ $today }}', ToDate: '{{ $today }}'})}">
                <div class="card-body">
                    <i class="fas fa-money-bill-wave stat-icon"></i>
                    <div class="stat-label">Cash Payment</div>
                    <div class="stat-value">&#8377;{{ number_format($s['todayCashPayment'], 0) }}</div>
                    <div class="stat-sub">{{ number_format($s['todayCashPaymentCount']) }} payment(s) today · Click to view</div>
                </div>
            </div>
        </div>
        <div class="{{ $staffStatCol }}">
            <div class="card stat-card bg-online" tabindex="0" role="link"
                onclick="openOpticalDashPage('opticalCollectionReport', {FromDate: '{{ $today }}', ToDate: '{{ $today }}'})"
                onkeydown="if(event.key==='Enter'){openOpticalDashPage('opticalCollectionReport', {FromDate: '{{ $today }}', ToDate: '{{ $today }}'})}">
                <div class="card-body">
                    <i class="fas fa-credit-card stat-icon"></i>
                    <div class="stat-label">Online Payment</div>
                    <div class="stat-value">&#8377;{{ number_format($s['todayOnlinePayment'], 0) }}</div>
                    <div class="stat-sub">{{ number_format($s['todayOnlinePaymentCount']) }} card/mobile payment(s) · Click to view</div>
                </div>
            </div>
        </div>
    </div>

    <div class="row mb-4">
        <div class="{{ $staffStatCol }}">
            <div class="card stat-card bg-pending" tabindex="0" role="link"
                onclick="openOpticalDashPage('makeOrder', {FromDate: '{{ $opticalDashFrom }}', ToDate: '{{ $today }}', listType: 'pending'})"
                onkeydown="if(event.key==='Enter'){openOpticalDashPage('makeOrder', {FromDate: '{{ $opticalDashFrom }}', ToDate: '{{ $today }}', listType: 'pending'})}">
                <div class="card-body">
                    <i class="fas fa-clipboard-list stat-icon"></i>
                    <div class="stat-label">Pending Make Order</div>
                    <div class="stat-value">{{ number_format($s['todayPendingMakeOrderCount']) }}</div>
                    <div class="stat-sub">Waiting from {{ $opticalDashFromLabel }} · Click to view</div>
                </div>
            </div>
        </div>
        <div class="{{ $staffStatCol }}">
            <div class="card stat-card bg-month" tabindex="0" role="link"
                onclick="openOpticalDashPage('makeOrder', {FromDate: '{{ $opticalDashFrom }}', ToDate: '{{ $today }}', listType: 'done'})"
                onkeydown="if(event.key==='Enter'){openOpticalDashPage('makeOrder', {FromDate: '{{ $opticalDashFrom }}', ToDate: '{{ $today }}', listType: 'done'})}">
                <div class="card-body">
                    <i class="fas fa-clipboard-check stat-icon"></i>
                    <div class="stat-label">Make Order Done</div>
                    <div class="stat-value">{{ number_format($s['todayMakeOrderDoneCount']) }}</div>
                    <div class="stat-sub">Orders made from {{ $opticalDashFromLabel }} · Click to view</div>
                </div>
            </div>
        </div>
        <div class="{{ $staffStatCol }}">
            <div class="card stat-card bg-receipt" tabindex="0" role="link"
                onclick="openOpticalDashPage('completedOrder', {FromDate: '{{ $opticalDashFrom }}', ToDate: '{{ $today }}', listType: 'pending'})"
                onkeydown="if(event.key==='Enter'){openOpticalDashPage('completedOrder', {FromDate: '{{ $opticalDashFrom }}', ToDate: '{{ $today }}', listType: 'pending'})}">
                <div class="card-body">
                    <i class="fas fa-hourglass-half stat-icon"></i>
                    <div class="stat-label">Pending Work Completed</div>
                    <div class="stat-value">{{ number_format($s['todayPendingWorkCompletedCount']) }}</div>
                    <div class="stat-sub">Work pending from {{ $opticalDashFromLabel }} · Click to view</div>
                </div>
            </div>
        </div>
        <div class="{{ $staffStatCol }}">
            <div class="card stat-card bg-completed" tabindex="0" role="link"
                onclick="openOpticalDashPage('completedOrder', {FromDate: '{{ $opticalDashFrom }}', ToDate: '{{ $today }}', listType: 'done'})"
                onkeydown="if(event.key==='Enter'){openOpticalDashPage('completedOrder', {FromDate: '{{ $opticalDashFrom }}', ToDate: '{{ $today }}', listType: 'done'})}">
                <div class="card-body">
                    <i class="fas fa-check-double stat-icon"></i>
                    <div class="stat-label">Work Completed</div>
                    <div class="stat-value">{{ number_format($s['workCompletedFromDate']) }}</div>
                    <div class="stat-sub">From {{ $opticalDashFromLabel }} onwards · Click to view</div>
                </div>
            </div>
        </div>
    </div>
    @else

    {{-- Primary stats --}}
    <div class="row mb-4">
        <div class="{{ $statCol }}">
            <div class="card stat-card bg-sale" tabindex="0" role="link"
                onclick="openOpticalDashPage('opticalSaleReport', {FromDate: '{{ $today }}', ToDate: '{{ $today }}'})"
                onkeydown="if(event.key==='Enter'){openOpticalDashPage('opticalSaleReport', {FromDate: '{{ $today }}', ToDate: '{{ $today }}'})}">
                <div class="card-body">
                    <i class="fas fa-file-invoice-dollar stat-icon"></i>
                    <div class="stat-label">Today's Sales</div>
                    <div class="stat-value">{{ number_format($s['todaySaleCount']) }}</div>
                    <div class="stat-sub">&#8377;{{ number_format($s['todaySaleAmount'], 2) }} bill amount · Click to view</div>
                </div>
            </div>
        </div>
        <div class="{{ $statCol }}">
            <div class="card stat-card bg-collection" tabindex="0" role="link"
                onclick="openOpticalDashPage('opticalCollectionReport', {FromDate: '{{ $today }}', ToDate: '{{ $today }}'})"
                onkeydown="if(event.key==='Enter'){openOpticalDashPage('opticalCollectionReport', {FromDate: '{{ $today }}', ToDate: '{{ $today }}'})}">
                <div class="card-body">
                    <i class="fas fa-hand-holding-usd stat-icon"></i>
                    <div class="stat-label">Today's Collection</div>
                    <div class="stat-value">&#8377;{{ number_format($s['todayCollection'], 0) }}</div>
                    <div class="stat-sub">Advance &#8377;{{ number_format($s['todayAdvance'], 0) }} + Receipt &#8377;{{ number_format($s['todayReceiptAmount'], 0) }} · Click to view</div>
                </div>
            </div>
        </div>
        <div class="{{ $statCol }}">
            <div class="card stat-card bg-pending" tabindex="0" role="link"
                onclick="openOpticalDashPage('makeOrder', {FromDate: '{{ $wideFrom }}', ToDate: '{{ $today }}'})"
                onkeydown="if(event.key==='Enter'){openOpticalDashPage('makeOrder', {FromDate: '{{ $wideFrom }}', ToDate: '{{ $today }}'})}">
                <div class="card-body">
                    <i class="fas fa-clipboard-list stat-icon"></i>
                    <div class="stat-label">Pending Make Orders</div>
                    <div class="stat-value">{{ number_format($s['pendingMakeOrderCount']) }}</div>
                    <div class="stat-sub">Orders waiting to be made · Click to view</div>
                </div>
            </div>
        </div>
        @if($isOpticalAdmin)
        <div class="col-xl-3 col-md-6 mb-3">
            <div class="card stat-card bg-outstanding" tabindex="0" role="link"
                onclick="openOpticalDashPage('opticalOutstandingReport', {FromDate: '{{ $today }}'})"
                onkeydown="if(event.key==='Enter'){openOpticalDashPage('opticalOutstandingReport', {FromDate: '{{ $today }}'})}">
                <div class="card-body">
                    <i class="fas fa-exclamation-circle stat-icon"></i>
                    <div class="stat-label">Outstanding Balance</div>
                    <div class="stat-value">&#8377;{{ number_format($s['outstandingAmount'], 0) }}</div>
                    <div class="stat-sub">{{ number_format($s['outstandingCount']) }} bills from Jan 2026 · Click to view</div>
                </div>
            </div>
        </div>
        @endif
        @if(!$isOpticalAdmin)
        <div class="{{ $statColWide }}">
            <div class="card stat-card bg-completed" tabindex="0" role="link"
                onclick="openOpticalDashPage('completedOrder', {FromDate: '{{ $wideFrom }}', ToDate: '{{ $today }}'})"
                onkeydown="if(event.key==='Enter'){openOpticalDashPage('completedOrder', {FromDate: '{{ $wideFrom }}', ToDate: '{{ $today }}'})}">
                <div class="card-body">
                    <i class="fas fa-check-double stat-icon"></i>
                    <div class="stat-label">Work Completed</div>
                    <div class="stat-value">{{ number_format($s['pendingPaymentCount']) }}</div>
                    <div class="stat-sub">{{ number_format($s['workCompletedToday']) }} completed today · Pending payment · Click to view</div>
                </div>
            </div>
        </div>
        <div class="{{ $statColWide }}">
            <div class="card stat-card bg-receipt" tabindex="0" role="link"
                onclick="openOpticalDashPage('opticalCollectionReport', {FromDate: '{{ $today }}', ToDate: '{{ $today }}'})"
                onkeydown="if(event.key==='Enter'){openOpticalDashPage('opticalCollectionReport', {FromDate: '{{ $today }}', ToDate: '{{ $today }}'})}">
                <div class="card-body">
                    <i class="fas fa-receipt stat-icon"></i>
                    <div class="stat-label">Today's Receipts</div>
                    <div class="stat-value">{{ number_format($s['todayReceiptCount']) }}</div>
                    <div class="stat-sub">{{ number_format($s['pendingPaymentCount']) }} ready for payment · Click to view</div>
                </div>
            </div>
        </div>
        @endif
    </div>

    @if($isOpticalAdmin)
    {{-- Secondary stats --}}
    <div class="row mb-4">
        <div class="{{ $statCol }}">
            <div class="card stat-card bg-month" tabindex="0" role="link"
                onclick="openOpticalDashPage('opticalSaleReport', {FromDate: '{{ $monthStart }}', ToDate: '{{ $today }}'})"
                onkeydown="if(event.key==='Enter'){openOpticalDashPage('opticalSaleReport', {FromDate: '{{ $monthStart }}', ToDate: '{{ $today }}'})}">
                <div class="card-body">
                    <i class="fas fa-calendar-alt stat-icon"></i>
                    <div class="stat-label">This Month Sales</div>
                    <div class="stat-value">{{ number_format($s['monthSaleCount']) }}</div>
                    <div class="stat-sub">&#8377;{{ number_format($s['monthSaleAmount'], 0) }} total amount · Click to view</div>
                </div>
            </div>
        </div>
        <div class="{{ $statCol }}">
            <div class="card stat-card bg-total" tabindex="0" role="link"
                onclick="openOpticalDashPage('opticalSaleLedger', {FromDate: '{{ $wideFrom }}', ToDate: '{{ $today }}'})"
                onkeydown="if(event.key==='Enter'){openOpticalDashPage('opticalSaleLedger', {FromDate: '{{ $wideFrom }}', ToDate: '{{ $today }}'})}">
                <div class="card-body">
                    <i class="fas fa-users stat-icon"></i>
                    <div class="stat-label">Total Sale Bills</div>
                    <div class="stat-value">{{ number_format($s['totalOpticalBills']) }}</div>
                    <div class="stat-sub">All time optical records · Click to view</div>
                </div>
            </div>
        </div>
        <div class="{{ $statCol }}">
            <div class="card stat-card bg-completed" tabindex="0" role="link"
                onclick="openOpticalDashPage('completedOrder', {FromDate: '{{ $wideFrom }}', ToDate: '{{ $today }}'})"
                onkeydown="if(event.key==='Enter'){openOpticalDashPage('completedOrder', {FromDate: '{{ $wideFrom }}', ToDate: '{{ $today }}'})}">
                <div class="card-body">
                    <i class="fas fa-check-double stat-icon"></i>
                    <div class="stat-label">Work Completed</div>
                    <div class="stat-value">{{ number_format($s['pendingPaymentCount']) }}</div>
                    <div class="stat-sub">{{ number_format($s['workCompletedToday']) }} completed today · Pending payment · Click to view</div>
                </div>
            </div>
        </div>
        <div class="{{ $statCol }}">
            <div class="card stat-card bg-receipt" tabindex="0" role="link"
                onclick="openOpticalDashPage('opticalCollectionReport', {FromDate: '{{ $today }}', ToDate: '{{ $today }}'})"
                onkeydown="if(event.key==='Enter'){openOpticalDashPage('opticalCollectionReport', {FromDate: '{{ $today }}', ToDate: '{{ $today }}'})}">
                <div class="card-body">
                    <i class="fas fa-receipt stat-icon"></i>
                    <div class="stat-label">Today's Receipts</div>
                    <div class="stat-value">{{ number_format($s['todayReceiptCount']) }}</div>
                    <div class="stat-sub">{{ number_format($s['pendingPaymentCount']) }} ready for payment · Click to view</div>
                </div>
            </div>
        </div>
    </div>
    @endif

    @if($isOpticalAdmin)
    {{-- Sales charts --}}
    <div class="row mb-4">
        <div class="col-xl-8 mb-4">
            <div class="card panel-card">
                <div class="card-header">
                    <span><i class="fas fa-chart-bar"></i> Month Wise Sale — {{ $s['monthlyChart']['year'] }}</span>
                    <span class="text-muted small">Sale amount &amp; bill count per month</span>
                </div>
                <div class="card-body">
                    <div class="chart-wrap">
                        <canvas id="monthlySaleChart"></canvas>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-xl-4 mb-4">
            <div class="card panel-card">
                <div class="card-header">
                    <span><i class="fas fa-chart-pie"></i> Quarterly Sale — {{ $s['quarterlyChart']['year'] }}</span>
                    <span class="text-muted small">Jan-Mar · Apr-Jun · Jul-Sep · Oct-Dec</span>
                </div>
                <div class="card-body">
                    <div class="chart-wrap-sm">
                        <canvas id="quarterlySaleChart"></canvas>
                    </div>
                </div>
            </div>
        </div>
    </div>
    @endif

    {{-- Data tables --}}
    <div class="row mb-4">
        <div class="col-xl-6 mb-4">
            <div class="card panel-card">
                <div class="card-header">
                    <span><i class="fas fa-shopping-cart"></i> Today's Sale Bills</span>
                    <span>
                        <span class="badge badge-primary mr-2">{{ $s['todaySaleCount'] }}</span>
                        <a class="view-all" href="javascript:void(0)"
                            onclick="openOpticalDashPage('opticalSaleReport', {FromDate: '{{ $today }}', ToDate: '{{ $today }}'})">View All</a>
                    </span>
                </div>
                <div class="card-body p-0">
                    @if($s['todaySales']->isEmpty())
                    <div class="empty-state"><i class="fas fa-inbox"></i>No sale bills today</div>
                    @else
                    <div class="table-responsive">
                        <table class="table table-hover table-sm mb-0">
                            <thead><tr>
                                <th>Bill No</th><th>Patient</th><th>Amount</th><th>Balance</th><th>Status</th>
                            </tr></thead>
                            <tbody>
                            @foreach($s['todaySales'] as $row)
                            <tr>
                                <td><strong>{{ $row->BillNo }}</strong></td>
                                <td>{{ Str::limit($row->PatientName, 22) }}</td>
                                <td class="amount">&#8377;{{ number_format($row->SubTotal, 0) }}</td>
                                <td class="amount">&#8377;{{ number_format($row->NetAmount ?? 0, 0) }}</td>
                                <td>
                                    @if(in_array($row->WorkComplete, [1, '1', 'on'], true))
                                    <span class="badge-soft badge-soft-success">Done</span>
                                    @else
                                    <span class="badge-soft badge-soft-warning">In Progress</span>
                                    @endif
                                </td>
                            </tr>
                            @endforeach
                            </tbody>
                        </table>
                    </div>
                    @endif
                </div>
            </div>
        </div>

        <div class="col-xl-6 mb-4">
            <div class="card panel-card">
                <div class="card-header">
                    <span><i class="fas fa-clipboard-list"></i> Pending Make Orders</span>
                    <span>
                        <span class="badge badge-warning mr-2">{{ $s['pendingMakeOrderCount'] }}</span>
                        <a class="view-all" href="javascript:void(0)"
                            onclick="openOpticalDashPage('makeOrder', {FromDate: '{{ $wideFrom }}', ToDate: '{{ $today }}'})">View All</a>
                    </span>
                </div>
                <div class="card-body p-0">
                    @if($s['pendingMakeOrders']->isEmpty())
                    <div class="empty-state"><i class="fas fa-check"></i>No pending make orders</div>
                    @else
                    <div class="table-responsive">
                        <table class="table table-hover table-sm mb-0">
                            <thead><tr>
                                <th>Bill No</th><th>Patient</th><th>Delivery</th><th>Amount</th>
                            </tr></thead>
                            <tbody>
                            @foreach($s['pendingMakeOrders'] as $row)
                            <tr>
                                <td><strong>{{ $row->BillNo }}</strong></td>
                                <td>{{ Str::limit($row->PatientName, 22) }}</td>
                                <td>{{ $row->DeliveryDate ? date('d/m/Y', strtotime($row->DeliveryDate)) : '—' }}</td>
                                <td class="amount">&#8377;{{ number_format($row->SubTotal, 0) }}</td>
                            </tr>
                            @endforeach
                            </tbody>
                        </table>
                    </div>
                    @endif
                </div>
            </div>
        </div>
    </div>

    <div class="row mb-4">
        <div class="{{ $isOpticalAdmin ? 'col-xl-4' : 'col-xl-6' }} mb-4">
            <div class="card panel-card">
                <div class="card-header">
                    <span><i class="fas fa-money-bill-wave"></i> Pending Payment</span>
                    <span>
                        <span class="badge badge-danger mr-2">{{ $s['pendingPaymentCount'] }}</span>
                        <a class="view-all" href="javascript:void(0)"
                            onclick="openOpticalDashPage('completedOrder', {FromDate: '{{ $wideFrom }}', ToDate: '{{ $today }}'})">View All</a>
                    </span>
                </div>
                <div class="card-body p-0">
                    @if($s['pendingPayments']->isEmpty())
                    <div class="empty-state"><i class="fas fa-smile"></i>All payments collected</div>
                    @else
                    <div class="table-responsive">
                        <table class="table table-hover table-sm mb-0">
                            <thead><tr>
                                <th>Bill No</th><th>Patient</th><th>Balance</th>
                            </tr></thead>
                            <tbody>
                            @foreach($s['pendingPayments'] as $row)
                            <tr>
                                <td><strong>{{ $row->BillNo }}</strong></td>
                                <td>{{ Str::limit($row->PatientName, 18) }}</td>
                                <td>
                                    <span class="amount text-danger">&#8377;{{ number_format($row->NetAmount, 0) }}</span>
                                    <button type="button" class="btn btn-primary btn-xs btn-sm ml-1 py-0 px-2"
                                        onclick="openOpticalReceiptForBill('{{ $row->BillNo }}')">Pay</button>
                                </td>
                            </tr>
                            @endforeach
                            </tbody>
                        </table>
                    </div>
                    @endif
                </div>
            </div>
        </div>

        <div class="{{ $isOpticalAdmin ? 'col-xl-4' : 'col-xl-6' }} mb-4">
            <div class="card panel-card">
                <div class="card-header">
                    <span><i class="fas fa-receipt"></i> Today's Receipts</span>
                    <span>
                        <span class="badge badge-info mr-2">{{ $s['todayReceiptCount'] }}</span>
                        <a class="view-all" href="javascript:void(0)"
                            onclick="openOpticalDashPage('opticalCollectionReport', {FromDate: '{{ $today }}', ToDate: '{{ $today }}'})">View All</a>
                    </span>
                </div>
                <div class="card-body p-0">
                    @if($s['todayReceipts']->isEmpty())
                    <div class="empty-state"><i class="fas fa-inbox"></i>No receipts today</div>
                    @else
                    <div class="table-responsive">
                        <table class="table table-hover table-sm mb-0">
                            <thead><tr>
                                <th>Bill No</th><th>Patient</th><th>Paid</th><th>Mode</th>
                            </tr></thead>
                            <tbody>
                            @foreach($s['todayReceipts'] as $row)
                            <tr>
                                <td><strong>{{ $row->BillNo }}</strong></td>
                                <td>{{ Str::limit($row->PatientName, 16) }}</td>
                                <td class="amount">&#8377;{{ number_format($row->PaidAmount, 0) }}</td>
                                <td><span class="badge-soft badge-soft-info">{{ $row->PayMode }}</span></td>
                            </tr>
                            @endforeach
                            </tbody>
                        </table>
                    </div>
                    @endif
                </div>
            </div>
        </div>

        @if($isOpticalAdmin)
        <div class="col-xl-4 mb-4">
            <div class="card panel-card">
                <div class="card-header">
                    <span><i class="fas fa-hourglass-half"></i> Outstanding Bills</span>
                    <span>
                        <span class="badge badge-secondary mr-2">{{ $s['outstandingCount'] }}</span>
                        <a class="view-all" href="javascript:void(0)"
                            onclick="openOpticalDashPage('opticalOutstandingReport', {FromDate: '{{ $today }}'})">View All</a>
                    </span>
                </div>
                <div class="card-body p-0">
                    @if($s['outstandingBills']->isEmpty())
                    <div class="empty-state"><i class="fas fa-check"></i>No outstanding bills</div>
                    @else
                    <div class="table-responsive">
                        <table class="table table-hover table-sm mb-0">
                            <thead><tr>
                                <th>Bill No</th><th>Patient</th><th>Balance</th>
                            </tr></thead>
                            <tbody>
                            @foreach($s['outstandingBills'] as $row)
                            <tr>
                                <td><strong>{{ $row->BillNo }}</strong></td>
                                <td>{{ Str::limit($row->PatientName, 18) }}</td>
                                <td class="amount text-danger">&#8377;{{ number_format($row->NetAmount, 0) }}</td>
                            </tr>
                            @endforeach
                            </tbody>
                        </table>
                    </div>
                    @endif
                </div>
            </div>
        </div>
        @endif
    </div>
    @endif
    @endif
</div>

@if($showFullDashboard ?? false)
<script src="{{ url('assets/libs/chartjs/chartjs.js') }}?v={{ filemtime(public_path('assets/libs/chartjs/chartjs.js')) }}"></script>
<script>
function formatRupee(value) {
    return '\u20B9' + Number(value).toLocaleString('en-IN', { maximumFractionDigits: 0 });
}

function openOpticalDashPage(page, params) {
    var qs = '';
    if (params && typeof params === 'object') {
        qs = '?' + new URLSearchParams(params).toString();
    }
    window.open(
        '/{{ projectUrl() }}' + page + qs,
        page,
        'height=600,width=1300,left=20,top=40,right=40,bottom=40,resizable=no,scrollbars=no,toolbar=no,menubar=no,location=no,directories=no,status=no'
    );
}

function openOpticalReceiptForBill(billNo) {
    window.open(
        '/{{ projectUrl() }}opticalReceipt?BillNo=' + encodeURIComponent(billNo),
        'opticalReceipt',
        'height=600,width=1300,left=20,top=40,right=40,bottom=40,resizable=no,scrollbars=no,toolbar=no,menubar=no,location=no,directories=no,status=no'
    );
}

$(document).ready(function() {
    if (typeof Chart === 'undefined' || !@json($isOpticalAdmin)) {
        return;
    }

    var monthlyLabels = @json($s['monthlyChart']['labels']);
    var monthlyAmounts = @json($s['monthlyChart']['amounts']);
    var monthlyCounts = @json($s['monthlyChart']['counts']);
    var quarterlyLabels = @json($s['quarterlyChart']['labels']);
    var quarterlyAmounts = @json($s['quarterlyChart']['amounts']);
    var quarterlyCounts = @json($s['quarterlyChart']['counts']);

    var monthlyCtx = document.getElementById('monthlySaleChart');
    if (monthlyCtx) {
        new Chart(monthlyCtx.getContext('2d'), {
            type: 'bar',
            data: {
                labels: monthlyLabels,
                datasets: [{
                    label: 'Sale Amount',
                    data: monthlyAmounts,
                    backgroundColor: 'rgba(23, 162, 184, 0.75)',
                    borderColor: '#138496',
                    borderWidth: 1,
                    yAxisID: 'y-axis-amount'
                }, {
                    label: 'Bill Count',
                    type: 'line',
                    data: monthlyCounts,
                    borderColor: '#e74c3c',
                    backgroundColor: 'rgba(231, 76, 60, 0.1)',
                    borderWidth: 2,
                    fill: false,
                    pointRadius: 4,
                    yAxisID: 'y-axis-count'
                }]
            },
            options: {
                responsive: true,
                maintainAspectRatio: false,
                legend: { position: 'top' },
                tooltips: {
                    mode: 'index',
                    intersect: false,
                    callbacks: {
                        label: function(tooltipItem, data) {
                            var label = data.datasets[tooltipItem.datasetIndex].label || '';
                            var val = tooltipItem.yLabel;
                            if (tooltipItem.datasetIndex === 0) {
                                return label + ': ' + formatRupee(val);
                            }
                            return label + ': ' + val;
                        }
                    }
                },
                scales: {
                    yAxes: [{
                        id: 'y-axis-amount',
                        position: 'left',
                        ticks: {
                            beginAtZero: true,
                            callback: function(value) { return formatRupee(value); }
                        },
                        scaleLabel: { display: true, labelString: 'Sale Amount' }
                    }, {
                        id: 'y-axis-count',
                        position: 'right',
                        ticks: { beginAtZero: true, stepSize: 1 },
                        gridLines: { drawOnChartArea: false },
                        scaleLabel: { display: true, labelString: 'Bills' }
                    }]
                }
            }
        });
    }

    var quarterlyCtx = document.getElementById('quarterlySaleChart');
    if (quarterlyCtx) {
        new Chart(quarterlyCtx.getContext('2d'), {
            type: 'bar',
            data: {
                labels: quarterlyLabels,
                datasets: [{
                    label: 'Sale Amount',
                    data: quarterlyAmounts,
                    backgroundColor: [
                        'rgba(52, 152, 219, 0.8)',
                        'rgba(46, 204, 113, 0.8)',
                        'rgba(241, 196, 15, 0.8)',
                        'rgba(155, 89, 182, 0.8)'
                    ],
                    borderColor: ['#2980b9', '#27ae60', '#f39c12', '#8e44ad'],
                    borderWidth: 1
                }]
            },
            options: {
                responsive: true,
                maintainAspectRatio: false,
                legend: { display: false },
                tooltips: {
                    callbacks: {
                        afterLabel: function(tooltipItem) {
                            return 'Bills: ' + quarterlyCounts[tooltipItem.index];
                        },
                        label: function(tooltipItem) {
                            return 'Sale: ' + formatRupee(tooltipItem.yLabel);
                        }
                    }
                },
                scales: {
                    yAxes: [{
                        ticks: {
                            beginAtZero: true,
                            callback: function(value) { return formatRupee(value); }
                        }
                    }]
                }
            }
        });
    }
});
</script>
@endif