@extends('layouts.admin')

@section('title', 'Pricing · Aromaniacs ERP')
@section('overline', 'Engine')
@section('heading', 'Pricing')

@section('content')
    {{-- KPI tiles --}}
    <section class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4 mb-6">
        @foreach ([
            ['label' => 'SKUs priced',       'value' => $metrics['total_priced']],
            ['label' => 'With cost data',    'value' => $metrics['with_cost']],
            ['label' => 'Avg cost / ml',     'value' => number_format($metrics['avg_cost_ml'], 2), 'suffix' => '৳/ml'],
            ['label' => 'Manual overrides',  'value' => $metrics['overrides']],
        ] as $tile)
            <div class="card">
                <p class="label" style="color: var(--color-ink-40);">{{ $tile['label'] }}</p>
                <p class="mt-3 text-4xl" style="font-family: var(--font-serif);">
                    {{ $tile['value'] }}
                    @if (! empty($tile['suffix']))
                        <span class="text-base" style="color: var(--color-ink-40);">{{ $tile['suffix'] }}</span>
                    @endif
                </p>
            </div>
        @endforeach
    </section>

    {{-- Filters --}}
    <section class="card mb-6">
        <form method="GET" action="{{ route('admin.pricing.index') }}" class="live-filter flex flex-col md:flex-row gap-2 w-full lg:max-w-4xl">
            <input
                type="search"
                name="q"
                class="input md:max-w-sm"
                value="{{ $query ?? '' }}"
                placeholder="Search brand, fragrance, or SKU"
                aria-label="Search pricing rows"
            >

            <select name="brand_id" class="input md:max-w-xs">
                <option value="">All brands</option>
                @foreach ($brands as $brand)
                    <option value="{{ $brand->id }}" @selected((int) $brandId === $brand->id)>{{ $brand->name }}</option>
                @endforeach
            </select>

            <select name="fragrance_id" class="input md:max-w-xs">
                <option value="">All fragrances</option>
                @foreach ($fragrances as $fragrance)
                    <option value="{{ $fragrance->id }}" @selected((int) $fragranceId === $fragrance->id)>
                        {{ $fragrance->name }} ({{ $fragrance->brand->name ?? '—' }})
                    </option>
                @endforeach
            </select>

            <div class="flex gap-2">
                @if (($query ?? '') !== '' || $brandId || $fragranceId)
                    <a href="{{ route('admin.pricing.index') }}" class="btn btn-ghost btn-icon" title="Clear filters" aria-label="Clear filters">
                        <i class="fi fi-rr-cross-small" aria-hidden="true"></i>
                    </a>
                @endif
            </div>
        </form>
    </section>

    {{-- Price sheet table --}}
    <section class="card">
        @if ($sheet->isEmpty())
            <div class="rounded-md border border-dashed px-6 py-12 text-center" style="border-color: var(--color-ink-12);">
                <p class="text-lg">No priced SKUs found.</p>
                <p class="mt-1 text-sm" style="color: var(--color-ink-70);">
                    Add bottle intakes and active SKUs to see computed prices.
                </p>
            </div>
        @else
            <div class="overflow-x-auto">
                <table class="data-table">
                    <thead>
                        <tr>
                            <th style="width: 4rem;">SL.</th>
                            <th style="width: 5rem;">Thumb</th>
                            <th>SKU</th>
                            <th>Fragrance</th>
                            <th>Brand</th>
                            <th>Size</th>
                            <th style="text-align: right;">Cost/ml</th>
                            <th style="text-align: right;">Juice Cost (Unit)</th>
                            <th style="text-align: right;">Multiplier</th>
                            <th style="text-align: right;">Bottle Cost</th>
                            <th style="text-align: right;">Computed</th>
                            <th style="text-align: right;">Override</th>
                            <th style="text-align: right;">Storefront Price</th>
                            <th style="text-align: right;">Actions</th>
                        </tr>
                    </thead>
                    <tbody>
                        @php $prevFragrance = null; @endphp
                        @foreach ($sheet as $row)
                            @php
                                $isNewGroup = $row->sku->fragrance_id !== $prevFragrance;
                                $prevFragrance = $row->sku->fragrance_id;
                            @endphp
                            <tr @if ($isNewGroup) style="border-top: 2px solid var(--color-champagne-40);" @endif>
                                <td style="color: var(--color-ink-70); font-variant-numeric: tabular-nums;">
                                    {{ $loop->iteration }}
                                </td>
                                <td>
                                    @if ($row->sku->effectiveImageUrl(false))
                                        <img
                                            src="{{ $row->sku->effectiveImageUrl(false) }}"
                                            alt="{{ $row->sku->code }} thumbnail"
                                            loading="lazy"
                                            style="width: 42px; height: 42px; border-radius: 8px; object-fit: cover; border: 1px solid var(--color-ink-12); background: #fff;"
                                        >
                                    @else
                                        <span
                                            class="inline-flex items-center justify-center"
                                            style="width: 42px; height: 42px; border-radius: 8px; border: 1px dashed var(--color-ink-12); color: var(--color-ink-40);"
                                            title="No thumbnail"
                                            aria-label="No thumbnail"
                                        >
                                            <i class="fi fi-rr-picture" aria-hidden="true"></i>
                                        </span>
                                    @endif
                                </td>
                                <td class="font-semibold" style="white-space: nowrap;">{{ $row->sku->code }}</td>
                                <td>{{ $row->sku->fragrance->name }}</td>
                                <td style="color: var(--color-ink-70);">{{ $row->sku->fragrance->brand->name }}</td>
                                <td>{{ $row->sku->decantSize->label }}</td>
                                <td style="text-align: right; font-variant-numeric: tabular-nums;">
                                    @if ($row->cost_per_ml > 0)
                                        {{ number_format($row->cost_per_ml, 2) }}
                                    @else
                                        <span style="color: var(--color-ink-40);">—</span>
                                    @endif
                                </td>
                                <td style="text-align: right; font-variant-numeric: tabular-nums;">
                                    @if ($row->cost_per_ml > 0)
                                        {{ number_format($row->cost_per_ml * (float) $row->sku->decantSize->volume_ml, 2) }}
                                    @else
                                        <span style="color: var(--color-ink-40);">—</span>
                                    @endif
                                </td>
                                <td style="text-align: right; font-variant-numeric: tabular-nums;">
                                    {{ number_format((float) $row->sku->decantSize->multiplier, 2) }}×
                                </td>
                                <td style="text-align: right; font-variant-numeric: tabular-nums;">
                                    {{ number_format((float) ($row->sku->decantSize->bottle_cost ?? 0), 2) }}
                                </td>
                                <td style="text-align: right; font-variant-numeric: tabular-nums;">
                                    @if ($row->computed > 0)
                                        {{ number_format($row->computed, 2) }}
                                    @else
                                        <span style="color: var(--color-ink-40);">—</span>
                                    @endif
                                </td>
                                <td style="text-align: right; font-variant-numeric: tabular-nums;">
                                    @if ($row->is_override)
                                        <span class="badge">{{ number_format($row->override, 2) }}</span>
                                    @else
                                        <span style="color: var(--color-ink-40);">—</span>
                                    @endif
                                </td>
                                <td style="text-align: right;">
                                    <div class="inline-flex items-center justify-end gap-2">
                                        <span style="color: var(--color-ink-40);">৳</span>
                                        <input
                                            type="number"
                                            min="0"
                                            step="0.01"
                                            value="{{ number_format((float) ($row->sku->storefront_price ?? 0), 2, '.', '') }}"
                                            class="input storefront-price-input"
                                            style="width: 108px; padding: 0.45rem 0.6rem; font-size: 0.85rem; text-align: right;"
                                            data-endpoint="{{ route('admin.pricing.storefront-price.update', $row->sku) }}"
                                            data-sku-code="{{ $row->sku->code }}"
                                            aria-label="Storefront price for {{ $row->sku->code }}"
                                        >
                                        <button
                                            type="button"
                                            class="btn btn-ghost btn-icon btn-icon-sm storefront-price-save"
                                            data-endpoint="{{ route('admin.pricing.storefront-price.update', $row->sku) }}"
                                            title="Save storefront price"
                                            aria-label="Save storefront price for {{ $row->sku->code }}"
                                        >
                                            <i class="fi fi-rr-disk" aria-hidden="true"></i>
                                        </button>
                                    </div>
                                </td>
                                <td>
                                    <div class="flex items-center justify-end">
                                        <a href="{{ route('admin.skus.edit', $row->sku) }}" class="btn btn-ghost btn-icon btn-icon-sm" title="Edit SKU" aria-label="Edit SKU">
                                            <i class="fi fi-rr-pencil" aria-hidden="true"></i>
                                        </a>
                                    </div>
                                </td>
                            </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>
        @endif
    </section>

    {{-- Formula reference --}}
    <section class="card-light mt-6">
        <p class="label" style="color: var(--color-ink-40);">Formula reference</p>
        <p class="mt-2 text-sm" style="color: var(--color-ink-70); font-family: var(--font-serif);">
            <strong>computed_price</strong> = (juice_cost_per_ml × decant_volume_ml × size_multiplier) + bottle_cost
        </p>
        <p class="mt-1 text-sm" style="color: var(--color-ink-70); font-family: var(--font-serif);">
            <strong>juice_cost_per_ml</strong> = Σ cost_total ÷ Σ volume_ml &nbsp;(weighted average across all <em>decant</em> intakes for the fragrance)
        </p>
        <p class="mt-1 text-sm" style="color: var(--color-ink-70); font-family: var(--font-serif);">
            If a <strong>manual override</strong> is set on the SKU, it takes precedence over the computed price.
        </p>
        <p class="mt-1 text-sm" style="color: var(--color-ink-70); font-family: var(--font-serif);">
            <strong>storefront_price</strong> is editable inline and is used as the customer-facing selling price.
        </p>
    </section>
@endsection