@php
// Get the form data
$form = null;
if (!empty($data['form_id'])) {
$form = \App\Models\Form::with('submissions')->find($data['form_id']);
}

// If no form found, show error or fallback
if (!$form) {
if (auth()->check()) {
echo '<div class="alert alert-warning">' . __('form.form_not_found_admin') . '</div>';
}
return;
}

// Prepare form display data
$formTitle = !empty($data['form_title']) ? $data['form_title'] : $form->form_title;
$formSubTitle = !empty($data['form_subtitle']) ? $data['form_subtitle'] : $form->form_subtitle;
$formDescription = !empty($data['form_description']) ? $data['form_description'] : $form->form_description;
$form->submit_button_text;
$successMessage = !empty($data['success_message']) ? $data['success_message'] : $form->success_message;
$showTitle = $data['show_form_title'] ?? true;
$showDescription = $data['show_form_description'] ?? true;
$cssClasses = $data['css_classes'] ?? 'injected-form';

// Generate unique form ID for this component instance
$formId = 'injected-form-' . $form->id . '-' . uniqid();
@endphp

<section class="bg-very-light-gray">
    <div class="container">
        <div class="row justify-content-center">
            <div class="col-lg-7 text-center mb-2"
                data-anime='{ "el": "childs", "translateY": [50, 0], "opacity": [0,1], "duration": 600, "delay": 0, "staggervalue": 100, "easing": "easeOutQuad" }'>
                @if($showTitle && $formSubTitle)
                <span class="fw-600 ls-1px fs-16 alt-font d-inline-block text-uppercase mb-5px text-base-color">{{ $formSubTitle }}</span>
                @endif
                @if($showDescription && $formTitle)
                <h2 class="alt-font text-dark-gray fw-600 ls-minus-2px">{!! $formTitle !!}</h2>
                @endif
            </div>
        </div>
        <div class="row row-cols-md-1 justify-content-center"
            data-anime='{ "translateY": [100, 0], "opacity": [0,1], "duration": 600, "delay": 0, "staggervalue": 100, "easing": "easeOutQuad" }'>
            <div class="col-xl-9 col-lg-11">
        {{-- Success Message (Hidden by default) --}}
        <div id="success-message-{{ $formId }}" class="alert alert-success text-center d-none">
            {{ $form->success_message ?: __('form.thank_you_default') }}
        </div>

        {{-- Error Message Container --}}
        <div id="error-messages-{{ $formId }}" class="alert alert-danger d-none"></div>

        {{-- Dynamic Form --}}
        <form id="{{ $formId }}" class="row contact-form-style-02" data-form-id="{{ $form->id }}">
            @csrf
            <input type="hidden" name="form_id" value="{{ $form->id }}">
                @foreach($form->form_fields as $index => $field)
                @php
                $fieldName = $field['name'] ?? 'field_' . $index;
                $fieldType = $field['type'] ?? 'text';
                $fieldLabel = $field['label'] ?? ucfirst($fieldName);
                $fieldPlaceholder = $field['placeholder'] ?? '';
                $fieldRequired = $field['required'] ?? false;
                $fieldValue = $field['default_value'] ?? '';
                $fieldClass = $field['class'] ?? '';
                $fieldWidth = $field['width'] ?? 'col-12';
                $fieldHelp = $field['help_text'] ?? '';
                $fieldValidation = $field['validation'] ?? '';
                @endphp

                @php
                // Map field types to appropriate column widths
                $columnClass = 'col-md-12 mb-30px';
                if ($fieldType === 'textarea') {
                    $columnClass = 'col-md-12 mb-30px';
                } elseif (in_array($fieldType, ['text', 'email', 'tel', 'number', 'select'])) {
                    $columnClass = 'col-md-6 mb-30px';
                }
                @endphp

                <div class="{{ $columnClass }}">
                    {{-- Render different field types --}}
                    @switch($fieldType)
                    @case('textarea')
                    <textarea name="{{ $fieldName }}" id="{{ $fieldName }}_{{ $formId }}"
                        class="box-shadow-quadruple-large form-control {{ $fieldClass }}" 
                        placeholder="{{ $fieldPlaceholder ?: $fieldLabel }}"
                        cols="40" rows="4" {{ $fieldRequired ? 'required' : '' }}>{{ $fieldValue }}</textarea>
                    @break

                    @case('select')
                    <select name="{{ $fieldName }}" id="{{ $fieldName }}_{{ $formId }}"
                        class="box-shadow-quadruple-large form-control {{ $fieldClass }}" {{ $fieldRequired ? 'required' : '' }}>
                        <option value="">{{ $fieldPlaceholder ?: $fieldLabel }}</option>
                        @if(!empty($field['options']))
                        @foreach($field['options'] as $option)
                        <option value="{{ $option['value'] ?? $option }}" {{ ($fieldValue==($option['value'] ?? $option)) ? 'selected' : '' }}>
                            {{ $option['label'] ?? $option }}
                        </option>
                        @endforeach
                        @endif
                    </select>
                    @break

                    @case('radio')
                    @if(!empty($field['options']))
                    <div class="radio-group">
                        @foreach($field['options'] as $optionIndex => $option)
                        <div class="form-check">
                            <input type="radio" name="{{ $fieldName }}"
                                id="{{ $fieldName }}_{{ $optionIndex }}_{{ $formId }}"
                                class="form-check-input {{ $fieldClass }}" value="{{ $option['value'] ?? $option }}" {{ ($fieldValue==($option['value'] ?? $option)) ? 'checked' : '' }} {{ $fieldRequired ? 'required' : '' }}>
                            <label class="form-check-label" for="{{ $fieldName }}_{{ $optionIndex }}_{{ $formId }}">
                                {{ $option['label'] ?? $option }}
                            </label>
                        </div>
                        @endforeach
                    </div>
                    @endif
                    @break

                    @case('checkbox')
                    @if(!empty($field['options']))
                    <div class="checkbox-group">
                        @foreach($field['options'] as $optionIndex => $option)
                        <div class="form-check">
                            <input type="checkbox" name="{{ $fieldName }}[]"
                                id="{{ $fieldName }}_{{ $optionIndex }}_{{ $formId }}"
                                class="form-check-input {{ $fieldClass }}" value="{{ $option['value'] ?? $option }}" {{ (in_array(($option['value'] ?? $option), (array)$fieldValue)) ? 'checked' : '' }}>
                            <label class="form-check-label" for="{{ $fieldName }}_{{ $optionIndex }}_{{ $formId }}">
                                {{ $option['label'] ?? $option }}
                            </label>
                        </div>
                        @endforeach
                    </div>
                    @else
                    <div class="form-check">
                        <input type="checkbox" name="{{ $fieldName }}" id="{{ $fieldName }}_{{ $formId }}"
                            class="form-check-input {{ $fieldClass }}" value="1" {{ $fieldValue ? 'checked' : '' }} {{ $fieldRequired ? 'required' : '' }}>
                        <label class="form-check-label" for="{{ $fieldName }}_{{ $formId }}">
                            {{ $fieldLabel }}
                        </label>
                    </div>
                    @endif
                    @break

                    @case('file')
                    <input type="file" name="{{ $fieldName }}" id="{{ $fieldName }}_{{ $formId }}"
                        class="box-shadow-quadruple-large form-control {{ $fieldClass }}" accept="{{ $field['accept'] ?? '' }}" {{ $field['multiple'] ?? false ? 'multiple' : '' }} {{ $fieldRequired ? 'required' : '' }}>
                    @break

                    @default
                    <input type="{{ $fieldType }}" name="{{ $fieldName }}" id="{{ $fieldName }}_{{ $formId }}"
                        class="box-shadow-quadruple-large form-control {{ $fieldClass }} {{ $fieldRequired ? 'required' : '' }}" 
                        placeholder="{{ $fieldPlaceholder ?: $fieldLabel }}"
                        value="{{ $fieldValue }}" {{ $fieldRequired ? 'required' : '' }} 
                        @if($fieldType==='number') min="{{ $field['min'] ?? '' }}" max="{{ $field['max'] ?? '' }}" step="{{ $field['step'] ?? '' }}" @endif>
                    @endswitch

                    {{-- Help Text --}}
                    @if($fieldHelp)
                    <div class="form-text">{{ $fieldHelp }}</div>
                    @endif

                    {{-- Field Error Container --}}
                    <div class="invalid-feedback" id="{{ $fieldName }}_error_{{ $formId }}"></div>
                </div>
                @endforeach
            </div>

            {{-- Honeypot Field (spam protection) --}}
            @if($form->form_settings['enable_honeypot'] ?? true)
            <input type="text" name="website" style="display:none;" tabindex="-1" autocomplete="off">
            @endif

            {{-- hCaptcha --}}
            <div class="col-md-9 mb-30px">
                <div class="h-captcha" data-sitekey="{{ env('HCAPTCHA_SITEKEY') }}" data-callback="onHcaptchaSuccess"></div>
            </div>

            <div class="row justify-content-center">
                <div class="col-lg-9">
                    <div class="row justify-content-center">
                    <div class="col-md-7 last-paragraph-no-margin">
              <p class="text-center text-md-start fs-16">{{ $formDescription }}</p>
            </div>

            {{-- Submit Button --}}
            <div class="col-md-5 text-center text-md-end sm-mt-20px">
                <input type="hidden" name="redirect" value="">
                <button class="btn btn-medium btn-dark-gray btn-box-shadow btn-round-edge submit" type="submit" disabled id="submit-btn-{{ $formId }}">
                    <span class="submit-text">{{ $translations['form.submit_button'] ?? 'Gönder' }}</span>
                    <span class="loading-spinner d-none">
                        <i class="fas fa-spinner fa-spin"></i> {{ $translations['form.processing'] ?? 'İşleniyor...' }}
                    </span>
                </button>
            </div>
            <div class="col-12">
                <div class="form-results mt-20px d-none"></div>
            </div>
                    </div>
                </div>
            </div>
        </form>
            </div>
        </div>
    </div>
