@extends('layouts.app')
@section('title', 'Dashboard')

@section('content')
@php
    $breadcrumbs = [['label' => 'Dashboard']];
@endphp

<div class="dashboard-page">
    <div class="d-flex flex-wrap align-items-center justify-content-between mb-4">
        <div>
            <h4 class="fw-bold mb-1">Welcome back, {{ auth()->user()->name ?? 'User' }}!</h4>
            <p class="text-muted mb-0" style="font-size:0.875rem;">Here's what's happening with your operations today.</p>
        </div>
        <div class="d-flex gap-2 mt-2 mt-md-0">
            <button class="btn btn-outline-secondary btn-sm" id="refreshDashboard">
                <i class="bi bi-arrow-clockwise me-1"></i>Refresh
            </button>
            <div class="dropdown">
                <button class="btn btn-primary btn-sm dropdown-toggle" data-bs-toggle="dropdown">
                    <i class="bi bi-download me-1"></i>Export
                </button>
                <ul class="dropdown-menu dropdown-menu-end">
                    <li><a class="dropdown-item" href="#"><i class="bi bi-filetype-pdf me-2"></i>PDF Report</a></li>
                    <li><a class="dropdown-item" href="#"><i class="bi bi-filetype-xlsx me-2"></i>Excel Report</a></li>
                    <li><a class="dropdown-item" href="#"><i class="bi bi-envelope me-2"></i>Email Report</a></li>
                </ul>
            </div>
        </div>
    </div>

    <div class="row g-3 mb-4">
        <div class="col-xl-2 col-lg-4 col-md-6">
            <x-kpi-card title="Total Shipments" value="{{ number_format($totalShipments ?? 1247) }}" icon="bi-box-seam" trend="up" trendValue="{{ $shipmentTrend ?? '+12.5%' }}" color="primary" subtitle="vs last month" sparklineId="spark-shipments" />
        </div>
        <div class="col-xl-2 col-lg-4 col-md-6">
            <x-kpi-card title="Pending Approvals" value="{{ $pendingApprovals ?? 23 }}" icon="bi-clock-history" trend="down" trendValue="{{ $approvalTrend ?? '-8.3%' }}" color="warning" subtitle="needs attention" sparklineId="spark-approvals" />
        </div>
        <div class="col-xl-2 col-lg-4 col-md-6">
            <x-kpi-card title="Revenue This Month" value="₹{{ number_format($monthlyRevenue ?? 4567800) }}" icon="bi-currency-rupee" trend="up" trendValue="{{ $revenueTrend ?? '+18.2%' }}" color="success" subtitle="vs last month" sparklineId="spark-revenue" />
        </div>
        <div class="col-xl-2 col-lg-4 col-md-6">
            <x-kpi-card title="Active Containers" value="{{ $activeContainers ?? 89 }}" icon="bi-box2" trend="up" trendValue="{{ $containerTrend ?? '+5.1%' }}" color="info" subtitle="in transit" sparklineId="spark-containers" />
        </div>
        <div class="col-xl-2 col-lg-4 col-md-6">
            <x-kpi-card title="Pending Documents" value="{{ $pendingDocs ?? 34 }}" icon="bi-file-earmark-x" trend="up" trendValue="{{ $docTrend ?? '+3.2%' }}" color="danger" subtitle="overdue" sparklineId="spark-docs" />
        </div>
        <div class="col-xl-2 col-lg-4 col-md-6">
            <x-kpi-card title="Outstanding Payments" value="₹{{ number_format($outstandingPayments ?? 2345000) }}" icon="bi-credit-card" trend="down" trendValue="{{ $paymentTrend ?? '-6.7%' }}" color="secondary" subtitle="vs last month" sparklineId="spark-payments" />
        </div>
    </div>

    <div class="row g-3 mb-4">
        <div class="col-xl-8">
            <div class="card border shadow-sm h-100">
                <div class="card-header bg-body d-flex align-items-center justify-content-between">
                    <h6 class="card-title mb-0 fw-semibold"><i class="bi bi-bar-chart me-2 text-primary"></i>Export Shipments - Monthly Trend</h6>
                    <div class="btn-group btn-group-sm" role="group">
                        <button type="button" class="btn btn-outline-secondary active" data-range="12">12M</button>
                        <button type="button" class="btn btn-outline-secondary" data-range="6">6M</button>
                        <button type="button" class="btn btn-outline-secondary" data-range="3">3M</button>
                    </div>
                </div>
                <div class="card-body">
                    <div id="exportChart" style="height:320px;"></div>
                </div>
            </div>
        </div>
        <div class="col-xl-4">
            <div class="card border shadow-sm h-100">
                <div class="card-header bg-body">
                    <h6 class="card-title mb-0 fw-semibold"><i class="bi bi-pie-chart me-2 text-info"></i>Shipments by Mode</h6>
                </div>
                <div class="card-body d-flex align-items-center justify-content-center">
                    <div id="modeChart" style="width:100%;height:280px;"></div>
                </div>
            </div>
        </div>
    </div>

    <div class="row g-3 mb-4">
        <div class="col-xl-8">
            <div class="card border shadow-sm h-100">
                <div class="card-header bg-body d-flex align-items-center justify-content-between">
                    <h6 class="card-title mb-0 fw-semibold"><i class="bi bi-graph-up me-2 text-success"></i>Import Shipments - Monthly Trend</h6>
                </div>
                <div class="card-body">
                    <div id="importChart" style="height:280px;"></div>
                </div>
            </div>
        </div>
        <div class="col-xl-4">
            <div class="card border shadow-sm h-100">
                <div class="card-header bg-body">
                    <h6 class="card-title mb-0 fw-semibold"><i class="bi bi-wallet2 me-2 text-warning"></i>Financial Summary</h6>
                </div>
                <div class="card-body">
                    <div class="mb-3">
                        <div class="d-flex justify-content-between align-items-center mb-1">
                            <span class="text-muted" style="font-size:0.82rem;"><i class="bi bi-arrow-down-left text-success me-1"></i>Receivables</span>
                            <span class="fw-bold text-success" style="font-size:0.95rem;">₹{{ number_format($receivables ?? 3450000) }}</span>
                        </div>
                        <div class="progress" style="height:6px;">
                            <div class="progress-bar bg-success" style="width:72%"></div>
                        </div>
                    </div>
                    <div class="mb-3">
                        <div class="d-flex justify-content-between align-items-center mb-1">
                            <span class="text-muted" style="font-size:0.82rem;"><i class="bi bi-arrow-up-right text-danger me-1"></i>Payables</span>
                            <span class="fw-bold text-danger" style="font-size:0.95rem;">₹{{ number_format($payables ?? 2100000) }}</span>
                        </div>
                        <div class="progress" style="height:6px;">
                            <div class="progress-bar bg-danger" style="width:45%"></div>
                        </div>
                    </div>
                    <div class="mb-0">
                        <div class="d-flex justify-content-between align-items-center mb-1">
                            <span class="text-muted" style="font-size:0.82rem;"><i class="bi bi-bank text-primary me-1"></i>Cash Position</span>
                            <span class="fw-bold text-primary" style="font-size:0.95rem;">₹{{ number_format($cashPosition ?? 1350000) }}</span>
                        </div>
                        <div class="progress" style="height:6px;">
                            <div class="progress-bar bg-primary" style="width:58%"></div>
                        </div>
                    </div>
                    <hr>
                    <div class="text-center">
                        <small class="text-muted">Net Position: </small>
                        <span class="fw-bold text-{{ ($receivables ?? 0) > ($payables ?? 0) ? 'success' : 'danger' }}">
                            ₹{{ number_format(($receivables ?? 3450000) - ($payables ?? 2100000)) }}
                        </span>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="row g-3 mb-4">
        <div class="col-xl-8">
            <div class="card border shadow-sm">
                <div class="card-header bg-body d-flex align-items-center justify-content-between">
                    <h6 class="card-title mb-0 fw-semibold"><i class="bi bi-truck me-2 text-primary"></i>Recent Shipments</h6>
                    <a href="{{ route('export.shipments.index') }}" class="btn btn-outline-primary btn-sm">View All</a>
                </div>
                <div class="card-body p-0">
                    <div class="table-responsive">
                        <table class="table table-hover align-middle mb-0" id="recentShipmentsTable">
                            <thead class="bg-body-tertiary">
                                <tr>
                                    <th>Shipment #</th>
                                    <th>Customer</th>
                                    <th>Origin</th>
                                    <th>Destination</th>
                                    <th>Mode</th>
                                    <th>Status</th>
                                    <th class="text-end">Actions</th>
                                </tr>
                            </thead>
                            <tbody>
                                @forelse($recentShipments ?? [] as $shipment)
                                    <tr>
                                        <td><a href="{{ route('export.shipments.show', $shipment->id) }}" class="text-decoration-none fw-semibold">{{ $shipment->shipment_number }}</a></td>
                                        <td>{{ $shipment->customer->name ?? 'N/A' }}</td>
                                        <td>{{ $shipment->origin_port->name ?? 'N/A' }}</td>
                                        <td>{{ $shipment->destination_port->name ?? 'N/A' }}</td>
                                        <td><span class="badge bg-info-subtle text-info">{{ $shipment->mode ?? 'N/A' }}</span></td>
                                        <td><x-status-badge :status="$shipment->status ?? 'pending'" type="shipment" /></td>
                                        <td class="text-end">
                                            <a href="{{ route('export.shipments.show', $shipment->id) }}" class="btn btn-sm btn-outline-primary"><i class="bi bi-eye"></i></a>
                                        </td>
                                    </tr>
                                @empty
                                    @foreach([
                                        ['EXP-2026-001247', 'Tata Steel Ltd.', 'Mumbai', 'Rotterdam', 'Ocean', 'in_transit'],
                                        ['EXP-2026-001246', 'Reliance Industries', 'Nhava Sheva', 'Singapore', 'Ocean', 'cleared'],
                                        ['EXP-2026-001245', 'Wipro Ltd.', 'Bangalore', 'Frankfurt', 'Air', 'booked'],
                                        ['EXP-2026-001244', 'Infosys Ltd.', 'Chennai', 'New York', 'Air', 'in_transit'],
                                        ['EXP-2026-001243', 'HDFC Bank', 'Mumbai', 'London', 'Air', 'delivered'],
                                    ] as $s)
                                        <tr>
                                            <td><a href="#" class="text-decoration-none fw-semibold">{{ $s[0] }}</a></td>
                                            <td>{{ $s[1] }}</td>
                                            <td>{{ $s[2] }}</td>
                                            <td>{{ $s[3] }}</td>
                                            <td><span class="badge bg-{{ $s[4] === 'Ocean' ? 'primary' : 'info' }}-subtle text-{{ $s[4] === 'Ocean' ? 'primary' : 'info' }}">{{ $s[4] }}</span></td>
                                            <td><x-status-badge :status="$s[5]" type="shipment" /></td>
                                            <td class="text-end">
                                                <a href="#" class="btn btn-sm btn-outline-primary"><i class="bi bi-eye"></i></a>
                                            </td>
                                        </tr>
                                    @endforeach
                                @endforelse
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>

        <div class="col-xl-4">
            <div class="card border shadow-sm mb-3">
                <div class="card-header bg-body d-flex align-items-center justify-content-between">
                    <h6 class="card-title mb-0 fw-semibold"><i class="bi bi-clock-history me-2 text-warning"></i>Pending Approvals</h6>
                    <span class="badge bg-warning text-dark">{{ $pendingApprovals ?? 23 }}</span>
                </div>
                <div class="card-body p-0">
                    @forelse($pendingApprovalsList ?? [] as $approval)
                        <div class="d-flex align-items-center justify-content-between px-3 py-2 border-bottom">
                            <div>
                                <p class="mb-0 fw-medium" style="font-size:0.82rem;">{{ $approval->title ?? 'Approval' }}</p>
                                <small class="text-muted">{{ $approval->requested_by ?? 'System' }} &middot; {{ $approval->created_at?->diffForHumans() ?? '' }}</small>
                            </div>
                            <div class="d-flex gap-1">
                                <button class="btn btn-success btn-sm py-0 approve-btn" data-id="{{ $approval->id ?? '' }}"><i class="bi bi-check-lg"></i></button>
                                <button class="btn btn-danger btn-sm py-0 reject-btn" data-id="{{ $approval->id ?? '' }}"><i class="bi bi-x-lg"></i></button>
                            </div>
                        </div>
                    @empty
                        @foreach([
                            ['PO Approval - #PO-4521', 'Rajesh Kumar', '2 hours ago'],
                            ['Invoice Approval - #INV-8892', 'Priya Singh', '4 hours ago'],
                            ['Discount Request - #QUO-1123', 'Amit Patel', '6 hours ago'],
                        ] as $a)
                            <div class="d-flex align-items-center justify-content-between px-3 py-2 border-bottom">
                                <div>
                                    <p class="mb-0 fw-medium" style="font-size:0.82rem;">{{ $a[0] }}</p>
                                    <small class="text-muted">{{ $a[1] }} &middot; {{ $a[2] }}</small>
                                </div>
                                <div class="d-flex gap-1">
                                    <button class="btn btn-success btn-sm py-0 approve-btn"><i class="bi bi-check-lg"></i></button>
                                    <button class="btn btn-danger btn-sm py-0 reject-btn"><i class="bi bi-x-lg"></i></button>
                                </div>
                            </div>
                        @endforeach
                    @endforelse
                    <div class="text-center py-2">
                        <a href="#" class="text-primary text-decoration-none" style="font-size:0.82rem;">View all pending approvals</a>
                    </div>
                </div>
            </div>

            <div class="card border shadow-sm">
                <div class="card-header bg-body">
                    <h6 class="card-title mb-0 fw-semibold"><i class="bi bi-lightning me-2 text-danger"></i>Quick Actions</h6>
                </div>
                <div class="card-body">
                    <div class="row g-2">
                        <div class="col-6">
                            <a href="{{ route('export.inquiries.create') }}" class="btn btn-outline-primary w-100 py-2 quick-action-btn">
                                <i class="bi bi-search d-block fs-5 mb-1"></i>
                                <small class="fw-medium">New Inquiry</small>
                            </a>
                        </div>
                        <div class="col-6">
                            <a href="{{ route('import.orders.create') }}" class="btn btn-outline-success w-100 py-2 quick-action-btn">
                                <i class="bi bi-cart-plus d-block fs-5 mb-1"></i>
                                <small class="fw-medium">New PO</small>
                            </a>
                        </div>
                        <div class="col-6">
                            <a href="{{ route('export.documents.index') }}" class="btn btn-outline-info w-100 py-2 quick-action-btn">
                                <i class="bi bi-cloud-arrow-up d-block fs-5 mb-1"></i>
                                <small class="fw-medium">Upload Doc</small>
                            </a>
                        </div>
                        <div class="col-6">
                            <a href="{{ route('reports.index') }}" class="btn btn-outline-warning w-100 py-2 quick-action-btn">
                                <i class="bi bi-bar-chart-line d-block fs-5 mb-1"></i>
                                <small class="fw-medium">Run Report</small>
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="row g-3">
        <div class="col-xl-6">
            <div class="card border shadow-sm h-100">
                <div class="card-header bg-body d-flex align-items-center justify-content-between">
                    <h6 class="card-title mb-0 fw-semibold"><i class="bi bi-activity me-2 text-success"></i>Activity Timeline</h6>
                    <a href="{{ route('admin.audit-logs.index') }}" class="text-primary text-decoration-none" style="font-size:0.82rem;">View All</a>
                </div>
                <div class="card-body" style="max-height:380px;overflow-y:auto;">
                    @php
                        $activities = $activities ?? collect();
                        $sampleActivities = [
                            ['icon' => 'bi-truck', 'color' => 'primary', 'message' => 'Shipment EXP-2026-001247 departed from Mumbai Port', 'time' => '10 minutes ago', 'user' => 'System'],
                            ['icon' => 'bi-check-circle', 'color' => 'success', 'message' => 'Invoice #INV-8892 approved by Finance Manager', 'time' => '32 minutes ago', 'user' => 'Priya Singh'],
                            ['icon' => 'bi-file-earmark-plus', 'color' => 'info', 'message' => 'Bill of Entry #BOE-4521 uploaded for Import Shipment', 'time' => '1 hour ago', 'user' => 'Amit Patel'],
                            ['icon' => 'bi-person-plus', 'color' => 'secondary', 'message' => 'New customer "Global Trade Corp" created', 'time' => '2 hours ago', 'user' => 'Rajesh Kumar'],
                            ['icon' => 'bi-credit-card', 'color' => 'warning', 'message' => 'Payment of ₹4,50,000 received from Tata Steel', 'time' => '3 hours ago', 'user' => 'System'],
                            ['icon' => 'bi-box-seam', 'color' => 'primary', 'message' => 'Container MSKU-7261948 cleared customs at Chennai', 'time' => '4 hours ago', 'user' => 'Customs Broker'],
                            ['icon' => 'bi-exclamation-triangle', 'color' => 'danger', 'message' => 'Document DO-2023-456 for shipment delayed - action needed', 'time' => '5 hours ago', 'user' => 'System'],
                            ['icon' => 'bi-gear', 'color' => 'secondary', 'message' => 'Exchange rate updated: USD/INR = 83.45', 'time' => '6 hours ago', 'user' => 'System'],
                        ];
                        $activityList = $activities->count() > 0 ? $activities : $sampleActivities;
                    @endphp
                    <div class="activity-timeline">
                        @foreach($activityList as $activity)
                            <div class="d-flex gap-3 mb-3">
                                <div class="flex-shrink-0">
                                    <div class="bg-{{ $activity['color'] ?? 'primary' }}-subtle rounded-circle d-flex align-items-center justify-content-center" style="width:32px;height:32px;">
                                        <i class="bi {{ $activity['icon'] ?? 'bi-circle' }} text-{{ $activity['color'] ?? 'primary' }}"></i>
                                    </div>
                                </div>
                                <div class="flex-grow-1">
                                    <p class="mb-0" style="font-size:0.82rem;">{{ $activity['message'] ?? '' }}</p>
                                    <small class="text-muted">{{ $activity['time'] ?? '' }} &middot; {{ $activity['user'] ?? '' }}</small>
                                </div>
                            </div>
                        @endforeach
                    </div>
                </div>
            </div>
        </div>
        <div class="col-xl-6">
            <div class="card border shadow-sm h-100">
                <div class="card-header bg-body d-flex align-items-center justify-content-between">
                    <h6 class="card-title mb-0 fw-semibold"><i class="bi bi-bell me-2 text-danger"></i>Notifications</h6>
                    <a href="{{ route('notifications.index') }}" class="text-primary text-decoration-none" style="font-size:0.82rem;">View All</a>
                </div>
                <div class="card-body" style="max-height:380px;overflow-y:auto;">
                    @forelse(auth()->user()->notifications()->latest()->take(8)->get() ?? collect() as $notification)
                        <div class="d-flex gap-3 mb-3 pb-2 border-bottom {{ !$notification->read_at ? 'bg-warning bg-opacity-10 rounded p-2' : '' }}">
                            <div class="flex-shrink-0">
                                <i class="bi bi-{{ $notification->data['icon'] ?? 'bell' }} text-{{ $notification->data['color'] ?? 'primary' }}"></i>
                            </div>
                            <div class="flex-grow-1">
                                <p class="mb-0" style="font-size:0.82rem;">{{ $notification->data['message'] ?? 'Notification' }}</p>
                                <small class="text-muted">{{ $notification->created_at->diffForHumans() }}</small>
                            </div>
                        </div>
                    @empty
                        @foreach([
                            ['icon' => 'exclamation-triangle', 'color' => 'warning', 'message' => 'Container MSKU-9876543 is arriving tomorrow - prepare clearance documents', 'time' => '5 minutes ago'],
                            ['icon' => 'check-circle', 'color' => 'success', 'message' => 'DGFT license renewal approved - valid until 31 Dec 2026', 'time' => '1 hour ago'],
                            ['icon' => 'envelope', 'color' => 'info', 'message' => 'New quotation request from Reliance Industries Ltd.', 'time' => '2 hours ago'],
                            ['icon' => 'currency-exchange', 'color' => 'primary', 'message' => 'USD/INR exchange rate alert: Rate crossed 83.50', 'time' => '3 hours ago'],
                            ['icon' => 'calendar-event', 'color' => 'danger', 'message' => 'ICEGATE submission deadline for BOE-4567 is tomorrow', 'time' => '4 hours ago'],
                            ['icon' => 'person-check', 'color' => 'success', 'message' => 'New user "Sanjay Mehta" registered and awaiting approval', 'time' => '5 hours ago'],
                            ['icon' => 'file-earmark-x', 'color' => 'danger', 'message' => 'Invoice #INV-8871 rejected by customer - see remarks', 'time' => '6 hours ago'],
                            ['icon' => 'truck', 'color' => 'primary', 'message' => 'Shipment EXP-2026-001240 status updated to "Delivered"', 'time' => '8 hours ago'],
                        ] as $n)
                            <div class="d-flex gap-3 mb-3 pb-2 border-bottom">
                                <div class="flex-shrink-0">
                                    <i class="bi bi-{{ $n['icon'] }} text-{{ $n['color'] }}"></i>
                                </div>
                                <div class="flex-grow-1">
                                    <p class="mb-0" style="font-size:0.82rem;">{{ $n['message'] }}</p>
                                    <small class="text-muted">{{ $n['time'] }}</small>
                                </div>
                            </div>
                        @endforeach
                    @endforelse
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script>
document.addEventListener('DOMContentLoaded', function() {
    // Sparklines using ApexCharts
    const sparkConfig = function(data, color) {
        return {
            series: [{ data: data }],
            chart: { type: 'area', height: 35, sparkline: { enabled: true } },
            stroke: { curve: 'smooth', width: 2 },
            fill: { opacity: 0.15 },
            colors: [color],
            tooltip: { enabled: false }
        };
    };

    const sparkData = {
        'spark-shipments': { data: [30, 40, 35, 50, 49, 60, 70, 91, 86, 95, 100, 110], color: '#0d6efd' },
        'spark-approvals': { data: [35, 41, 36, 26, 45, 48, 52, 53, 41, 28, 23, 23], color: '#ffc107' },
        'spark-revenue': { data: [20, 30, 35, 50, 49, 60, 70, 91, 86, 95, 100, 120], color: '#198754' },
        'spark-containers': { data: [12, 17, 71, 18, 14, 26, 34, 52, 41, 28, 48, 89], color: '#0dcaf0' },
        'spark-docs': { data: [12, 17, 21, 18, 34, 26, 34, 52, 41, 28, 18, 34], color: '#dc3545' },
        'spark-payments': { data: [63, 55, 44, 36, 26, 24, 31, 28, 33, 34, 32, 23], color: '#6c757d' }
    };

    Object.keys(sparkData).forEach(function(id) {
        const el = document.getElementById(id);
        if (el) {
            new ApexCharts(el, sparkConfig(sparkData[id].data, sparkData[id].color)).render();
        }
    });

    // Export Shipments Bar Chart
    const exportChartEl = document.getElementById('exportChart');
    if (exportChartEl) {
        new ApexCharts(exportChartEl, {
            series: [{
                name: 'Export Shipments',
                data: [65, 72, 86, 81, 73, 95, 88, 102, 97, 110, 105, 115]
            }],
            chart: { type: 'bar', height: 320, toolbar: { show: true }, fontFamily: 'Inter' },
            colors: ['#0d6efd'],
            plotOptions: { bar: { borderRadius: 6, columnWidth: '55%', distributed: true } },
            dataLabels: { enabled: false },
            xaxis: {
                categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
                labels: { style: { fontSize: '12px', colors: '#6c757d' } }
            },
            yaxis: { labels: { style: { fontSize: '12px', colors: '#6c757d' } } },
            grid: { borderColor: '#f1f3f5', strokeDashArray: 4 },
            tooltip: { theme: 'light', style: { fontSize: '12px' } }
        }).render();
    }

    // Import Shipments Line Chart
    const importChartEl = document.getElementById('importChart');
    if (importChartEl) {
        new ApexCharts(importChartEl, {
            series: [{
                name: 'Import Shipments',
                data: [42, 55, 61, 56, 58, 72, 65, 78, 82, 76, 88, 92]
            }, {
                name: 'Clearances',
                data: [38, 48, 55, 52, 54, 68, 62, 74, 78, 72, 84, 88]
            }],
            chart: { type: 'line', height: 280, toolbar: { show: true }, fontFamily: 'Inter' },
            colors: ['#198754', '#ffc107'],
            stroke: { curve: 'smooth', width: 2.5 },
            markers: { size: 4, strokeWidth: 2 },
            dataLabels: { enabled: false },
            xaxis: {
                categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
                labels: { style: { fontSize: '12px', colors: '#6c757d' } }
            },
            yaxis: { labels: { style: { fontSize: '12px', colors: '#6c757d' } } },
            grid: { borderColor: '#f1f3f5', strokeDashArray: 4 },
            legend: { position: 'top', fontSize: '12px' }
        }).render();
    }

    // Mode Distribution Donut Chart
    const modeChartEl = document.getElementById('modeChart');
    if (modeChartEl) {
        new ApexCharts(modeChartEl, {
            series: [45, 25, 18, 12],
            chart: { type: 'donut', height: 280, fontFamily: 'Inter' },
            labels: ['Ocean', 'Air', 'Road', 'Rail'],
            colors: ['#0d6efd', '#0dcaf0', '#ffc107', '#198754'],
            plotOptions: { pie: { donut: { size: '65%', labels: { show: true, total: { show: true, label: 'Total', formatter: function(w) { return w.globals.seriesTotals.reduce(function(a, b) { return a + b; }, 0); } } } } },
            legend: { position: 'bottom', fontSize: '12px' },
            dataLabels: { enabled: true, formatter: function(val) { return val.toFixed(0) + '%'; }, style: { fontSize: '11px' } },
            tooltip: { y: { formatter: function(val) { return val + ' shipments'; } } }
        }).render();
    }

    // Dark Mode Toggle
    const darkToggle = document.getElementById('darkModeToggle');
    if (darkToggle) {
        darkToggle.addEventListener('click', function(e) {
            e.preventDefault();
            e.stopPropagation();
            const html = document.documentElement;
            const isDark = html.getAttribute('data-bs-theme') === 'dark';
            html.setAttribute('data-bs-theme', isDark ? 'light' : 'dark');
            fetch('/settings/dark-mode', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content,
                    'Accept': 'application/json'
                },
                body: JSON.stringify({ dark_mode: !isDark })
            });
        });
    }

    // Notification polling
    setInterval(function() {
        fetch('/notifications/unread-count', {
            headers: { 'Accept': 'application/json', 'X-Requested-With': 'XMLHttpRequest' }
        }).then(function(r) { return r.json(); }).then(function(data) {
            const badge = document.getElementById('notificationBadge');
            if (badge) {
                if (data.count > 0) {
                    badge.textContent = data.count > 99 ? '99+' : data.count;
                    badge.style.display = '';
                } else {
                    badge.style.display = 'none';
                }
            }
        }).catch(function() {});
    }, 60000);

    // Approve/Reject buttons
    document.querySelectorAll('.approve-btn').forEach(function(btn) {
        btn.addEventListener('click', function() {
            Swal.fire({
                title: 'Approve?',
                text: 'Are you sure you want to approve this item?',
                icon: 'question',
                showCancelButton: true,
                confirmButtonColor: '#198754',
                confirmButtonText: 'Yes, Approve'
            }).then(function(result) {
                if (result.isConfirmed) { Swal.fire('Approved!', '', 'success'); }
            });
        });
    });

    document.querySelectorAll('.reject-btn').forEach(function(btn) {
        btn.addEventListener('click', function() {
            Swal.fire({
                title: 'Reject?',
                text: 'Are you sure you want to reject this item?',
                icon: 'warning',
                showCancelButton: true,
                confirmButtonColor: '#dc3545',
                confirmButtonText: 'Yes, Reject'
            }).then(function(result) {
                if (result.isConfirmed) { Swal.fire('Rejected!', '', 'error'); }
            });
        });
    });
});
</script>
@endpush