{{--
    <x-product-custom-fields :fields="$product['custom_fields']" />

    The product's custom fields (boboko-core's Product::$custom_fields), rendered
    inside the add-to-cart <form> so their values travel with it as
    custom_fields[key]. text → input, textarea → textarea, file → photo upload.

    A photo is uploaded as soon as it's picked (custom-field-upload-controller.js)
    and only the returned reference is submitted with the form — the file input
    itself has no name. It still carries `required`, so the browser's own
    validation blocks add-to-cart until a photo is picked, and the controller
    marks it invalid (setCustomValidity) while the upload is in flight.
--}}
@props(['fields' => []])

@use('App\Http\Controllers\CustomFieldUploadController')

<div class="flex flex-col gap-6">
    @foreach ($fields as $field)
        @php
            $id = 'custom-field-'.$field['key'];
            $name = 'custom_fields['.$field['key'].']';
            $required = (bool) ($field['required'] ?? false);
        @endphp

        @switch($field['type'])
            @case('textarea')
                <x-ui.field :label="$field['label']" :for="$id" :required="$required">
                    <x-ui.textarea :id="$id" :name="$name" :required="$required" :rows="4" maxlength="2000" />
                </x-ui.field>
                @break

            @case('file')
                <x-ui.field
                    :label="$field['label']"
                    :for="$id"
                    :required="$required"
                    :description="__('storefront.product.custom_field_photo_hint', ['size' => CustomFieldUploadController::MAX_KILOBYTES / 1024])"
                    data-controller="custom-field-upload"
                    data-custom-field-upload-url-value="{{ route('custom-field-upload.store') }}"
                    data-custom-field-upload-label-value="{{ $field['label'] }}"
                    data-custom-field-upload-uploading-message-value="{{ __('storefront.product.custom_field_uploading') }}"
                    data-custom-field-upload-failed-message-value="{{ __('storefront.product.custom_field_upload_failed') }}"
                >
                    <input type="hidden" name="{{ $name }}" data-custom-field-upload-target="reference">

                    <x-ui.file-input
                        :id="$id"
                        :accept="CustomFieldUploadController::accept()"
                        :required="$required"
                        aria-describedby="{{ $id }}-description {{ $id }}-error"
                        data-custom-field-upload-target="file"
                        data-action="change->custom-field-upload#upload"
                    />

                    <img
                        alt=""
                        width="96"
                        height="96"
                        hidden
                        class="w-24 h-24 object-cover border border-black"
                        data-custom-field-upload-target="preview"
                        data-action="error->custom-field-upload#hidePreview"
                    >

                    <p id="{{ $id }}-error" class="text-sm text-red-600" role="alert" hidden data-custom-field-upload-target="error"></p>
                </x-ui.field>
                @break

            @default
                <x-ui.field :label="$field['label']" :for="$id" :required="$required">
                    <x-ui.input :id="$id" :name="$name" :required="$required" maxlength="255" />
                </x-ui.field>
        @endswitch
    @endforeach
</div>