script.js

let currentOperator = null;

// Fungsi utilitas untuk mencari FPB (Faktor Persekutuan Terbesar)
const gcd = (a, b) => b === 0 ? a : gcd(b, a % b);

// Fungsi untuk beralih antara mode Operasi dan Konversi
function switchMode(mode) {
    const btnOperasi = document.getElementById('btnOperasi');
    const btnKonversi = document.getElementById('btnKonversi');
    const modeOperasi = document.getElementById('modeOperasi');
    const modeKonversi = document.getElementById('modeKonversi');

    // Mengatur tampilan mode dan tombol aktif
    const isOperasi = mode === 'operasi';
    modeOperasi.classList.toggle('hidden', !isOperasi);
    modeKonversi.classList.toggle('hidden', isOperasi);
    btnOperasi.classList.toggle('active', isOperasi);
    btnKonversi.classList.toggle('active', !isOperasi);
    
    clearResult(); // Membersihkan hasil setiap kali mode diganti
}

// Memperbarui UI berdasarkan jenis operasi pecahan yang dipilih
function updateUI() {
    const type = document.getElementById('operationType').value;
    const whole1 = document.getElementById('whole1Container');
    const whole2 = document.getElementById('whole2Container');
    
    whole1.classList.add('hidden');
    whole2.classList.add('hidden');

    if (type === 'campuran-biasa') {
        whole1.classList.remove('hidden');
    } else if (type === 'campuran-campuran') {
        whole1.classList.remove('hidden');
        whole2.classList.remove('hidden');
    }
}

// Memperbarui UI untuk mode konversi
function updateConversionUI() {
    const type = document.getElementById('conversionType').value;
    const convWhole = document.getElementById('convWholeContainer');
    convWhole.classList.toggle('hidden', type !== 'campuran');
}

// Mengatur operator matematika yang akan digunakan
function setOperator(op) {
    currentOperator = op;
    document.getElementById('operatorDisplay').innerText = op === '*' ? '×' : op === '/' ? '÷' : op;
}

// Membersihkan area hasil dan proses
function clearResult() {
    document.getElementById('resultText').innerText = '';
    document.getElementById('errorText').innerText = '';
    document.getElementById('processText').innerHTML = '';
}

// Mengambil dan memvalidasi nilai dari input pecahan
function getFractionValues(wholeId, numId, denId) {
    const wholeEl = document.getElementById(wholeId);
    const isVisible = wholeEl && !wholeEl.classList.contains('hidden');
    const whole = isVisible ? (parseInt(wholeEl.querySelector('input').value) || 0) : 0;
    const num = parseInt(document.getElementById(numId).value);
    const den = parseInt(document.getElementById(denId).value);
    
    if (isNaN(num) || isNaN(den)) {
        throw new Error("Pembilang dan penyebut harus diisi.");
    }
    if (den === 0) {
        throw new Error("Penyebut tidak boleh nol.");
    }
    
    // Mengubah ke pecahan biasa (improper fraction) dan menangani angka negatif
    const improperNum = (Math.abs(whole) * den + Math.abs(num)) * (whole < 0 || num < 0 ? -1 : 1);
    
    return { num: improperNum, den, original: { whole, num, den, isMixed: isVisible && whole !== 0 } };
}

