{{-- Création chiffrée au cas par cas : le client décrit son projet, le créateur répond. --}}
<form action="{{ route('sur-mesure.quote.request') }}" method="POST" enctype="multipart/form-data" class="sm-configurator">
    @csrf
    <input type="hidden" name="product_id" value="{{ $creation->id }}">

    <h3>{{ __('surmesure.quote_title') }}</h3>
    <p>{{ __('surmesure.quote_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';
            $required = (bool) ($option['required'] ?? false);
            $name = 'options[' . $index . ']';
            $id = 'sm-quote-opt-' . $index;
        @endphp

        <div class="sm-opt">
            <label for="{{ $id }}">
                {{ $translator->translate($option['label'], $locale) }}
                @if($required)<span class="sm-required">*</span>@endif
            </label>

            @switch($type)
                @case('select')
                    <select id="{{ $id }}" name="{{ $name }}" {{ $required ? 'required' : '' }}>
                        @unless($required)
                            <option value="">-- {{ __('messages.select') }} --</option>
                        @endunless
                        @foreach($option['choices'] ?? [] as $choiceIndex => $choice)
                            <option value="{{ $choiceIndex }}">{{ $translator->translate($choice['label'], $locale) }}</option>
                        @endforeach
                    </select>
                    @break

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

                @case('file')
                    <input type="file" id="{{ $id }}" name="{{ $name }}" {{ $required ? 'required' : '' }}>
                    @break

                @case('color')
                    {{-- Même précaution que dans le configurateur : une couleur non
                         choisie ne doit pas être transmise comme si elle l'était. --}}
                    @php $defaultColor = '#000000'; @endphp

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

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

                        @unless($required)
                            <span class="sm-color-state" data-quote-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 }}" {{ $required ? 'required' : '' }}>
            @endswitch

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

    <div class="sm-opt">
        <label for="sm-quote-message">{{ __('surmesure.quote_message') }}</label>
        <textarea id="sm-quote-message" name="message" rows="4" placeholder="{{ __('surmesure.quote_message_placeholder') }}"></textarea>
    </div>

    <div class="sm-summary">
        <div class="sm-summary-line">
            <span>{{ __('surmesure.starting_price') }}</span>
            <span>{{ display_price($creation->final_price, $creation->currency) }}</span>
        </div>
        <p style="font-size:13px;color:#999;margin-top:10px;">{{ __('surmesure.quote_price_note') }}</p>
    </div>

    <div style="margin-top:20px;">
        @auth
            <button type="submit" class="rts-btn btn-primary" style="width:100%;">{{ __('surmesure.quote_submit') }}</button>
        @else
            <a href="{{ route('login') }}" class="rts-btn btn-primary" style="width:100%;display:block;text-align:center;">
                {{ __('surmesure.quote_login_required') }}
            </a>
        @endauth
    </div>
</form>

<script>
    (function () {
        document.querySelectorAll('[data-quote-color]').forEach(function (picker) {
            const index = picker.dataset.quoteColor;
            const hidden = document.getElementById(picker.id + '-value');
            const state = document.querySelector('[data-quote-color-state="' + index + '"]');

            picker.addEventListener('input', function () {
                hidden.value = picker.value;
                if (state) state.textContent = picker.value;
            });
        });
    })();
</script>