<!DOCTYPE html>
<html lang="tr" class="dark">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Stok & WebSheet Pro - SQL Uyumlu Profesyonel Panel v48.0</title>
    <!-- Tailwind CSS -->
    <script src="https://cdn.tailwindcss.com"></script>
    <script>
        tailwind.config = {
            darkMode: 'class',
            theme: {
                extend: {
                    colors: {
                        dark: {
                            50: '#f8fafc',
                            100: '#f1f5f9',
                            800: '#1e293b',
                            900: '#0f172a',
                            950: '#020617',
                            border: '#334155',
                            accent: '#3b82f6',
                            hover: '#2563eb'
                        }
                    }
                }
            }
        }
    </script>
    <!-- FontAwesome & Google Fonts -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
    
    <!-- ExcelJS & FileSaver -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/exceljs/4.3.0/exceljs.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/FileSaver.js/2.0.5/FileSaver.min.js"></script>

    <style>
        body { font-family: 'Inter', sans-serif; user-select: none; }
        ::-webkit-scrollbar { width: 8px; height: 8px; }
        ::-webkit-scrollbar-track { background: #0f172a; }
        ::-webkit-scrollbar-thumb { background: #334155; border-radius: 4px; }
        ::-webkit-scrollbar-thumb:hover { background: #475569; }
    </style>
</head>
<body class="bg-dark-950 text-slate-100 h-screen flex flex-col overflow-hidden" onload="initApp()">

    <!-- ÜST MENÜ BAR -->
    <header class="bg-dark-900 border-b border-dark-border flex items-center justify-between px-6 py-3 select-none z-20 shadow-md shrink-0">
        <div class="flex items-center space-x-3">
            <div class="bg-emerald-600 text-white p-2.5 rounded-xl flex items-center justify-center shadow-lg">
                <i class="fa-solid fa-boxes-stacked text-xl"></i>
            </div>
            <div>
                <h1 class="font-bold text-sm tracking-wide text-slate-100 flex items-center gap-2">
                    <span>Stok & WebSheet Pro</span>
                    <span class="text-xs bg-emerald-500/20 text-emerald-400 px-2 py-0.5 rounded-full border border-emerald-500/30">v48.0 SQL Uyumlu</span>
                </h1>
                <p class="text-xs text-slate-400">Ürün Kayıt, Gelen/Giden Takip Tabloları ve Excel Aktarım Paneli</p>
            </div>
        </div>

        <div class="flex items-center space-x-3">
            <button type="button" onclick="exportMultiSheetExcel()" class="px-4 py-2 text-xs font-semibold bg-emerald-600 hover:bg-emerald-500 text-white rounded-lg border border-emerald-500 flex items-center gap-2 transition shadow-lg shadow-emerald-900/30 cursor-pointer">
                <i class="fa-solid fa-file-excel text-white text-sm"></i> EXCEL AKTAR (ÇERÇEVELİ & FİLTRELİ)
            </button>
            <span id="autoSaveStatus" class="text-xs text-emerald-400 flex items-center gap-1.5 bg-emerald-950/40 px-3 py-1.5 rounded-full border border-emerald-900/50">
                <i class="fa-solid fa-circle text-[8px] animate-pulse"></i> Bağlantı Hazır
            </span>
        </div>
    </header>

    <!-- ANA İÇERİK ALANI -->
    <div class="flex-1 flex flex-col xl:flex-row overflow-hidden p-6 gap-6">
        
        <!-- SOL PANEL: ÜRÜN KAYIT FORMU -->
        <div class="w-full xl:w-96 bg-dark-900 border border-dark-border rounded-2xl p-6 shadow-2xl flex flex-col shrink-0 overflow-y-auto">
            <div class="text-center mb-5">
                <div class="bg-blue-600 text-white w-12 h-12 rounded-xl flex items-center justify-center shadow-lg mx-auto mb-2">
                    <i class="fa-solid fa-cart-plus text-xl"></i>
                </div>
                <h2 class="font-bold text-base text-slate-100">Ürün Kayıt Paneli</h2>
                <p class="text-xs text-slate-400 mt-1">İşlem türünü seçip kaydı veritabanına işleyin.</p>
            </div>
            
            <div class="space-y-3 text-xs flex-1">
                <div>
                    <label class="block text-slate-400 mb-1 font-medium">İşlem Türü</label>
                    <select id="entryType" onchange="toggleFormFields()" class="w-full bg-dark-800 border border-dark-border rounded-lg px-3 py-2 text-slate-100 focus:outline-none focus:border-blue-500 text-xs">
                        <option value="GELEN NUMUNELER">Gelen Ürün (GELEN NUMUNELER)</option>
                        <option value="GİDEN NUMUNELER">Giden Ürün (GİDEN NUMUNELER)</option>
                    </select>
                </div>
                
                <div class="grid grid-cols-2 gap-2">
                    <div>
                        <label class="block text-slate-400 mb-1 font-medium">AWBNO</label>
                        <input type="text" id="f_awbno" placeholder="Örn: AWB123" class="w-full bg-dark-800 border border-dark-border rounded-lg px-2.5 py-2 text-slate-100 focus:outline-none focus:border-blue-500 text-xs">
                    </div>
                    <div>
                        <label class="block text-slate-400 mb-1 font-medium">Sipariş</label>
                        <input type="text" id="f_siparis" placeholder="Örn: SIP-98" class="w-full bg-dark-800 border border-dark-border rounded-lg px-2.5 py-2 text-slate-100 focus:outline-none focus:border-blue-500 text-xs">
                    </div>
                </div>

                <!-- Giden Ürün İçin Açıklama Alanı -->
                <div id="wrapperAciklama" class="hidden">
                    <label class="block text-slate-400 mb-1 font-medium">Açıklama</label>
                    <input type="text" id="f_aciklama" placeholder="Sevkiyat açıklaması" class="w-full bg-dark-800 border border-dark-border rounded-lg px-2.5 py-2 text-slate-100 focus:outline-none focus:border-blue-500 text-xs">
                </div>

                <div>
                    <label class="block text-slate-400 mb-1 font-medium">Ürün Cinsi</label>
                    <input type="text" id="f_uruncinsi" placeholder="Örn: Pantolon / Gömlek" class="w-full bg-dark-800 border border-dark-border rounded-lg px-2.5 py-2 text-slate-100 focus:outline-none focus:border-blue-500 text-xs">
                </div>

                <div class="grid grid-cols-2 gap-2">
                    <div>
                        <label class="block text-slate-400 mb-1 font-medium">Numune Adeti</label>
                        <input type="number" id="f_numune" placeholder="Örn: 5" class="w-full bg-dark-800 border border-dark-border rounded-lg px-2.5 py-2 text-slate-100 focus:outline-none focus:border-blue-500 text-xs">
                    </div>
                    <div>
                        <label class="block text-slate-400 mb-1 font-medium">Orijinal Adeti</label>
                        <input type="number" id="f_orijinal" placeholder="Örn: 2" class="w-full bg-dark-800 border border-dark-border rounded-lg px-2.5 py-2 text-slate-100 focus:outline-none focus:border-blue-500 text-xs">
                    </div>
                </div>

                <div>
                    <label class="block text-slate-400 mb-1 font-medium">Müşteri</label>
                    <select id="f_musteri" class="w-full bg-dark-800 border border-dark-border rounded-lg px-3 py-2 text-slate-100 focus:outline-none focus:border-blue-500 text-xs">
                        <option value="COLIN'S">COLIN'S</option>
                        <option value="LOFT">LOFT</option>
                        <option value="H&M">H&M</option>
                        <option value="ZARA">ZARA</option>
                        <option value="BERSHIKA">BERSHIKA</option>
                    </select>
                </div>

                <!-- Gelen Ürün İçin Teslim Alan -->
                <div id="wrapperTeslimAlan">
                    <label class="block text-slate-400 mb-1 font-medium">Teslim Alan</label>
                    <input type="text" id="f_teslimalan" placeholder="Teslim alan kişi" class="w-full bg-dark-800 border border-dark-border rounded-lg px-2.5 py-2 text-slate-100 focus:outline-none focus:border-blue-500 text-xs">
                </div>

                <!-- Giden Ürün İçin Cinsiyet -->
                <div id="wrapperCinsiyet" class="hidden">
                    <label class="block text-slate-400 mb-1 font-medium">Cinsiyet</label>
                    <select id="f_cinsiyet" class="w-full bg-dark-800 border border-dark-border rounded-lg px-2.5 py-2 text-slate-100 focus:outline-none focus:border-blue-500 text-xs">
                        <option value="Bayan">Bayan</option>
                        <option value="Erkek">Erkek</option>
                    </select>
                </div>

                <button type="button" onclick="submitProductEntry()" class="w-full py-3 bg-blue-600 hover:bg-blue-500 text-white rounded-xl font-semibold text-xs transition shadow-lg shadow-blue-600/30 mt-3 flex items-center justify-center gap-2 cursor-pointer">
                    <i class="fa-solid fa-plus-circle"></i> Kaydı Tamamla ve Ekle
                </button>
            </div>
        </div>

        <!-- SAĞ PANEL: GELEN VE GİDEN NUMUNELER WEB TABLOLARI -->
        <div class="flex-1 flex flex-col gap-6 overflow-hidden">
            
            <!-- GELEN NUMUNELER TABLOSU -->
            <div class="flex-1 bg-dark-900 border border-dark-border rounded-2xl p-4 shadow-xl flex flex-col overflow-hidden">
                <div class="flex items-center justify-between mb-3 shrink-0">
                    <h3 class="font-bold text-sm text-slate-100 flex items-center gap-2">
                        <i class="fa-solid fa-arrow-down text-orange-500"></i> GELEN NUMUNELER LİSTESİ
                    </h3>
                    <span id="gelenCount" class="text-[11px] bg-orange-600/20 text-orange-400 px-2.5 py-0.5 rounded-full border border-orange-500/30">0 Kayıt</span>
                </div>
                <div class="flex-1 overflow-auto rounded-xl border border-dark-border">
                    <table class="w-full text-left text-xs text-slate-300">
                        <thead id="gelenHead" class="text-xs uppercase bg-dark-800 text-slate-200 sticky top-0 z-10"></thead>
                        <tbody id="gelenBody" class="divide-y divide-dark-border bg-dark-950"></tbody>
                    </table>
                </div>
            </div>

            <!-- GİDEN NUMUNELER TABLOSU -->
            <div class="flex-1 bg-dark-900 border border-dark-border rounded-2xl p-4 shadow-xl flex flex-col overflow-hidden">
                <div class="flex items-center justify-between mb-3 shrink-0">
                    <h3 class="font-bold text-sm text-slate-100 flex items-center gap-2">
                        <i class="fa-solid fa-arrow-up text-purple-500"></i> GİDEN NUMUNELER LİSTESİ
                    </h3>
                    <span id="gidenCount" class="text-[11px] bg-purple-600/20 text-purple-400 px-2.5 py-0.5 rounded-full border border-purple-500/30">0 Kayıt</span>
                </div>
                <div class="flex-1 overflow-auto rounded-xl border border-dark-border">
                    <table class="w-full text-left text-xs text-slate-300">
                        <thead id="gidenHead" class="text-xs uppercase bg-dark-800 text-slate-200 sticky top-0 z-10"></thead>
                        <tbody id="gidenBody" class="divide-y divide-dark-border bg-dark-950"></tbody>
                    </table>
                </div>
            </div>

        </div>
    </div>

    <!-- ALT DURUM ÇUBUĞU -->
    <footer class="bg-dark-900 border-t border-dark-border px-6 py-2 flex items-center justify-between text-xs z-30 shrink-0">
        <div class="text-slate-400 text-[11px]">Stok & WebSheet Pro - MySQL Veritabanı Sistemi</div>
        <div class="flex items-center space-x-6 text-slate-400 font-mono text-[11px]">
            <div class="flex items-center gap-1.5"><span class="text-slate-500">Numune Toplamı:</span> <span id="statusBarNumune" class="text-orange-400 font-semibold">-</span></div>
            <div class="flex items-center gap-1.5"><span class="text-slate-500">Orijinal Toplamı:</span> <span id="statusBarOrijinal" class="text-purple-400 font-semibold">-</span></div>
        </div>
    </footer>

    <script>
        let appData = {
            'GELEN NUMUNELER': [],
            'GİDEN NUMUNELER': []
        };

        function initApp() {
            try {
                fetchDataFromServer();
                toggleFormFields();
            } catch (e) {
                console.error("Başlangıç hatası:", e);
            }
        }

        function toggleFormFields() {
            const type = document.getElementById('entryType').value;
            const wrapperAciklama = document.getElementById('wrapperAciklama');
            const wrapperTeslimAlan = document.getElementById('wrapperTeslimAlan');
            const wrapperCinsiyet = document.getElementById('wrapperCinsiyet');

            if (type === 'GELEN NUMUNELER') {
                wrapperAciklama.classList.add('hidden');
                wrapperTeslimAlan.classList.remove('hidden');
                wrapperCinsiyet.classList.add('hidden');
            } else {
                wrapperAciklama.classList.remove('hidden');
                wrapperTeslimAlan.classList.add('hidden');
                wrapperCinsiyet.classList.remove('hidden');
            }
        }

        function fetchDataFromServer() {
            fetch('index.php?action=get_data')
            .then(res => res.json())
            .then(data => {
                if (data.status === 'success') {
                    appData['GELEN NUMUNELER'] = data.gelen || [];
                    appData['GİDEN NUMUNELER'] = data.giden || [];
                    renderAllTables();
                } else {
                    console.error("Sunucu veri hatası:", data.message);
                }
            })
            .catch(err => console.error("Veri çekme bağlantı hatası:", err));
        }

        function submitProductEntry() {
            const targetSheet = document.getElementById('entryType').value;
            const awbno = document.getElementById('f_awbno').value.trim();
            const siparis = document.getElementById('f_siparis').value.trim();
            const uruncinsi = document.getElementById('f_uruncinsi').value.trim();
            const numune = document.getElementById('f_numune').value.trim() || '0';
            const orijinal = document.getElementById('f_orijinal').value.trim() || '0';
            const musteri = document.getElementById('f_musteri').value;
            const tarih = new Date().toLocaleDateString('tr-TR');

            if (!awbno || !siparis || !uruncinsi || !musteri) {
                alert("Lütfen zorunlu alanları (AWBNO, Sipariş, Ürün Cinsi, Müşteri) eksiksiz doldurun!");
                return;
            }

            // Hosting uyumlu FormData kullanımı (POST)
            let formData = new FormData();
            formData.append('action', 'add_record');
            formData.append('table', targetSheet);
            formData.append('awbno', awbno);
            formData.append('siparis', siparis);
            formData.append('uruncinsi', uruncinsi);
            formData.append('numune', numune);
            formData.append('orijinal', orijinal);
            formData.append('musteri', musteri);
            formData.append('tarih', tarih);

            if (targetSheet === 'GELEN NUMUNELER') {
                formData.append('teslim_alan', document.getElementById('f_teslimalan').value.trim());
            } else {
                formData.append('aciklama', document.getElementById('f_aciklama').value.trim());
                formData.append('cinsiyet', document.getElementById('f_cinsiyet').value);
            }

            fetch('index.php', {
                method: 'POST',
                body: formData
            })
            .then(res => res.text())
            .then(text => {
                let response;
                try {
                    response = JSON.parse(text);
                } catch (e) {
                    alert("Sunucu yanıtı JSON formatında değil:\n\n" + text);
                    return;
                }

                if (response.status === 'success') {
                    document.getElementById('f_awbno').value = '';
                    document.getElementById('f_siparis').value = '';
                    document.getElementById('f_uruncinsi').value = '';
                    document.getElementById('f_numune').value = '';
                    document.getElementById('f_orijinal').value = '';
                    document.getElementById('f_musteri').selectedIndex = 0;
                    if (document.getElementById('f_teslimalan')) document.getElementById('f_teslimalan').value = '';
                    if (document.getElementById('f_aciklama')) document.getElementById('f_aciklama').value = '';

                    fetchDataFromServer();
                    showSuccessBadge("Kayıt veritabanına başarıyla eklendi!");
                } else {
                    alert("Kayıt eklenirken hata: " + response.message);
                }
            })
            .catch(err => alert("Bağlantı/Sunucu hatası: " + err.message));
        }

        function showSuccessBadge(msg) {
            const badge = document.getElementById('autoSaveStatus');
            badge.innerHTML = `<i class="fa-solid fa-check text-emerald-400"></i> ${msg}`;
            setTimeout(() => {
                badge.innerHTML = '<i class="fa-solid fa-circle text-[8px] text-emerald-400"></i> Bağlantı Hazır';
            }, 2500);
        }

        function renderAllTables() {
            renderTableContent('GELEN NUMUNELER', 'gelenHead', 'gelenBody', 'gelenCount');
            renderTableContent('GİDEN NUMUNELER', 'gidenHead', 'gidenBody', 'gidenCount');
            updateStatusBar();
        }

        function renderTableContent(sheetName, headId, bodyId, countId) {
            const headEl = document.getElementById(headId);
            const bodyEl = document.getElementById(bodyId);
            const countEl = document.getElementById(countId);

            let isGelen = sheetName === 'GELEN NUMUNELER';
            let headers = isGelen 
                ? ['AWBNO', 'Sipariş', 'Ürün Cinsi', 'Numune', 'Orijinal', 'T.Adet', 'Müşteri', 'Teslim Alan', 'Tarih']
                : ['AWBNO', 'Sipariş', 'Açıklama', 'Ürün Cinsi', 'Numune', 'Orijinal', 'T.Adet', 'Müşteri', 'Cinsiyet', 'Tarih'];

            let headBg = isGelen ? 'bg-orange-600/20 text-orange-400 border-orange-500/30' : 'bg-purple-600/20 text-purple-400 border-purple-500/30';

            headEl.innerHTML = `
                <tr class="border-b border-dark-border">
                    ${headers.map(h => `<th class="px-3 py-2 font-semibold ${headBg}">${h}</th>`).join('')}
                </tr>
            `;

            let rowsData = appData[sheetName] || [];
            countEl.innerText = `${rowsData.length} Kayıt`;

            if (rowsData.length === 0) {
                bodyEl.innerHTML = `
                    <tr>
                        <td colspan="${headers.length}" class="px-3 py-6 text-center text-slate-500 italic">
                            Henüz veritabanında kayıt bulunmuyor.
                        </td>
                    </tr>
                `;
            } else {
                bodyEl.innerHTML = rowsData.map(row => {
                    let vals = isGelen ? [
                        row.awbno, row.siparis, row.uruncinsi, row.numune, row.orijinal, row.total_adet, row.musteri, row.teslim_alan, row.tarih
                    ] : [
                        row.awbno, row.siparis, row.aciklama, row.uruncinsi, row.numune, row.orijinal, row.total_adet, row.musteri, row.cinsiyet, row.tarih
                    ];

                    return `
                        <tr class="hover:bg-dark-900 transition">
                            ${vals.map((val, idx) => `
                                <td class="px-3 py-2 whitespace-nowrap ${idx === 3 \vert{}\vert{} idx === 4 \vert{}\vert{} idx === 5 ? 'font-mono text-emerald-400 font-semibold' : ''}">${val || '-'}</td>
                            `).join('')}
                        </tr>
                    `;
                }).join('');
            }
        }

        function updateStatusBar() {
            let sumNumuneGelen = 0, sumOrijinalGelen = 0;
            let sumNumuneGiden = 0, sumOrijinalGiden = 0;

            (appData['GELEN NUMUNELER'] || []).forEach(r => {
                sumNumuneGelen += parseInt(r.numune) || 0;
                sumOrijinalGelen += parseInt(r.orijinal) || 0;
            });

            (appData['GİDEN NUMUNELER'] || []).forEach(r => {
                sumNumuneGiden += parseInt(r.numune) || 0;
                sumOrijinalGiden += parseInt(r.orijinal) || 0;
            });

            document.getElementById('statusBarNumune').innerText = `Gelen: ${sumNumuneGelen} | Giden: ${sumNumuneGiden}`;
            document.getElementById('statusBarOrijinal').innerText = `Gelen: ${sumOrijinalGelen} | Giden: ${sumOrijinalGiden}`;
        }

        async function exportMultiSheetExcel() {
            try {
                if (typeof ExcelJS === 'undefined') {
                    alert("Excel kütüphanesi (ExcelJS) yüklenemedi! Lütfen internet bağlantınızı kontrol edin.");
                    return;
                }

                const workbook = new ExcelJS.Workbook();
                workbook.creator = 'WebSheet Pro';
                workbook.lastModifiedBy = 'Nita';
                workbook.created = new Date();

                const targetSheets = ['GELEN NUMUNELER', 'GİDEN NUMUNELER'];

                targetSheets.forEach(sheetName => {
                    const ws = workbook.addWorksheet(sheetName, {
                        views: [{ showGridLines: true }]
                    });

                    let isGelen = sheetName === 'GELEN NUMUNELER';
                    let headers = isGelen 
                        ? ['AWBNO', 'Sipariş', 'Ürün Cinsi', 'Numune', 'Orijinal', 'T.Adet', 'Müşteri', 'Teslim Alan', 'Tarih']
                        : ['AWBNO', 'Sipariş', 'Açıklama', 'Ürün Cinsi', 'Numune', 'Orijinal', 'T.Adet', 'Müşteri', 'Cinsiyet', 'Tarih'];

                    ws.addRow(headers);

                    let rowsData = appData[sheetName] || [];
                    rowsData.forEach(row => {
                        let rVals = isGelen ? [
                            row.awbno, row.siparis, row.uruncinsi, Number(row.numune), Number(row.orijinal), Number(row.total_adet), row.musteri, row.teslim_alan, row.tarih
                        ] : [
                            row.awbno, row.siparis, row.aciklama, row.uruncinsi, Number(row.numune), Number(row.orijinal), Number(row.total_adet), row.musteri, row.cinsiyet, row.tarih
                        ];
                        ws.addRow(rVals);
                    });

                    let maxR = ws.rowCount;
                    let maxC = headers.length;

                    for (let r = 1; r <= maxR; r++) {
                        let row = ws.getRow(r);
                        if (r === 1) {
                            let bgColor = isGelen ? 'C2410C' : '7E22CE';
                            row.height = 24;
                            row.font = { name: 'Inter', size: 11, bold: true, color: { argb: 'FFFFFF' } };
                            row.alignment = { vertical: 'middle', horizontal: 'center' };
                            
                            for (let c = 1; c <= maxC; c++) {
                                let cell = row.getCell(c);
                                cell.fill = { type: 'pattern', pattern: 'solid', fgColor: { argb: bgColor } };
                                cell.border = {
                                    top: { style: 'medium', color: { argb: '000000' } },
                                    bottom: { style: 'medium', color: { argb: '000000' } },
                                    left: { style: 'thin', color: { argb: '000000' } },
                                    right: { style: 'thin', color: { argb: '000000' } }
                                };
                            }
                        } else {
                            row.height = 20;
                            row.font = { name: 'Inter', size: 10 };
                            row.alignment = { vertical: 'middle', horizontal: 'left' };
                            for (let c = 1; c <= maxC; c++) {
                                let cell = row.getCell(c);
                                cell.border = {
                                    top: { style: 'thin', color: { argb: 'D3D3D3' } },
                                    bottom: { style: 'thin', color: { argb: 'D3D3D3' } },
                                    left: { style: 'thin', color: { argb: 'D3D3D3' } },
                                    right: { style: 'thin', color: { argb: 'D3D3D3' } }
                                };
                            }
                        }
                    }

                    if (maxR >= 1 && maxC >= 1) {
                        ws.autoFilter = { from: { row: 1, column: 1 }, to: { row: maxR, column: maxC } };
                    }

                    ws.columns.forEach((col, index) => {
                        col.width = 16;
                    });
                });

                const buffer = await workbook.xlsx.writeBuffer();
                const blob = new Blob([buffer], { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' });
                saveAs(blob, 'Stok_Takip_Raporu_Hosting.xlsx');
                showSuccessBadge("Excel başarıyla indirildi!");
            } catch (err) {
                alert("Excel oluşturulurken hata oluştu: " + err.message);
            }
        }
    </script>
</body>
</html>