<!-- Global Dialog Success -->
<div class="modal fade dialogbox" id="DialogSuccess" data-bs-backdrop="static" tabindex="-1" role="dialog">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-icon text-success">
                <ion-icon name="checkmark-circle"></ion-icon>
            </div>
            <div class="modal-header">
                <h5 class="modal-title">Success</h5>
            </div>
            <div class="modal-body" id="dialogSuccessMessage">
                Operation completed successfully.
            </div>
            <div class="modal-footer">
                <div class="btn-inline">
                    <a href="#" class="btn btn-text-success" data-bs-dismiss="modal">OK</a>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- * Global Dialog Success -->

<!-- Global Dialog Error -->
<div class="modal fade dialogbox" id="DialogError" data-bs-backdrop="static" tabindex="-1" role="dialog">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-icon text-danger">
                <ion-icon name="close-circle"></ion-icon>
            </div>
            <div class="modal-header">
                <h5 class="modal-title">Error</h5>
            </div>
            <div class="modal-body" id="dialogErrorMessage">
                Something went wrong.
            </div>
            <div class="modal-footer">
                <div class="btn-inline">
                    <a href="#" class="btn btn-text-danger" data-bs-dismiss="modal">OK</a>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- * Global Dialog Error -->

<!-- Global Dialog Warning -->
<div class="modal fade dialogbox" id="DialogWarning" data-bs-backdrop="static" tabindex="-1" role="dialog">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-icon text-warning">
                <ion-icon name="alert-circle"></ion-icon>
            </div>
            <div class="modal-header">
                <h5 class="modal-title">Warning</h5>
            </div>
            <div class="modal-body" id="dialogWarningMessage">
                Please be careful.
            </div>
            <div class="modal-footer">
                <div class="btn-inline">
                    <a href="#" class="btn btn-text-warning" data-bs-dismiss="modal">OK</a>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- * Global Dialog Warning -->

<!-- Global Dialog Info -->
<div class="modal fade dialogbox" id="DialogInfo" data-bs-backdrop="static" tabindex="-1" role="dialog">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-icon text-primary">
                <ion-icon name="information-circle"></ion-icon>
            </div>
            <div class="modal-header">
                <h5 class="modal-title">Information</h5>
            </div>
            <div class="modal-body" id="dialogInfoMessage">
                Here is some information.
            </div>
            <div class="modal-footer">
                <div class="btn-inline">
                    <a href="#" class="btn btn-text-primary" data-bs-dismiss="modal">OK</a>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- * Global Dialog Info -->

<!-- Global Dialog Confirm -->
<div class="modal fade dialogbox" id="DialogConfirm" data-bs-backdrop="static" tabindex="-1" role="dialog">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-icon text-primary">
                <ion-icon name="help-circle"></ion-icon>
            </div>
            <div class="modal-header">
                <h5 class="modal-title" id="dialogConfirmTitle">Confirm</h5>
            </div>
            <div class="modal-body" id="dialogConfirmMessage">
                Are you sure you want to proceed?
            </div>
            <div class="modal-footer">
                <div class="btn-inline">
                    <a href="#" class="btn btn-text-secondary" data-bs-dismiss="modal" id="dialogConfirmCancel">CANCEL</a>
                    <a href="#" class="btn btn-text-primary" data-bs-dismiss="modal" id="dialogConfirmOk">CONFIRM</a>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- * Global Dialog Confirm -->

<!-- Global Dialog Loading -->
<div class="modal fade dialogbox" id="DialogLoading" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" role="dialog">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-body text-center py-4">
                <div class="spinner-border text-primary mb-2" role="status">
                    <span class="visually-hidden">Loading...</span>
                </div>
                <div id="dialogLoadingMessage">Processing...</div>
            </div>
        </div>
    </div>
</div>
<!-- * Global Dialog Loading -->
