@extends('layouts.app')

@section('title', $form->name)
@section('heading', $form->name)

@section('content')
    @include('documents.top-submenu')
    <x-card class="max-w-2xl">
        <div class="mb-4">
            <a href="{{ route('forms.portal') }}" class="text-sm text-primary hover:underline">&larr; Back to forms</a>
        </div>
        @if($form->description)
            <p class="mb-6 text-sm text-slate-600">{{ $form->description }}</p>
        @endif

        <form action="{{ route('forms.submit', $form) }}" method="post" class="space-y-4">
            @csrf
            @foreach($form->fields ?? [] as $index => $field)
                @php
                    $name = 'responses.field_' . $index;
                    $type = $field['type'] ?? 'text';
                    $required = ! empty($field['required']);
                @endphp
                <div>
                    <label class="block text-sm font-medium text-slate-700">
                        {{ $field['label'] ?? 'Field' }}
                        @if($required)<span class="text-red-500">*</span>@endif
                    </label>
                    @if($type === 'textarea')
                        <textarea name="{{ $name }}" rows="3" class="mt-1 w-full rounded-lg border border-slate-300 px-3 py-2 text-sm" {{ $required ? 'required' : '' }}>{{ old($name) }}</textarea>
                    @elseif($type === 'select')
                        <select name="{{ $name }}" class="mt-1 w-full rounded-lg border border-slate-300 px-3 py-2 text-sm js-select2" {{ $required ? 'required' : '' }}>
                            <option value="">Select</option>
                            @foreach($field['options'] ?? [] as $option)
                                <option value="{{ $option }}" {{ old($name) === $option ? 'selected' : '' }}>{{ $option }}</option>
                            @endforeach
                        </select>
                    @elseif($type === 'checkbox')
                        <label class="mt-2 inline-flex items-center gap-2 text-sm">
                            <input type="hidden" name="{{ $name }}" value="0">
                            <input type="checkbox" name="{{ $name }}" value="1" class="rounded border-slate-300" {{ old($name) ? 'checked' : '' }} {{ $required ? 'required' : '' }}>
                            Yes
                        </label>
                    @else
                        <input type="{{ $type === 'number' ? 'number' : ($type === 'date' ? 'date' : 'text') }}"
                               name="{{ $name }}" value="{{ old($name) }}"
                               class="mt-1 w-full rounded-lg border border-slate-300 px-3 py-2 text-sm" {{ $required ? 'required' : '' }}>
                    @endif
                    @error($name)<p class="mt-1 text-xs text-red-600">{{ $message }}</p>@enderror
                </div>
            @endforeach
            <button type="submit" class="rounded-lg bg-primary px-4 py-2 text-sm font-medium text-white">Submit</button>
        </form>
    </x-card>
@endsection