@php
    $title = __('Operations Dashboard');
@endphp

@section('title', $title)

@section('vendor-style')
@vite(['resources/assets/vendor/libs/apex-charts/apex-charts.scss'])
@endsection

@section('vendor-script')
@vite(['resources/assets/vendor/libs/apex-charts/apexcharts.js'])
@endsection

@extends('layouts.layoutMaster')

@section('content')
<x-breadcrumb
    :title="$title"
    :breadcrumbs="[
        ['name' => __('Operations'), 'url' => route('systemcore.dashboard')],
        ['name' => __('Dashboard')]
    ]"
>
    <x-slot name="actions">
        <div class="d-flex gap-2">
            <a href="{{ route('systemcore.sales-orders.create') }}" class="btn btn-primary">
                <i class="bx bx-plus me-1"></i>{{ __('New Sales Order') }}
            </a>
        </div>
    </x-slot>
</x-breadcrumb>

{{-- Master Data Overview --}}
<div class="row mb-4">
    <div class="col-12">
        <h5 class="mb-3 d-flex align-items-center gap-2">
            <i class="bx bx-data"></i> {{ __('Master Data Overview') }}
        </h5>
    </div>
    <x-dashboard.stat-card
        :title="__('Total Customers')"
        :value="$statistics['total_customers']"
        icon="bx-user"
        iconColor="primary"
        :change="$statistics['active_customers'] . ' ' . __('Active')"
        changeType="up"
        :url="route('systemcore.customers.index')"
    />
    <x-dashboard.stat-card
        :title="__('Total Suppliers')"
        :value="$statistics['total_suppliers']"
        icon="bx-store"
        iconColor="info"
        :change="$statistics['active_suppliers'] . ' ' . __('Active')"
        changeType="up"
        :url="route('systemcore.suppliers.index')"
    />
    <x-dashboard.stat-card
        :title="__('Total Products')"
        :value="$statistics['total_products']"
        icon="bx-package"
        iconColor="success"
        :change="$statistics['active_products'] . ' ' . __('Active')"
        changeType="up"
        :url="route('systemcore.products.index')"
    />
    @if($lowStockCount > 0)
        <x-dashboard.stat-card
            :title="__('Low Stock Alert')"
            :value="$lowStockCount"
            icon="bx-error-circle"
            iconColor="danger"
            :change="__('items low')"
            changeType="down"
        />
    @else
        <x-dashboard.stat-card
            :title="__('Stock Status')"
            value="OK"
            icon="bx-check-circle"
            iconColor="success"
            :change="__('All products in stock')"
            changeType="neutral"
        />
    @endif
</div>

{{-- Orders Overview --}}
<div class="row mb-4">
    <div class="col-12">
        <h5 class="mb-3 d-flex align-items-center gap-2">
            <i class="bx bx-cart"></i> {{ __('Orders Overview') }}
        </h5>
    </div>
    <x-dashboard.stat-card
        :title="__('Sales Orders')"
        :value="$statistics['total_sales_orders']"
        icon="bx-cart"
        iconColor="primary"
        :change="__('Total Orders')"
        changeType="neutral"
        :url="route('systemcore.sales-orders.index')"
    />
    <x-dashboard.stat-card
        :title="__('Purchase Orders')"
        :value="$statistics['total_purchase_orders']"
        icon="bx-shopping-bag"
        iconColor="info"
        :change="__('Total Orders')"
        changeType="neutral"
        :url="route('systemcore.purchase-orders.index')"
    />
    <x-dashboard.stat-card
        :title="__('Orders Today')"
        :value="$statistics['orders_today']"
        icon="bx-calendar-check"
        iconColor="warning"
        :change="__('Sales orders')"
        changeType="neutral"
    />
    <x-dashboard.stat-card
        :title="__('This Month')"
        :value="($settings->currency_symbol ?? '$') . number_format($statistics['sales_this_month'] ?? 0, 2)"
        icon="bx-trending-up"
        iconColor="success"
        :change="__('Sales total')"
        changeType="up"
    />
</div>

