{% load static %}

<!-- Toast Container -->
<div class="toast-container position-fixed top-0 start-0 p-3" style="z-index: 2000;">
    <!-- Django Messages Toast -->
    {% if messages %}
        {% for message in messages %}
            <div class="bs-toast toast fade {% if message.tags == 'error' %}bg-danger{% elif message.tags == 'success' %}bg-success{% elif message.tags == 'warning' %}bg-warning{% else %}bg-blue{% endif %} text-white border-0" role="alert" aria-live="assertive" aria-atomic="true">
                <div class="toast-header">
                    <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
                </div>
                <div class="toast-body d-flex align-items-center">
                    {% if message.tags == 'error' %}
                        <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-alert-circle me-2" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
                            <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
                            <path d="M3 12a9 9 0 1 0 18 0a9 9 0 0 0 -18 0"></path>
                            <path d="M12 8v4"></path>
                            <path d="M12 16h.01"></path>
                        </svg>
                    {% elif message.tags == 'success' %}
                        <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-circle-check me-2" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
                            <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
                            <path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path>
                            <path d="M9 12l2 2l4 -4"></path>
                        </svg>
                    {% elif message.tags == 'warning' %}
                        <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-alert-triangle me-2" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
                            <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
                            <path d="M12 9v4"></path>
                            <path d="M10.363 3.591l-8.106 13.534a1.914 1.914 0 0 0 1.636 2.871h16.214a1.914 1.914 0 0 0 1.636 -2.87l-8.106 -13.536a1.914 1.914 0 0 0 -3.274 0z"></path>
                            <path d="M12 16h.01"></path>
                        </svg>
                    {% else %}
                        <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-info-circle me-2" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
                            <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
                            <path d="M3 12a9 9 0 1 0 18 0a9 9 0 0 0 -18 0"></path>
                            <path d="M12 9h.01"></path>
                            <path d="M11 12h1v4h1"></path>
                        </svg>
                    {% endif %}
                    {{ message }}
                </div>
            </div>
        {% endfor %}
    {% endif %}

    <!-- JavaScript/AJAX Toast Template -->
    <div id="js-toast-template" class="bs-toast toast fade" role="alert" aria-live="assertive" aria-atomic="true" style="display: none;">
        <div class="toast-header">
            <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
          </div>
            <div class="toast-body d-flex align-items-center">
                <!-- Icon will be inserted here -->
                <!-- Message will be inserted here -->
            </div>
    </div>
</div>

<script>
    // Function to show toast from JavaScript/AJAX
    window.showToast = function(message, type = 'success') {
        // Clone the template
        const toastTemplate = document.getElementById('js-toast-template').cloneNode(true);

        // Set message and style
        const toastBody = toastTemplate.querySelector('.toast-body');
        toastBody.textContent = message;

        // Add icon based on type
        let iconHtml = '';
        switch(type) {
            case 'success':
                iconHtml = `<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-circle-check me-2" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
                    <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
                    <path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path>
                    <path d="M9 12l2 2l4 -4"></path>
                </svg>`;
                break;
            case 'danger':
                iconHtml = `<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-alert-circle me-2" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
                    <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
                    <path d="M3 12a9 9 0 1 0 18 0a9 9 0 0 0 -18 0"></path>
                    <path d="M12 8v4"></path>
                    <path d="M12 16h.01"></path>
                </svg>`;
                break;
            case 'warning':
                iconHtml = `<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-alert-triangle me-2" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
                    <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
                    <path d="M12 9v4"></path>
                    <path d="M10.363 3.591l-8.106 13.534a1.914 1.914 0 0 0 1.636 2.871h16.214a1.914 1.914 0 0 0 1.636 -2.87l-8.106 -13.536a1.914 1.914 0 0 0 -3.274 0z"></path>
                    <path d="M12 16h.01"></path>
                </svg>`;
                break;
            default:
                iconHtml = `<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-info-circle me-2" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
                    <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
                    <path d="M3 12a9 9 0 1 0 18 0a9 9 0 0 0 -18 0"></path>
                    <path d="M12 9h.01"></path>
                    <path d="M11 12h1v4h1"></path>
                </svg>`;
        }
        toastBody.innerHTML = iconHtml + message;

        // Set background color
        toastTemplate.classList.remove('bg-success', 'bg-danger', 'bg-warning', 'bg-blue');
        toastTemplate.classList.add(`bg-${type}`);
        toastTemplate.style.display = 'block';

        // Add to container
        document.querySelector('.toast-container').appendChild(toastTemplate);

        // Initialize and show toast
        const toast = new bootstrap.Toast(toastTemplate, {
            autohide: true,
            delay: 6000
        });
        toast.show();

        // Remove from DOM after hiding
        toastTemplate.addEventListener('hidden.bs.toast', function () {
            this.remove();
        });
    }

    // Initialize Django message toasts
    document.addEventListener('DOMContentLoaded', function() {
        const djangoToasts = document.querySelectorAll('.toast:not(#js-toast-template)');
        djangoToasts.forEach(toast => {
            const bsToast = new bootstrap.Toast(toast, {
                autohide: true,
                delay: 6000
            });
            bsToast.show();
        });
    });
</script>

{#<!-- Usage Examples -->#}
{#<!--#}
{#1. Django Messages (in views.py):#}
{#    from django.contrib import messages#}
{#    #}
{#    # Success message#}
{#    messages.success(request, 'عملیات با موفقیت انجام شد')#}
{#    #}
{#    # Error message#}
{#    messages.error(request, 'خطا در انجام عملیات')#}
{#    #}
{#    # Warning message#}
{#    messages.warning(request, 'هشدار: این عملیات قابل بازگشت نیست')#}
{#    #}
{#    # Info message#}
{#    messages.info(request, 'اطلاعات جدید در دسترس است')#}
{##}
{#2. JavaScript/AJAX Messages:#}
{#    // Success toast#}
{#    showToast('عملیات با موفقیت انجام شد', 'success');#}
{#    #}
{#    // Error toast#}
{#    showToast('خطا در انجام عملیات', 'danger');#}
{#    #}
{#    // Warning toast#}
{#    showToast('هشدار: این عملیات قابل بازگشت نیست', 'warning');#}
{#    #}
{#    // Info toast#}
{#    showToast('اطلاعات جدید در دسترس است', 'blue');#}
{##}
{#3. AJAX Example:#}
{#    $.ajax({#}
{#        url: '/your-endpoint/',#}
{#        method: 'POST',#}
{#        success: function(response) {#}
{#            if (response.success) {#}
{#                showToast('عملیات با موفقیت انجام شد', 'success');#}
{#            } else {#}
{#                showToast(response.error || 'خطا در انجام عملیات', 'danger');#}
{#            }#}
{#        },#}
{#        error: function() {#}
{#            showToast('خطا در ارتباط با سرور', 'danger');#}
{#        }#}
{#    });#}
{#--> #}