{{-- Extends layout --}}
@extends(getThemeBasePath())

@section('page_title')
    {{ $page_title }}
@endsection

<link rel="stylesheet" href="https://cdn.form.io/formiojs/formio.full.min.css">
{{-- <style>
    #form-preview {
        min-height: 200px;
        border: 2px dashed #ccc;
        padding: 20px;
    }

    .form-field {
        margin: 10px 0;
        cursor: pointer;
    }
</style> --}}

{{-- Content --}}
@section('content')
    <!--begin::Card-->
    <div class="card shadow-sm">
        <!--begin::Card header-->
        <div class="card-header card-header-tabs-line nav-tabs-line-3x">
            <!--begin::Toolbar-->
            <div class="card-toolbar">
                <ul class="nav nav-tabs nav-line-tabs nav-stretch fs-6 border-0">
                    <!--begin::Item-->
                    <li class="nav-item me-3">
                        <a class="nav-link active" data-bs-toggle="tab" href="#kt_user_edit_tab_1">
                            <span class="nav-text font-size-lg">{{ ($formDefinitionName ?? '') . ' (Preview)' }}</span>
                        </a>
                    </li>
                </ul>
            </div>
            <!--end::Toolbar-->

        </div>
        <!--end::Card header-->
        <!--begin::Card body-->
        <div class="card-body">

            <div class="tab-content">

                <!--begin::Tab-->
                <div class="tab-pane show active px-7" id="kt_user_edit_tab_1" role="tabpanel">
                    <div class="row mb-5">
                        <div class="col-4">
                            <h3>Form Name:</h3>
                            <p> <strong>{{ ($formDefinitionName ?? '') }}</strong></p>
                        </div>
                        <div class="col-4">
                            <h3>Form Submission Admin Email Alerts:</h3>
                            @if (!empty($adminEmailAlerts))
                                @foreach ($adminEmailAlerts as $email)
                                    <p><strong>{{ $email }}</strong></p>
                                @endforeach
                            @else
                                <p><strong>No Admin Email Alerts Set</strong></p>
                            @endif
                        </div>
                        <div class="col-4">
                            <h3>Allow Multiple Submissions:</h3>
                            <p><strong>{{ ($canResubmit ?? '') == 1 ? 'Yes' : 'No' }}</strong></p>
                        </div>
                    </div>

                    <!--begin::Row-->
                    <div class="card shadow-sm">
                        <div class="card-body">
                            <div class="row">
                                <div class="col-12">
                                    <div id="formio-render"></div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!--end::Row-->
                </div>
                <!--end::Tab-->
            </div>
        </div>
        <div class="card-footer text-right">
            <a href="{{ route('form_builder.index') }}"><button type="button"
                    class="btn btn-secondary btn-hover-rise">Cancel</button></a>
        </div>
    </div>
    <!--end::Card-->
@endsection

{{-- Scripts Section --}}
@section('scripts')
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.2/dist/js/bootstrap.bundle.min.js"></script>
    <script src="https://cdn.form.io/formiojs/formio.full.min.js"></script>
    <script lang="text/javascript">
        $(document).ready(function() {
            var action = '{{ $action }}';
            var formDefinition = @json($formDefinition);
            formDefinition = JSON.parse(formDefinition);            

            formDefinition.components.forEach(function(component) {                
                component.customClass = (component.customClass || '') + ' mt-2';
            });

            Formio.createForm(document.getElementById('formio-render'), formDefinition).then(function(form) {

                form.element.querySelectorAll('input:not(.choices__input--cloned), textarea, select').forEach(function(element) {
                    if (['text', 'password', 'email', 'number', 'time'].includes(element.type) || element.tagName.toLowerCase() === 'textarea' || element.tagName.toLowerCase() === 'select') {
                        element.classList.add('form-control', 'form-control-solid');
                        if (element.tagName.toLowerCase() === 'select') {
                            element.classList.add('form-select');
                        }
                    }
                });

                form.on('submit', function(submission) {
                    alert('Submission is not allowed in Preview mode');
                    form.emit('submitDone', 'Submission is not allowed in Preview mode');
                    // $.ajax({
                    //     url: action,
                    //     type: 'POST',
                    //     data: {
                    //         submission: submission,
                    //         _token: '{{ csrf_token() }}'
                    //     },
                    //     success: function(response) {
                    //         if (response.status) {
                    //             console.log('Submission saved:', response.message);
                    //             form.emit('submitDone', response.message);
                    //         } else {
                    //             console.log('Submission error:', response.message);
                    //             form.emit('submitError', response.message);
                    //         }
                    //     },
                    //     error: function(error) {
                    //         console.log('Submission error:', error);
                    //         form.emit('submitError', error);
                    //     }
                    // });
                });

                form.on('error', function(error) {
                    console.log('Submission error:', error);
                    form.emit('submitError', error);
                });
            });
        });
    </script>
@endsection