script.js

const canvas = new fabric.Canvas('cardCanvas', {
    width: 378, 
    height: 534,
    preserveObjectStacking: true
});

let playerImg1, playerImg2, frameImg, bgImg, clubLogo;
let textName, textOvr, textPos;

// Definisi Z-Index (Stacking Order)
const Z_BG = 0;
const Z_PLAYER2 = 10;
const Z_PLAYER1 = 20;
const Z_FRAME = 30; // Frame harus menutupi sebagian foto
const Z_LOGO = 40;
const Z_TEXT = 50; // Teks selalu paling depan

function initText() {
    const shadowCfg = { color: 'rgba(0,0,0,0.7)', blur: 8, offsetX: 2, offsetY: 2 };

    textOvr = new fabric.Text('105', {
        left: 30, top: 35, fontSize: 75, fill: '#ffffff',
        fontFamily: 'eFootballFont', shadow: shadowCfg, fontWeight: 'bold'
    });

    textPos = new fabric.Text('LWF', {
        left: 35, top: 110, fontSize: 35, fill: '#ffffff',
        fontFamily: 'eFootballFont', shadow: shadowCfg
    });

    textName = new fabric.Text('playername', {
        left: 189, top: 450, fontSize: 32, fill: '#ffffff',
        fontFamily: 'eFootballFont', originX: 'center', shadow: shadowCfg
    });

    canvas.add(textOvr, textPos, textName);
    updateLayering(); // Update layering setelah teks ditambahkan
}

function loadBaseImages(bgPath) {
    // 1. Background (Z_BG)
    fabric.Image.fromURL(bgPath, function(img) {
        if (bgImg) canvas.remove(bgImg);
        bgImg = img;
        bgImg.set({ scaleX: canvas.width/img.width, scaleY: canvas.height/img.height, selectable: false, evented: false });
        canvas.add(bgImg);
        updateLayering();
    });

    // 2. Frame (Z_FRAME)
    fabric.Image.fromURL('src/frame.png', function(img) {
        if (frameImg) canvas.remove(frameImg);
        frameImg = img;
        frameImg.set({ scaleX: canvas.width/img.width, scaleY: canvas.height/img.height, selectable: false, evented: false });
        canvas.add(frameImg);
        updateLayering();
    });
}

// Handler Foto Player
document.getElementById('imageUpload').onchange = (e) => handleImageUpload(e, 1);
document.getElementById('imageUpload2').onchange = (e) => handleImageUpload(e, 2);

function handleImageUpload(e, type) {
    const reader = new FileReader();
    reader.onload = (event) => {
        fabric.Image.fromURL(event.target.result, (img) => {
            if (type === 1) {
                if (playerImg1) canvas.remove(playerImg1);
                playerImg1 = img;
                playerImg1.scaleToWidth(300);
                playerImg1.set({ left: 40, top: 80 });
                canvas.add(playerImg1);
            } else {
                if (playerImg2) canvas.remove(playerImg2);
                playerImg2 = img;
                playerImg2.scaleToWidth(450);
                // Menghilangkan transparansi (opacity default = 1)
                playerImg2.set({ left: -20, top: 20 }); 
                canvas.add(playerImg2);
            }
            updateLayering(); // Penting: Update stacking setelah gambar baru masuk
            showPopupAnim();
        });
    };
    if(e.target.files[0]) reader.readAsDataURL(e.target.files[0]);
}

// Handler Logo
document.getElementById('logoSelect').onchange = (e) => applyLogo(e.target.value);
document.getElementById('customLogoUpload').onchange = (e) => {
    const reader = new FileReader();
    reader.onload = (ev) => applyLogo(ev.target.result);
    if(e.target.files[0]) reader.readAsDataURL(e.target.files[0]);
};

function applyLogo(url) {
    if (!url) { if (clubLogo) canvas.remove(clubLogo); return; }
    fabric.Image.fromURL(url, (img) => {
        if (clubLogo) canvas.remove(clubLogo);
        clubLogo = img;
        clubLogo.scaleToWidth(60);
        clubLogo.set({ left: 280, top: 45 });
        canvas.add(clubLogo);
        updateLayering();
        showPopupAnim();
    });
}

// Logika Tombol Delete (Menghapus gambar dari kanvas)
document.getElementById('delPlayer1').onclick = () => { if(playerImg1) { canvas.remove(playerImg1); playerImg1 = null; } };
document.getElementById('delPlayer2').onclick = () => { if(playerImg2) { canvas.remove(playerImg2); playerImg2 = null; } };
document.getElementById('delLogo').onclick = () => { if(clubLogo) { canvas.remove(clubLogo); clubLogo = null; document.getElementById('logoSelect').value = ""; } };

// Fungsi Vital: Menjaga urutan layering agar tidak acak saat elemen baru ditambahkan
function updateLayering() {
    if (bgImg) bgImg.moveTo(Z_BG);
    if (playerImg2) playerImg2.moveTo(Z_PLAYER2);
    if (playerImg1) playerImg1.moveTo(Z_PLAYER1);
    if (frameImg) frameImg.moveTo(Z_FRAME);
    if (clubLogo) clubLogo.moveTo(Z_LOGO);
    if (textOvr) textOvr.moveTo(Z_TEXT);
    if (textPos) textPos.moveTo(Z_TEXT);
    if (textName) textName.moveTo(Z_TEXT);
}

// Color Picker Terpisah (Real-time)
document.getElementById('colorPickerOvr').oninput = (e) => { textOvr.set('fill', e.target.value); canvas.renderAll(); };
document.getElementById('colorPickerName').oninput = (e) => { textName.set('fill', e.target.value); canvas.renderAll(); };

// Update Teks (No forced caps)
document.getElementById('inputName').oninput = (e) => { textName.set('text', e.target.value); canvas.renderAll(); };
document.getElementById('inputOvr').oninput = (e) => { textOvr.set('text', e.target.value); canvas.renderAll(); };
document.getElementById('inputPos').oninput = (e) => { textPos.set('text', e.target.value); canvas.renderAll(); };

document.getElementById('bgSelect').onchange = (e) => loadBaseImages(e.target.value);

function showPopupAnim() {
    const el = document.querySelector('.canvas-container');
    el.classList.remove('animate__pulse'); void el.offsetWidth; // trigger reflow
    el.classList.add('animate__pulse');
}

document.getElementById('downloadBtn').onclick = () => {
    const dataURL = canvas.toDataURL({ format: 'png', multiplier: 2 });
    const link = document.createElement('a');
    link.download = 'efootball-card-final.png';
    link.href = dataURL; link.click();
};

loadBaseImages('src/epic2.png');
initText();