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

<form id="webFormGroupForm" class="ajax-json-form">
    @csrf
    @if(isset($group) && $group)
        <input type="hidden" name="_method" value="PUT">
        <input type="hidden" name="_group_id" value="{{ $group->id }}">
    @endif

    <div class="modal-body">
        <div class="mb-3">
            <label for="groupName" class="form-label fw-semibold">
                Group Name <span class="text-danger">*</span>
            </label>
            <input type="text"
                   class="form-control"
                   id="groupName"
                   name="name"
                   value="{{ $group->name ?? '' }}"
                   placeholder="e.g. Lead Capture Forms"
                   required>
        </div>
        <div class="mb-3">
            <label for="groupDisplayOrder" class="form-label fw-semibold">Display Order</label>
            <input type="number"
                   class="form-control"
                   id="groupDisplayOrder"
                   name="display_order"
                   value="{{ $group->display_order ?? 0 }}"
                   min="0">
        </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="btnSaveGroup">
            <i class="bx bx-save me-1"></i> Save Group
        </button>
    </div>
</form>

<script>
(function($) {
    $('#webFormGroupForm').on('submit', function(e) {
        e.preventDefault();
        var form    = $(this);
        var btn     = $('#btnSaveGroup');
        var groupId = form.find('[name="_group_id"]').val();
        var url     = groupId
            ? '/admin/manages/web-form-groups/' + groupId
            : '/admin/manages/web-form-groups';

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

        $.ajax({
            url:    url,
            method: 'POST',
            data:   form.serialize(),
            success: function(res) {
                btn.prop('disabled', false).html('<i class="bx bx-save me-1"></i> Save Group');
                if (res && res.status === 200) {
                    if (typeof toastr !== 'undefined') toastr.success(res.message);
                    $('#myModal').modal('hide');
                    location.reload();
                } else {
                    if (typeof toastr !== 'undefined') toastr.error(res.message || 'Error saving group.');
                    else alert(res.message || 'Error saving group.');
                }
            },
            error: function(xhr) {
                btn.prop('disabled', false).html('<i class="bx bx-save me-1"></i> Save Group');
                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>