{{-- Modal partial — NO @extends — injected into #myModal .modal-content --}}
<div class="modal-header">
    <h5 class="modal-title">
        <i class="bx bx-{{ isset($form) && $form ? 'edit' : 'plus' }} me-1"></i>
        {{ isset($form) && $form ? 'Edit Form: ' . $form->name : 'New Web Form' }}
    </h5>
    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>

<form id="webFormSettingsForm">
    @csrf
    @if(isset($form) && $form)
        <input type="hidden" name="_method" value="PUT">
        <input type="hidden" name="_form_id" value="{{ $form->id }}">
    @endif

    <div class="modal-body" style="max-height:75vh;overflow-y:auto;">
        {{-- Tabs --}}
        <ul class="nav nav-tabs mb-3" id="formSettingsTabs">
            <li class="nav-item"><a class="nav-link active" data-bs-toggle="tab" href="#tabBasic">Basic</a></li>
            <li class="nav-item"><a class="nav-link" data-bs-toggle="tab" href="#tabAutomation">Automation</a></li>
            <li class="nav-item"><a class="nav-link" data-bs-toggle="tab" href="#tabNotifications">Notifications</a></li>
            <li class="nav-item"><a class="nav-link" data-bs-toggle="tab" href="#tabConfirmation">Confirmation</a></li>
        </ul>

        <div class="tab-content">
            {{-- Basic --}}
            <div class="tab-pane fade show active" id="tabBasic">
                <div class="mb-3">
                    <label class="form-label fw-semibold">Form Name <span class="text-danger">*</span></label>
                    <input type="text" class="form-control" name="name"
                           value="{{ $form->name ?? '' }}" required placeholder="e.g. Lead Application Form">
                </div>
                <div class="row g-3">
                    <div class="col-md-6">
                        <label class="form-label fw-semibold">Form Type <span class="text-danger">*</span></label>
                        <select class="form-select" name="form_type" required>
                            <option value="1" {{ (!isset($form) || $form->form_type == 1) ? 'selected' : '' }}>Fillable Web Form</option>
                            <option value="2" {{ (isset($form) && $form->form_type == 2) ? 'selected' : '' }}>Lead Capture Form</option>
                        </select>
                    </div>
                    <div class="col-md-6">
                        <label class="form-label fw-semibold">Group</label>
                        <select class="form-select" name="web_form_group_id">
                            <option value="">-- No Group --</option>
                            @foreach($groups as $g)
                            <option value="{{ $g->id }}"
                                {{ ((isset($form) && $form->web_form_group_id == $g->id) || (isset($groupId) && $groupId == $g->id)) ? 'selected' : '' }}>
                                {{ $g->name }}
                            </option>
                            @endforeach
                        </select>
                    </div>
                </div>
                <div class="row g-3 mt-1">
                    <div class="col-md-6">
                        <label class="form-label fw-semibold">Brand Color</label>
                        <input type="color" class="form-control form-control-color" name="brand_primary_color"
                               value="{{ $form->brand_primary_color ?? '#007bff' }}">
                    </div>
                    <div class="col-md-6">
                        <label class="form-label fw-semibold">Submit Button Text</label>
                        <input type="text" class="form-control" name="submit_button_text"
                               value="{{ $form->submit_button_text ?? 'Submit' }}" placeholder="Submit">
                    </div>
                </div>
                @if(isset($form) && $form)
                <div class="mt-3">
                    <label class="form-label fw-semibold">Public URL</label>
                    <div class="input-group">
                        <input type="text" class="form-control form-control-sm" readonly
                               value="{{ route('webform.public.show', $form->public_slug) }}">
                        <a href="{{ route('webform.public.show', $form->public_slug) }}"
                           target="_blank" class="btn btn-outline-secondary btn-sm">
                            <i class="bx bx-link-external"></i>
                        </a>
                    </div>
                </div>
                @endif
                <div class="mt-3">
                    <label class="form-label fw-semibold">Status</label>
                    <select class="form-select" name="status">
                        <option value="1" {{ (!isset($form) || $form->status == 1) ? 'selected' : '' }}>Active</option>
                        <option value="0" {{ (isset($form) && $form->status == 0) ? 'selected' : '' }}>Inactive</option>
                    </select>
                </div>
                {{-- E-Sign Documents --}}
                <div class="mt-3">
                    <label class="form-label fw-semibold">E-Sign Documents</label>
                    <select class="form-select" name="esign_document_ids[]" multiple size="4">
                        @foreach($documents as $doc)
                        <option value="{{ $doc->id }}"
                            {{ (isset($esignDocIds) && in_array($doc->id, $esignDocIds)) ? 'selected' : '' }}>
                            {{ $doc->title }}
                        </option>
                        @endforeach
                    </select>
                    <div class="form-text">Hold Ctrl/Cmd to select multiple documents.</div>
                </div>
            </div>

            {{-- Automation --}}
            <div class="tab-pane fade" id="tabAutomation">
                <div class="row g-3">
                    <div class="col-md-6">
                        <label class="form-label fw-semibold">Lead Status</label>
                        <select class="form-select" name="master_lead_status_id">
                            <option value="">-- None --</option>
                            @foreach($leadStatuses as $s)
                            <option value="{{ $s->id }}" {{ (isset($form) && $form->master_lead_status_id == $s->id) ? 'selected' : '' }}>{{ $s->name }}</option>
                            @endforeach
                        </select>
                    </div>
                    <div class="col-md-6">
                        <label class="form-label fw-semibold">Lead Group</label>
                        <select class="form-select" name="master_group_id">
                            <option value="">-- None --</option>
                            @foreach($leadGroups as $g)
                            <option value="{{ $g->id }}" {{ (isset($form) && $form->master_group_id == $g->id) ? 'selected' : '' }}>{{ $g->name }}</option>
                            @endforeach
                        </select>
                    </div>
                    <div class="col-md-6">
                        <label class="form-label fw-semibold">Lead Source</label>
                        <select class="form-select" name="master_source_id">
                            <option value="">-- None --</option>
                            @foreach($leadSources as $s)
                            <option value="{{ $s->id }}" {{ (isset($form) && $form->master_source_id == $s->id) ? 'selected' : '' }}>{{ $s->name }}</option>
                            @endforeach
                        </select>
                    </div>
                    <div class="col-md-6">
                        <label class="form-label fw-semibold">Campaign</label>
                        <select class="form-select" name="master_campaign_id">
                            <option value="">-- None --</option>
                            @foreach($campaigns as $c)
                            <option value="{{ $c->id }}" {{ (isset($form) && $form->master_campaign_id == $c->id) ? 'selected' : '' }}>{{ $c->name }}</option>
                            @endforeach
                        </select>
                    </div>
                    <div class="col-md-6">
                        <label class="form-label fw-semibold">Assign Lead To</label>
                        <select class="form-select" name="assigned_user_id">
                            <option value="">-- None --</option>
                            @foreach($users as $u)
                            <option value="{{ $u->id }}" {{ (isset($form) && $form->assigned_user_id == $u->id) ? 'selected' : '' }}>{{ $u->first_name }} {{ $u->last_name }}</option>
                            @endforeach
                        </select>
                    </div>
                </div>
                <div class="row g-3 mt-1">
                    <div class="col-md-6">
                        <div class="form-check form-switch">
                            <input type="hidden" name="auto_import" value="0">
                            <input class="form-check-input" type="checkbox" name="auto_import" value="1"
                                   id="autoImport" {{ (!isset($form) || $form->auto_import) ? 'checked' : '' }}>
                            <label class="form-check-label" for="autoImport">Auto-import as lead</label>
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="form-check form-switch">
                            <input type="hidden" name="update_existing_lead" value="0">
                            <input class="form-check-input" type="checkbox" name="update_existing_lead" value="1"
                                   id="updateExisting" {{ (isset($form) && $form->update_existing_lead) ? 'checked' : '' }}>
                            <label class="form-check-label" for="updateExisting">Update existing lead (by email)</label>
                        </div>
                    </div>
                </div>
            </div>

            {{-- Notifications --}}
            <div class="tab-pane fade" id="tabNotifications">
                <div class="mb-3">
                    <div class="form-check form-switch">
                        <input type="hidden" name="notify_user_on_submission" value="0">
                        <input class="form-check-input" type="checkbox" name="notify_user_on_submission" value="1"
                               id="notifyUser" {{ (!isset($form) || $form->notify_user_on_submission) ? 'checked' : '' }}>
                        <label class="form-check-label" for="notifyUser">Notify on submission</label>
                    </div>
                </div>
                <div class="mb-3">
                    <label class="form-label fw-semibold">Notification Email</label>
                    <input type="email" class="form-control" name="notification_email"
                           value="{{ $form->notification_email ?? '' }}"
                           placeholder="admin@example.com">
                </div>
                <div class="row g-3">
                    <div class="col-md-6">
                        <label class="form-label fw-semibold">Notification Email Template</label>
                        <select class="form-select" name="notification_email_template_id">
                            <option value="">-- None --</option>
                            @foreach($emailTemplates as $t)
                            <option value="{{ $t->id }}" {{ (isset($form) && $form->notification_email_template_id == $t->id) ? 'selected' : '' }}>{{ $t->title }}</option>
                            @endforeach
                        </select>
                    </div>
                    <div class="col-md-6">
                        <label class="form-label fw-semibold">Submitter Confirmation Email Template</label>
                        <select class="form-select" name="submission_email_template_id">
                            <option value="">-- None --</option>
                            @foreach($emailTemplates as $t)
                            <option value="{{ $t->id }}" {{ (isset($form) && $form->submission_email_template_id == $t->id) ? 'selected' : '' }}>{{ $t->title }}</option>
                            @endforeach
                        </select>
                    </div>
                </div>
            </div>

            {{-- Confirmation --}}
            <div class="tab-pane fade" id="tabConfirmation">
                <div class="mb-3">
                    <label class="form-label fw-semibold">Confirmation Type</label>
                    <div>
                        <div class="form-check form-check-inline">
                            <input class="form-check-input" type="radio" name="confirmation_type" value="1"
                                   id="confType1"
                                   {{ (!isset($form) || $form->confirmation_type == 1) ? 'checked' : '' }}
                                   onchange="toggleConfirmationType()">
                            <label class="form-check-label" for="confType1">Show Confirmation Message</label>
                        </div>
                        <div class="form-check form-check-inline">
                            <input class="form-check-input" type="radio" name="confirmation_type" value="2"
                                   id="confType2"
                                   {{ (isset($form) && $form->confirmation_type == 2) ? 'checked' : '' }}
                                   onchange="toggleConfirmationType()">
                            <label class="form-check-label" for="confType2">Redirect to URL</label>
                        </div>
                    </div>
                </div>
                <div id="confMessageDiv" style="{{ (isset($form) && $form->confirmation_type == 2) ? 'display:none' : '' }}">
                    <label class="form-label fw-semibold">Confirmation Message</label>
                    <textarea class="form-control" name="confirmation_message" rows="3"
                              placeholder="Thank you for your submission!">{{ $form->confirmation_message ?? '' }}</textarea>
                </div>
                <div id="confRedirectDiv" style="{{ (!isset($form) || $form->confirmation_type != 2) ? 'display:none' : '' }}">
                    <label class="form-label fw-semibold">Redirect URL</label>
                    <input type="url" class="form-control" name="confirmation_redirect_url"
                           value="{{ $form->confirmation_redirect_url ?? '' }}"
                           placeholder="https://example.com/thank-you">
                </div>
            </div>
        </div>
    </div>

    <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
        <button type="submit" class="btn btn-success" id="btnSaveFormSettings">
            <i class="bx bx-save me-1"></i>
            {{ isset($form) && $form ? 'Save Changes' : 'Create Form' }}
        </button>
    </div>
</form>

<script>
function toggleConfirmationType() {
    var isRedirect = document.getElementById('confType2').checked;
    document.getElementById('confMessageDiv').style.display = isRedirect ? 'none' : '';
    document.getElementById('confRedirectDiv').style.display = isRedirect ? '' : 'none';
}

(function($) {
    $('#webFormSettingsForm').on('submit', function(e) {
        e.preventDefault();
        var form    = $(this);
        var btn     = $('#btnSaveFormSettings');
        var formId  = form.find('[name="_form_id"]').val();
        var url     = formId
            ? '/admin/manages/web-forms/' + formId
            : '/admin/manages/web-forms';

        btn.prop('disabled', true).html('<span class="spinner-border spinner-border-sm me-1"></span> Saving...');

        // Build FormData to handle multiple selects
        var formData = form.serialize();

        $.ajax({
            url:    url,
            method: 'POST',
            data:   formData,
            success: function(res) {
                btn.prop('disabled', false).html('<i class="bx bx-save me-1"></i> ' + (formId ? 'Save Changes' : 'Create Form'));
                if (res && res.status === 200) {
                    if (typeof toastr !== 'undefined') toastr.success(res.message);
                    $('#myModal').modal('hide');
                    setTimeout(function() { location.reload(); }, 500);
                } else {
                    if (typeof toastr !== 'undefined') toastr.error(res.message || 'Error saving form.');
                    else alert(res.message || 'Error saving form.');
                }
            },
            error: function(xhr) {
                btn.prop('disabled', false).html('<i class="bx bx-save me-1"></i> ' + (formId ? 'Save Changes' : 'Create Form'));
                var msg = 'An error occurred.';
                try { msg = xhr.responseJSON.message || msg; } catch(ex) {}
                if (typeof toastr !== 'undefined') toastr.error(msg);
                else alert(msg);
            }
        });
    });
})(jQuery);
</script>