{{-- New-Unity ERP | Modules/Products/Resources/Views/products/datasheet.blade.php | v1.3 | 26/07/2026 --}}
{{-- v1.3 — Tabla proveedores: 🥇 badge en mejor precio activo, ⚠️ en status de expirados. --}}
{{-- v1.2 — Sección Proveedores convertida en tabla completa (moneda, IVA, total, vigencia, editar). --}}
{{--         Botón "+ Agregar Proveedor" en header de la card. --}}
{{-- v1.1 — part-hash usa product_number en vez de $product->id. --}}
{{-- v1.0 — Product Datasheet: hub central con 8 dimensiones en grid 3 columnas. --}}
@extends('layouts.vertical')

@section('content')
<div class="container-fluid px-3 py-2">

    {{-- Header --}}
    <div class="d-flex justify-content-between align-items-start mb-3">
        <div>
            <a href="{{ route('products.by_category', $product->category_id) }}"
               class="btn btn-sm btn-light me-2">
                <i class="fad fa-arrow-left me-1"></i>{{ __('products.back') }}
            </a>
        </div>
        <div class="d-flex gap-2">
            <a href="{{ route('products.details', $product->id) }}"
               class="btn btn-sm btn-outline-secondary">
                <i class="fad fa-info-circle me-1"></i>{{ __('products.ds-product-details') }}
            </a>
            <a href="{{ route('products.edit', $product->id) }}"
               class="btn btn-sm btn-warning">
                <i class="fad fa-edit me-1"></i>{{ __('products.edit') }}
            </a>
        </div>
    </div>

    {{-- Product Header Card --}}
    <div class="card mb-3" style="border: 0.5px solid var(--bs-border-color); border-radius: 12px;">
        <div class="card-body py-3 px-4">
            <div class="d-flex justify-content-between align-items-start">
                <div>
                    <h4 class="mb-1 fw-bold">{{ $product->product_name }}</h4>
                    <p class="text-muted mb-0 small">
                        {{ __('products.sku') }}: <strong>{{ $product->sku }}</strong>
                        &nbsp;·&nbsp; {{ __('products.part-hash') }}: <strong>{{ $product->product_number }}</strong>
                        &nbsp;·&nbsp; {{ $product->category?->group?->es_name }} / {{ $product->category?->name }}
                        &nbsp;·&nbsp; {{ $product->brand?->validbrand_id }}
                    </p>
                </div>
                <div class="d-flex gap-2 align-items-center">
                    @php
                        $mtColors = ['TR'=>'info','RM'=>'warning','FG'=>'success','SV'=>'secondary'];
                        $mtColor  = $mtColors[$product->material_type] ?? 'secondary';
                    @endphp
                    <span class="badge bg-{{ $mtColor }}">{{ $product->material_type }}</span>
                    @if($activeCost)
                        <span class="badge bg-success">
                            <i class="fas fa-check-circle me-1"></i>{{ __('products.ds-cost-valid') }}
                        </span>
                    @else
                        <span class="badge bg-danger">
                            <i class="fas fa-exclamation-circle me-1"></i>{{ __('products.ds-cost-invalid') }}
                        </span>
                    @endif
                </div>
            </div>
        </div>
    </div>

    {{-- Grid 3 columnas --}}
    <div class="row g-3">

        {{-- ══════════════════════════════════════════════════ --}}
        {{-- FILA 1: Costo actual | Identidad | Alertas        --}}
        {{-- ══════════════════════════════════════════════════ --}}

        {{-- Costo actual --}}
        <div class="col-md-4">
            <div class="card h-100" style="border-radius:12px;">
                <div class="card-body p-3">
                    <div class="d-flex justify-content-between align-items-center mb-2">
                        <span class="text-muted small fw-bold text-uppercase" style="font-size:10px; letter-spacing:.05em;">
                            <i class="fas fa-tag me-1"></i>{{ __('products.ds-current-cost') }}
                        </span>
                        @if($activeCost)
                        <a href="{{ route('purchases.costs.edit', $activeCost->id) }}"
                           class="btn btn-outline-primary btn-sm" style="font-size:10px; padding:2px 8px;">
                            <i class="fas fa-edit me-1"></i>{{ __('products.ds-edit') }}
                        </a>
                        @else
                        <a href="{{ route('purchases.costs.create', ['product_id' => $product->id]) }}"
                           class="btn btn-outline-success btn-sm" style="font-size:10px; padding:2px 8px;">
                            <i class="fas fa-plus me-1"></i>{{ __('products.ds-add') }}
                        </a>
                        @endif
                    </div>
                    @if($activeCost)
                        <p class="mb-0" style="font-size:22px; font-weight:500;">
                            ${{ number_format($activeCost->cost, 2) }}
                            <span class="text-muted" style="font-size:12px; font-weight:400;">{{ $activeCost->currency }}</span>
                        </p>
                        <p class="text-muted mb-2" style="font-size:11px;">
                            {{ __('products.ds-list-cost-valid-until') }} {{ $activeCost->valid_to?->format('d/m/Y') ?? __('products.ds-no-date') }}
                        </p>
                        <hr class="my-2">
                        <div class="d-flex justify-content-between mb-1">
                            <span class="text-muted" style="font-size:11px;">IVA ({{ $activeCost->iva_perc }}%)</span>
                            <span style="font-size:12px; font-weight:500;">${{ number_format($activeCost->iva_amount, 2) }}</span>
                        </div>
                        <div class="d-flex justify-content-between mb-1">
                            <span class="text-muted" style="font-size:11px;">IEPS ({{ $activeCost->ieps_perc }}%)</span>
                            <span style="font-size:12px; font-weight:500;">
                                @if($activeCost->ieps_perc > 0)
                                    ${{ number_format($activeCost->ieps_amount, 2) }}
                                @else
                                    <span class="text-muted">—</span>
                                @endif
                            </span>
                        </div>
                        <div class="d-flex justify-content-between mb-1">
                            <span class="text-muted" style="font-size:11px;">{{ __('products.ds-total-cost') }}</span>
                            <span style="font-size:12px; font-weight:500;">${{ number_format($activeCost->total_cost, 2) }}</span>
                        </div>
                        <div class="d-flex justify-content-between mb-1">
                            <span class="text-muted" style="font-size:11px;">{{ __('products.ds-avg-cost') }}</span>
                            <span style="font-size:12px; font-weight:500; color:#0C447C;">${{ number_format($activeCost->avg_cost, 2) }}</span>
                        </div>
                        <div class="d-flex justify-content-between">
                            <span class="text-muted" style="font-size:11px;">{{ __('products.ds-supplier') }}</span>
                            <span style="font-size:11px;" class="text-muted fst-italic">
                                {{ $activeCost->supplier?->commercial_name ?? __('products.ds-generic') }}
                            </span>
                        </div>
                    @else
                        <div class="text-center py-4 text-muted">
                            <i class="fas fa-tag fa-2x d-block mb-2 opacity-25"></i>
                            <p class="small mb-2">{{ __('products.ds-no-cost-registered') }}</p>
                            <a href="{{ route('purchases.costs.create', ['product_id' => $product->id]) }}"
                               class="btn btn-success btn-sm">
                                <i class="fas fa-plus me-1"></i>{{ __('products.ds-register-cost') }}
                            </a>
                        </div>
                    @endif
                </div>
            </div>
        </div>

        {{-- Identidad --}}
        <div class="col-md-4">
            <div class="card h-100" style="border-radius:12px;">
                <div class="card-body p-3">
                    <span class="text-muted small fw-bold text-uppercase d-block mb-2" style="font-size:10px; letter-spacing:.05em;">
                        <i class="fas fa-id-badge me-1"></i>{{ __('products.ds-identity') }}
                    </span>
                    @php
                        $fields = [
                            __('products.sku')             => $product->sku,
                            __('products.part-hash')       => $product->product_number,
                            __('products.product-code')    => $product->product_code,
                            __('products.barcode-label')   => $product->barcode,
                            __('products.ds-material-type') => ($product->material_type ?? '—') . ' — ' . match($product->material_type) {
                                'TR'  => __('products.mt-commercial'),
                                'RM'  => __('products.mt-raw-material'),
                                'FG'  => __('products.mt-finished-good'),
                                'SV'  => __('products.mt-service'),
                                default => ''
                            },
                            __('products.sat-code')        => $product->tax_code,
                            __('products.sat-unity')       => $product->unity,
                            __('products.brand')           => $product->brand?->validbrand_id,
                            __('products.family')          => $product->family,
                            __('products.model')           => $product->model,
                        ];
                    @endphp
                    @foreach($fields as $label => $value)
                        @if($value)
                        <div class="d-flex justify-content-between mb-1">
                            <span class="text-muted" style="font-size:11px;">{{ $label }}</span>
                            <span style="font-size:11px; font-weight:500; text-align:right; max-width:60%;" class="text-truncate">{{ $value }}</span>
                        </div>
                        @endif
                    @endforeach
                </div>
            </div>
        </div>

        {{-- Alertas --}}
        <div class="col-md-4">
            <div class="card h-100" style="border-radius:12px;">
                <div class="card-body p-3">
                    <span class="text-muted small fw-bold text-uppercase d-block mb-2" style="font-size:10px; letter-spacing:.05em;">
                        <i class="fas fa-bell me-1"></i>{{ __('products.ds-alerts') }}
                    </span>
                    @if($activeCost)
                        @php $daysLeft = $activeCost->daysRemaining(); @endphp
                        @if($daysLeft > 30)
                        <div class="d-flex align-items-center gap-2 p-2 rounded mb-2" style="background:#EAF3DE; color:#27500A; font-size:11px;">
                            <i class="fas fa-check-circle"></i>
                            {{ __('products.ds-cost-valid-days', ['days' => $daysLeft]) }}
                        </div>
                        @elseif($daysLeft > 0)
                        <div class="d-flex align-items-center gap-2 p-2 rounded mb-2" style="background:#FAEEDA; color:#633806; font-size:11px;">
                            <i class="fas fa-clock"></i>
                            {{ __('products.ds-cost-expires-days', ['days' => $daysLeft]) }}
                        </div>
                        @else
                        <div class="d-flex align-items-center gap-2 p-2 rounded mb-2" style="background:#FCEBEB; color:#791F1F; font-size:11px;">
                            <i class="fas fa-exclamation-circle"></i>
                            {{ __('products.ds-cost-expired') }}
                        </div>
                        @endif
                    @else
                        <div class="d-flex align-items-center gap-2 p-2 rounded mb-2" style="background:#FCEBEB; color:#791F1F; font-size:11px;">
                            <i class="fas fa-exclamation-circle"></i>
                            {{ __('products.ds-no-cost-rfq') }}
                        </div>
                    @endif

                    @if($supplierCount <= 1)
                    <div class="d-flex align-items-center gap-2 p-2 rounded mb-2" style="background:#FAEEDA; color:#633806; font-size:11px;">
                        <i class="fas fa-alert-triangle"></i>
                        {{ __('products.ds-only-supplier', ['count' => $supplierCount]) }}
                    </div>
                    @else
                    <div class="d-flex align-items-center gap-2 p-2 rounded mb-2" style="background:#EAF3DE; color:#27500A; font-size:11px;">
                        <i class="fas fa-check-circle"></i>
                        {{ __('products.ds-suppliers-registered', ['count' => $supplierCount]) }}
                    </div>
                    @endif

                    @if($activeRfqCount > 0)
                    <div class="d-flex align-items-center gap-2 p-2 rounded mb-2" style="background:#EAF3DE; color:#27500A; font-size:11px;">
                        <i class="fas fa-file-invoice"></i>
                        {{ __('products.ds-active-rfqs', ['count' => $activeRfqCount]) }}
                    </div>
                    @else
                    <div class="d-flex align-items-center gap-2 p-2 rounded mb-2" style="background:#FAEEDA; color:#633806; font-size:11px;">
                        <i class="fas fa-file-invoice"></i>
                        {{ __('products.ds-no-active-rfq') }}
                    </div>
                    @endif

                    @if($historyCount > 0)
                    <div class="d-flex align-items-center gap-2 p-2 rounded mb-2" style="background:#EAF3DE; color:#27500A; font-size:11px;">
                        <i class="fas fa-check-circle"></i>
                        {{ __('products.ds-history-records', ['count' => $historyCount]) }}
                    </div>
                    @endif

                    <hr class="my-2">
                    <div class="d-flex gap-2">
                        <a href="{{ route('purchases.rfq.create') }}"
                           class="btn btn-outline-primary btn-sm w-100" style="font-size:10px;">
                            <i class="fas fa-plus me-1"></i>{{ __('products.ds-new-rfq') }}
                        </a>
                    </div>
                </div>
            </div>
        </div>

        {{-- ══════════════════════════════════════════════════ --}}
        {{-- FILA 2: Gráfica de precios (span 3)               --}}
        {{-- ══════════════════════════════════════════════════ --}}
        <div class="col-12">
            <div class="card" style="border-radius:12px;">
                <div class="card-body p-3">
                    <div class="d-flex justify-content-between align-items-center mb-2">
                        <span class="text-muted small fw-bold text-uppercase" style="font-size:10px; letter-spacing:.05em;">
                            <i class="fas fa-chart-line me-1"></i>{{ __('products.ds-price-trend') }}
                        </span>
                        <a href="{{ route('purchases.costs.history', ['product_id' => $product->id]) }}"
                           class="btn btn-outline-secondary btn-sm" style="font-size:10px; padding:2px 8px;">
                            {{ __('products.ds-view-full-history') }}
                        </a>
                    </div>
                    @if($priceHistory->count() > 0)
                        <canvas id="chartPrices" height="60"></canvas>
                    @else
                        <div class="text-center text-muted py-4">
                            <i class="fas fa-chart-line fa-2x d-block mb-2 opacity-25"></i>
                            <p class="small mb-0">{{ __('products.ds-no-price-history') }}</p>
                        </div>
                    @endif
                </div>
            </div>
        </div>

        {{-- ══════════════════════════════════════════════════ --}}
        {{-- FILA 3: Proveedores (span 2) | Estadísticas       --}}
        {{-- ══════════════════════════════════════════════════ --}}

        {{-- Proveedores --}}
        <div class="col-md-8">
            <div class="card h-100" style="border-radius:12px;">
                <div class="card-body p-3">
                    <div class="d-flex justify-content-between align-items-center mb-2">
                        <span class="text-muted small fw-bold text-uppercase" style="font-size:10px; letter-spacing:.05em;">
                            <i class="fas fa-truck me-1"></i>{{ __('products.ds-suppliers-quotes') }}
                        </span>
                        <div class="d-flex gap-1">
                            @can('costs.create')
                            <a href="{{ route('purchases.costs.create', ['product_id' => $product->id]) }}"
                               class="btn btn-outline-success btn-sm" style="font-size:10px; padding:2px 8px;">
                                <i class="fas fa-plus me-1"></i>{{ __('products.ds-add-supplier') }}
                            </a>
                            @endcan
                            <a href="{{ route('purchases.rfq.index') }}"
                               class="btn btn-outline-secondary btn-sm" style="font-size:10px; padding:2px 8px;">
                                {{ __('products.ds-view-rfqs') }}
                            </a>
                        </div>
                    </div>

                    @if($costsBySupplier->isNotEmpty())
                    @php
                        $bestActiveId = $costsBySupplier->filter(fn($c) => $c->isActive())->sortBy('cost')->first()?->id;
                    @endphp
                    <div class="table-responsive" style="max-height:220px; overflow-y:auto;">
                        <table class="table table-sm align-middle mb-0" style="font-size:11px;">
                            <thead class="table-light sticky-top">
                                <tr>
                                    <th>{{ __('products.ds-supplier') }}</th>
                                    <th class="text-end">{{ __('products.ds-list-cost') }}</th>
                                    <th class="text-center">Mon.</th>
                                    <th class="text-center">IVA%</th>
                                    <th class="text-end">{{ __('products.ds-total-cost') }}</th>
                                    <th class="text-center">{{ __('products.ds-col-valid-to') }}</th>
                                    <th class="text-center">Status</th>
                                    <th></th>
                                </tr>
                            </thead>
                            <tbody>
                            @foreach($costsBySupplier as $cost)
                                <tr class="{{ !$cost->isActive() ? 'table-danger bg-opacity-10' : '' }}">
                                    <td class="fw-semibold" style="max-width:150px;">
                                        <span class="d-block text-truncate"
                                              title="{{ $cost->supplier?->commercial_name ?? $cost->supplier?->name ?? __('products.ds-generic') }}">
                                            {{ $cost->supplier?->commercial_name ?? $cost->supplier?->name ?? __('products.ds-generic') }}
                                        </span>
                                        @if($bestActiveId && $cost->id === $bestActiveId)
                                            <span class="badge bg-warning text-dark" style="font-size:8px;">🥇 {{ __('products.ds-best-price') }}</span>
                                        @endif
                                    </td>
                                    <td class="text-end">${{ number_format($cost->cost, 2) }}</td>
                                    <td class="text-center text-muted">{{ $cost->currency }}</td>
                                    <td class="text-center text-muted">{{ number_format($cost->iva_perc, 0) }}%</td>
                                    <td class="text-end fw-semibold text-success">${{ number_format($cost->total_cost, 2) }}</td>
                                    <td class="text-center text-muted">{{ $cost->valid_to?->format('d/m/Y') ?? '—' }}</td>
                                    <td class="text-center">
                                        @if($cost->isActive())
                                            <span class="badge bg-success" style="font-size:9px;">{{ __('products.ds-active') }}</span>
                                        @else
                                            <span class="badge bg-danger" style="font-size:9px;">⚠️ {{ __('products.ds-expired') }}</span>
                                        @endif
                                    </td>
                                    <td class="text-center">
                                        @can('costs.edit')
                                        <a href="{{ route('purchases.costs.edit', $cost->id) }}"
                                           class="btn btn-outline-primary" style="font-size:9px; padding:1px 6px;"
                                           title="{{ __('products.ds-edit') }}">
                                            <i class="fas fa-edit"></i>
                                        </a>
                                        @endcan
                                    </td>
                                </tr>
                            @endforeach
                            </tbody>
                        </table>
                    </div>
                    @else
                    <div class="text-center text-muted py-3">
                        <i class="fas fa-truck fa-2x d-block mb-2 opacity-25"></i>
                        <p class="small mb-2">{{ __('products.ds-no-suppliers') }}</p>
                        <a href="{{ route('purchases.rfq.create') }}" class="btn btn-outline-primary btn-sm">
                            <i class="fas fa-plus me-1"></i>{{ __('products.ds-create-rfq') }}
                        </a>
                    </div>
                    @endif
                    <hr class="my-2">
                    <div class="row g-2 mt-1">
                        <div class="col-3">
                            <div class="p-2 rounded" style="background:var(--bs-light); text-align:center;">
                                <div style="font-size:14px; font-weight:500;">{{ $activeRfqCount }}</div>
                                <div style="font-size:10px; color:var(--bs-secondary);">{{ __('products.ds-active-rfqs-label') }}</div>
                            </div>
                        </div>
                        <div class="col-3">
                            <div class="p-2 rounded" style="background:var(--bs-light); text-align:center;">
                                <div style="font-size:14px; font-weight:500;">{{ $supplierCount }}</div>
                                <div style="font-size:10px; color:var(--bs-secondary);">{{ __('products.ds-suppliers-label') }}</div>
                            </div>
                        </div>
                        <div class="col-3">
                            <div class="p-2 rounded" style="background:var(--bs-light); text-align:center;">
                                <div style="font-size:14px; font-weight:500;">
                                    @if($bestCost) ${{ number_format($bestCost->cost, 2) }} @else — @endif
                                </div>
                                <div style="font-size:10px; color:var(--bs-secondary);">{{ __('products.ds-best-price') }}</div>
                            </div>
                        </div>
                        <div class="col-3">
                            <div class="p-2 rounded" style="background:var(--bs-light); text-align:center;">
                                <div style="font-size:14px; font-weight:500;">{{ $historyCount }}</div>
                                <div style="font-size:10px; color:var(--bs-secondary);">{{ __('products.ds-price-changes') }}</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        {{-- Estadísticas de precio --}}
        <div class="col-md-4">
            <div class="card h-100" style="border-radius:12px;">
                <div class="card-body p-3">
                    <span class="text-muted small fw-bold text-uppercase d-block mb-2" style="font-size:10px; letter-spacing:.05em;">
                        <i class="fas fa-chart-bar me-1"></i>{{ __('products.ds-price-stats') }}
                    </span>
                    <div class="row g-2">
                        <div class="col-6">
                            <div class="p-2 rounded" style="background:var(--bs-light);">
                                <div style="font-size:13px; font-weight:500;">
                                    @if($priceStats['current']) ${{ number_format($priceStats['current'], 2) }} @else — @endif
                                </div>
                                <div style="font-size:10px; color:var(--bs-secondary);">{{ __('products.ds-current-price') }}</div>
                            </div>
                        </div>
                        <div class="col-6">
                            <div class="p-2 rounded" style="background:var(--bs-light);">
                                <div style="font-size:13px; font-weight:500;">
                                    @if($priceStats['avg']) ${{ number_format($priceStats['avg'], 2) }} @else — @endif
                                </div>
                                <div style="font-size:10px; color:var(--bs-secondary);">{{ __('products.ds-avg-12m') }}</div>
                            </div>
                        </div>
                        <div class="col-6">
                            <div class="p-2 rounded" style="background:var(--bs-light);">
                                <div style="font-size:13px; font-weight:500; color:#27500A;">
                                    @if($priceStats['min']) ${{ number_format($priceStats['min'], 2) }} @else — @endif
                                </div>
                                <div style="font-size:10px; color:var(--bs-secondary);">{{ __('products.ds-min-hist') }}</div>
                            </div>
                        </div>
                        <div class="col-6">
                            <div class="p-2 rounded" style="background:var(--bs-light);">
                                <div style="font-size:13px; font-weight:500; color:#791F1F;">
                                    @if($priceStats['max']) ${{ number_format($priceStats['max'], 2) }} @else — @endif
                                </div>
                                <div style="font-size:10px; color:var(--bs-secondary);">{{ __('products.ds-max-hist') }}</div>
                            </div>
                        </div>
                        <div class="col-6">
                            <div class="p-2 rounded" style="background:var(--bs-light);">
                                <div style="font-size:13px; font-weight:500;
                                    color:{{ $priceStats['variation'] > 0 ? '#791F1F' : ($priceStats['variation'] < 0 ? '#27500A' : 'inherit') }}">
                                    {{ $priceStats['variation'] !== null ? number_format($priceStats['variation'], 2).'%' : '—' }}
                                </div>
                                <div style="font-size:10px; color:var(--bs-secondary);">{{ __('products.ds-variation') }}</div>
                            </div>
                        </div>
                        <div class="col-6">
                            <div class="p-2 rounded" style="background:var(--bs-light);">
                                <div style="font-size:13px; font-weight:500;">{{ $historyCount }}</div>
                                <div style="font-size:10px; color:var(--bs-secondary);">{{ __('products.ds-total-changes') }}</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        {{-- ══════════════════════════════════════════════════ --}}
        {{-- FILA 4: Inventario | POs | Ventas (pendientes)    --}}
        {{-- ══════════════════════════════════════════════════ --}}

        <div class="col-md-4">
            <div class="card" style="border-radius:12px;">
                <div class="card-body p-3">
                    <span class="text-muted small fw-bold text-uppercase d-block mb-2" style="font-size:10px; letter-spacing:.05em;">
                        <i class="fas fa-warehouse me-1"></i>{{ __('products.ds-inventory') }}
                    </span>
                    <div class="text-center py-4 text-muted">
                        <i class="fas fa-warehouse fa-2x d-block mb-2 opacity-25"></i>
                        <p class="small mb-0">{{ __('products.ds-warehouse-pending') }}</p>
                    </div>
                </div>
            </div>
        </div>

        <div class="col-md-4">
            <div class="card" style="border-radius:12px;">
                <div class="card-body p-3">
                    <span class="text-muted small fw-bold text-uppercase d-block mb-2" style="font-size:10px; letter-spacing:.05em;">
                        <i class="fas fa-file-invoice me-1"></i>{{ __('products.ds-purchase-orders') }}
                    </span>
                    <div class="text-center py-4 text-muted">
                        <i class="fas fa-file-invoice fa-2x d-block mb-2 opacity-25"></i>
                        <p class="small mb-0">{{ __('products.ds-po-pending') }}</p>
                    </div>
                </div>
            </div>
        </div>

        <div class="col-md-4">
            <div class="card" style="border-radius:12px;">
                <div class="card-body p-3">
                    <span class="text-muted small fw-bold text-uppercase d-block mb-2" style="font-size:10px; letter-spacing:.05em;">
                        <i class="fas fa-chart-bar me-1"></i>{{ __('products.ds-sales-consumption') }}
                    </span>
                    <div class="text-center py-4 text-muted">
                        <i class="fas fa-chart-bar fa-2x d-block mb-2 opacity-25"></i>
                        <p class="small mb-0">{{ __('products.ds-sales-pending') }}</p>
                    </div>
                </div>
            </div>
        </div>

    </div>
