@php
    $productUnits = $productUnits ?? collect();
    $selectedUnitValues = $selectedUnitValues ?? [];
    $productBaseSku = $productBaseSku ?? old('sku', '');
    $variantRows = ($variantPreview ?? collect())->map(function ($v) {
        return [
            'units'            => $v->resolvedUnitValues(),
            'stock'            => (int) $v->stock,
            'sku'              => $v->sku,
            'price_adjustment' => (float) $v->price_adjustment,
            'purchase_price'   => $v->purchase_price !== null ? (float) $v->purchase_price : '',
            'image'            => $v->image,
            'image_url'        => $v->image ? asset($v->image) : null,
        ];
    })->values();
@endphp

<div class="alert alert-info py-2 small mb-3">
    <i class="fas fa-info-circle me-1"></i>
    শুধু <strong>Unit page-এ Active</strong> unit গুলো এখানে দেখাবে।
    Unit manage: <a href="{{ route('admin.attributes') }}" target="_blank">Product Management → Unit</a>
</div>

@if($productUnits->isEmpty())
<div class="alert alert-warning py-2 small">
    কোনো <strong>Active Unit</strong> নেই। <a href="{{ route('admin.attributes') }}">Unit page</a> থেকে Weight/Size ইত্যাদি add করুন এবং Active রাখুন।
</div>
@else
<div class="variant-unit-pickers">
    @foreach($productUnits as $unit)
    @php
        $unitName = $unit['name'];
        $selected = $selectedUnitValues[$unitName] ?? old('unit_selection.' . $unitName, []);
    @endphp
    <div class="variant-unit-block mb-4" data-unit-block="{{ $unitName }}">
        <div class="d-flex align-items-center gap-2 mb-2">
            <span class="badge bg-primary">{{ $unitName }}</span>
            <small class="text-muted">value select করুন</small>
        </div>
        <div class="d-flex flex-wrap gap-2 mb-2">
            @foreach($unit['options'] as $option)
            <label class="size-chip">
                <input type="checkbox"
                       class="variant-unit-check"
                       data-unit="{{ $unitName }}"
                       name="unit_selection[{{ $unitName }}][]"
                       value="{{ $option }}"
                       {{ in_array($option, (array) $selected, true) ? 'checked' : '' }}>
                <span>{{ $option }}</span>
            </label>
            @endforeach
        </div>
        <div class="input-group input-group-sm" style="max-width: 340px;">
            <input type="text" class="form-control custom-unit-input" data-unit="{{ $unitName }}" placeholder="Custom {{ $unitName }} value">
            <button type="button" class="btn btn-outline-secondary" onclick="addCustomUnitValue('{{ $unitName }}')">Add</button>
        </div>
        <div class="custom-unit-values d-flex flex-wrap gap-2 mt-2" data-unit="{{ $unitName }}"></div>
    </div>
    @endforeach
</div>
@endif

<div class="mt-4 pt-3 border-top">
    <div class="d-flex justify-content-between align-items-center flex-wrap gap-2 mb-2">
        <div>
            <label class="form-label fw-600 mb-0">Variants — Image + SKU</label>
            <div class="text-muted small">প্রতিটি combo-তে আলাদা ছবি ও আলাদা SKU</div>
        </div>
        <div class="d-flex gap-2">
            <button type="button" class="btn btn-sm btn-outline-secondary" id="btnGenerateVariantSkus">
                <i class="fas fa-barcode me-1"></i> Auto SKU
            </button>
            <button type="button" class="btn btn-sm btn-outline-primary" id="btnRebuildVariants">
                <i class="fas fa-sync me-1"></i> Refresh
            </button>
        </div>
    </div>

    <div id="variantMatrixEmpty" class="text-muted small py-4 text-center border rounded bg-light {{ $variantRows->isNotEmpty() ? 'd-none' : '' }}">
        <i class="fas fa-layer-group fa-2x mb-2 d-block opacity-50"></i>
        উপরে unit value select করুন — variant card তৈরি হবে
    </div>

    <div id="variantCardsGrid" class="row g-3 {{ $variantRows->isEmpty() ? 'd-none' : '' }}"></div>
</div>

<script type="application/json" id="variantRowsSeed">@json($variantRows)</script>
<script type="application/json" id="productUnitsSeed">@json($productUnits)</script>
<script type="application/json" id="productBaseSkuSeed">@json($productBaseSku)</script>

@once
@push('styles')
<style>
.variant-unit-block { background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 10px; padding: 14px; }
.variant-card {
    border: 1px solid #dbeafe; border-radius: 12px; background: #fff; overflow: hidden;
    box-shadow: 0 1px 3px rgba(15, 23, 42, .06);
}
.variant-card-head {
    background: linear-gradient(135deg, #eff6ff, #f8fafc);
    padding: 10px 14px; border-bottom: 1px solid #e2e8f0;
    font-weight: 700; font-size: 14px;
}
.variant-card-body { padding: 14px; }
.variant-img-upload {
    border: 2px dashed #cbd5e1; border-radius: 10px; min-height: 120px;
    display: flex; align-items: center; justify-content: center; position: relative;
    background: #f8fafc; cursor: pointer; overflow: hidden;
}
.variant-img-upload:hover { border-color: #3b82f6; background: #eff6ff; }
.variant-img-upload img { width: 100%; height: 120px; object-fit: cover; }
.variant-img-upload .upload-placeholder { text-align: center; color: #64748b; font-size: 12px; padding: 10px; }
.variant-img-upload input[type=file] {
    position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; height: 100%;
}
.variant-sku-field .input-group-text { font-size: 11px; background: #f1f5f9; }
.size-chip { margin: 0; cursor: pointer; }
.size-chip input { position: absolute; opacity: 0; pointer-events: none; width: 0; height: 0; }
.size-chip span {
    display: inline-block; padding: 6px 14px; border: 1.5px solid #cbd5e1;
    border-radius: 999px; cursor: pointer; font-size: 13px; font-weight: 600;
    color: #334155; background: #fff; transition: all .15s ease;
}
.size-chip span:hover { border-color: #2d6a4f; color: #2d6a4f; }
.size-chip input:checked + span {
    background: #2d6a4f !important;
    color: #fff !important;
    border-color: #2d6a4f !important;
    box-shadow: 0 0 0 2px rgba(45, 106, 79, .2);
}
</style>
@endpush
@push('scripts')
<script src="{{ asset('backEnd/js/variant-fields.js') }}?v=3"></script>
@endpush
@endonce