<div>
    @if(!$form)
        {{-- Form not found or inactive --}}
    @elseif($submitted)
        <div class="alert alert--success">
            @if($form->success_message)
                <div>{!! nl2br(e($form->success_message)) !!}</div>
            @else
                <p>{{ __('daylight::forms.submission_received') }}</p>
            @endif
        </div>
    @else
        <form wire:submit="submit">
            <x-honeypot livewire-model="extraFields" />

            @error('form')
                <div class="input-group__error" style="margin-bottom: 15px;">
                    {{ $message }}
                </div>
            @enderror

            <div class="row">
                @foreach($form->fields as $field)
                    @php
                        $isHalf = ($field['width'] ?? 'full') === 'half' && $field['type'] !== 'heading';
                        $colClass = $isHalf ? 'col-12 col-md-6' : 'col-12';
                        $hasCondition = !empty($field['condition']) && !empty($field['condition']['field_id']);
                    @endphp

                    <div
                        wire:key="field-{{ $field['id'] }}"
                        class="{{ $colClass }}"
                        @if($hasCondition)
                            x-data="{
                                get visible() {
                                    const condition = @js($field['condition']);
                                    const sourceValue = String($wire.formData[condition.field_id] ?? '');
                                    switch (condition.operator) {
                                        case 'equals': return sourceValue === String(condition.value);
                                        case 'not_equals': return sourceValue !== String(condition.value);
                                        case 'is_empty': return sourceValue === '' || sourceValue === 'false';
                                        case 'is_not_empty': return sourceValue !== '' && sourceValue !== 'false';
                                        default: return true;
                                    }
                                }
                            }"
                            x-show="visible"
                            x-cloak
                        @endif
                    >
                        @if($field['type'] === 'heading')
                            <h3 style="margin-top: 10px; margin-bottom: 5px;">{{ $field['label'] }}</h3>
                        @elseif($field['type'] === 'checkbox')
                            <label class="checkbox-group" for="field-{{ $field['id'] }}">
                                <input
                                    type="checkbox"
                                    id="field-{{ $field['id'] }}"
                                    wire:model="formData.{{ $field['id'] }}"
                                >
                                <span>
                                    {{ ($field['checkbox_label'] ?? '') ?: $field['label'] }}
                                    {{ ($field['required'] ?? false) ? '*' : '' }}
                                </span>
                            </label>

                            @error("formData.{$field['id']}")
                                <div class="input-group__error">{{ $message }}</div>
                            @enderror
                        @else
                            <x-input.group
                                :for="'field-' . $field['id']"
                                :label="$field['label']"
                                :error="$errors->first('formData.' . $field['id']) ?: $errors->first('fileUploads.' . $field['id'])"
                                :required="$field['required'] ?? false"
                            >
                                @if($field['type'] === 'text' || $field['type'] === 'email' || $field['type'] === 'phone')
                                    <x-input.text
                                        :id="'field-' . $field['id']"
                                        :type="$field['type'] === 'phone' ? 'tel' : $field['type']"
                                        :placeholder="$field['placeholder'] ?? ''"
                                        wire:model="formData.{{ $field['id'] }}"
                                    />

                                @elseif($field['type'] === 'number')
                                    <x-input.text
                                        :id="'field-' . $field['id']"
                                        type="number"
                                        :placeholder="$field['placeholder'] ?? ''"
                                        :min="isset($field['min']) && $field['min'] !== null && $field['min'] !== '' ? $field['min'] : null"
                                        :max="isset($field['max']) && $field['max'] !== null && $field['max'] !== '' ? $field['max'] : null"
                                        wire:model="formData.{{ $field['id'] }}"
                                    />

                                @elseif($field['type'] === 'date')
                                    <x-input.text
                                        :id="'field-' . $field['id']"
                                        type="date"
                                        wire:model="formData.{{ $field['id'] }}"
                                    />

                                @elseif($field['type'] === 'textarea')
                                    <x-input.textarea
                                        :id="'field-' . $field['id']"
                                        :placeholder="$field['placeholder'] ?? ''"
                                        wire:model="formData.{{ $field['id'] }}"
                                    />

                                @elseif($field['type'] === 'select')
                                    <x-input.select
                                        :id="'field-' . $field['id']"
                                        wire:model="formData.{{ $field['id'] }}"
                                    >
                                        <option value="">{{ $field['placeholder'] ?: __('daylight::forms.select_option') }}...</option>
                                        @foreach(explode("\n", $field['options'] ?? '') as $option)
                                            @if(trim($option))
                                                <option value="{{ trim($option) }}">{{ trim($option) }}</option>
                                            @endif
                                        @endforeach
                                    </x-input.select>

                                @elseif($field['type'] === 'file')
                                    <input
                                        type="file"
                                        id="field-{{ $field['id'] }}"
                                        wire:model="fileUploads.{{ $field['id'] }}"
                                        class="input"
                                    >
                                    <div wire:loading wire:target="fileUploads.{{ $field['id'] }}">
                                        <small>{{ __('daylight::forms.uploading') }}</small>
                                    </div>
                                @endif
                            </x-input.group>
                        @endif
                    </div>
                @endforeach
            </div>

            <div style="margin-top: 15px;">
                <button
                    type="submit"
                    class="button button--secondary"
                    wire:loading.attr="disabled"
                >
                    <span wire:loading.remove wire:target="submit">{{ __('daylight::forms.submit') }}</span>
                    <span wire:loading wire:target="submit">{{ __('daylight::forms.submitting') }}</span>
                </button>
            </div>
        </form>
    @endif
</div>