{{-- Order Status Breakdown --}}
<div class="row mb-4">
    <div class="col-12">
        <h5 class="mb-3 d-flex align-items-center gap-2">
            <i class="bx bx-stats"></i> {{ __('Order Status') }}
        </h5>
    </div>
    <div class="col-12">
        <div class="card">
            <div class="card-body">
                <div class="d-flex flex-wrap gap-3">
                    @php
                        $statuses = [
                            'draft' => ['label' => __('Draft'), 'color' => 'secondary', 'icon' => 'bx-file-blank'],
                            'pending' => ['label' => __('Pending'), 'color' => 'warning', 'icon' => 'bx-time'],
                            'confirmed' => ['label' => __('Confirmed'), 'color' => 'info', 'icon' => 'bx-check'],
                            'processing' => ['label' => __('Processing'), 'color' => 'primary', 'icon' => 'bx-loader'],
                            'shipped' => ['label' => __('Shipped'), 'color' => 'info', 'icon' => 'bx-package'],
                            'delivered' => ['label' => __('Delivered'), 'color' => 'success', 'icon' => 'bx-check-double'],
                            'completed' => ['label' => __('Completed'), 'color' => 'success', 'icon' => 'bx-check-circle'],
                            'cancelled' => ['label' => __('Cancelled'), 'color' => 'danger', 'icon' => 'bx-x-circle'],
                        ];
                    @endphp
                    @foreach($statuses as $key => $status)
                        @php
                            $count = ($salesByStatus[$key] ?? 0) + ($purchaseByStatus[$key] ?? 0);
                        @endphp
                        @if($count > 0)
                            <div class="d-flex align-items-center gap-2 px-3 py-2 rounded bg-label-{{ $status['color'] }}">
                                <i class="bx {{ $status['icon'] }}"></i>
                                <span class="fw-medium">{{ $status['label'] }}</span>
                                <span class="badge bg-{{ $status['color'] }} rounded-pill">{{ $count }}</span>
                            </div>
                        @endif
                    @endforeach
                    @if(array_sum($salesByStatus) + array_sum($purchaseByStatus) === 0)
                        <span class="text-muted">{{ __('No orders yet') }}</span>
                    @endif
                </div>
            </div>
        </div>
    </div>
</div>

{{-- Charts & Activity --}}
<div class="row mb-4">
    {{-- Master Data Distribution Chart --}}
    <div class="col-lg-6 col-md-12 mb-4">
        <div class="card h-100">
            <div class="card-header d-flex justify-content-between align-items-center">
                <h5 class="card-title mb-0">
                    <i class="bx bx-pie-chart-alt me-2"></i>{{ __('Master Data Distribution') }}
                </h5>
            </div>
            <div class="card-body d-flex align-items-center justify-content-center">
                <div id="masterDataChart" style="min-height: 280px; width: 100%;"></div>
            </div>
        </div>
    </div>

    {{-- Recent Sales Orders --}}
    <div class="col-lg-6 col-md-12 mb-4">
        <div class="card h-100">
            <div class="card-header d-flex justify-content-between align-items-center">
                <h5 class="card-title mb-0">
                    <i class="bx bx-receipt me-2"></i>{{ __('Recent Sales Orders') }}
                </h5>
                <a href="{{ route('systemcore.sales-orders.index') }}" class="btn btn-sm btn-outline-primary">
                    {{ __('View All') }} <i class="bx bx-right-arrow-alt"></i>
                </a>
            </div>
            <div class="card-body p-0">
                @if($recentSalesOrders->count() > 0)
                    <ul class="list-group list-group-flush">
                        @foreach($recentSalesOrders as $order)
                            <li class="list-group-item d-flex justify-content-between align-items-center">
                                <div>
                                    <a href="{{ route('systemcore.sales-orders.show', $order->id) }}" class="fw-medium text-heading">
                                        {{ $order->order_number }}
                                    </a>
                                    <br>
                                    <small class="text-muted">{{ $order->customer->name ?? 'N/A' }}</small>
                                </div>
                                <div class="text-end">
                                    <span class="fw-medium">{{ ($settings->currency_symbol ?? '$') . number_format($order->total_amount, 2) }}</span>
                                    <br>
                                    <span class="badge bg-label-{{ $order->status->color() }}">{{ $order->status->label() }}</span>
                                </div>
                            </li>
                        @endforeach
                    </ul>
                @else
                    <div class="text-center py-4 text-muted">
                        <i class="bx bx-receipt bx-lg mb-2"></i>
                        <p>{{ __('No recent orders') }}</p>
                    </div>
                @endif
            </div>
        </div>
    </div>
