@php
    $editingProduct = $product ?? null;
    $defaultVariants = $editingProduct
        ? $editingProduct->variants->map(fn ($variant) => [
            'id' => $variant->id,
            'name' => $variant->name,
            'description' => $variant->description,
            'delivery_note' => $variant->delivery_note,
            'price' => $variant->price,
            'robux_amount' => $variant->robux_amount,
            'is_active' => $variant->is_active ? 1 : 0,
            'is_stock_available' => $variant->is_stock_available ? 1 : 0,
            'sort_order' => $variant->sort_order,
        ])->values()->all()
        : [];
    $variantRows = old('variants', $defaultVariants);
    $variantRows = is_array($variantRows) ? $variantRows : [];
    $hasVariants = (bool) old('has_variants', $editingProduct?->hasVariants() ?? false);
    $storedCheckoutRows = collect($editingProduct?->checkout_schema ?? [])
        ->filter(fn ($field) => is_array($field))
        ->map(function ($field) {
            $key = (string) ($field['key'] ?? '');

            return [
                'key' => $key,
                'label' => $field['label'] ?? ucwords(str_replace('_', ' ', $key)),
                'type' => $field['type'] ?? 'text',
                'required' => $field['required'] ?? true,
                'placeholder' => $field['placeholder'] ?? '',
                'max_length' => $field['max_length'] ?? 100,
            ];
        })->values()->all();
    $checkoutRows = old('checkout_fields', $storedCheckoutRows);
    $checkoutRows = is_array($checkoutRows) ? $checkoutRows : [];
@endphp

<section class="admin-form-panel">
    <header class="admin-form-panel-header">
        <span class="admin-form-panel-icon" aria-hidden="true">
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7">
                <path stroke-linecap="round" stroke-linejoin="round" d="M5 5h14v14H5zM8 9h8M8 13h5"/>
            </svg>
        </span>
        <div>
            <span class="admin-panel-eyebrow">Delivery Guide</span>
            <h2 class="admin-panel-title font-display">Panduan Setelah Pembelian</h2>
        </div>
    </header>

    <div class="admin-form-panel-body">
        @include('admin.products.partials.delivery-note-editor', [
            'name' => 'delivery_note',
            'value' => old('delivery_note', $editingProduct?->delivery_note),
            'errorKey' => 'delivery_note',
            'label' => 'Panduan Product',
            'help' => 'Opsional. Tampil dekat data akun/kode/link setelah pengiriman berhasil. Jika variant juga memiliki panduan, keduanya akan tampil tanpa saling menimpa.',
        ])
    </div>
</section>