</div>
@endsection

@section('scripts')
@parent
<script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.0/dist/chart.umd.min.js"></script>
<script>
@if($priceHistory->count() > 0)
(function() {
    var labels = @json($priceHistory->pluck('created_at')->map(fn($d) => \Carbon\Carbon::parse($d)->format('d/m/Y')));
    var prices = @json($priceHistory->pluck('cost_new'));
    var isDark = document.documentElement.getAttribute('data-mode') === 'dark'
              || matchMedia('(prefers-color-scheme:dark)').matches;
    var gridC  = isDark ? 'rgba(255,255,255,0.07)' : 'rgba(0,0,0,0.06)';
    var textC  = isDark ? '#9c9a92' : '#73726c';

    new Chart(document.getElementById('chartPrices'), {
        type: 'line',
        data: {
            labels: labels,
            datasets: [{
                label: '{{ __('products.ds-list-cost') }}',
                data: prices,
                borderColor: '#534AB7',
                backgroundColor: 'rgba(83,74,183,0.08)',
                borderWidth: 2,
                pointRadius: 3,
                pointBackgroundColor: '#534AB7',
                fill: true,
                tension: 0.35,
            }]
        },
        options: {
            responsive: true,
            plugins: {
                legend: { display: false },
                tooltip: {
                    callbacks: {
                        label: function(ctx) {
                            return ' $' + parseFloat(ctx.parsed.y).toFixed(2);
                        }
                    }
                }
            },
            scales: {
                x: { grid: { color: gridC }, ticks: { color: textC, font: { size: 11 } } },
                y: {
                    grid: { color: gridC },
                    ticks: { color: textC, font: { size: 11 }, callback: function(v) { return '$' + v; } }
                }
            }
        }
    });
})();
@endif
</script>
@endsection