</section>

{{-- hCaptcha Script --}}
<script src="https://js.hcaptcha.com/1/api.js" async defer></script>

{{-- JavaScript for Form Submission --}}
<script>
    // hCaptcha callback function
    window.onHcaptchaSuccess = function(token) {
        const submitBtn = document.getElementById('submit-btn-{{ $formId }}');
        if (submitBtn) {
            submitBtn.disabled = false;
        }
    };

    // hCaptcha error callback
    window.onHcaptchaError = function() {
        const submitBtn = document.getElementById('submit-btn-{{ $formId }}');
        if (submitBtn) {
            submitBtn.disabled = true;
        }
    };

    // hCaptcha expire callback
    window.onHcaptchaExpired = function() {
        const submitBtn = document.getElementById('submit-btn-{{ $formId }}');
        if (submitBtn) {
            submitBtn.disabled = true;
        }
    };
</script>

<script>
    document.addEventListener('DOMContentLoaded', function () {
        const form = document.getElementById('{{ $formId }}');
        if (form) {
            form.addEventListener('submit', function (e) {
                e.preventDefault();

                // Reset previous errors
                const errorContainer = document.getElementById('error-messages-{{ $formId }}');
                const successContainer = document.getElementById('success-message-{{ $formId }}');
                errorContainer.classList.add('d-none');
                successContainer.classList.add('d-none');

                // Clear individual field errors
                form.querySelectorAll('.invalid-feedback').forEach(el => el.textContent = '');
                form.querySelectorAll('.is-invalid').forEach(el => el.classList.remove('is-invalid'));

                // Show loading state
                const submitBtn = form.querySelector('button[type="submit"]');
                const submitText = submitBtn.querySelector('.submit-text');
                const loadingSpinner = submitBtn.querySelector('.loading-spinner');

                submitText.classList.add('d-none');
                loadingSpinner.classList.remove('d-none');
                submitBtn.disabled = true;

                // Get hCaptcha token
                const hCaptchaResponse = hcaptcha.getResponse();
                if (!hCaptchaResponse) {
                    errorContainer.innerHTML = 'Lütfen captcha doğrulamasını tamamlayın.';
                    errorContainer.classList.remove('d-none');
                    errorContainer.scrollIntoView({ behavior: 'smooth', block: 'center' });
                    
                    // Reset loading state
                    submitText.classList.remove('d-none');
                    loadingSpinner.classList.add('d-none');
                    submitBtn.disabled = false;
                    return;
                }

                // Prepare form data
                const formData = new FormData(form);
                formData.append('h-captcha-response', hCaptchaResponse);

                // Submit form
                fetch('/forms/submit', {
                    method: 'POST',
                    body: formData,
                    headers: {
                        'X-Requested-With': 'XMLHttpRequest',
                    }
                })
                    .then(response => response.json())
                    .then(data => {
                        if (data.success) {
                            // Show success message
                            successContainer.classList.remove('d-none');
                            form.reset();
                            
                            // Reset hCaptcha
                            hcaptcha.reset();
                            submitBtn.disabled = true;

                            // Scroll to success message
                            successContainer.scrollIntoView({ behavior: 'smooth', block: 'center' });
                        } else {
                            // Show validation errors
                            if (data.errors) {
                                Object.keys(data.errors).forEach(fieldName => {
                                    const field = form.querySelector(`[name="${fieldName}"]`);
                                    const errorEl = document.getElementById(`${fieldName}_error_{{ $formId }}`);

                                    if (field && errorEl) {
                                        field.classList.add('is-invalid');
                                        errorEl.textContent = data.errors[fieldName][0];
                                    }
                                });
                            }

                            if (data.message) {
                                errorContainer.innerHTML = data.message;
                                errorContainer.classList.remove('d-none');
                                errorContainer.scrollIntoView({ behavior: 'smooth', block: 'center' });
                            }
                        }
                    })
                    .catch(error => {
                        console.error('Error:', error);
                        errorContainer.textContent = {!! json_encode(__('form.form_submission_error_generic')) !!};
                        errorContainer.classList.remove('d-none');
                        errorContainer.scrollIntoView({ behavior: 'smooth', block: 'center' });
                        
                        // Reset hCaptcha on error
                        hcaptcha.reset();
                    })
                    .finally(() => {
                        // Reset loading state
                        submitText.classList.remove('d-none');
                        loadingSpinner.classList.add('d-none');
                        submitBtn.disabled = true; // Keep disabled until hCaptcha is completed again
                    });
            });
        }
    });
</script>