<!DOCTYPE html>
<html lang="tr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>BTS Akıllı Stok Yönetim Sistemi</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.17.1/xlsx.full.min.js"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
    <style>
        :root {
            --primary-color: #007BFF;
            --primary-color-dark: #0056b3;
            --background-color: #f5f7fa;
            --text-color: #333;
            --container-bg: #fff;
            --success-color: #28a745;
            --danger-color: #dc3545;
        }

        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            margin: 0;
            padding: 0;
            background-color: var(--background-color);
            color: var(--text-color);
            transition: all 0.3s ease;
        }

        body.dark {
            --background-color: #1a1a1a;
            --text-color: #f5f7fa;
            --container-bg: #2d2d2d;
        }

        .container {
            width: 90%;
            max-width: 1200px;
            margin: 20px auto;
            background-color: var(--container-bg);
            padding: 30px;
            border-radius: 15px;
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
            position: relative;
        }

        h1 {
            text-align: center;
            background: linear-gradient(45deg, var(--primary-color), #00c6ff);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            margin: 20px 0;
            font-size: 2.5em;
            animation: titleFade 1s ease-in;
        }

        .upload-container {
            display: flex;
            justify-content: space-between;
            gap: 20px;
            margin-bottom: 30px;
        }

        .file-input {
            flex: 1;
            position: relative;
            overflow: hidden;
            border-radius: 10px;
            transition: transform 0.3s ease;
        }

        .file-input label {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            padding: 20px;
            min-height: 120px;
            background: rgba(0,0,0,0.05);
            border: 2px dashed var(--primary-color);
            border-radius: 10px;
            cursor: pointer;
            transition: all 0.3s ease;
        }

        .file-input input[type="file"] {
            display: none;
        }

        .file-input label i {
            font-size: 2em;
            margin-bottom: 10px;
            color: var(--primary-color);
        }

        .file-input:hover {
            transform: translateY(-5px);
        }

        .button-group {
            display: flex;
            justify-content: center;
            gap: 15px;
            margin-bottom: 30px;
        }

        .modern-btn {
            padding: 12px 24px;
            background: linear-gradient(45deg, var(--primary-color), var(--primary-color-dark));
            color: white !important;
            border: none;
            border-radius: 8px;
            cursor: pointer;
            font-size: 16px;
            display: flex;
            align-items: center;
            gap: 8px;
            transition: all 0.3s ease;
        }

        .modern-btn:hover {
            transform: translateY(-2px);
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
        }

        #loading {
            display: none;
            text-align: center;
            padding: 20px;
        }

        .loader {
            border: 4px solid #f3f3f3;
            border-top: 4px solid var(--primary-color);
            border-radius: 50%;
            width: 30px;
            height: 30px;
            animation: spin 1s linear infinite;
            margin: 0 auto;
        }

        table {
            width: 100%;
            border-collapse: collapse;
            margin: 25px 0;
            background: var(--container-bg);
            box-shadow: 0 1px 10px rgba(0,0,0,0.05);
            border-radius: 10px;
            overflow: hidden;
        }

        th, td {
            padding: 15px;
            text-align: left;
            border-bottom: 1px solid rgba(0,0,0,0.05);
        }

        th {
            background: linear-gradient(45deg, var(--primary-color), var(--primary-color-dark));
            color: white;
            position: sticky;
            top: 0;
        }

        .admin-panel {
            display: none;
            position: fixed;
            top: 20px;
            left: 20px;
            background: var(--container-bg);
            padding: 25px;
            border-radius: 15px;
            box-shadow: 0 0 20px rgba(0,0,0,0.2);
            z-index: 1000;
            max-width: 400px;
        }

        .color-palette {
            display: flex;
            gap: 10px;
            margin: 15px 0;
        }

        .color-palette div {
            width: 30px;
            height: 30px;
            border-radius: 50%;
            cursor: pointer;
            border: 2px solid #ddd;
        }

        .rgb-input {
            display: flex;
            gap: 10px;
            margin: 15px 0;
        }

        .admin-button {
            position: fixed;
            top: 20px;
            left: 20px;
            width: 50px;
            height: 50px;
            border-radius: 50%;
            background: var(--primary-color);
            color: white;
            border: none;
            cursor: pointer;
            box-shadow: 0 4px 8px rgba(0,0,0,0.1);
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .footer {
            text-align: center;
            margin-top: 20px;
            color: var(--text-color);
        }
        
        .footer a {
            color: inherit !important;
            text-decoration: none;
        }

        .help-button {
            position: fixed;
            top: 20px;
            right: 20px;
            width: 40px;
            height: 40px;
            border-radius: 50%;
            background: var(--primary-color);
            color: white;
            border: none;
            cursor: pointer;
            box-shadow: 0 2px 5px rgba(0,0,0,0.2);
            font-size: 20px;
            display: flex;
            align-items: center;
            justify-content: center;
            z-index: 1000;
        }

        .help-panel {
            display: none;
            position: fixed;
            top: 70px;
            right: 20px;
            background: var(--container-bg);
            padding: 20px;
            border-radius: 10px;
            box-shadow: 0 4px 15px rgba(0,0,0,0.2);
            max-width: 300px;
            z-index: 999;
            color: var(--text-color);
            border: 1px solid rgba(0,0,0,0.1);
        }

        .collapsible {
            background-color: var(--container-bg);
            color: var(--text-color);
            cursor: pointer;
            padding: 15px;
            width: 100%;
            border: none;
            text-align: left;
            outline: none;
            font-size: 16px;
            margin: 5px 0;
            border-radius: 8px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            transition: all 0.3s ease;
        }

        .collapsible:hover {
            background-color: rgba(0,0,0,0.05);
        }

        .collapsible::after {
            content: '\002B';
            font-weight: bold;
            float: right;
        }

        .active::after {
            content: "\2212";
        }

        .content {
            padding: 0 15px;
            max-height: 0;
            overflow: hidden;
            transition: max-height 0.2s ease-out;
            background-color: rgba(0,0,0,0.03);
            border-radius: 0 0 8px 8px;
        }

        /* Mevcut CSS'e ekle */
   .comment-panel {
    display: none; /* Yeni eklenen satır */
    margin-top: 30px;
    background: var(--container-bg);
    border-radius: 10px;
    box-shadow: 0 1px 10px rgba(0,0,0,0.05);
    overflow: hidden;
}

    .comment-header {
        padding: 15px;
        cursor: pointer;
        display: flex;
        justify-content: space-between;
        align-items: center;
        background: rgba(0,0,0,0.05);
        transition: all 0.3s ease;
    }

    .comment-header:hover {
        background: rgba(0,0,0,0.08);
    }

    .comment-content {
        padding: 0 15px;
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.3s ease-out;
    }

    .comment-panel.active .comment-content {
        max-height: 1000px; /* İçeriğe göre ayarlanabilir */
    }

    .toggle-icon {
        transition: transform 0.3s ease;
    }

    .comment-panel.active .toggle-icon {
        transform: rotate(180deg);
    }

        @keyframes spin {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }

        @keyframes titleFade {
            from { opacity: 0; transform: translateY(-20px); }
            to { opacity: 1; transform: translateY(0); }
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>📦 BTS Akıllı Stok Yönetimi</h1>

        <div class="admin-panel" id="adminPanel">
            <button class="close-button" onclick="toggleAdminPanel()">×</button>
            <h2>Admin Paneli</h2>
            <label for="codeColumn">Malzeme Kodu Sütunu:</label>
            <input type="number" id="codeColumn" value="2" min="0">
            <label for="nameColumn">Malzeme Adı Sütunu:</label>
            <input type="number" id="nameColumn" value="3" min="0">
            <label for="quantityColumn">Miktar Sütunu:</label>
            <input type="number" id="quantityColumn" value="5" min="0">
            <label for="theme">Tema Seçin:</label>
            <select id="theme">
                <option value="light">Açık Tema</option>
                <option value="dark">Koyu Tema</option>
            </select>
            <label>Renk Paleti:</label>
            <div class="color-palette">
                <div style="background-color: #007BFF;" onclick="changeColor('#007BFF')"></div>
                <div style="background-color: #28a745;" onclick="changeColor('#28a745')"></div>
                <div style="background-color: #dc3545;" onclick="changeColor('#dc3545')"></div>
                <div style="background-color: #ffc107;" onclick="changeColor('#ffc107')"></div>
                <div style="background-color: #17a2b8;" onclick="changeColor('#17a2b8')"></div>
            </div>
            <label>RGB Renk Seçimi:</label>
            <div class="rgb-input">
                <input type="number" id="red" min="0" max="255" placeholder="R">
                <input type="number" id="green" min="0" max="255" placeholder="G">
                <input type="number" id="blue" min="0" max="255" placeholder="B">
                <button class="modern-btn" onclick="applyRGBColor()">Uygula</button>
            </div>
            <button class="modern-btn" onclick="applySettings()">Ayarları Uygula</button>
        </div>

        <div class="upload-container">
            <div class="file-input">
                <input type="file" id="old_stock" accept=".xlsx, .xls" onchange="displayFileName('old_stock', 'old_file_name')">
                <label for="old_stock">
                    <i class="fas fa-archive"></i>
                    <span>Eski Stok Dosyası</span>
                    <div id="old_file_name" class="file-name"></div>
                </label>
            </div>
            <div class="file-input">
                <input type="file" id="new_stock" accept=".xlsx, .xls" onchange="displayFileName('new_stock', 'new_file_name')">
                <label for="new_stock">
                    <i class="fas fa-box-open"></i>
                    <span>Yeni Stok Dosyası</span>
                    <div id="new_file_name" class="file-name"></div>
                </label>
            </div>
        </div>

        <div class="button-group">
            <button class="modern-btn" onclick="processFiles()">
                <i class="fas fa-sync-alt"></i> Karşılaştır
            </button>
            <button class="modern-btn" onclick="generateComments()">
                <i class="fas fa-comments"></i> Yorum Oluştur
            </button>
            <button class="modern-btn" onclick="exportToExcel()">
                <i class="fas fa-file-excel"></i> Dışa Aktar
            </button>
        </div>

        <div id="loading">
            <div class="loader"></div>
            <p>Analiz ediliyor...</p>
        </div>

        <div id="result"></div>

        <div class="comment-panel" id="commentPanel" style="display: none;">
    <div class="comment-header" onclick="toggleCommentPanel()">
        <h2>📝 Sistem Yorumları</h2>
        <span class="toggle-icon">▼</span>
    </div>
    <div class="comment-content" id="comments"></div>
</div>
        
        <div class="footer">
            <p>Made by <a href="#">Ulas</a> with ♥</p>
        </div>
    </div>

    <button class="admin-button" onclick="toggleAdminPanel()">
        <i class="fas fa-cog"></i>
    </button>

    <button class="help-button" onclick="toggleHelp()">?</button>

    <div class="help-panel" id="helpPanel">
        <h3>📚 Sistem Kullanım Kılavuzu</h3>
        <div class="help-content">
            <p>1. 📂 <b>Eski Stok</b> ve <b>Yeni Stok</b> Excel dosyalarını yükleyin</p>
            <p>2. 🔄 <b>Karşılaştır</b> butonu ile analiz başlatın</p>
            <p>3. 📊 Sonuçları tablolarda inceleyin</p>
            <p>4. 💬 <b>Yorum Oluştur</b> ile otomatik açıklamalar alın</p>
            <p>5. 📥 <b>Dışa Aktar</b> ile Excel raporu indirin</p>
            <p>6. ⚙️ Admin panelinden ayarları özelleştirin</p>
        </div>
    </div>

    <script>
        let config = {
            codeColumn: 2,
            nameColumn: 3,
            quantityColumn: 5,
            theme: 'light',
            primaryColor: '#007BFF',
            isAdminPanelOpen: false,
            isPasswordEntered: false,
            results: null
        };

        function toggleAdminPanel() {
            if (!config.isPasswordEntered) {
                const password = prompt("Yönetici şifresini girin:");
                if (password !== "ulas123") {
                    alert("Hatalı şifre!");
                    return;
                }
                config.isPasswordEntered = true;
            }
            
            const panel = document.getElementById('adminPanel');
            config.isAdminPanelOpen = !config.isAdminPanelOpen;
            panel.style.display = config.isAdminPanelOpen ? 'block' : 'none';
            document.body.classList.toggle('admin-panel-open', config.isAdminPanelOpen);
        }

        function applySettings() {
            config.codeColumn = parseInt(document.getElementById('codeColumn').value);
            config.nameColumn = parseInt(document.getElementById('nameColumn').value);
            config.quantityColumn = parseInt(document.getElementById('quantityColumn').value);
            config.theme = document.getElementById('theme').value;
            applyTheme();
            applyColor();
            alert('Ayarlar başarıyla uygulandı!');
        }
		   function toggleCommentPanel() {
        const panel = document.getElementById('commentPanel');
        panel.classList.toggle('active');
    }

        function applyTheme() {
            document.body.classList.toggle('dark', config.theme === 'dark');
        }

        function changeColor(color) {
            config.primaryColor = color;
            applyColor();
        }

        function applyRGBColor() {
            const red = document.getElementById('red').value;
            const green = document.getElementById('green').value;
            const blue = document.getElementById('blue').value;
            if (red && green && blue) {
                config.primaryColor = `rgb(${red}, ${green}, ${blue})`;
                applyColor();
            }
        }

        function applyColor() {
            document.documentElement.style.setProperty('--primary-color', config.primaryColor);
            document.documentElement.style.setProperty('--primary-color-dark', shadeColor(config.primaryColor, -20));
            document.querySelectorAll('.modern-btn, .footer a').forEach(element => {
                element.style.color = config.primaryColor;
            });
        }

        function shadeColor(color, percent) {
            let R = parseInt(color.substring(1, 3), 16);
            let G = parseInt(color.substring(3, 5), 16);
            let B = parseInt(color.substring(5, 7), 16);

            R = parseInt(R * (100 + percent) / 100);
            G = parseInt(G * (100 + percent) / 100);
            B = parseInt(B * (100 + percent) / 100);

            R = Math.min(255, Math.max(0, R));
            G = Math.min(255, Math.max(0, G));
            B = Math.min(255, Math.max(0, B));

            const RR = R.toString(16).padStart(2, '0');
            const GG = G.toString(16).padStart(2, '0');
            const BB = B.toString(16).padStart(2, '0');

            return `#${RR}${GG}${BB}`;
        }

        async function processFiles() {
            try {
                document.getElementById('loading').style.display = 'block';
                const [oldData, newData] = await Promise.all([
                    readExcel(document.getElementById('old_stock').files[0]),
                    readExcel(document.getElementById('new_stock').files[0])
                ]);
                
                config.results = compareStocks(oldData, newData);
                displayResults(config.results);
            } catch (error) {
                alert("Hata: " + error.message);
            } finally {
                document.getElementById('loading').style.display = 'none';
            }
        }

        function readExcel(file) {
            return new Promise((resolve, reject) => {
                const reader = new FileReader();
                reader.onload = e => {
                    const data = new Uint8Array(e.target.result);
                    const workbook = XLSX.read(data, {type: 'array'});
                    resolve(XLSX.utils.sheet_to_json(workbook.Sheets[workbook.SheetNames[0]], {header: 1}));
                };
                reader.onerror = reject;
                reader.readAsArrayBuffer(file);
            });
        }

        function compareStocks(oldData, newData) {
            const oldStock = createStockMap(oldData);
            const newStock = createStockMap(newData);
            
            const results = {
                fazlaliklar: [],
                eksiklikler: [],
                sadeceBirListede: []
            };

            for (const [code, item] of Object.entries(oldStock)) {
                if (!newStock[code]) {
                    results.sadeceBirListede.push({...item, list: 'Eski listede mevcut'});
                } else {
                    const diff = newStock[code].quantity - item.quantity;
                    if (diff > 0) results.fazlaliklar.push({...item, diff});
                    if (diff < 0) results.eksiklikler.push({...item, diff: Math.abs(diff)});
                }
            }

            for (const [code, item] of Object.entries(newStock)) {
                if (!oldStock[code]) {
                    results.sadeceBirListede.push({...item, list: 'Yeni listede mevcut'});
                }
            }

            return results;
        }

        function createStockMap(data) {
            return data.reduce((acc, row) => {
                const code = row[config.codeColumn];
                if (code) {
                    acc[code] = {
                        code,
                        name: row[config.nameColumn],
                        quantity: row[config.quantityColumn] || 0
                    };
                }
                return acc;
            }, {});
        }

        function displayResults({fazlaliklar, eksiklikler, sadeceBirListede}) {
            let html = '';
            
            if (fazlaliklar.length) {
                html += `
                    <button class="collapsible">📈 Fazlalıklar (${fazlaliklar.length})</button>
                    <div class="content">
                        ${createTable(['Malzeme Kodu', 'Malzeme Adı', 'Fark'], fazlaliklar)}
                    </div>`;
            }
            
            if (eksiklikler.length) {
                html += `
                    <button class="collapsible">📉 Eksiklikler (${eksiklikler.length})</button>
                    <div class="content">
                        ${createTable(['Malzeme Kodu', 'Malzeme Adı', 'Eksik Miktar'], eksiklikler)}
                    </div>`;
            }
            
            if (sadeceBirListede.length) {
                html += `
                    <button class="collapsible">⚠️ Tek Taraflı Kayıtlar (${sadeceBirListede.length})</button>
                    <div class="content">
                        ${createTable(['Malzeme Kodu', 'Malzeme Adı', 'Konum'], sadeceBirListede)}
                    </div>`;
            }

            document.getElementById('result').innerHTML = html || '<p>✅ Her iki liste tamamen uyumlu!</p>';
            initCollapsibles();
        }

        function createTable(headers, data) {
            return `
                <table>
                    <tr>${headers.map(h => `<th>${h}</th>`).join('')}</tr>
                    ${data.map(row => `
                        <tr>
                            <td>${row.code}</td>
                            <td>${row.name}</td>
                            <td>${row.diff || row.list}</td>
                        </tr>
                    `).join('')}
                </table>`;
        }

        function initCollapsibles() {
            document.querySelectorAll('.collapsible').forEach(button => {
                button.addEventListener('click', function() {
                    this.classList.toggle('active');
                    const content = this.nextElementSibling;
                    content.style.maxHeight = content.style.maxHeight ? null : content.scrollHeight + 'px';
                });
            });
        }

        function generateComments() {
              if (!config.results) return;
    
    const comments = [];
    const {fazlaliklar, eksiklikler, sadeceBirListede} = config.results;
            
            fazlaliklar.forEach(item => {
                comments.push(`<p>📦 <b>${item.code} - ${item.name}</b> ürününde ${item.diff} adet fazlalık tespit edildi.</p>`);
            });
            
            eksiklikler.forEach(item => {
                comments.push(`<p>❌ <b>${item.code} - ${item.name}</b> ürününde ${item.diff} adet eksik tespit edildi.</p>`);
            });
            
            sadeceBirListede.forEach(item => {
                comments.push(`<p>⚠️ <b>${item.code} - ${item.name}</b> ürünü sadece ${item.list}.</p>`);
            });

             document.getElementById('comments').innerHTML = comments.join('') || '<p>✅ Herhangi bir sorun bulunamadı!</p>';
            document.getElementById('commentPanel').classList.add('active');
			const commentPanel = document.getElementById('commentPanel');
			commentPanel.style.display = 'block';
			commentPanel.classList.add('active');
        }

        function exportToExcel() {
            if (!config.results) return alert('Önce veri yükleyin!');
            
            const wb = XLSX.utils.book_new();
            const sheets = {
                'Fazlaliklar': config.results.fazlaliklar,
                'Eksiklikler': config.results.eksiklikler,
                'Tek_Taraflilar': config.results.sadeceBirListede
            };

            Object.entries(sheets).forEach(([name, data]) => {
                if (data.length) {
                    const ws = XLSX.utils.json_to_sheet(data.map(item => ({
                        'Malzeme Kodu': item.code,
                        'Malzeme Adı': item.name,
                        'Miktar': item.diff || item.list
                    })));
                    XLSX.utils.book_append_sheet(wb, ws, name);
                }
            });

            XLSX.writeFile(wb, 'Stok_Analiz_Sonucu.xlsx');
        }

        function displayFileName(inputId, displayId) {
            const file = document.getElementById(inputId).files[0];
            document.getElementById(displayId).textContent = file ? `Seçilen dosya: ${file.name}` : '';
        }

        function toggleHelp() {
            const panel = document.getElementById('helpPanel');
            panel.style.display = panel.style.display === 'block' ? 'none' : 'block';
        }

        document.addEventListener('click', function(event) {
            const helpPanel = document.getElementById('helpPanel');
            const helpButton = document.querySelector('.help-button');
            
            if (!helpPanel.contains(event.target) && 
                !helpButton.contains(event.target) && 
                helpPanel.style.display === 'block') {
                helpPanel.style.display = 'none';
            }
        });
    </script>
</body>
</html>