@extends('frontend.mediknode.layout.mainlayout')
@section('content')
    @component('frontend.mediknode.components.breadcrumb')
        @slot('title')
            {{ $form->name }}
        @endslot
        @slot('li_1')
            {{ $form->name }}
        @endslot
    @endcomponent
    <div class="about-content">
        <div class="container">
            @component('frontend.mediknode.components.buttons', ['event' => $event])
            @endcomponent
            <div class="dashboard-details mt-4 mb-4">
                <div class="row dashboard-info">
                    <div class="col-lg-12">
                        <div class="card dash-cards">
                            <div class="card-body">
                                <div class="profile-form">
                                    <div class="row">
                                        <div class="col-lg-12 col-md-12 pt-2">
                                            @if (session('success'))
                                                <div class="alert alert-success">
                                                    {{ session('success') }}
                                                </div>
                                            @endif

                                            @if (session('error'))
                                                <div class="alert alert-danger">
                                                    {{ session('error') }}
                                                </div>
                                            @endif

                                            @if ($form->description)
                                                <div class="mb-4">
                                                    {!! $form->description !!}
                                                </div>
                                            @endif

                                            @if (!session('success'))
                                                <form method="POST"
                                                    action="{{ route('form.store', ['slug' => $event->slug, 'formSlug' => $form->slug]) }}"
                                                    class="needs-validation" novalidate>
                                                    @csrf

                                                    @foreach ($form->fields as $field)
                                                        <div class="form-group mb-3">
                                                            @switch($field->type)
                                                                @case('text')
                                                                    <label class="col-form-label" for="field_{{ $field->id }}">
                                                                        {{ $field->label }}
                                                                        @if ($field->required)
                                                                            <span class="asterisk">*</span>
                                                                        @endif
                                                                    </label>
                                                                    <input type="text"
                                                                        class="form-control @error('field_' . $field->id) is-invalid @enderror"
                                                                        name="field_{{ $field->id }}"
                                                                        id="field_{{ $field->id }}"
                                                                        value="{{ old('field_' . $field->id, $field->default_value) }}"
                                                                        placeholder="{{ $field->placeholder }}"
                                                                        {{ $field->required ? 'required' : '' }}
                                                                        autocomplete="off">
                                                                @break

                                                                @case('textarea')
                                                                    <label class="col-form-label" for="field_{{ $field->id }}">
                                                                        {{ $field->label }}
                                                                        @if ($field->required)
                                                                            <span class="asterisk">*</span>
                                                                        @endif
                                                                    </label>
                                                                    <textarea class="form-control @error('field_' . $field->id) is-invalid @enderror" name="field_{{ $field->id }}"
                                                                        id="field_{{ $field->id }}" rows="4" placeholder="{{ $field->placeholder }}"
                                                                        {{ $field->required ? 'required' : '' }}>{{ old('field_' . $field->id, $field->default_value) }}</textarea>
                                                                    @if ($field->settings && isset($field->settings['max_words']))
                                                                        <div class="word-limit-message"
                                                                            data-max="{{ $field->settings['max_words'] }}"
                                                                            data-textarea="field_{{ $field->id }}"></div>
                                                                    @endif
                                                                @break

                                                                @case('select')
                                                                    <label class="col-form-label" for="field_{{ $field->id }}">
                                                                        {{ $field->label }}
                                                                        @if ($field->required)
                                                                            <span class="asterisk">*</span>
                                                                        @endif
                                                                    </label>
                                                                    <select
                                                                        class="form-control @error('field_' . $field->id) is-invalid @enderror"
                                                                        name="field_{{ $field->id }}"
                                                                        id="field_{{ $field->id }}"
                                                                        {{ $field->required ? 'required' : '' }}>
                                                                        <option value="">-- Sélectionner --</option>
                                                                        @if ($field->options)
                                                                            @foreach ($field->options as $option)
                                                                                <option value="{{ trim($option) }}"
                                                                                    {{ old('field_' . $field->id) == trim($option) ? 'selected' : '' }}>
                                                                                    {{ trim($option) }}
                                                                                </option>
                                                                            @endforeach
                                                                        @endif
                                                                    </select>
                                                                @break

                                                                @case('radio')
                                                                    <label class="col-form-label">
                                                                        {{ $field->label }}
                                                                        @if ($field->required)
                                                                            <span class="asterisk">*</span>
                                                                        @endif
                                                                    </label>
                                                                    @if ($field->options)
                                                                        @foreach ($field->options as $optIndex => $option)
                                                                            <div class="form-check">
                                                                                <input
                                                                                    class="form-check-input @error('field_' . $field->id) is-invalid @enderror"
                                                                                    type="radio" name="field_{{ $field->id }}"
                                                                                    id="field_{{ $field->id }}_{{ $optIndex }}"
                                                                                    value="{{ trim($option) }}"
                                                                                    {{ old('field_' . $field->id) == trim($option) ? 'checked' : '' }}
                                                                                    {{ $field->required ? 'required' : '' }}>
                                                                                <label class="form-check-label"
                                                                                    for="field_{{ $field->id }}_{{ $optIndex }}">
                                                                                    {{ trim($option) }}
                                                                                </label>
                                                                            </div>
                                                                        @endforeach
                                                                    @endif
                                                                @break

                                                                @case('checkbox')
                                                                    <div class="form-check">
                                                                        <input
                                                                            class="form-check-input @error('field_' . $field->id) is-invalid @enderror"
                                                                            type="checkbox" name="field_{{ $field->id }}"
                                                                            id="field_{{ $field->id }}" value="1"
                                                                            {{ old('field_' . $field->id) ? 'checked' : '' }}
                                                                            {{ $field->required ? 'required' : '' }}>
                                                                        <label class="form-check-label"
                                                                            for="field_{{ $field->id }}">
                                                                            {{ $field->label }}
                                                                            @if ($field->required)
                                                                                <span class="asterisk">*</span>
                                                                            @endif
                                                                        </label>
                                                                    </div>
                                                                @break

                                                                @case('number')
                                                                    <label class="col-form-label" for="field_{{ $field->id }}">
                                                                        {{ $field->label }}
                                                                        @if ($field->required)
                                                                            <span class="asterisk">*</span>
                                                                        @endif
                                                                    </label>
                                                                    <input type="number"
                                                                        class="form-control @error('field_' . $field->id) is-invalid @enderror"
                                                                        name="field_{{ $field->id }}"
                                                                        id="field_{{ $field->id }}"
                                                                        value="{{ old('field_' . $field->id, $field->default_value) }}"
                                                                        placeholder="{{ $field->placeholder }}"
                                                                        {{ $field->required ? 'required' : '' }}
                                                                        @if ($field->settings && isset($field->settings['min'])) min="{{ $field->settings['min'] }}" @endif
                                                                        @if ($field->settings && isset($field->settings['max'])) max="{{ $field->settings['max'] }}" @endif>
                                                                @break

                                                                @case('url')
                                                                    <label class="col-form-label" for="field_{{ $field->id }}">
                                                                        {{ $field->label }}
                                                                        @if ($field->required)
                                                                            <span class="asterisk">*</span>
                                                                        @endif
                                                                    </label>
                                                                    <input type="url"
                                                                        class="form-control @error('field_' . $field->id) is-invalid @enderror"
                                                                        name="field_{{ $field->id }}"
                                                                        id="field_{{ $field->id }}"
                                                                        value="{{ old('field_' . $field->id, $field->default_value) }}"
                                                                        placeholder="{{ $field->placeholder ?? 'https://' }}"
                                                                        {{ $field->required ? 'required' : '' }}>
                                                                @break

                                                                @case('date')
                                                                    <label class="col-form-label" for="field_{{ $field->id }}">
                                                                        {{ $field->label }}
                                                                        @if ($field->required)
                                                                            <span class="asterisk">*</span>
                                                                        @endif
                                                                    </label>
                                                                    <input type="date"
                                                                        class="form-control @error('field_' . $field->id) is-invalid @enderror"
                                                                        name="field_{{ $field->id }}"
                                                                        id="field_{{ $field->id }}"
                                                                        value="{{ old('field_' . $field->id, $field->default_value) }}"
                                                                        {{ $field->required ? 'required' : '' }}>
                                                                @break
                                                            @endswitch

                                                            @if ($field->help_text)
                                                                <div class="text-information text-info">
                                                                    {{ $field->help_text }}</div>
                                                            @endif

                                                            @error('field_' . $field->id)
                                                                <span class="text-danger">{{ $message }}</span>
                                                            @enderror

                                                            <div class="invalid-feedback">
                                                                Le champ "{{ $field->label }}" est obligatoire.
                                                            </div>
                                                        </div>
                                                    @endforeach

                                                    <div class="row justify-content-md-center mt-3">
                                                        <div class="col-lg-3 col-md-4 col-md-auto">
                                                            <button class="btn btn-success w-100 login-btn"
                                                                type="submit">Soumettre</button>
                                                        </div>
                                                    </div>
                                                </form>
                                            @endif
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <style>
        .word-limit-message {
            color: #7D3C98;
            font-size: 0.9em;
            margin: 5px 0;
        }
    </style>
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            document.querySelectorAll('.word-limit-message[data-max]').forEach(function(el) {
                const maxWords = parseInt(el.dataset.max);
                const textareaId = el.dataset.textarea;
                const textarea = document.getElementById(textareaId);
                if (!textarea) return;

                textarea.addEventListener('input', function() {
                    const words = textarea.value.trim().split(/\s+/);
                    const wordCount = words.filter(w => w !== "").length;
                    if (wordCount > maxWords) {
                        textarea.value = words.slice(0, maxWords).join(" ");
                        el.textContent = `Limite de ${maxWords} mots atteinte.`;
                    } else {
                        el.textContent = `Nombre de mots : ${wordCount}/${maxWords}`;
                    }
                });

                // Trigger on load for pre-filled fields
                textarea.dispatchEvent(new Event('input'));
            });
        });
    </script>
    @component('frontend.mediknode.components.scrolltotop')
    @endcomponent
@endsection