// Fungsi utama untuk melakukan kalkulasi
function calculate() {
    clearResult();
    let processSteps = [];
    try {
        if (!currentOperator) {
            throw new Error("Pilih operator terlebih dahulu (+, -, ×, ÷).");
        }

        const f1 = getFractionValues('whole1Container', 'num1', 'den1');
        const f2 = getFractionValues('whole2Container', 'num2', 'den2');

        // Langkah 1: Ubah ke pecahan biasa
        processSteps.push('<p class="font-semibold text-gray-400">1. Mengubah ke Pecahan Biasa:</p>');
        if (f1.original.isMixed) {
            processSteps.push(`<p class="ml-4">Pecahan 1: ${f1.original.whole} ${Math.abs(f1.original.num)}/${f1.original.den} = <span class="text-red-500">${f1.num}/${f1.den}</span></p>`);
        } else {
            processSteps.push(`<p class="ml-4">Pecahan 1 sudah biasa: <span class="text-red-500">${f1.num}/${f1.den}</span></p>`);
        }
        if (f2.original.isMixed) {
            processSteps.push(`<p class="ml-4">Pecahan 2: ${f2.original.whole} ${Math.abs(f2.original.num)}/${f2.original.den} = <span class="text-red-500">${f2.num}/${f2.den}</span></p>`);
        } else {
             processSteps.push(`<p class="ml-4">Pecahan 2 sudah biasa: <span class="text-red-500">${f2.num}/${f2.den}</span></p>`);
        }

        // Langkah 2: Lakukan operasi
        processSteps.push(`<p class="font-semibold text-gray-400 mt-3">2. Melakukan Operasi:</p>`);
        let resultNum, resultDen;
        const opSymbol = currentOperator === '*' ? '×' : currentOperator === '/' ? '÷' : currentOperator;
        
        switch (currentOperator) {
            case '+':
            case '-':
                resultDen = f1.den * f2.den;
                const newNum1 = f1.num * f2.den;
                const newNum2 = f2.num * f1.den;
                processSteps.push(`<p class="ml-4">${f1.num}/${f1.den} ${opSymbol} ${f2.num}/${f2.den}</p>`);
                processSteps.push(`<p class="ml-4 text-xs text-gray-500">Samakan penyebut:</p>`);
                processSteps.push(`<p class="ml-4">= (${newNum1}/${resultDen}) ${opSymbol} (${newNum2}/${resultDen})</p>`);
                resultNum = (currentOperator === '+') ? (newNum1 + newNum2) : (newNum1 - newNum2);
                processSteps.push(`<p class="ml-4">= (${newNum1} ${opSymbol} ${newNum2}) / ${resultDen} = <span class="text-red-500">${resultNum}/${resultDen}</span></p>`);
                break;
            case '*':
                resultNum = f1.num * f2.num;
                resultDen = f1.den * f2.den;
                processSteps.push(`<p class="ml-4">${f1.num}/${f1.den} ${opSymbol} ${f2.num}/${f2.den} = <span class="text-red-500">${resultNum}/${resultDen}</span></p>`);
                break;
            case '/':
                if (f2.num === 0) throw new Error("Tidak bisa membagi dengan nol.");
                resultNum = f1.num * f2.den;
                resultDen = f1.den * f2.num;
                processSteps.push(`<p class="ml-4">${f1.num}/${f1.den} ${opSymbol} ${f2.num}/${f2.den}</p>`);
                processSteps.push(`<p class="ml-4 text-xs text-gray-500">Balik pecahan kedua dan kalikan:</p>`);
                processSteps.push(`<p class="ml-4">= ${f1.num}/${f1.den} × ${f2.den}/${f2.num} = <span class="text-red-500">${resultNum}/${resultDen}</span></p>`);
                break;
        }
        
        // Pindahkan tanda negatif ke pembilang jika ada di penyebut
        if (resultDen < 0) {
            resultNum = -resultNum;
            resultDen = -resultDen;
        }

        // Langkah 3: Sederhanakan hasil
        processSteps.push(`<p class="font-semibold text-gray-400 mt-3">3. Menyederhanakan Hasil:</p>`);
        const commonDivisor = gcd(Math.abs(resultNum), Math.abs(resultDen));
        const simpleNum = resultNum / commonDivisor;
        const simpleDen = resultDen / commonDivisor;

        if (commonDivisor > 1) {
            processSteps.push(`<p class="ml-4">${resultNum}/${resultDen} ÷ ${commonDivisor}/${commonDivisor} = <span class="text-red-500">${simpleNum}/${simpleDen}</span></p>`);
        } else {
             processSteps.push(`<p class="ml-4">Pecahan <span class="text-red-500">${resultNum}/${resultDen}</span> sudah sederhana.</p>`);
        }

        // Langkah 4: Ubah ke pecahan campuran jika perlu dan siapkan teks hasil akhir
        let finalResultText = '';
        if (simpleDen === 1) {
            finalResultText = simpleNum;
        } else if (Math.abs(simpleNum) >= simpleDen) {
            const wholePartResult = Math.trunc(simpleNum / simpleDen);
            const numPartResult = Math.abs(simpleNum % simpleDen);
            if (numPartResult === 0) {
                finalResultText = wholePartResult;
            } else {
                finalResultText = `${wholePartResult} ${numPartResult}/${simpleDen}`;
                processSteps.push(`<p class="font-semibold text-gray-400 mt-3">4. Mengubah ke Pecahan Campuran:</p>`);
                processSteps.push(`<p class="ml-4">${simpleNum}/${simpleDen} = <span class="text-red-500">${finalResultText}</span></p>`);
            }
        } else {
            finalResultText = `${simpleNum}/${simpleDen}`;
        }
        
        // Tampilkan hasil akhir
        document.getElementById('resultText').innerText = finalResultText;

    } catch (error) {
        document.getElementById('errorText').innerText = error.message;
    } finally {
        document.getElementById('processText').innerHTML = processSteps.join('');
    }
}

// Fungsi untuk mengubah pecahan ke desimal
function convertToDecimal() {
    clearResult();
    let processSteps = [];
    try {
        const fraction = getFractionValues('convWholeContainer', 'convNum', 'convDen');
        
        processSteps.push('<p class="font-semibold text-gray-400">1. Mengubah ke Pecahan Biasa:</p>');
        if (fraction.original.isMixed) {
            processSteps.push(`<p class="ml-4">${fraction.original.whole} ${Math.abs(fraction.original.num)}/${fraction.original.den} = <span class="text-red-500">${fraction.num}/${fraction.den}</span></p>`);
        } else {
            processSteps.push(`<p class="ml-4">Pecahan sudah biasa: <span class="text-red-500">${fraction.num}/${fraction.den}</span></p>`);
        }

        processSteps.push('<p class="font-semibold text-gray-400 mt-3">2. Membagi Pembilang dengan Penyebut:</p>');
        const decimalResult = fraction.num / fraction.den;
        processSteps.push(`<p class="ml-4">${fraction.num} ÷ ${fraction.den} = <span class="text-red-500">${decimalResult.toLocaleString('id-ID', { maximumFractionDigits: 10 })}</span></p>`);

        document.getElementById('resultText').innerText = decimalResult.toLocaleString('id-ID', { maximumFractionDigits: 10 });
    } catch (error) {
        document.getElementById('errorText').innerText = error.message;
    } finally {
        document.getElementById('processText').innerHTML = processSteps.join('');
    }
}

// Inisialisasi setelah halaman dimuat
document.addEventListener('DOMContentLoaded', () => {
    // Pengaturan event listener yang lebih modern dan aman, menggantikan onclick di HTML
    document.getElementById('btnOperasi').addEventListener('click', () => switchMode('operasi'));
    document.getElementById('btnKonversi').addEventListener('click', () => switchMode('konversi'));
    
    // Inisialisasi tampilan awal
    switchMode('operasi');
    updateUI();
    updateConversionUI();
});