{% if journal3 is not defined %}
<style>body { display: none !important; }</style>
<script>window.location = 'index.php?route=journal3/startup/error_not_installed';</script>
{% endif %}

{{ journal3_bottom }}

{{ '</div>' }}{# .site-wrapper #}

{% if journal3_footer_menu %}
  <footer class="{{ journal3.get('footer_color_scheme') }}">{{ journal3_footer_menu }}</footer>
{% endif %}

{{ '</div>' }} {# .global-wrapper #}

{% for script in scripts %}
{% if journal3.js_defer %}
<script src="{{ script }}" defer></script>
{% else %}
<script src="{{ script }}"></script>
{% endif %}
{% endfor %}

{% if journal3.get('customJS') %}
<script type="text/javascript">{{ journal3.get('customJS') }}</script>
{% endif %}

{% if not journal3.is_popup and journal3.get('customCodeFooter') %}
{{ journal3.get('customCodeFooter') }}
{% endif %}

{% if not journal3.is_popup and journal3.get('scrollTop') %}
<div class="scroll-top"><em class="fa fa-angle-up"></em></div>
{% endif %}

{% if not journal3.is_popup and journal3.get('filterActive') %}
<a class="mobile-filter-trigger btn" data-off-canvas="mobile-filter-container" role="button" title="{{ journal3.get('mobileFilterButtonText') }}">{{ journal3.get('mobileFilterButtonText') }}</a>
{% endif %}
</body>
</html>

<script>
/* --- 1. GLOBAL DEĞİŞKENLER & DİL ÇEVİRİLERİ --- */
var global_is_admin = {{ is_admin ? 'true' : 'false' }};

// --- EKLENEN KISIM: Admin panelindeki limit ---
// Eğer değişken boş gelirse varsayılan 100 olsun
var global_bulk_limit = {{ js_bulk_limit|default(100) }}; 

// Controller'dan gelen dil değişkenlerini JS'e aktarıyoruz
var lang_error_limit = `{{ error_bulk_limit }}`; 
var lang_badge_text  = `{{ text_bulk_mode_badge }}`;
var lang_copied_text = `{{ text_copied }}`;

// JS içinde %s yer tutucularını doldurmak için yardımcı fonksiyon
function js_sprintf(format, ...args) {
    return format.replace(/%s/g, function() {
        return args.shift();
    });
}

/* --- 2. MODAL YÖNETİMİ --- */
function openBulkModal() {
    var $bulkTextarea = $('#bulk-text');
    var currentSearch = "";

    if ($('#input-search').length) {
        currentSearch = $('#input-search').val();
    } else if ($('#search-input-el').length) {
        currentSearch = $('#search-input-el').val();
    }

    if ($bulkTextarea.val().trim() === '' && currentSearch && currentSearch.trim() !== '') {
        var formattedSearch = currentSearch.trim().replace(/\|/g, '\n');
        $bulkTextarea.val(formattedSearch);
    }

    $('#bulk-search-overlay').fadeIn(200).css('display', 'flex');
    $bulkTextarea.focus();
}

function closeBulkModal(e) {
    if (e) {
        e.stopPropagation();
        e.preventDefault();
    }
    $('#bulk-search-overlay').fadeOut(200);
    
    if ($('#search-input-el').is(':visible')) {
        setTimeout(function(){ $('#search-input-el').focus(); }, 210);
    }
}

function doBulkSearch() {
    var raw = $('#bulk-text').val();
    var infoBox = $('.bulk-info');
    var shakeTarget = $('#bulk-text').parent();

    if (!raw || !raw.trim()) {
        $('#bulk-text').css('border-color', '#ff5252');
        shakeTarget.addClass('shake-anim');
        setTimeout(function() {
            $('#bulk-text').css('border-color', '#ddd');
            shakeTarget.removeClass('shake-anim');
        }, 500);
        return;
    }

    // GÜNCELLEME: Sadece yeni satır ve virgül pipe (|) karakterine çevrilir.
    // Slash, Tire, Yıldız ve Alt Çizgi kodun parçası olarak bırakılır.
    var clean = raw.trim()
        .replace(/[\n\r,]+/g, '|')
        .replace(/\|+/g, '|')
        .replace(/^\|+|\|+$/g, '');

    // .filter(Boolean) eklendi: Sayım hatası giderildi.
    var codeCount = clean.split('|').filter(Boolean).length;
    var limit = global_bulk_limit;

    if (!global_is_admin && codeCount > limit) {
        var errorMsg = js_sprintf(lang_error_limit, limit, codeCount);
        infoBox.html(errorMsg).addClass('error-state');
        shakeTarget.addClass('shake-anim');
        setTimeout(function(){ shakeTarget.removeClass('shake-anim'); }, 500);
        return;
    }

    infoBox.removeClass('error-state');

    // Tek kod olsa bile backend'in bulk moduna girmesi için pipe ekle
    if (clean.indexOf('|') === -1 && clean !== "") {
        clean = clean + '|';
    }

    location = 'index.php?route=product/search&search=' + encodeURIComponent(clean);
}

/* --- 4. MASKELEME SİSTEMİ (OTOMATİK SİLME VE RENKLENDİRME) --- */
function maskBulkInput() {
    var inputs = $('#search-input-el, #input-search, input[name=\'search\']');
    var productsFound = $('.product-thumb, .product-layout, .product-grid-item, .main-products').length > 0;
    
    if ($('#content p:contains("bulunamadı"), #content p:contains("match")').length > 0) {
        productsFound = false;
    }

    inputs.each(function() {
        var input = $(this);
        var val = input.val();

        input.parent().find('.bulk-search-badge').remove();
        input.removeClass('input-has-bulk-tag');

        if (!val || val.trim() === '') return;

        // --- SENARYO 1: TOPLU ARAMA (Pipe | İçeriyorsa) ---
        if (val.indexOf('|') > -1) {
            var count = val.split('|').filter(Boolean).length;
            input.addClass('input-has-bulk-tag');
            
            var badgeText = js_sprintf(lang_badge_text, count); 
            var badgeHtml = `
                <div class="bulk-search-badge badge-info">
                    <i class="fa fa-layer-group"></i> 
                    <span class="badge-text">${badgeText}</span>
                    <span class="bulk-badge-close" onclick="clearBulkSearchSatir(this, event)" title="{{ button_bulk_cancel }}">
                        <i class="fa fa-times"></i>
                    </span>
                </div>
            `;
            input.parent().append(badgeHtml);
        }
        
        // --- SENARYO 2: TEKLİ ARAMA (Yeşil/Kırmızı Badge) ---
        else {
            input.addClass('input-has-bulk-tag');
            
            var singleText = val.length > 17 ? val.substring(0, 17) + '...' : val; 
            var badgeClass = productsFound ? 'badge-success' : 'badge-danger';
            var iconClass  = productsFound ? 'fa-check-circle' : 'fa-times-circle';

            var badgeHtml = `
                <div class="bulk-search-badge ${badgeClass} badge-single">
                    <i class="fa ${iconClass}"></i> 
                    <span class="badge-text">${singleText}</span>
                    <span class="bulk-badge-close" onclick="clearBulkSearchSatir(this, event)" title="{{ button_bulk_cancel }}">
                        <i class="fa fa-times"></i>
                    </span>
                </div>
            `;
            
            input.parent().append(badgeHtml);

// DÜZELTME: 'focus' olayını kaldırdık. Artık otomatik odaklanınca etiket silinmez.
// Sadece kullanıcı tıklarsa veya yazı yazarsa silinir.
input.on('click input', function() {
    var parent = $(this).parent();
    // Eğer içeride tekli badge varsa sil
    if (parent.find('.bulk-search-badge.badge-single').length > 0) {
        parent.find('.bulk-search-badge').remove();
        $(this).removeClass('input-has-bulk-tag');
        
        // Yazının rengini geri getir (CSS transition ile yumuşak geçiş)
        $(this).css('color', ''); 
    }
});
        }
    });
}

function clearBulkSearch(e) {
    if (e) {
        e.stopPropagation(); // Tıklamanın modal dışına taşıp modalı kapatmasını engeller
        e.preventDefault();
    }
    
    // ID'si 'bulk-text' olan alanı bul ve değerini boş yap
    document.getElementById('bulk-text').value = '';
}


function clearBulkSearchSatir(elem, e) {
    if (e) {
        e.stopPropagation();
        e.preventDefault();
    }
    window.location.href = 'index.php?route=product/search';
}



/* --- 5. RAPOR KOPYALAMA --- */
function copyReportCodes() {
    var lines = [];
    $('.filter-item:visible').each(function() {
        var text = $(this).text().trim();
        if(text) lines.push(text);
    });

    var clipboardText = lines.join('\n');
    navigator.clipboard.writeText(clipboardText).then(function() {
        var btn = $('.btn-copy-report');
        var span = $('#copy-text');
        var originalText = span.text();
        
        btn.addClass('copied');
        span.text(js_sprintf(lang_copied_text, lines.length));
        
        setTimeout(function() {
            btn.removeClass('copied');
            span.text(originalText);
        }, 2000);
    });
}

/* --- 6. EVENT BINDINGS (OLAY BAĞLANTILARI) --- */
$(document).ready(function() {
    maskBulkInput();

// --- YENİ EKLENEN: AKILLI YAPIŞTIR (GÜNCELLENMİŞ) ---
var searchInputs = $('#search-input-el, #input-search, input[name=\'search\']');

searchInputs.on('paste', function(e) {
    var input = $(this);
    
    setTimeout(function() {
        var val = input.val();
        if (!val) return;

        // 1. KURAL: YENİ SATIR VARSA
        if (val.indexOf('\n') > -1) {
            var formatted = val.replace(/(\r\n|\n|\r)/gm, "|")
                                .replace(/\|+/g, '|')
                                .replace(/^\||\|$/g, '');
            input.val(formatted);
            maskBulkInput();
        }
        // 2. KURAL: SADECE VİRGÜL (,) AYIRICI OLARAK KABUL EDİLİR
        else {
            var commaMatch = val.match(/,/g);
            // En az 2 adet virgül varsa toplu arama kabul et
            if (commaMatch && commaMatch.length >= 2) {
                var formatted = val.replace(/,/g, "|")
                                   .replace(/\s+/g, "")
                                   .replace(/\|+/g, '|')
                                   .replace(/^\||\|$/g, '');

                input.val(formatted);
                maskBulkInput();
            }
        }
    }, 100);
});
    // ----------------------------------------------------

    $(document).on('mouseup', function(e) {
        var container = $(".bulk-modal");
        if ($('#bulk-search-overlay').is(':visible') && !container.is(e.target) && container.has(e.target).length === 0) {
            closeBulkModal();
        }
    });

    $('#bulk-text').on('input', function() {
        $('.bulk-info').removeClass('error-state');
    });
});

$(document).ajaxComplete(function() {
    maskBulkInput();
});
</script>

<div id="bulk-search-overlay" class="bulk-overlay" style="display:none;" onclick="closeBulkModal(event)">
    <div class="bulk-modal" onclick="event.stopPropagation()">
        <div class="bulk-header">
            <h3><i class="fa fa-search-plus"></i> {{ text_bulk_search_title }}</h3>
            <span class="close-modal" onclick="closeBulkModal(event)">&times;</span>
        </div>
        <div class="bulk-body">
            <div class="bulk-info">
                <i class="fa fa-info-circle"></i> 
                {{ text_bulk_search_info }}
            </div>
            <textarea id="bulk-text" placeholder="{{ text_bulk_search_placeholder }}"></textarea>
        </div>
        <div class="bulk-footer">
			  <button onclick="clearBulkSearch(event)" class="btn-bulk-clear">{{ button_bulk_clear }}</button>
            <button onclick="closeBulkModal(event)" class="btn-bulk-cancel">{{ button_bulk_cancel }}</button>
            <button onclick="doBulkSearch()" class="btn-bulk-search">
                <i class="fa fa-search"></i> {{ button_bulk_search }}
            </button>
        </div>
    </div>
</div>


<div id="modal-360-overlay" class="modal-360-overlay" style="display:none;">
    <div class="modal-360-content">
        <h3 class="modal-title-360" id="modal-360-title">360° Görünüm</h3>
        <span class="close-360" onclick="close360Modal()">&times;</span>
        
        <div class="threesixty-container">
            <div class="threesixty" id="mySpriteSpin"></div>
            
            {# Minimap Alanı #}
            <div class="minimap-container" id="minimap" style="display:none;">
                <img src="" class="minimap-img" id="minimapImg">
                <div class="viewport-box" id="viewportBox"></div>
            </div>
            
            <div id="debug-360">Yükleniyor...</div>
        </div>

        <div class="controls-wrapper">
            <div class="controls-360">
                <div class="group-playback">
                    <button type="button" class="btn-360" id="btnPrev" title="Geri"><i class="fa fa-chevron-left"></i></button>
                    <button type="button" class="btn-360" id="btnPlay" title="Oynat/Durdur"><i class="fa fa-play"></i></button>
                    <button type="button" class="btn-360" id="btnNext" title="İleri"><i class="fa fa-chevron-right"></i></button>
                </div>
                
                <div class="separator"></div>

                <div class="group-zoom">
                    <button type="button" class="btn-360 btn-level active" onclick="applyZoom(1)">1x</button>
                    <button type="button" class="btn-360 btn-level" onclick="applyZoom(2)">2x</button>
                    <button type="button" class="btn-360 btn-level" onclick="applyZoom(4)" title="Yakınlaştır">
                        <i class="fa fa-search-plus"></i>
                    </button>
                </div>
            </div>
        </div>
    </div>
</div>


<a href="{{ new_products_link }}" class="vertical-label">{{ yeni_urunler }}</a>


<script src="catalog/view/javascript/spritespin.js"></script>

<script>
    var currentZoomLevel = 1;
    var cachedImages = []; // Dinamik doldurulacak

    // --- 1. MODALI AÇMA FONKSİYONU ---
    // Bu fonksiyonu her yerden çağırabilirsin: open360Modal('BM-SB-123', 'Ürün Adı')
// --- 1. GÜNCELLENMİŞ MODAL AÇMA (AJAX) ---
    // Artık model kodu yerine product_id alıyoruz çünkü PHP'ye soracağız.
    function open360Modal(productId, title) {
        var modal = $('#modal-360-overlay');
        var loader = $('#debug-360');
        
        // Başlığı ayarla
        $('#modal-360-title').text(title + ' - 360°');
        
        // Modalı hemen göster (Yükleniyor yazısıyla)
        modal.fadeIn(300);
        $('body').css('overflow', 'hidden');
        loader.text("Görüntüler yükleniyor, lütfen bekleyin...");
        
        // SpriteSpin'i temizle (Eski resimler kalmasın)
        try { $('#mySpriteSpin').spritespin('destroy'); } catch(e){}
        $('#minimapImg').attr('src', ''); // Minimap temizle

        // PHP'den RESIZE edilmiş resimleri iste
        $.ajax({
            url: 'index.php?route=product/product/get360ImagesAjax&product_id=' + productId,
            dataType: 'json',
            success: function(json) {
                if (json && json.length > 0) {
                    // Gelen resimler artık cache klasöründedir (resize edilmiş)
                    initSpriteSpin(json);
                } else {
                    loader.text("Bu ürün için 360 görsel bulunamadı.");
                }
            },
            error: function(xhr, ajaxOptions, thrownError) {
                loader.text("Hata oluştu: " + thrownError);
            }
        });
    }
    // --- 2. MODALI KAPATMA ---
    function close360Modal() {
        $('#modal-360-overlay').fadeOut(300);
        $('body').css('overflow', '');
        
        // Animasyonu durdur
        var api = $('#mySpriteSpin').spritespin('api');
        if(api) { 
            api.stopAnimation(); 
            updatePlayIcon(false); 
        }
    }

    // --- 3. SPRITESPIN BAŞLATICI (Dinamik Resim ile) ---
    function initSpriteSpin(imagesSource) {
        var $el = $('#mySpriteSpin');
        
        // Önce temizle (varsa eskiyi sil)
        try { $el.spritespin('destroy'); } catch(e){}

        // Minimap ilk resmini ayarla
        $('#minimapImg').attr('src', imagesSource[0]);

        $el.spritespin({
            source: imagesSource,
            width: '100%', height: '100%',
            frames: imagesSource.length,
            sense: -1, 
            renderer: 'image', 
            responsive: true,
            animate: true, 
            loop: true, 
            frameTime: 120,
            plugins: ['drag', '360'], 
            onFrame: function(e, data) {
                // Minimap'i güncelle
                $('#minimapImg').attr('src', imagesSource[data.frame]);
            },
            onLoad: function() {
                $('#debug-360').text(""); 
                updatePlayIcon(true);
            }
        });
    }

    // --- 4. YARDIMCI FONKSİYONLAR ---
    function updatePlayIcon(isPlaying) {
        var icon = $('#btnPlay i');
        if (isPlaying) { icon.removeClass('fa-play').addClass('fa-pause'); } 
        else { icon.removeClass('fa-pause').addClass('fa-play'); }
    }

    // Zoom Fonksiyonu
    window.applyZoom = function(level) {
        var $el = $('#mySpriteSpin');
        var api = $el.spritespin('api');
        if(!api) return;
        
        currentZoomLevel = level;
        var $img = $el.find('img');
        var $minimap = $('#minimap');
        var $viewport = $('#viewportBox');

        $img.css('transform', 'scale(' + level + ')');

        $('.btn-level').removeClass('active');
        $("button[onclick='applyZoom("+level+")']").addClass('active');

        if (level > 1) {
            api.stopAnimation();
            api.data.behavior = null; // Drag modunu kapat
            $el.addClass('zoomed-in');
            $minimap.fadeIn();
            updatePlayIcon(false);
            
            var boxSize = (100 / level) + '%';
            $viewport.css({ 'width': boxSize, 'height': boxSize, 'left': 0, 'top': 0 });
            $img.css('transform-origin', 'center center'); // Başlangıç noktası
            
            $('#debug-360').text("Gezinmek için haritayı kullanın");
        } else {
            $img.css('transform-origin', 'center center');
            api.data.behavior = "drag"; 
            $el.removeClass('zoomed-in');
            $minimap.fadeOut();
            $('#debug-360').text("");
        }
    }

    // --- 5. EVENT BINDINGS (Sadece bir kere çalışır) ---
    $(document).ready(function(){
        // Dışarı tıklayınca kapat
        $(window).on('click', function(event){ 
            if ($(event.target).is('#modal-360-overlay')) close360Modal(); 
        });

        // Kontrol Butonları
        $('#btnPrev').on('mousedown touchstart', function(e) { 
            e.preventDefault(); 
            var api = $('#mySpriteSpin').spritespin('api'); 
            if(api) { api.stopAnimation(); api.prevFrame(); updatePlayIcon(false); }
        });

        $('#btnNext').on('mousedown touchstart', function(e) { 
            e.preventDefault(); 
            var api = $('#mySpriteSpin').spritespin('api'); 
            if(api) { api.stopAnimation(); api.nextFrame(); updatePlayIcon(false); }
        });

        $('#btnPlay').on('click', function(e){ 
            e.preventDefault(); 
            var api = $('#mySpriteSpin').spritespin('api');
            if(!api) return;
            api.toggleAnimation();
            setTimeout(function(){ updatePlayIcon(api.data.animate); }, 50);
        });

        // Minimap Sürükleme Mantığı (Zoom için)
        var isDraggingMap = false;
        var $viewport = $('#viewportBox');
        var $minimap = $('#minimap');
        var $el = $('#mySpriteSpin'); // Bu global değil, dinamik bulunmalı ama burada sabit ID var

        $viewport.on('mousedown touchstart', function(e) {
            if (e.type === 'touchstart') e.preventDefault();
            isDraggingMap = true;
        });

        $(document).on('mousemove touchmove', function(e) {
            if (!isDraggingMap || currentZoomLevel <= 1) return;
            
            var clientX = e.originalEvent.touches ? e.originalEvent.touches[0].clientX : e.clientX;
            var clientY = e.originalEvent.touches ? e.originalEvent.touches[0].clientY : e.clientY;

            var mapRect = $minimap[0].getBoundingClientRect();
            var boxWidth = $viewport.outerWidth();
            var boxHeight = $viewport.outerHeight();

            var newLeft = (clientX - mapRect.left) - (boxWidth / 2);
            var newTop = (clientY - mapRect.top) - (boxHeight / 2);

            var maxLeft = mapRect.width - boxWidth;
            var maxTop = mapRect.height - boxHeight;

            newLeft = Math.max(0, Math.min(maxLeft, newLeft));
            newTop = Math.max(0, Math.min(maxTop, newTop));

            $viewport.css({ top: newTop + 'px', left: newLeft + 'px' });

            var xPct = (newLeft / maxLeft) * 100;
            var yPct = (newTop / maxTop) * 100;

            $('#mySpriteSpin img').css('transform-origin', xPct + '% ' + yPct + '%');
        });

        $(document).on('mouseup touchend', function() { isDraggingMap = false; });
    });
	
	
$(document).ready(function() {
    
function checkAndLockSearchInput() {
    var $inputs = $('#search-input-el, #input-search');
    if ($inputs.length === 0) return;

    $inputs.each(function() {
        var $this = $(this);
        var val = $this.val();
        
        // SADECE pipe (|) veya yeni satır varsa toplu arama aktif sayılır.
        // Slash (/), Alt Çizgi (_), Tire (-) artık sistemi kilitlemez.
        var isBulkActive = (val && (val.indexOf('|') > -1 || val.indexOf('\n') > -1));

        if (isBulkActive) {
            if (!$this.hasClass('bulk-locked-mode')) {
                $this.prop('readonly', true);
                $this.addClass('bulk-locked-mode');
                $this.removeClass('ready-normal');
                
                $this.css({
                    'background-color': '#f4f4f4',
                    'cursor': 'pointer',
                    'opacity': '1'
                });
                
                // .filter(Boolean) eklendi: Boş elemanları saymaz (1 kodun 2 görünmesini engeller)
                var count = val.split('|').filter(Boolean).length;
                $this.attr('title', count + ' Adet Kod Seçili - Düzenlemek için tıklayın');
            }
        } else {
            if ($this.hasClass('bulk-locked-mode')) {
                $this.prop('readonly', false);
                $this.removeClass('bulk-locked-mode');
                $this.css({ 'background-color': '', 'cursor': 'text', 'opacity': '' });
                $this.removeAttr('title');
            }
            if (!$this.hasClass('ready-normal')) { $this.addClass('ready-normal'); }
        }
    });
}
    // --- TIKLAMA OLAYI ---
    $(document).on('click', '#search-input-el, #input-search', function() {
        if ($(this).hasClass('bulk-locked-mode')) {
            openBulkModal(); 
        }
    });

    // --- TETİKLEYİCİLER ---
    checkAndLockSearchInput();

    $(document).ajaxComplete(function() {
        setTimeout(checkAndLockSearchInput, 100); 
    });

    $(document).on('mouseup keyup change input', '#search-input-el, #input-search', function() {
        checkAndLockSearchInput();
    });
});
</script>