</div>

<div class="row mb-4">
    {{-- Quick Actions --}}
    <div class="col-lg-6 col-md-12 mb-4">
        <div class="card h-100">
            <div class="card-header">
                <h5 class="card-title mb-0">
                    <i class="bx bx-zap me-2"></i>{{ __('Quick Actions') }}
                </h5>
            </div>
            <div class="card-body">
                <div class="row g-3">
                    <div class="col-6">
                        <a href="{{ route('systemcore.customers.create') }}" class="btn btn-outline-primary w-100 py-3">
                            <i class="bx bx-user-plus bx-sm d-block mb-1"></i>
                            {{ __('Add Customer') }}
                        </a>
                    </div>
                    <div class="col-6">
                        <a href="{{ route('systemcore.suppliers.create') }}" class="btn btn-outline-info w-100 py-3">
                            <i class="bx bx-store-alt bx-sm d-block mb-1"></i>
                            {{ __('Add Supplier') }}
                        </a>
                    </div>
                    <div class="col-6">
                        <a href="{{ route('systemcore.products.create') }}" class="btn btn-outline-success w-100 py-3">
                            <i class="bx bx-package bx-sm d-block mb-1"></i>
                            {{ __('Add Product') }}
                        </a>
                    </div>
                    <div class="col-6">
                        <a href="{{ route('systemcore.sales-orders.create') }}" class="btn btn-outline-warning w-100 py-3">
                            <i class="bx bx-cart bx-sm d-block mb-1"></i>
                            {{ __('New Sales Order') }}
                        </a>
                    </div>
                    <div class="col-6">
                        <a href="{{ route('systemcore.purchase-orders.create') }}" class="btn btn-outline-secondary w-100 py-3">
                            <i class="bx bx-shopping-bag bx-sm d-block mb-1"></i>
                            {{ __('New Purchase Order') }}
                        </a>
                    </div>
                    <div class="col-6">
                        <a href="{{ route('systemcore.sync.index') }}" class="btn btn-outline-dark w-100 py-3">
                            <i class="bx bx-history bx-sm d-block mb-1"></i>
                            {{ __('Posting History') }}
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>

    {{-- Recent Purchase Orders --}}
    <div class="col-lg-6 col-md-12 mb-4">
        <div class="card h-100">
            <div class="card-header d-flex justify-content-between align-items-center">
                <h5 class="card-title mb-0">
                    <i class="bx bx-shopping-bag me-2"></i>{{ __('Recent Purchase Orders') }}
                </h5>
                <a href="{{ route('systemcore.purchase-orders.index') }}" class="btn btn-sm btn-outline-info">
                    {{ __('View All') }} <i class="bx bx-right-arrow-alt"></i>
                </a>
            </div>
            <div class="card-body p-0">
                @if($recentPurchaseOrders->count() > 0)
                    <ul class="list-group list-group-flush">
                        @foreach($recentPurchaseOrders as $order)
                            <li class="list-group-item d-flex justify-content-between align-items-center">
                                <div>
                                    <a href="{{ route('systemcore.purchase-orders.show', $order->id) }}" class="fw-medium text-heading">
                                        {{ $order->order_number }}
                                    </a>
                                    <br>
                                    <small class="text-muted">{{ $order->supplier->name ?? 'N/A' }}</small>
                                </div>
                                <div class="text-end">
                                    <span class="fw-medium">{{ ($settings->currency_symbol ?? '$') . number_format($order->total_amount, 2) }}</span>
                                    <br>
                                    <span class="badge bg-label-{{ $order->status->color() }}">{{ $order->status->label() }}</span>
                                </div>
                            </li>
                        @endforeach
                    </ul>
                @else
                    <div class="text-center py-4 text-muted">
                        <i class="bx bx-shopping-bag bx-lg mb-2"></i>
                        <p>{{ __('No recent orders') }}</p>
                    </div>
                @endif
            </div>
        </div>
    </div>
</div>
@endsection

@section('page-script')
<script>
// Pass data to dashboard.js
window.pageData = {
    statistics: @json($statistics),
    labels: {
        customers: @json(__('Customers')),
        suppliers: @json(__('Suppliers')),
        products: @json(__('Products')),
        total: @json(__('Total'))
    }
};
</script>
@vite(['Modules/SystemCore/resources/assets/js/dashboard.js'])
@endsection