{{-- Formulaire de personnalisation généré depuis custom_options_json, avec prix en direct. --}}
<form action="{{ route('cart.add') }}" method="POST" enctype="multipart/form-data" class="sm-configurator" id="sm-configurator">
    @csrf
    <input type="hidden" name="product_id" value="{{ $creation->id }}">

    <h3>{{ __('surmesure.configure_title') }}</h3>
    <p>{{ __('surmesure.configure_intro') }}</p>

    @php
    // Les libellés viennent du créateur : ils sont traduits un par un,
    // sans toucher aux montants qui les accompagnent.
    $translator = app(\App\Services\TranslationService::class);
    $locale = app()->getLocale();
@endphp

@foreach($creation->custom_options_json ?? [] as $index => $option)
        @php
            $type = $option['type'] ?? 'text';
            $price = (float) ($option['price'] ?? 0);
            $required = (bool) ($option['required'] ?? false);
            $name = 'options[' . $index . ']';
            $id = 'sm-opt-' . $index;
        @endphp

        <div class="sm-opt">
            <label for="{{ $id }}">
                {{ $translator->translate($option['label'], $locale) }}
                @if($required)<span class="sm-required">*</span>@endif
                @if($type !== 'select' && $price > 0)
                    <span class="sm-opt-price">(+{{ display_price($price, $creation->currency) }})</span>
                @endif
            </label>

            @switch($type)
                @case('select')
                    <select id="{{ $id }}" name="{{ $name }}" data-option="{{ $index }}" {{ $required ? 'required' : '' }}>
                        @unless($required)
                            <option value="" data-price="0">{{ __('messages.select') }}</option>
                        @endunless
                        @foreach($option['choices'] ?? [] as $choiceIndex => $choice)
                            @php
                                $choicePrice = (float) ($choice['price'] ?? 0);
                                $choiceText = $translator->translate($choice['label'], $locale)
                                    . ($choicePrice > 0 ? '  (+' . display_price($choicePrice, $creation->currency) . ')' : '');
                            @endphp
                            <option value="{{ $choiceIndex }}" data-price="{{ $choicePrice }}">{{ $choiceText }}</option>
                        @endforeach
                    </select>
                    @break

                @case('textarea')
                    <textarea id="{{ $id }}" name="{{ $name }}" rows="4" data-option="{{ $index }}"
                              data-price="{{ $price }}" {{ $required ? 'required' : '' }}></textarea>
                    @break

                @case('file')
                    {{-- Le contrôle natif est remplacé par une zone lisible ;
                         l'input reste présent, simplement masqué. --}}
                    <label class="sm-file" for="{{ $id }}">
                        <input type="file" id="{{ $id }}" name="{{ $name }}"
                               accept="image/*" hidden
                               data-option="{{ $index }}" data-price="{{ $price }}"
                               {{ $required ? 'required' : '' }}>

                        <img class="sm-file-preview" alt="" hidden>

                        <span class="sm-file-body">
                            <i class="fa-light fa-image sm-file-icon"></i>
                            <span class="sm-file-cta">{{ __('surmesure.file_choose') }}</span>
                            <span class="sm-file-hint">{{ __('surmesure.file_hint') }}</span>
                        </span>
                    </label>
                    @break

                @case('color')
                    {{-- Un <input type="color"> vaut toujours #000000, même intact : il
                         passerait donc pour rempli. La valeur envoyée transite par un
                         champ caché, alimenté seulement quand le client choisit vraiment. --}}
                    @php $defaultColor = '#000000'; @endphp

                    <div class="sm-color-field">
                        <input type="color" id="{{ $id }}" value="{{ $defaultColor }}"
                               data-color-picker="{{ $index }}">

                        <input type="hidden" name="{{ $name }}" id="{{ $id }}-value"
                               value="{{ $required ? $defaultColor : '' }}"
                               data-option="{{ $index }}" data-price="{{ $price }}">

                        @unless($required)
                            <button type="button" class="sm-color-clear" data-color-clear="{{ $index }}" hidden>
                                {{ __('surmesure.color_clear') }}
                            </button>
                            <span class="sm-color-state" data-color-state="{{ $index }}">{{ __('surmesure.color_none') }}</span>
                        @endunless
                    </div>
                    @break

                @default
                    <input type="{{ in_array($type, ['number', 'date'], true) ? $type : 'text' }}"
                           id="{{ $id }}" name="{{ $name }}" data-option="{{ $index }}"
                           data-price="{{ $price }}" {{ $required ? 'required' : '' }}>
            @endswitch

            @if(!empty($option['help']))
                <span class="sm-opt-help">{{ $translator->translate($option['help'], $locale) }}</span>
            @endif
        </div>
    @endforeach

    @if($creation->free_shipping)
        @include('front.partials.free-shipping-badge', ['style' => 'margin:10px 0;'])
    @endif

    <div class="sm-summary">
        <div class="sm-summary-line">
            <span>{{ __('surmesure.base_price') }}</span>
            <span>{{ display_price($creation->final_price, $creation->currency) }}</span>
        </div>
        <div class="sm-summary-line">
            <span>{{ __('surmesure.options_total') }}</span>
            <span id="sm-extra">{{ display_price(0, $creation->currency) }}</span>
        </div>
        <div class="sm-summary-total">
            <span>{{ __('surmesure.total') }}</span>
            <span id="sm-total">{{ display_price($creation->final_price, $creation->currency) }}</span>
        </div>
    </div>

    @include('front.partials.private-carrier-picker', ['product' => $creation])

    <div class="sm-qty-row">
        <div class="sm-opt">
            <label for="sm-quantity">{{ __('surmesure.quantity') }}</label>
            <input type="number" id="sm-quantity" name="quantity" value="1" min="1" max="{{ $creation->product_stock }}">
        </div>

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

<script>
    (function () {
        const form = document.getElementById('sm-configurator');
        const basePrice = {{ (float) $creation->final_price }};
        const currency = @json($creation->currency);
        const locale = @json(str_replace('_', '-', app()->getLocale()));

        const extraEl = document.getElementById('sm-extra');
        const totalEl = document.getElementById('sm-total');
        const quantityEl = document.getElementById('sm-quantity');

        function format(amount) {
            return new Intl.NumberFormat(locale, { style: 'currency', currency: currency }).format(amount);
        }

        /**
         * Un supplément n'est compté que si le champ est effectivement rempli :
         * le client voit le prix évoluer au fur et à mesure de ses choix.
         */
        function recalculate() {
            let extra = 0;

            form.querySelectorAll('[data-option]').forEach(field => {
                if (field.tagName === 'SELECT') {
                    const option = field.options[field.selectedIndex];
                    extra += parseFloat(option?.dataset.price || 0);
                    return;
                }

                const filled = field.type === 'file' ? field.files.length > 0 : field.value.trim() !== '';

                if (filled) {
                    extra += parseFloat(field.dataset.price || 0);
                }
            });

            const quantity = Math.max(1, parseInt(quantityEl.value || 1, 10));

            extraEl.textContent = format(extra);
            totalEl.textContent = format((basePrice + extra) * quantity);
        }

        // Sélecteurs de couleur : la valeur n'est transmise qu'après un choix réel.
        form.querySelectorAll('[data-color-picker]').forEach(function (picker) {
            const index = picker.dataset.colorPicker;
            const hidden = form.querySelector('[data-option="' + index + '"][type="hidden"]');
            const clear = form.querySelector('[data-color-clear="' + index + '"]');
            const state = form.querySelector('[data-color-state="' + index + '"]');

            picker.addEventListener('input', function () {
                hidden.value = picker.value;
                if (clear) clear.hidden = false;
                if (state) state.textContent = picker.value;
                recalculate();
            });

            clear?.addEventListener('click', function () {
                hidden.value = '';
                picker.value = '#000000';
                clear.hidden = true;
                if (state) state.textContent = @json(__('surmesure.color_none'));
                recalculate();
            });
        });

        // Photo : afficher un aperçu et le nom du fichier retenu.
        form.querySelectorAll('.sm-file input[type=file]').forEach(function (input) {
            const zone = input.closest('.sm-file');
            const preview = zone.querySelector('.sm-file-preview');
            const cta = zone.querySelector('.sm-file-cta');

            input.addEventListener('change', function () {
                const file = input.files[0];

                if (!file) {
                    zone.classList.remove('is-filled');
                    preview.hidden = true;
                    cta.textContent = @json(__('surmesure.file_choose'));
                    return;
                }

                zone.classList.add('is-filled');
                preview.src = URL.createObjectURL(file);
                preview.hidden = false;
                cta.textContent = file.name;
            });
        });

        form.addEventListener('input', recalculate);
        form.addEventListener('change', recalculate);

        recalculate();
    })();
</script>