@php
    /**
     * $creation est null en création. $optionsValue est le JSON du configurateur,
     * réinjecté tel quel après une erreur de validation.
     */
    $creation = $creation ?? null;

    $optionsValue = old('custom_options_json');
    if ($optionsValue === null) {
        $optionsValue = json_encode($creation->custom_options_json ?? []);
    }

@endphp

<form action="{{ $action }}" method="POST" enctype="multipart/form-data" id="creationForm">
    @csrf
    @if($creation)
        @method('PUT')
    @endif

    @if($errors->any())
        <div class="sm-alert-error">
            <ul>
                @foreach($errors->all() as $error)
                    <li>{{ $error }}</li>
                @endforeach
            </ul>
        </div>
    @endif

    @if(session('success'))
        <div class="sm-alert-success">{{ session('success') }}</div>
    @endif

    {{-- ── 1. La création ────────────────────────────────────────────────── --}}
    <div class="sm-card">
        <h3>{{ __('surmesure.form_section_creation') }}</h3>
        <p class="sm-lead">{{ __('surmesure.form_section_creation_hint') }}</p>

        <div class="sm-grid">
            <div class="sm-field full">
                <label for="product_name">{{ __('surmesure.creation_name') }} *</label>
                <input type="text" id="product_name" name="product_name"
                       value="{{ old('product_name', $creation->product_name ?? '') }}" required>
            </div>

            <div class="sm-field full">
                <label for="product_description_editor">{{ __('surmesure.creation_description') }} *</label>
                <div id="product_description_editor" style="height: 260px; background:#fff;">
                    {!! old('product_description', $creation->product_description ?? '') !!}
                </div>
                <input type="hidden" name="product_description" id="product_description"
                       value="{{ old('product_description', $creation->product_description ?? '') }}">
            </div>

        </div>
    </div>

    {{-- ── 2. Tarification ───────────────────────────────────────────────── --}}
    <div class="sm-card">
        <h3>{{ __('surmesure.form_section_pricing') }}</h3>
        <p class="sm-lead">{{ __('surmesure.form_section_pricing_hint') }}</p>

        <div class="sm-pricing-modes">
            @foreach(['fixed', 'quote'] as $mode)
                <label class="sm-pricing-mode">
                    <input type="radio" name="pricing_mode" value="{{ $mode }}"
                           {{ old('pricing_mode', $creation->pricing_mode ?? 'fixed') === $mode ? 'checked' : '' }}>
                    <span class="sm-pricing-mode-body">
                        <strong>{{ __('surmesure.pricing_' . $mode) }}</strong>
                        <em>{{ __('surmesure.pricing_' . $mode . '_hint') }}</em>
                    </span>
                </label>
            @endforeach
        </div>

        <div class="sm-grid" style="margin-top:22px;">
            <div class="sm-field">
                <label for="product_price"><span id="price-label">{{ __('surmesure.base_price') }}</span> *</label>
                <input type="number" step="0.01" min="0" id="product_price" name="product_price"
                       value="{{ old('product_price', $creation->product_price ?? '') }}" required>
                <span class="sm-hint" id="price-hint">{{ __('surmesure.base_price_hint') }}</span>
            </div>

            <div class="sm-field">
                <label for="currency">{{ __('messages.currency') }} *</label>
                <select id="currency" class="form-select" name="currency" required>
                    @foreach(config('currencies.available') as $code => $currency)
                        <option value="{{ $code }}"
                            {{ old('currency', $creation->currency ?? config('currencies.default')) === $code ? 'selected' : '' }}>
                            {{ currency_label($code) }}
                        </option>
                    @endforeach
                </select>
            </div>

            <div class="sm-field">
                @php
                    $selectedTax = old('product_tax', $creation->product_tax ?? '20%');
                @endphp

                <label for="product_tax">{{ __('messages.product_tax') }} *</label>
                <select id="product_tax" class="form-select" name="product_tax" required>
                    @for($rate = 1; $rate <= 30; $rate++)
                        <option value="{{ $rate }}%" {{ $selectedTax === $rate . '%' ? 'selected' : '' }}>
                            {{ $rate }}%{{ $rate === 20 ? ' (' . __('messages.standard_rate') . ')' : '' }}
                        </option>
                    @endfor
                </select>
            </div>

            <div class="sm-field">
                <label for="production_delay_days">{{ __('surmesure.production_delay') }}</label>
                <input type="number" min="0" max="3650" id="production_delay_days" name="production_delay_days"
                       value="{{ old('production_delay_days', $creation->production_delay_days ?? '') }}">
                <span class="sm-hint">{{ __('surmesure.production_delay_hint') }}</span>
            </div>
        </div>
    </div>

    {{-- ── 3. Ce que vous devez savoir ───────────────────────────────────── --}}
    <div class="sm-card">
        <h3>{{ __('surmesure.builder_title') }}</h3>
        <p class="sm-lead">{{ __('surmesure.builder_intro') }}</p>

        {{-- Le créateur coche les informations qu'il demandera à son client.
             Chaque case cochée devient une question de custom_options_json,
             le format d'origine — panier, commandes et devis restent compatibles. --}}
        <div class="sm-attrs">
            @foreach(\App\Http\Controllers\SurMesure\CreationController::ATTRIBUTES as $slug => $type)
                {{-- Le champ de supplément est frère de la case, hors du label :
                     cliquer dedans ne coche ni ne décoche l'attribut. --}}
                <div class="sm-attr" data-attr="{{ $slug }}">
                    <label class="sm-attr-main">
                        <input type="checkbox" class="sm-attr-check"
                               data-slug="{{ $slug }}"
                               data-label="{{ __('surmesure.attr_' . $slug) }}"
                               data-type="{{ $type }}">
                        <span>{{ __('surmesure.attr_' . $slug) }}</span>
                    </label>

                    <div class="sm-attr-price" hidden>
                        <span class="sm-attr-plus">+</span>
                        <input type="number" step="0.01" min="0" value="0"
                               class="sm-attr-price-input"
                               title="{{ __('surmesure.attr_surcharge_hint') }}"
                               aria-label="{{ __('surmesure.attr_surcharge') }}">
                        <span class="sm-attr-currency">€</span>
                    </div>
                </div>
            @endforeach
        </div>

        <input type="hidden" name="custom_options_json" id="custom_options_json" value="{{ $optionsValue }}">
    </div>

    {{-- ── 4. Livraison et photos ────────────────────────────────────────── --}}
    <div class="sm-card">
        <h3>{{ __('surmesure.form_section_shipping') }}</h3>

        <div class="sm-field">
            <label>{{ __('messages.delivery') }} *</label>

            <label class="sm-checkbox">
                <input type="hidden" name="is_home_delivery" value="0">
                <input type="checkbox" name="is_home_delivery" value="1"
                       {{ old('is_home_delivery', $creation->productHomeDelivery ?? true) ? 'checked' : '' }}>
                <span>{{ __('messages.home_delivery') }}</span>
            </label>

            <label class="sm-checkbox">
                <input type="hidden" name="is_relay_delivery" value="0">
                <input type="checkbox" name="is_relay_delivery" value="1"
                       {{ old('is_relay_delivery', $creation->productRelatedDelivery ?? false) ? 'checked' : '' }}>
                <span>{{ __('messages.relay_point_delivery') }}</span>
            </label>

            <label class="sm-checkbox">
                <input type="hidden" name="is_click_collect" value="0">
                <input type="checkbox" name="is_click_collect" value="1"
                       {{ old('is_click_collect', $creation->productClickAndCollect ?? false) ? 'checked' : '' }}>
                <span>{{ __('messages.click_collect_delivery') }}</span>
            </label>

            @php $selfDelivery = (bool) old('is_self_delivery', $creation->productSelfDelivery ?? false); @endphp

            <label class="sm-checkbox">
                <input type="hidden" name="is_self_delivery" value="0">
                <input type="checkbox" id="is_self_delivery" name="is_self_delivery" value="1"
                       {{ $selfDelivery ? 'checked' : '' }}>
                <span>{{ __('messages.seller_delivery') }}</span>
            </label>
            <span class="sm-hint">{{ __('surmesure.self_delivery_hint') }}</span>

            <div class="sm-field" id="sm-self-delivery-km" style="margin-top:10px;" @unless($selfDelivery) hidden @endunless>
                <label for="product_self_delivery_price_per_km">{{ __('surmesure.self_delivery_price_per_km') }}</label>
                <div style="display:flex; align-items:center; gap:8px; max-width:220px;">
                    <input type="number" step="0.01" min="0" id="product_self_delivery_price_per_km"
                           name="product_self_delivery_price_per_km"
                           value="{{ old('product_self_delivery_price_per_km', $creation->productSelfDeliveryPricePerKm ?? '') }}"
                           placeholder="0.00">
                    <span>{{ old('currency', $creation->currency ?? 'EUR') }}/km</span>
                </div>
            </div>

            <label class="sm-checkbox">
                <input type="hidden" name="is_private_carrier_delivery" value="0">
                <input type="checkbox" name="is_private_carrier_delivery" value="1"
                       {{ old('is_private_carrier_delivery', $creation->productPrivateCarrierDelivery ?? false) ? 'checked' : '' }}>
                <span>{{ __('messages.private_carrier_delivery') }}</span>
            </label>
            <span class="sm-hint">{{ __('surmesure.private_carrier_delivery_hint') }}</span>

            {{-- Livraison offerte : l'acheteur ne paie aucun frais de port. --}}
            <label class="sm-checkbox" style="margin-top:14px;">
                <input type="hidden" name="free_shipping" value="0">
                <input type="checkbox" name="free_shipping" value="1"
                       {{ old('free_shipping', $creation->free_shipping ?? false) ? 'checked' : '' }}>
                <span><strong>{{ __('messages.free_shipping_option') }}</strong></span>
            </label>
            <span class="sm-hint">{{ __('messages.free_shipping_hint') }}</span>
        </div>

        <div class="sm-field" style="margin-top:24px;">
            <label for="rts_images1">{{ __('surmesure.creation_images') }} @unless($creation) *  @endunless</label>

            <div class="custom-upload-wrapper">
                <div id="upload-dropzone" class="upload-dropzone" tabindex="0" role="button">
                    <input type="file" name="rts_images1[]" id="rts_images1" accept="image/*" multiple hidden>

                    <div class="upload-dropzone-content">
                        <div class="upload-icon">📷</div>
                        <p class="upload-subtitle">{{ __('messages.click_to_add_pictures') }}</p>
                        <button type="button" id="upload-trigger" class="upload-btn">{{ __('messages.choose_pictures') }}</button>
                    </div>
                </div>

                <div id="image-preview-container" class="image-preview-container" aria-live="polite"></div>

                @if($creation && $creation->images->count())
                    <div style="margin-top: 20px;">
                        <h6>{{ __('surmesure.current_images') }}</h6>

                        <div class="sm-existing-images">
                            @foreach($creation->images as $image)
                                <div class="sm-existing-image">
                                    <img src="{{ route('vendor.products.image.show', $image) }}" alt="{{ $creation->product_name }}">
                                    <label>
                                        <input type="checkbox" name="deleted_images[]" value="{{ $image->id }}"
                                               class="delete-existing-image-checkbox">
                                        {{ __('surmesure.delete') }}
                                    </label>
                                </div>
                            @endforeach
                        </div>
                    </div>
                @endif
            </div>
        </div>

        <div class="sm-actions">
            <button type="submit" class="rts-btn btn-primary">{{ __('surmesure.save') }}</button>
        </div>
    </div>
</form>