<section class="admin-form-panel" data-product-variant-config>
    <header class="admin-form-panel-header">
        <span class="admin-form-panel-icon" aria-hidden="true">
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7">
                <path stroke-linecap="round" stroke-linejoin="round" d="M5 7h14M5 12h14M5 17h14"/>
                <circle cx="8" cy="7" r="1.5"/><circle cx="15" cy="12" r="1.5"/><circle cx="10" cy="17" r="1.5"/>
            </svg>
        </span>
        <div>
            <span class="admin-panel-eyebrow">Product Options</span>
            <h2 class="admin-panel-title font-display">Variant Produk</h2>
        </div>
    </header>

    <div class="admin-form-panel-body">
        <input type="hidden" name="has_variants" value="0" data-variant-hidden>
        <label class="admin-form-switch-card">
            <input type="checkbox" name="has_variants" value="1" data-variant-toggle @checked($hasVariants)>
            <span class="admin-form-switch"><span></span></span>
            <span class="admin-form-switch-content">
                <strong>Produk memiliki variant</strong>
                <small>Aktifkan untuk durasi, paket Robux, atau pilihan lain dengan harga berbeda.</small>
            </span>
        </label>
        @error('has_variants')<p class="admin-form-error">{{ $message }}</p>@enderror

        <div class="admin-product-config-section {{ $hasVariants ? '' : 'hidden' }}" data-variant-section>
            <div class="admin-form-group">
                <label class="admin-form-label" for="variant-option-name">Nama Pilihan <span>*</span></label>
                <input
                    id="variant-option-name"
                    type="text"
                    name="variant_option_name"
                    value="{{ old('variant_option_name', $editingProduct?->variant_option_name) }}"
                    maxlength="80"
                    class="admin-form-control"
                    placeholder="Contoh: Durasi atau Paket Robux"
                    data-variant-option-name
                >
                <p class="admin-form-help">Nama ini tampil di storefront sebagai “Pilih Durasi” atau “Pilih Paket Robux”.</p>
                @error('variant_option_name')<p class="admin-form-error">{{ $message }}</p>@enderror
            </div>

            <div class="admin-config-list" data-variant-list>
                @foreach ($variantRows as $index => $variant)
                    @include('admin.products.partials.variant-row', ['index' => $index, 'variant' => $variant])
                @endforeach
            </div>

            @error('variants')<p class="admin-form-error">{{ $message }}</p>@enderror
            @foreach ($errors->get('variants.*') as $messages)
                @foreach ($messages as $message)<p class="admin-form-error">{{ $message }}</p>@endforeach
            @endforeach

            <button type="button" class="admin-config-add-button" data-add-variant>+ Tambah Variant</button>
        </div>
    </div>
</section>

<section class="admin-form-panel" data-checkout-field-config data-custom-checkout-config>
    <header class="admin-form-panel-header">
        <span class="admin-form-panel-icon" aria-hidden="true">
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7">
                <rect x="4" y="4" width="16" height="16" rx="2"/>
                <path stroke-linecap="round" d="M8 9h8M8 13h8M8 17h5"/>
            </svg>
        </span>
        <div>
            <span class="admin-panel-eyebrow">Checkout Data</span>
            <h2 class="admin-panel-title font-display">Field Checkout Tambahan</h2>
        </div>
    </header>

    <div class="admin-form-panel-body">
        <div class="admin-form-notice hidden" data-robux-checkout-note>
            <p>Tipe Robux memakai field checkout tetap: <strong>Username Roblox</strong>, <strong>Display Name Roblox</strong>, dan <strong>Nomor WhatsApp</strong>. Field custom bebas dinonaktifkan agar alurnya konsisten.</p>
        </div>
        <div data-custom-checkout-fields>
            <p class="admin-form-help admin-config-intro">
                Tambahkan data khusus yang wajib diisi customer untuk produk selain Robux.
            </p>

        <div class="admin-config-list" data-checkout-field-list>
            @foreach ($checkoutRows as $index => $field)
                @include('admin.products.partials.checkout-field-row', ['index' => $index, 'field' => $field])
            @endforeach
        </div>

        @error('checkout_fields')<p class="admin-form-error">{{ $message }}</p>@enderror
        @foreach ($errors->get('checkout_fields.*') as $messages)
            @foreach ($messages as $message)<p class="admin-form-error">{{ $message }}</p>@endforeach
        @endforeach

            <button type="button" class="admin-config-add-button" data-add-checkout-field>+ Tambah Field Checkout</button>
        </div>
    </div>
</section>

<template data-variant-row-template>
    @include('admin.products.partials.variant-row', [
        'index' => '__INDEX__',
        'variant' => ['name' => '', 'description' => '', 'delivery_note' => null, 'price' => '', 'robux_amount' => '', 'is_active' => 1, 'is_stock_available' => 1, 'sort_order' => '__INDEX__'],
    ])
</template>

<template data-checkout-field-row-template>
    @include('admin.products.partials.checkout-field-row', [
        'index' => '__INDEX__',
        'field' => ['key' => '', 'label' => '', 'type' => 'text', 'required' => 1, 'placeholder' => '', 'max_length' => 100],
    ])
</template>