/**
 * Universal Modal Templates
 * Shared across all sections: Admin, Vendor, and Shop
 */

window.modalTemplates = {

    /**
     * Confirmation Modal
     */
    confirmModal: () => `
        <div x-show="confirmModal.show"
             x-cloak
             class="modal-backdrop"
             @click.self="closeConfirmModal()">
            <div class="modal-container" @click.stop>
                <div class="modal-header">
                    <h3 class="modal-title" x-text="confirmModal.title"></h3>
                    <button @click="closeConfirmModal()" class="modal-close">
                        <i class="fas fa-times"></i>
                    </button>
                </div>
                <div class="modal-body">
                    <p class="modal-message" x-text="confirmModal.message"></p>
                    <div x-show="confirmModal.warning" class="modal-warning">
                        <p x-text="confirmModal.warning"></p>
                    </div>
                </div>
                <div class="modal-footer">
                    <button @click="closeConfirmModal()" class="btn btn-outline">
                        Cancel
                    </button>
                    <button @click="handleConfirm()"
                            class="btn"
                            :class="confirmModal.buttonClass"
                            x-text="confirmModal.buttonText">
                    </button>
                </div>
            </div>
        </div>
    `,

    /**
     * Success Modal
     */
    successModal: () => `
        <div x-show="successModal.show"
             x-cloak
             class="modal-backdrop"
             @click.self="closeSuccessModal()">
            <div class="modal-container" @click.stop>
                <div class="modal-header">
                    <h3 class="modal-title" x-text="successModal.title"></h3>
                    <button @click="closeSuccessModal()" class="modal-close">
                        <i class="fas fa-times"></i>
                    </button>
                </div>
                <div class="modal-body">
                    <div class="modal-icon success">
                        <i class="fas fa-check"></i>
                    </div>
                    <p class="modal-message text-center" x-text="successModal.message"></p>
                </div>
                <div class="modal-footer">
                    <button @click="closeSuccessModal()" class="btn btn-primary">
                        OK
                    </button>
                </div>
            </div>
        </div>
    `,

    /**
     * Error Modal
     */
    errorModal: () => `
        <div x-show="errorModal.show"
             x-cloak
             class="modal-backdrop"
             @click.self="closeErrorModal()">
            <div class="modal-container" @click.stop>
                <div class="modal-header">
                    <h3 class="modal-title" x-text="errorModal.title"></h3>
                    <button @click="closeErrorModal()" class="modal-close">
                        <i class="fas fa-times"></i>
                    </button>
                </div>
                <div class="modal-body">
                    <div class="modal-icon error">
                        <i class="fas fa-exclamation-triangle"></i>
                    </div>
                    <p class="modal-message text-center" x-text="errorModal.message"></p>
                    <div x-show="errorModal.details" class="modal-details" x-text="errorModal.details"></div>
                </div>
                <div class="modal-footer">
                    <button @click="closeErrorModal()" class="btn btn-primary">
                        Close
                    </button>
                </div>
            </div>
        </div>
    `,

    /**
     * Loading Overlay
     */
    loadingOverlay: () => `
        <div x-show="loading"
             x-cloak
             class="loading-overlay">
            <div class="loading-spinner"></div>
        </div>
    `
};