@extends('layouts.app')

@section('title', 'Dashboard')

@section('breadcrumb')
<li class="breadcrumb-item active">Dashboard</li>
@endsection

@section('content')

<div class="page-header d-flex justify-content-between align-items-start">
    <div>
        <h1 class="page-title"><i class="bi bi-speedometer2 me-2" style="color:#1d4ed8;"></i>Dashboard</h1>
        <p class="page-subtitle">Welcome back, {{ auth()->user()->name }} &mdash; {{ now()->format('l, F j, Y') }}</p>
    </div>
    <div class="d-flex gap-2">
        @can_permission('sales.create')
        <a href="{{ route('sales.pos') }}" class="btn btn-primary">
            <i class="bi bi-cart-plus me-1"></i> New Sale
        </a>
        @endcan_permission
        @can_permission('purchases.create')
        <a href="{{ route('purchases.create') }}" class="btn btn-outline-secondary">
            <i class="bi bi-cart-check me-1"></i> New Purchase
        </a>
        @endcan_permission
    </div>
</div>

{{-- ── Row 1: Key Stats ────────────────────────────────────────────────── --}}
<div class="row g-3 mb-4">

    {{-- Today's Sales --}}
    <div class="col-12 col-sm-6 col-xl-3">
        <a href="{{ route('sales.index') }}" style="text-decoration:none;">
        <div class="stat-card">
            <div class="stat-icon" style="background:#dbeafe;">
                <i class="bi bi-cash-coin" style="color:#1d4ed8;"></i>
            </div>
            <div>
                <div class="stat-value">৳{{ number_format($todaySales, 0) }}</div>
                <div class="stat-label">Today's Sales</div>
                <div class="stat-change text-muted">{{ $todaySalesCount }} transaction{{ $todaySalesCount == 1 ? '' : 's' }}</div>
            </div>
        </div>
        </a>
    </div>

    {{-- Today's Purchase --}}
    <div class="col-12 col-sm-6 col-xl-3">
        <a href="{{ route('purchases.index') }}" style="text-decoration:none;">
        <div class="stat-card">
            <div class="stat-icon" style="background:#d1fae5;">
                <i class="bi bi-cart-check" style="color:#059669;"></i>
            </div>
            <div>
                <div class="stat-value">৳{{ number_format($todayPurchases, 0) }}</div>
                <div class="stat-label">Today's Purchase</div>
                <div class="stat-change text-muted">{{ $todayPurchasesCount }} order{{ $todayPurchasesCount == 1 ? '' : 's' }}</div>
            </div>
        </div>
        </a>
    </div>

    {{-- Monthly Sales --}}
    <div class="col-12 col-sm-6 col-xl-3">
        <div class="stat-card">
            <div class="stat-icon" style="background:#ede9fe;">
                <i class="bi bi-graph-up-arrow" style="color:#7c3aed;"></i>
            </div>
            <div>
                <div class="stat-value">৳{{ number_format($monthlySales, 0) }}</div>
                <div class="stat-label">Monthly Sales</div>
                <div class="stat-change text-muted">{{ $monthlySalesCount }} sales this month</div>
            </div>
        </div>
    </div>

    {{-- Monthly Profit --}}
    <div class="col-12 col-sm-6 col-xl-3">
        <div class="stat-card">
            <div class="stat-icon" style="background:#dcfce7;">
                <i class="bi bi-currency-exchange" style="color:#16a34a;"></i>
            </div>
            <div>
                <div class="stat-value" style="color:#16a34a;">৳{{ number_format($monthlyProfit, 0) }}</div>
                <div class="stat-label">Monthly Profit</div>
                <div class="stat-change text-muted">Net profit this month</div>
            </div>
        </div>
    </div>

</div>

{{-- ── Row 2: Due & Inventory ───────────────────────────────────────────── --}}
<div class="row g-3 mb-4">

    {{-- Customer Due --}}
    <div class="col-12 col-sm-6 col-xl-3">
        <a href="{{ route('customers.index') }}" style="text-decoration:none;">
        <div class="stat-card">
            <div class="stat-icon" style="background:#fef3c7;">
                <i class="bi bi-people" style="color:#d97706;"></i>
            </div>
            <div>
                <div class="stat-value" style="color:#d97706;">৳{{ number_format($totalCustomerDue, 0) }}</div>
                <div class="stat-label">Customer Due</div>
                <div class="stat-change text-muted">Total receivable</div>
            </div>
        </div>
        </a>
    </div>

    {{-- Supplier Due --}}
    <div class="col-12 col-sm-6 col-xl-3">
        <a href="{{ route('suppliers.index') }}" style="text-decoration:none;">
        <div class="stat-card">
            <div class="stat-icon" style="background:#fee2e2;">
                <i class="bi bi-truck" style="color:#dc2626;"></i>
            </div>
            <div>
                <div class="stat-value" style="color:#dc2626;">৳{{ number_format($totalSupplierDue, 0) }}</div>
                <div class="stat-label">Supplier Due</div>
                <div class="stat-change text-muted">Total payable</div>
            </div>
        </div>
        </a>
    </div>

    {{-- Inventory Value --}}
    <div class="col-12 col-sm-6 col-xl-3">
        <div class="stat-card">
            <div class="stat-icon" style="background:#e0f2fe;">
                <i class="bi bi-boxes" style="color:#0284c7;"></i>
            </div>
            <div>
                <div class="stat-value" style="color:#0284c7;">৳{{ number_format($inventoryValue, 0) }}</div>
                <div class="stat-label">Inventory Value</div>
                <div class="stat-change text-muted">At cost price</div>
            </div>
        </div>
    </div>

    {{-- Low Stock --}}
    <div class="col-12 col-sm-6 col-xl-3">
        <a href="{{ route('inventory.index') }}" style="text-decoration:none;">
        <div class="stat-card">
            <div class="stat-icon" style="background:#fce7f3;">
                <i class="bi bi-exclamation-triangle" style="color:#be185d;"></i>
            </div>
            <div>
                <div class="stat-value" style="color:#be185d;">{{ $lowStockCount }}</div>
                <div class="stat-label">Low Stock Items</div>
                <div class="stat-change text-muted">{{ $outOfStockCount }} out of stock</div>
            </div>
        </div>
        </a>
    </div>

</div>

{{-- ── Row 3: Tables & Alerts ──────────────────────────────────────────── --}}
<div class="row g-3 mb-4">

    {{-- Recent Sales --}}
    <div class="col-12 col-xl-7">
        <div class="card h-100">
            <div class="card-header d-flex justify-content-between align-items-center">
                <span><i class="bi bi-receipt me-2" style="color:#1d4ed8;"></i>Recent Sales</span>
                <a href="{{ route('sales.index') }}" class="btn btn-sm btn-outline-primary">View All</a>
            </div>
            <div class="card-body p-0">
                <div class="table-responsive">
                    <table class="table mb-0">
                        <thead>
                            <tr>
                                <th>Invoice</th>
                                <th>Customer</th>
                                <th>Amount</th>
                                <th>Due</th>
                                <th>Status</th>
                                <th>Date</th>
                            </tr>
                        </thead>
                        <tbody>
                            @forelse($recentSales as $sale)
                            <tr>
                                <td>
                                    <a href="{{ route('sales.show', $sale) }}" style="color:#1d4ed8;text-decoration:none;font-weight:600;font-size:0.8rem;">
                                        {{ $sale->invoice_no }}
                                    </a>
                                </td>
                                <td>{{ $sale->customer?->name ?? 'Walk-in Customer' }}</td>
                                <td class="fw-600">৳{{ number_format($sale->total_amount, 2) }}</td>
                                <td>
                                    @if($sale->due_amount > 0)
                                    <span style="color:#dc2626;font-weight:600;">৳{{ number_format($sale->due_amount, 2) }}</span>
                                    @else
                                    <span class="text-success">Paid</span>
                                    @endif
                                </td>
                                <td>
                                    @php
                                    $sColors = ['completed'=>'success','hold'=>'warning','returned'=>'danger','cancelled'=>'secondary','draft'=>'info'];
                                    @endphp
                                    <span class="badge bg-{{ $sColors[$sale->status] ?? 'secondary' }}">{{ ucfirst($sale->status) }}</span>
                                </td>
                                <td style="color:#94a3b8;font-size:0.78rem;">{{ $sale->sale_date->format('d M Y') }}</td>
                            </tr>
                            @empty
                            <tr>
                                <td colspan="6" class="text-center text-muted py-4">
                                    <i class="bi bi-receipt" style="font-size:2rem;display:block;margin-bottom:0.5rem;"></i>
                                    No sales yet today
                                </td>
                            </tr>
                            @endforelse
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>

    {{-- Right column: Low Stock + Warranty Alerts --}}
    <div class="col-12 col-xl-5">

        {{-- Low Stock Alert --}}
        <div class="card mb-3">
            <div class="card-header d-flex justify-content-between align-items-center">
                <span><i class="bi bi-exclamation-triangle me-2" style="color:#d97706;"></i>Low Stock Alert</span>
                <a href="{{ route('inventory.index') }}" class="btn btn-sm btn-outline-warning">View All</a>
            </div>
            <div class="card-body p-0">
                @forelse($lowStockProducts->take(6) as $variant)
                <div style="display:flex;align-items:center;justify-content:space-between;padding:0.625rem 1rem;border-bottom:1px solid #f1f5f9;">
                    <div style="overflow:hidden;">
                        <div style="font-size:0.8rem;font-weight:600;color:#1e293b;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:200px;">
                            {{ $variant->product->name }}
                        </div>
                        <div style="font-size:0.72rem;color:#64748b;">{{ $variant->variant_name }}</div>
                    </div>
                    <span class="badge {{ $variant->current_stock == 0 ? 'bg-danger' : 'bg-warning text-dark' }}">
                        {{ $variant->current_stock }} left
                    </span>
                </div>
                @empty
                <div class="text-center text-muted py-3" style="font-size:0.875rem;">
                    <i class="bi bi-check-circle-fill text-success me-1"></i> All stock levels are healthy
                </div>
                @endforelse
            </div>
        </div>

        {{-- Warranty Expiry Alert --}}
        <div class="card">
            <div class="card-header d-flex justify-content-between align-items-center">
                <span><i class="bi bi-shield-exclamation me-2" style="color:#7c3aed;"></i>Warranty Expiring</span>
                <a href="{{ route('warranty.index') }}" class="btn btn-sm btn-outline-secondary">View All</a>
            </div>
            <div class="card-body p-0">
                @forelse($warrantyExpiring->take(5) as $warranty)
                <div style="display:flex;align-items:center;justify-content:space-between;padding:0.625rem 1rem;border-bottom:1px solid #f1f5f9;">
                    <div style="overflow:hidden;">
                        <div style="font-size:0.8rem;font-weight:600;color:#1e293b;">{{ $warranty->customer->name }}</div>
                        <div style="font-size:0.72rem;color:#64748b;">
                            {{ $warranty->serialNumber?->productVariant?->product?->name ?? 'Product' }}
                        </div>
                    </div>
                    <div style="text-align:right;flex-shrink:0;">
                        @php $days = $warranty->days_remaining; @endphp
                        <span class="badge {{ $days <= 7 ? 'bg-danger' : 'bg-warning text-dark' }}">
                            {{ $days }}d left
                        </span>
                        <div style="font-size:0.7rem;color:#94a3b8;margin-top:2px;">
                            {{ $warranty->end_date->format('d M Y') }}
                        </div>
                    </div>
                </div>
                @empty
                <div class="text-center text-muted py-3" style="font-size:0.875rem;">
                    <i class="bi bi-shield-check text-success me-1"></i> No warranties expiring soon
                </div>
                @endforelse
            </div>
        </div>

    </div>
</div>

{{-- ── Row 4: Recent Purchases ─────────────────────────────────────────── --}}
@can_permission('purchases.view')
<div class="row g-3">
    <div class="col-12">
        <div class="card">
            <div class="card-header d-flex justify-content-between align-items-center">
                <span><i class="bi bi-cart-check me-2" style="color:#059669;"></i>Recent Purchases</span>
                <a href="{{ route('purchases.index') }}" class="btn btn-sm btn-outline-success">View All</a>
            </div>
            <div class="card-body p-0">
                <div class="table-responsive">
                    <table class="table mb-0">
                        <thead>
                            <tr>
                                <th>Invoice</th>
                                <th>Supplier</th>
                                <th>Total</th>
                                <th>Paid</th>
                                <th>Due</th>
                                <th>Status</th>
                                <th>Date</th>
                            </tr>
                        </thead>
                        <tbody>
                            @forelse($recentPurchases as $purchase)
                            <tr>
                                <td>
                                    <a href="{{ route('purchases.show', $purchase) }}" style="color:#059669;text-decoration:none;font-weight:600;font-size:0.8rem;">
                                        {{ $purchase->invoice_no }}
                                    </a>
                                </td>
                                <td>{{ $purchase->supplier->name }}</td>
                                <td class="fw-600">৳{{ number_format($purchase->total_amount, 2) }}</td>
                                <td class="text-success">৳{{ number_format($purchase->paid_amount, 2) }}</td>
                                <td>
                                    @if($purchase->due_amount > 0)
                                    <span style="color:#dc2626;font-weight:600;">৳{{ number_format($purchase->due_amount, 2) }}</span>
                                    @else
                                    <span class="text-success">Paid</span>
                                    @endif
                                </td>
                                <td>
                                    @php
                                    $pColors = ['received'=>'success','partial'=>'warning','paid'=>'success','ordered'=>'info','draft'=>'secondary','returned'=>'danger'];
                                    @endphp
                                    <span class="badge bg-{{ $pColors[$purchase->status] ?? 'secondary' }}">{{ ucfirst($purchase->status) }}</span>
                                </td>
                                <td style="color:#94a3b8;font-size:0.78rem;">{{ $purchase->purchase_date->format('d M Y') }}</td>
                            </tr>
                            @empty
                            <tr>
                                <td colspan="7" class="text-center text-muted py-4">
                                    <i class="bi bi-cart" style="font-size:2rem;display:block;margin-bottom:0.5rem;"></i>
                                    No purchases yet
                                </td>
                            </tr>
                            @endforelse
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>
@endcan_permission

@endsection