@extends('layouts.admin.app')

@section('content')
    <style>
        .admin-dashboard { font-size: 14px; font-weight: 700; }
        .admin-dashboard :is(div, span, p, a, small, strong, li, td, th, button, label, input, select, h1, h2, h3, h4, h5, h6) {
            font-weight: 700 !important;
        }
        .admin-dashboard :is(div, span, p, a, li, td, th, button, label, input, select, strong) {
            font-size: 14px;
        }
        .admin-dashboard :is(small, .small, .eyebrow, .metric-note, .chart-subtitle, .widget-subtitle, .chart-legend, .chart-legend span) {
            font-size: 12px !important;
        }
        .admin-dashboard :is(.chart-title, .widget-title) { font-size: 18px; }
        .admin-dashboard .dashboard-page-header h2 { font-size: 22px; }
        .admin-dashboard .metric {
            font-size: clamp(1.1rem, 1.7vw, 1.5rem) !important;
            font-weight: 800 !important;
            line-height: 1.2;
        }
        .admin-dashboard .package-expiry-box {
            display: flex;
            align-items: center;
            gap: 10px;
            white-space: nowrap;
            margin-left: auto;
            text-align: right;
            padding: 10px 14px;
            border: 1px solid #d9e2f1;
            border-radius: 12px;
            background: #fff;
        }
        .admin-dashboard .package-expiry-box .package-expiry-date { font-size: 15px; }
        .admin-dashboard .stat-card__content { min-width: 0; }
        .admin-dashboard .metric { overflow-wrap: anywhere; }
        {{-- Slider styles disabled temporarily.
        .admin-dashboard .dashboard-slider { overflow: hidden; background: #f1f5f9; }
        .admin-dashboard .dashboard-slider-visual {
            position: relative;
            isolation: isolate;
            overflow: hidden;
        }
        .admin-dashboard .dashboard-slider-backdrop {
            position: absolute;
            inset: 0;
            width: 100%;
            height: 100%;
            object-fit: cover;
            transform: scale(1.12);
            filter: blur(18px) saturate(0.85);
            pointer-events: none;
        }
        .admin-dashboard .dashboard-slider-visual::after {
            content: '';
            position: absolute;
            inset: 0;
            z-index: 1;
            background: rgba(255, 255, 255, 0.38);
            pointer-events: none;
        }
        .admin-dashboard .dashboard-slider-image {
            position: relative;
            z-index: 2;
            display: block;
            width: 100%;
            height: clamp(230px, 32vw, 420px);
            object-fit: contain;
        }
        .admin-dashboard .dashboard-slider .carousel-control-prev,
        .admin-dashboard .dashboard-slider .carousel-control-next { width: 12%; }
        .admin-dashboard .dashboard-slider .carousel-control-prev-icon,
        .admin-dashboard .dashboard-slider .carousel-control-next-icon { background-color: #111827; border-radius: 50%; padding: 18px; background-size: 60%; }
        .admin-dashboard .dashboard-slider .carousel-indicators button { background-color: #111827; }
        .admin-dashboard .dashboard-feature-row {
            display: grid;
            grid-template-columns: minmax(0, 1fr) 320px;
            gap: 20px;
            align-items: start;
        }
        .admin-dashboard .dashboard-feature-row > .dashboard-slider {
            min-width: 0;
            position: sticky;
            top: 20px;
        }
        --}}
        .admin-dashboard .dashboard-top-stats {
            display: grid;
            grid-template-columns: minmax(0, 1fr);
            gap: 20px;
            min-width: 0;
            max-height: 500px;
            overflow-y: auto;
            align-content: start;
            padding-right: 6px;
            scrollbar-width: thin;
            scrollbar-color: #cbd5e1 transparent;
        }
        .admin-dashboard .dashboard-top-stats .dashboard-card__body { padding: 14px 16px; }
        .admin-dashboard .dashboard-top-stats .stat-card { min-height: 0; content-visibility: visible; }
        .admin-dashboard .dashboard-top-stats .stat-card__row { gap: 12px; align-items: center; }
        .admin-dashboard .dashboard-top-stats .eyebrow {
            margin-bottom: 5px;
            color: #000;
            font-size: 14px !important;
            line-height: 1.4;
        }
        .admin-dashboard .dashboard-top-stats .metric { font-size: 18px !important; }
        .admin-dashboard .dashboard-top-stats .stat-icon { width: 40px; height: 40px; border-radius: 12px; }
        .admin-dashboard .dashboard-reports-grid {
            display: grid;
            grid-template-columns: repeat(3, minmax(0, 1fr));
            gap: 20px;
        }
        .admin-dashboard .dashboard-reports-grid > .dashboard-card { min-width: 0; }
        .admin-dashboard .dashboard-overview-grid {
            display: grid;
            grid-template-columns: minmax(0, 7fr) minmax(280px, 3fr);
            gap: 20px;
            align-items: start;
            margin-bottom: 24px;
        }
        .admin-dashboard .dashboard-overview-grid > * { min-width: 0; }
        .admin-dashboard .month-chart-card { background: linear-gradient(145deg, #fff 55%, #f0f5ff); }
        .admin-dashboard .month-chart-header { display: flex; justify-content: space-between; gap: 16px; align-items: flex-start; }
        .admin-dashboard .month-chart-badge { padding: 7px 12px; background: #eef2ff; color: #4f46e5; border-radius: 30px; white-space: nowrap; font-size: 12px; }
        .admin-dashboard .month-chart-legend { display: flex; flex-wrap: nowrap; gap: 8px; margin: 20px 0 12px; overflow-x: auto; }
        .admin-dashboard .month-chart-legend button { display: flex; flex-shrink: 0; white-space: nowrap; align-items: center; gap: 7px; background: #fff; border: 1px solid #e2e8f0; padding: 6px 11px; border-radius: 9px; font-size: 12px; }
        .admin-dashboard .month-chart-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
        .admin-dashboard .month-chart-legend button[aria-pressed="false"] { opacity: .45; }
        .admin-dashboard .month-chart-svg { width: 100%; height: auto; display: block; overflow: visible; }
        .admin-dashboard .month-chart-svg text { font-family: inherit; font-size: 11px; fill: #94a3b8; }
        .admin-dashboard .month-chart-hit { cursor: crosshair; outline: none; }
        .admin-dashboard .month-chart-hit:hover, .admin-dashboard .month-chart-hit:focus { fill: #6366f110; }
        .admin-dashboard .month-chart-detail { display: flex; flex-wrap: wrap; gap: 8px 18px; padding: 12px; border-radius: 12px; background: #f1f5f9; margin-top: 12px; }
        .admin-dashboard .month-chart-detail span { font-size: 12px; }
        .admin-dashboard .low-stock-card .info-list { max-height: 330px; overflow-y: auto; }
        .admin-dashboard .low-stock-card .info-list__meta { min-width: 0; overflow-wrap: anywhere; }
        @media (max-width: 991.98px) {
            .admin-dashboard .dashboard-reports-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
            .admin-dashboard .dashboard-overview-grid { grid-template-columns: minmax(0, 1fr); }
            .admin-dashboard .dashboard-top-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); max-height: none; overflow: visible; padding-right: 0; }
        }
        @media (max-width: 575.98px) {
            .admin-dashboard .dashboard-top-stats { grid-template-columns: minmax(0, 1fr); }
            .admin-dashboard .dashboard-reports-grid { grid-template-columns: minmax(0, 1fr); }
            .admin-dashboard .month-chart-header { flex-wrap: wrap; }
            .admin-dashboard .month-chart-legend { gap: 4px; }
            .admin-dashboard .month-chart-legend button { gap: 4px; padding: 6px; font-size: 11px; }
        }
    </style>
    <div class="admin-dashboard">
    <div class="dashboard-page-header mb-3 d-flex align-items-start justify-content-between flex-wrap gap-3">
        <div>
            <h2 class="h4 mb-1">{{ __('Dashboard') }}</h2>
            <p class="text-muted small mb-0">{{ __('Overview of your business') }}</p>
        </div>
        <div class="package-expiry-box">
            <div class="text-muted small">{{ __('Package Expiry') }}</div>
            <div class="package-expiry-date {{ $packageExpired ? 'text-danger' : 'text-primary' }}">
                @if($packageExpiry)
                    {{ $packageExpiry->format('d M Y') }}
                    @if($packageExpired)
                        <span class="badge bg-danger ms-1">{{ __('Expired') }}</span>
                    @endif
                @else
                    {{ $dashboardPackage ? __('Expiry not set') : __('No package assigned') }}
                @endif
            </div>
        </div>
    </div>

    <div class="dashboard-overview-grid mb-4">
        {{-- Dashboard slider disabled temporarily.
        <section class="dashboard-card dashboard-slider" aria-label="{{ __('Dashboard image slider') }}">
            @if($sliderImages->isNotEmpty())
                <div id="dashboardImageSlider" class="carousel slide" data-bs-ride="{{ $sliderImages->count() > 1 ? 'carousel' : 'false' }}" data-bs-interval="3000" data-bs-pause="hover" data-bs-touch="true">
                    <div class="carousel-inner">
                        @foreach($sliderImages as $image)
                            @php($slideSrc = route('admin.slider-images.show', ['imageId' => $image->id]))
                            <div class="carousel-item {{ $loop->first ? 'active' : '' }}">
                                <div class="dashboard-slider-visual">
                                    <img src="{{ $slideSrc }}" class="dashboard-slider-backdrop" alt="" aria-hidden="true">
                                    <img src="{{ $slideSrc }}" class="dashboard-slider-image" alt="{{ __('Dashboard slide') }} {{ $loop->iteration }}">
                                </div>
                            </div>
                        @endforeach
                    </div>
                    @if($sliderImages->count() > 1)
                        <div class="carousel-indicators">
                            @foreach($sliderImages as $image)
                                <button type="button" data-bs-target="#dashboardImageSlider" data-bs-slide-to="{{ $loop->index }}" class="{{ $loop->first ? 'active' : '' }}" @if($loop->first) aria-current="true" @endif aria-label="{{ __('Slide') }} {{ $loop->iteration }}"></button>
                            @endforeach
                        </div>
                        <button type="button" class="carousel-control-prev" data-bs-target="#dashboardImageSlider" data-bs-slide="prev"><span class="carousel-control-prev-icon" aria-hidden="true"></span><span class="visually-hidden">{{ __('Previous') }}</span></button>
                        <button type="button" class="carousel-control-next" data-bs-target="#dashboardImageSlider" data-bs-slide="next"><span class="carousel-control-next-icon" aria-hidden="true"></span><span class="visually-hidden">{{ __('Next') }}</span></button>
                    @endif
                </div>
            @else
                <div class="d-flex flex-column align-items-center justify-content-center text-center p-4" style="min-height: 300px;">
                    <i class="fa-regular fa-images text-muted mb-3" style="font-size: 40px;"></i>
                    <h3 class="widget-title">{{ __('Dashboard Slider') }}</h3>
                    <p class="text-muted mt-2">{{ __('Add your images in Slider Settings to display them here.') }}</p>
                    <a href="{{ route('admin.settings', ['tab' => 'slider']) }}" class="btn btn-primary">{{ __('Slider Settings') }}</a>
                </div>
            @endif
        </section>
        --}}
    @include('admin.partials.month-chart')
    <div class="dashboard-stats-grid dashboard-top-stats">
        <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's Total Sales") }}</p>
                        <div class="metric-stack" style="display: flex; flex-direction: column;">
                            <h2 class="metric eng-num text-success" style="margin: 0;">Rs. {{ number_format($todaySales, 2) }}</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's Total Purchases") }}</p>
                        <div class="metric-stack" style="display: flex; flex-direction: column;">
                            <h2 class="metric eng-num text-primary" style="margin: 0;">Rs. {{ number_format($todayPurchases, 2) }}</h2>
                            <p class="metric-note" style="margin: 0;">{{ __('Purchase bills 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">{{ __("Today's Total Customer Payments") }}</p>
                        <div class="metric-stack" style="display: flex; flex-direction: column; gap: 6px;">
                            <div class="d-flex justify-content-between align-items-center gap-2">
                                <span class="metric-note" style="margin: 0;">{{ __('Received') }}</span>
                                <strong class="metric eng-num text-success" style="margin: 0; font-size: 1rem;">Rs. {{ number_format($todayCustomerPaymentsReceived, 2) }}</strong>
                            </div>
                            <div class="d-flex justify-content-between align-items-center gap-2">
                                <span class="metric-note" style="margin: 0;">{{ __('Walk-in') }}</span>
                                <strong class="metric eng-num text-primary" style="margin: 0; font-size: 1rem;">Rs. {{ number_format($todayWalkInPayments, 2) }}</strong>
                            </div>
                            {{-- <div class="d-flex justify-content-between align-items-center gap-2">
                                <span class="metric-note" style="margin: 0;">{{ __('Paid') }}</span>
                                <strong class="metric eng-num text-danger" style="margin: 0; font-size: 1rem;">Rs. {{ number_format($todayCustomerPaymentsPaid, 2) }}</strong>
                            </div> --}}
                        </div>
                    </div>
                    <div class="stat-icon stat-icon--green"><i class="fa-solid fa-hand-holding-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's Net Cash Flow") }}</p>
                        <div class="metric-stack" style="display: flex; flex-direction: column;">
                            <h2 class="metric eng-num {{ $todayNetCashFlow >= 0 ? 'text-success' : 'text-danger' }}" style="margin: 0;">Rs. {{ number_format($todayNetCashFlow, 2) }}</h2>
                            <p class="metric-note" style="margin: 0;">{{ __('Combined inflow / outflow') }}</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">{{ __("Today's Total Supplier Payments") }}</p>
                        <div class="metric-stack" style="display: flex; flex-direction: column;">
                            <h2 class="metric eng-num text-danger" style="margin: 0;">Rs. {{ number_format($todaySupplierPayments, 2) }}</h2>
                            <p class="metric-note" style="margin: 0;">{{ __('Payments to suppliers') }}</p>
                        </div>
                    </div>
                    <div class="stat-icon stat-icon--red"><i class="fa-solid fa-truck-fast"></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's Total Sales Return") }}</p>
                        <div class="metric-stack" style="display: flex; flex-direction: column;">
                            <h2 class="metric eng-num" style="margin: 0;">Rs. {{ number_format($todaySalesReturns, 2) }}</h2>
                            <p class="metric-note" style="margin: 0;">{{ __('Returned sales') }}</p>
                        </div>
                    </div>
                    <div class="stat-icon stat-icon--violet"><i class="fa-solid fa-rotate-left"></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's Total Purchases Return") }}</p>
                        <div class="metric-stack" style="display: flex; flex-direction: column;">
                            <h2 class="metric eng-num" style="margin: 0;">Rs. {{ number_format($todayPurchaseReturns, 2) }}</h2>
                            <p class="metric-note" style="margin: 0;">{{ __('Returned purchases') }}</p>
                        </div>
                    </div>
                    <div class="stat-icon stat-icon--green"><i class="fa-solid fa-rotate"></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's Total Expenses") }}</p>
                        <div class="metric-stack" style="display: flex; flex-direction: column;">
                            <h2 class="metric eng-num text-danger" style="margin: 0;">Rs. {{ number_format($todayExpenses, 2) }}</h2>
                            <p class="metric-note" style="margin: 0;">{{ __('Paid expenses') }}</p>
                        </div>
                    </div>
                    <div class="stat-icon stat-icon--gold"><i class="fa-solid fa-money-bill-wave"></i></div>
                </div>
            </div>
        </section>
    </div>
    </div>

    <div class="dashboard-reports-grid">
        {{-- Low stock preview --}}
        <section class="dashboard-card low-stock-card">
            <div class="dashboard-card__body">
                <h3 class="widget-title">{{ __('Low Stock Report') }}</h3>
                <p class="widget-subtitle">
                    {{ __('Items below alert quantity') }} · {{ number_format((int) $lowStockItems) }} {{ __('items') }}
                </p>

                @if (empty($lowStockPreview))
                    <p class="text-muted small mt-3 mb-0">{{ __('No low stock items found.') }}</p>
                @else
                    <ul class="info-list mt-3">
                        @foreach ($lowStockPreview as $item)
                            <li>
                                <div class="info-list__meta">
                                    <span class="info-list__dot" style="background:#f59e0b;"></span>
                                    <div>
                                        <span>{{ $item['name'] }}</span>
                                        @if (!empty($item['group_name']))
                                            <small class="text-muted d-block">{{ $item['group_name'] }}</small>
                                        @endif
                                    </div>
                                </div>
                                <div class="text-end">
                                    <strong class="eng-num text-danger">{{ number_format((float) $item['stock'], 2) }}</strong>
                                    <small class="text-muted d-block">{{ __('Shortage') }}: {{ number_format((float) $item['shortage'], 2) }}</small>
                                </div>
                            </li>
                        @endforeach
                    </ul>
                @endif

                <a href="{{ route('admin.reports.low-stock') }}" class="btn btn-sm btn-outline-primary mt-3">
                    {{ __('View full report') }}
                </a>
            </div>
        </section>

        {{-- Recent sales --}}
        <section class="dashboard-card">
            <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->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">
            <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> --}}
    </div>
@endsection