<?php
/**
 * Compare Modal Template
 * 
 * This template can be overridden by copying it to yourtheme/product-compare-kav/compare-modal.php
 */

if (!defined('ABSPATH')) {
    exit;
}
?>

<!-- Start Modal -->
<div id="compare-kav-modal" class="compare-kav__modal compare-kav__modal__compares compare-kav__flex compare-kav__items-center compare-kav__justify-center">
    <div class="compare-kav__modal__backdrop" data-compare-kav-close="#compare-kav-modal"></div>
    <div class="compare-kav__modal__content compare-kav__relative compare-kav__flex">
        <!-- Start Heading -->
        <div class="compare-kav__modal__heading compare-kav__flex compare-kav__items-center compare-kav__justify-between">
            <div class="compare-kav__modal__title"><?php _e('Select Product For Compare', 'kavehTheme'); ?></div>
            <button type="button" class="compare-kav__modal__close" data-compare-kav-close="#compare-kav-modal">
                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24">
                    <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M12 22c5.5 0 10-4.5 10-10S17.5 2 12 2 2 6.5 2 12s4.5 10 10 10Zm-2.83-7.17 5.66-5.66m0 5.66L9.17 9.17"/>
                </svg>
            </button>
        </div>
        <!-- End Heading -->
        
        <!-- Start Search -->
        <div class="compare-kav__modal__compares__search compare-kav__relative">
            <input type="text" name="Search" id="search" placeholder="<?php _e('Search Products...', 'kavehTheme'); ?>">
            <button type="button" class="compare-kav__absolute">
                <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="none" viewBox="0 0 20 20">
                    <circle cx="9.583" cy="9.583" r="7.917" stroke="#8C90A8" stroke-width="1.25"/>
                    <path stroke="#8C90A8" stroke-linecap="round" stroke-width="1.25" d="m16.667 16.667 1.666 1.666"/>
                </svg>
            </button>
        </div>
        <!-- End Search -->
        
        <ul class="compare-kav__modal__compares__products compare-kav__flex compare-kav__scrollbar">
            <!-- Products will be loaded here via AJAX -->
            <li class="loading-placeholder" style="width: 100%; text-align: center; padding: 40px;">
                <?php _e('Loading Produtcs...', 'kavehTheme'); ?>
            </li>
        </ul>
    </div>
</div>
<!-- End Modal -->

<style>
/* Additional styles for notifications */
.compare-kav-notification {
    position: fixed;
    top: 20px;
    right: 20px;
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 16px 20px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    z-index: 10000;
    transform: translateX(100%);
    transition: transform 0.3s ease;
    max-width: 300px;
    direction: rtl;
    text-align: right;
}

.compare-kav-notification.show {
    transform: translateX(0);
}

.compare-kav-notification--success {
    border-color: #28a745;
    background: #d4edda;
    color: #155724;
}

.compare-kav-notification--error {
    border-color: #dc3545;
    background: #f8d7da;
    color: #721c24;
}

/* Compare button styles */
.compare-kav-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    background: #f8f9fa;
    border: 1px solid #dee2e6;
    border-radius: 6px;
    color: #495057;
    text-decoration: none;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
}

.compare-kav-btn:hover {
    background: #e9ecef;
    border-color: #adb5bd;
    color: #495057;
    text-decoration: none;
}

.compare-kav-btn.active {
    background: #3d5aff;
    border-color: #3d5aff;
    color: #fff;
}

.compare-kav-btn.active:hover {
    background: #2c47e6;
    border-color: #2c47e6;
}

.compare-kav-btn svg {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

/* Overflow hidden class */
.compare-kav-overflow-hidden {
    overflow: hidden !important;
}

/* Loading state */
.compare-kav__modal__compares__products .loading-placeholder {
    color: #6c757d;
    font-style: italic;
}

/* Empty state */
.compare-kav__modal__compares__products:empty::after {
    content: "<?php _e('Nothing Found!', 'kavehTheme'); ?>";
    display: block;
    width: 100%;
    text-align: center;
    padding: 40px;
    color: #6c757d;
    font-style: italic;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .compare-kav-notification {
        right: 10px;
        left: 10px;
        max-width: none;
        transform: translateY(-100%);
    }
    
    .compare-kav-notification.show {
        transform: translateY(0);
    }
}
</style>