@props(['form', 'steps' => null])

@php
    $multiStep = $form->settings['multi_step'] ?? false;
    $fieldsByStep = $form->fields->groupBy(fn ($f) => $f->options['step'] ?? 1);
    $stepCount = $fieldsByStep->count() ?: 1;
@endphp

<form action="{{ route('forms.submit', $form->slug) }}" method="POST"
      @if($multiStep) x-data="{ step: 1, maxStep: {{ $stepCount }} }" @endif
      data-track-form="{{ $form->slug }}" class="space-y-6">
    @csrf
    <input type="hidden" name="_page_url" value="{{ url()->current() }}">
    <x-forms.honeypot />

        @if($multiStep)
        <div class="mb-8 rounded-2xl bg-section p-4">
            <div class="h-2 overflow-hidden rounded-full bg-white">
                <div class="h-2 rounded-full bg-gradient-to-r from-primary to-accent transition-all" :style="`width: ${(step / maxStep) * 100}%`"></div>
            </div>
            <p class="mt-3 text-sm font-medium text-muted">Step <span x-text="step"></span> of {{ $stepCount }}</p>
        </div>
    @endif

    @foreach($form->fields as $field)
        <div @if($multiStep) x-show="step === {{ $field->options['step'] ?? 1 }}" @endif>
            <x-forms.field :field="$field" />
        </div>
    @endforeach

    <div class="flex flex-col-reverse gap-3 sm:flex-row sm:items-center">
        @if($multiStep)
            <button type="button" x-show="step > 1" @click="step--" class="min-h-11 w-full rounded-full border border-border px-6 py-3 text-sm font-semibold hover:bg-section sm:w-auto">Back</button>
            <button type="button" x-show="step < maxStep" @click="step++" class="btn-primary min-h-11 w-full rounded-full px-8 py-3 text-sm font-semibold sm:ml-auto sm:w-auto">Continue</button>
            <button type="submit" x-show="step === maxStep" class="btn-primary min-h-11 w-full rounded-full px-8 py-3 text-sm font-semibold sm:ml-auto sm:w-auto">Submit</button>
        @else
            <x-ui.button type="submit">Submit</x-ui.button>
        @endif
    </div>
</form>