<!DOCTYPE html>
<html lang="tr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Teklif Modülü</title>

    <!-- Bootstrap 5 CDN -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>

    <style>
    
    
    .safe-html {
    display: inline-block;
    max-width: 100%;
    overflow-wrap: break-word;
    white-space: normal;
}

    body {
        background: #f1f3f5;
    }

    .left-panel {
        height: 100vh;
        overflow-y: auto;
        border-right: 1px solid #ddd;
        background: white;
    }

    /* A4 Önizleme Alanı */
    .a4-preview {
        width: 210mm;
        min-height: 297mm;
        background: white;
        margin: 20px auto;
        box-shadow: 0 0 25px rgba(0,0,0,0.15);
        padding: 20px;
        position: relative;
        box-sizing: border-box;
    }

    .preview-wrapper {
        height: 100vh;
        overflow-y: auto;
        background: #e9ecef;
        display: flex;
        flex-direction: column;
        align-items: center;
        padding: 20px;
        gap: 20px;
    }

    .satir-baslik-bar {
        background: #f8f9fa;
        border-bottom: 1px solid #dee2e6;
        padding: 3px 6px;
        font-weight: bold;
        font-size: 12px;
    }

    .kase-container {
        position: absolute;
        bottom: 80px;
        left: 0;
        width: 100%;
        padding: 0 20px;
    }

    .footer-area {
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        border-top: 1px solid #000;
        padding: 8px 0;
    }

    /* YAZDIRMA/PDF STİLLERİ */
    @media print {
        body, html {
            margin: 0 !important;
            padding: 0 !important;
            background: white !important;
        }
        
        .left-panel,
        .preview-wrapper {
            display: none !important;
        }
        
        .a4-preview {
            width: 210mm !important;
            height: 297mm !important;
            margin: 0 !important;
            padding: 20px !important;
            box-shadow: none !important;
            page-break-after: always;
            position: relative;
            display: block !important;
        }
        
        .kase-container {
            position: absolute;
            bottom: 60px !important;
            left: 0 !important;
            width: 100% !important;
            padding: 0 20px !important;
        }
        
        .footer-area {
            position: absolute;
            bottom: 0 !important;
            left: 0 !important;
            width: 100% !important;
            padding: 8px 0 !important;
        }
        
        /* Tüm elementleri göster */
        .a4-preview,
        .a4-preview * {
            visibility: visible !important;
        }
        
        /* Renkleri koru */
        * {
            -webkit-print-color-adjust: exact !important;
            color-adjust: exact !important;
        }
        
        /* Sayfa marjinleri */
        @page {
            margin: 0;
            size: A4;
        }
    }
</style>

</head>
<body>
<div class="container-fluid">
    <div class="row">
        <!-- SOL TARAF — FORM ALANI -->
        <div class="col-4 left-panel p-4">
            <h4 class="mb-4 fw-bold">🧩 Teklif Düzenleme</h4>
            
            <div class="mb-3">
                <label class="form-label fw-bold">Firma Açıklama Metni</label>
                <textarea 
                    class="form-control auto-update" 
                    data-target="#p_firmayaAciklama" 
                    rows="3"
                >Sayın <strong>Müşteri</strong> firmanıza özel olarak hazırladığımız <strong>Şirket</strong> markasına ait Özel Web Sitesi, SEO Yönetimi ile ilgili fiyat teklifi ve teklif maddeleri aşağıda değerlendirmenize sunulmuştur.</textarea>
            </div>
            
            <div class="accordion" id="teklifAccordion"> 
                <div class="accordion-item">
                    <h2 class="accordion-header">
                        <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#bolumFirma">
                            <strong>Firma Bilgileri</strong>
                        </button>
                    </h2>
                    <div id="bolumFirma" class="accordion-collapse collapse">
                        <div class="accordion-body">
                            <div class="row g-2">
                                <div class="col-12">
                                    <label class="form-label fw-bold">Firma Adı</label>
                                    <input type="text" class="form-control auto-update" data-target="#p_firmaAdiText"
                                        value="GEMAK GIDA ENDÜSTRİ MAKİNALARI ve TİC. A.Ş.">
                                </div>
                                <div class="col-6">
                                    <label class="form-label fw-bold">Yetkili Adı</label>
                                    <input type="text" class="form-control auto-update" data-target="#p_yetkiliAdi"
                                        value="İLKAY KOCA">
                                </div>
                                <div class="col-6">
                                    <label class="form-label fw-bold">Teklif Tarihi</label>
                                    <input type="text" class="form-control auto-update" data-target="#p_teklifTarihi"
                                        value="08.07.2025">
                                </div>
                                <div class="col-6">
                                    <label class="form-label fw-bold">Teklif No</label>
                                    <input type="text" class="form-control auto-update" data-target="#p_teklifNo"
                                        value="LMS25-0807017">
                                </div>
                                <div class="col-6">
                                    <label class="form-label fw-bold">Telefon</label>
                                    <input type="text" class="form-control auto-update" data-target="#p_telefon"
                                        value="+90 546 501 8016">
                                </div>
                                <div class="col-6">
                                    <label class="form-label fw-bold">E-Posta</label>
                                    <input type="text" class="form-control auto-update" data-target="#p_eposta"
                                        value="ilkaykoca@gemak.com.tr">
                                </div>
                                <div class="col-6">
                                    <label class="form-label fw-bold">Geçerlilik Tarihi</label>
                                    <input type="text" class="form-control auto-update" data-target="#p_gecerlilik"
                                        value="18.07.2025">
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                
                <div class="accordion-item">
                    <h2 class="accordion-header">
                        <button class="accordion-button collapsed" 
                                type="button" data-bs-toggle="collapse" data-bs-target="#bolumSatirlar">
                            <strong>Hizmet Satırları Yönetimi</strong>
                        </button>
                    </h2>
                    <div id="bolumSatirlar" class="accordion-collapse collapse">
                        <div class="accordion-body">
                            <button class="btn btn-sm btn-primary mb-3" id="addSatirBtn">
                                ➕ Yeni Satır Ekle
                            </button>
                            <div id="satirListesi"></div>
                        </div>
                    </div>
                </div>
                
                <!-- ÖDEME PLANI YÖNETİMİ -->
                <div class="accordion-item">
                    <h2 class="accordion-header">
                        <button class="accordion-button collapsed" 
                                type="button" data-bs-toggle="collapse" data-bs-target="#bolumOdemePlanlari">
                            <strong>Ödeme Planları Yönetimi</strong>
                        </button>
                    </h2>
                    <div id="bolumOdemePlanlari" class="accordion-collapse collapse">
                        <div class="accordion-body">
                            <!-- SABİT WEB SİTE ÖDEME PLANI -->
                            <div class="mb-3">
                                <label class="form-label fw-bold">Web Site Ödeme Planı</label>
                                <textarea 
                                    class="form-control auto-update" 
                                    data-target="#p_webodeme" 
                                    rows="3">Sözleşme onayı ile birlikte teklif tutarının %50'si banka havalesi şeklinde ödenecektir. İlk ödeme tutarının ardından çalışmalara başlanacaktır. Kalan %50'si ise projenin 25. gününde ödenecektir.</textarea>
                            </div>
                            
                            <!-- DİNAMİK ÖDEME PLANLARI -->
                            <button class="btn btn-sm btn-success mb-3" id="addOdemePlanBtn">
                                ➕ Ödeme Planı Ekle
                            </button>
                            <div id="odemePlanlariListesi"></div>
                        </div>
                    </div>
                </div>
            </div>
            
            <div class="mb-3">
                <label class="form-label fw-bold">Teklif / Destek / Yapılandırma ve Danışmanlık Maddeleri</label>
                <textarea id="maddelerEditor" class="form-control auto-update" data-target="#p_maddeler" rows="15">
<ul>
    <li>Teklifimize %20 KDV eklenecektir.</li>
    <li>Ödemeler, fatura kesim tarihine denk gelen dolar kuru üzerinden yapılacaktır.</li>
    <li>Web sitesi çalışmalarında farklı dil seçeneği istenildiğinde her bir dil için 250 USD + KDV talep edilecektir.</li>
    <li>Arapça ve Rusça gibi Latin alfabe dışındaki farklı dil seçeneği istenilmesi durumunda her bir dil için 500 USD + KDV talep edilecektir.</li>
    <li>Teklif formunun imzalanmasının ve gereken ödeme şartlarının yerine getirilmesinin ardından, projenin tasarım ve yazılım çalışmalarına belirtilen tarihlerde başlanacaktır.</li>
    <li><strong>Fatura Bilgisi:</strong> Talep edildiği takdirde anlaşılan tutara KDV eklenerek iş tesliminde faturalandırılabilir</li>
    <li><strong>WEB SİTE Ödeme Şekli:</strong> Sözleşme onayı ile birlikte teklif tutarının %50'Sİ banka havalesi şeklinde ödenecektir. İlk ödeme tutarının ardından çalışmalara başlanacaktır. Kalan %50'i ise projenin 25. iş gününde ödenecektir.</li>
    <li><strong>SEO Ödeme Şekli:</strong> Sözleşme onayı ile birlikte teklif tutarının %50'si banka havalesi şeklinde ödenecektir. 5.ayın bitimi ile 6.ayın başlangıcında kalan %50 ödemesi yapılacaktır.</li>
    <li>Teklif fiyatımız <strong>30.12.2025</strong> tarihine kadar geçerlidir.</li>
</ul></textarea>
            </div>
            
            <div class="mb-3">
                <label class="form-label fw-bold">PDF Dosya Adı</label>
                <input type="text" id="pdfName" class="form-control mb-3" placeholder="teklif.pdf">
            </div>
            
            <hr class="my-4">
            <div class="d-grid gap-2">
                <button class="btn btn-success" id="btnPdfIndir">📄 PDF İndir</button>
                
                <hr class="my-4">

                <div class="mt-4">
                    <label class="form-label fw-bold">Gönderilecek Numara</label>
                    <input type="text" id="wpNumber" class="form-control mb-3" placeholder="905551112233 şeklinde yazın">

                    <label class="form-label fw-bold">Mesaj İçeriği</label>
                    <textarea id="wpMessage" class="form-control mb-3" rows="3" placeholder="WhatsApp mesajını buraya yazın.">
                        Merhaba, teklifinizi PDF formatında iletiyorum.
                    </textarea>

                    <button class="btn btn-success w-100" id="btnWpSend" disabled>
                        📤 WhatsApp Üzerinden Gönder
                    </button>
                </div>
            </div>
        </div>

        <!-- SAĞ TARAF — A4 ÖNİZLEME -->
        <div class="col-8 preview-wrapper"> 
            <div class="a4-preview p-4 pb-0" id="previewArea1" style="width: 210mm;min-height: 297mm; background: white;position: relative;">
                <!-- WORD TARZI ÜST BİLGİ ALANI -->
                <div class="d-flex align-items-center justify-content-between mb-2" 
                    style="border-bottom: 1px solid #000; padding-bottom: 6px;">

                    <!-- SOL: LOGO + ALTINDA KÜÇÜK FİRMA ÜNVANI -->
                    <div class="d-flex flex-column" style="width: 100px;">
                        <img src="https://www.dsm.web.tr/teklif/logo.png" alt="Logo" style="max-height: 45px;">
                    </div>

                    <!-- ORTA: MAIL + WEB -->
                    <div class="text-center" style="font-size: 11px; line-height: 1.2;">
                        <div>lumos@lumossoft.com</div>
                        <div>www.lumossoft.com</div>
                    </div>
                    <!-- SAĞ: TELEFON -->
                    <div class="text-end" style="font-size: 11px;">
                        <strong>0505</strong> 567 01 17
                    </div>
                </div>
                
                <div class="mb-3">
                    <span id="p_firmayaAciklama" class="fs-14">Sayın <strong>Müşteri</strong> firmanıza özel olarak hazırladığımız <strong>Şirket</strong> markasına ait Özel Web Sitesi, SEO Yönetimi ile ilgili fiyat teklifi ve teklif maddeleri aşağıda değerlendirmenize sunulmuştur.</span>
                </div>
                
                <div class="mb-3">
                    <div class="border" style="font-size: 13px;">
                        <div class="row g-0">
                            <div class="col-12 p-2 border-bottom">
                                <strong>Firma Adı:</strong> <span id="p_firmaAdiText">GEMAK GIDA ENDÜSTRİ MAKİNALARI ve TİC. A.Ş.</span>
                            </div>
                        </div>
                        <div class="row g-0">
                            <div class="col-4 p-2 border-end border-bottom align-content-center">
                                <strong>Yetkili Adı:</strong>
                                <span id="p_yetkiliAdi">İLKAY KOCA</span>
                            </div>
                            <div class="col-4 p-2  border-end border-bottom align-content-center">
                                <strong>Telefon:</strong>
                                <span id="p_telefon">+90 546 501 8016</span>
                            </div>
                            <div class="col-4 p-2 border-end border-bottom align-content-center">
                               <strong>E-Posta:</strong>
                                <span id="p_eposta">ilkaykoca@gemak.com.tr</span>
                            </div>
                        </div>
                        <div class="row g-0">
                            <div class="col-4 p-2 border-end align-content-center">
                                <strong>Teklif Tarihi:</strong>
                                <span id="p_teklifTarihi">08.07.2025</span>
                            </div>
                            <div class="col-4 p-2 border-end align-content-center">
                               <strong>Teklif No:</strong>
                                <span id="p_teklifNo">LMS25-0807017</span>
                            </div>
                            <div class="col-4 p-2 align-content-center">
                               <strong>Geçerlilik Tarihi:</strong>
                                <span id="p_gecerlilik">18.07.2025</span>
                            </div>
                        </div>
                    </div>
                </div>
                
                <div class="mb-3 text-center" id="format1Area">
                    <div class="border" style="font-size: 13px;">
                        <div class="row g-0" style="background-color:#d1d3d4;">
                            <div class="col-4 p-2 border-end border-bottom" style="background-color:#d1d3d4;">
                                <strong>İş Planı/Modüller</strong>
                            </div>
                            <div class="col-2 p-2 border-end border-bottom" style="background-color:#d1d3d4;">
                                <strong>İş Süresi</strong>
                            </div>
                            <div class="col-2 p-2 border-end border-bottom" style="background-color:#d1d3d4;">
                                <strong>Birim/Adet</strong>
                            </div>
                            <div class="col-4 p-2 border-end border-bottom" style="background-color:#d1d3d4;">
                                <strong>Toplam Fiyat</strong>
                            </div>
                        </div>
                        <div id="dinamikSatirlar"></div>
                    </div>
                </div>
                
                <hr>
                
                <!-- DİNAMİK ÖDEME PLANI KISMI -->
                <div class="mb-3" id="odemePlanlariPreview">
                    <div class="border" style="font-size: 13px;">
                        <!-- SABİT WEB SİTE SATIRI -->
                        <div class="row g-0">
                            <div class="col-3 p-2 border-end border-bottom bg-light align-content-center">
                                <strong>WEB SİTE<br>ÖDEME PLANI</strong>    
                            </div>
                            <div class="col-9 p-2 border-end border-bottom">
                                <span id="p_webodeme">Sözleşme onayı ile birlikte teklif tutarının %50'si banka havalesi şeklinde ödenecektir. İlk ödeme tutarının ardından çalışmalara başlanacaktır. Kalan %50'si ise projenin 25. gününde ödenecektir.</span>
                            </div>
                        </div>
                        <!-- DİNAMİK ÖDEME PLANLARI BURAYA GELECEK -->
                    </div>
                </div>
                
                <!-- KAŞE – İMZA BLOKLARI -->
                <div class="kase-container">
                    <div class="row g-0 justify-content-center">
                        <!-- SOL BLOK -->
                        <div class="col-4 me-3">
                            <div class="text-center" 
                                 style="border: 1px dashed #000; padding: 15px; min-height: 180px; font-size: 12px;">
                                <strong>LUMOS SOFT TEKNOLOJİ ve<br>YAZILIM ÇÖZÜMLERİ A.Ş.</strong>
                                <div class="text-center" 
                                     style="border: 1px solid #000; margin-top: 10px; line-height: 1.3;">
                                    V.D: Yenibosna<br>
                                    V.No: 609 126 90 55<br>
                                    Prestige24 Plaza Yenibosna Mh.<br>
                                    Kavak Sokak No:17 Kat:12 D:83<br>
                                    Bahçelievler / İSTANBUL
                                </div>
                            </div>
                        </div>
                        <!-- SAĞ BLOK -->
                        <div class="col-4 ms-3">
                            <div class="text-center" 
                                 style="border: 1px dashed #000; padding: 15px; min-height: 180px; font-size: 12px;">
                                <strong>Müşteri Onayı</strong>
                                <div class="text-center"
                                     style="border: 1px solid #000; margin-top: 10px; line-height: 1.3; min-height: 110px;">
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="footer-area d-flex justify-content-center align-items-center pb-2" style="position: absolute; bottom: 0; left: 0; width: 100%; border-top: 1px solid #000;">
                    <div class="text-center w-100" style="font-size: 11px; line-height: 1.2;">
                        lumos@lumossoft.com - www.lumossoft.com - 0850 241 02 49<br>
                        Prestige24 Plaza Yenibosna Merkez Mahallesi Çınar Caddesi Kavak Sokak No:17 Kat:12 D:83 Bahçelievler / İSTANBUL
                    </div>
                </div>
            </div>
            
            <!-- İKİNCİ SAYFA -->
            <div class="a4-preview" id="previewArea2" style="width: 210mm;min-height: 297mm; background: white;margin: auto;position: relative; padding: 20px 20px 60px 20px;">
                <!-- WORD TARZI ÜST BİLGİ ALANI -->
                <div class="d-flex align-items-center justify-content-between mb-2" 
                    style="border-bottom: 1px solid #000; padding-bottom: 4px;">

                    <!-- SOL: LOGO + ALTINDA KÜÇÜK FİRMA ÜNVANI -->
                    <div class="d-flex flex-column" style="width: 100px;">
                        <img src="https://www.dsm.web.tr/teklif/logo.png" alt="Logo" style="max-height: 45px;">
                    </div>

                    <!-- ORTA: MAIL + WEB -->
                    <div class="text-center" style="font-size: 11px; line-height: 1.2;">
                        <div>lumos@lumossoft.com</div>
                        <div>www.lumossoft.com</div>
                    </div>
                    <!-- SAĞ: TELEFON -->
                    <div class="text-end" style="font-size: 11px;">
                        <strong>0505</strong> 567 01 17
                    </div>
                </div>
                
                <div class="mb-3">
                    <span class="fs-14"><strong>Teklif / Destek / Yapılandırma ve Danışmanlık Maddeleri</strong></span>
                    <br>
                    <br>
                    <span id="p_maddeler">
                    <ul>
                        <li>Teklifimize %20 KDV eklenecektir.</li>
                        <li>Ödemeler, fatura kesim tarihine denk gelen dolar kuru üzerinden yapılacaktır.</li>
                        <li>Web sitesi çalışmalarında farklı dil seçeneği istenildiğinde her bir dil için 250 USD + KDV talep edilecektir.</li>
                        <li>Arapça ve Rusça gibi Latin alfabe dışındaki farklı dil seçeneği istenilmesi durumunda her bir dil için 500 USD + KDV talep edilecektir.</li>
                        <li>Teklif formunun imzalanmasının ve gereken ödeme şartlarının yerine getirilmesinin ardından, projenin tasarım ve yazılım çalışmalarına belirtilen tarihlerde başlanacaktır.</li>
                        <li><strong>Fatura Bilgisi:</strong> Talep edildiği takdirde anlaşılan tutara KDV eklenerek iş tesliminde faturalandırılabilir</li>
                        <li><strong>WEB SİTE Ödeme Şekli:</strong> Sözleşme onayı ile birlikte teklif tutarının %50'Sİ banka havalesi şeklinde ödenecektir. İlk ödeme tutarının ardından çalışmalara başlanacaktır. Kalan %50'i ise projenin 25. iş gününde ödenecektir.</li>
                        <li><strong>SEO Ödeme Şekli:</strong> Sözleşme onayı ile birlikte teklif tutarının %50'si banka havalesi şeklinde ödenecektir. 5.ayın bitimi ile 6.ayın başlangıcında kalan %50 ödemesi yapılacaktır.</li>
                        <li>Teklif fiyatımız <strong>30.12.2025</strong> tarihine kadar geçerlidir.</li>
                    </ul>
                    </span>
                </div>
                <br>
                <br>
                <br>
                <br>
                
                <div class="mb-3 mt-3 text-center">
                    <div class="border" style="font-size: 13px;">
                        <div class="row g-0">
                            <div class="col-12 p-2 border-bottom "style="background-color:#d1d3d4;">
                                <strong>BANKA BİLGİLERİMİZ</strong>
                            </div>
                        </div>
                        <div class="row g-0">
                            <div class="col-5 p-2 border-end border-bottom">
                                <strong>Banka / Şube</strong>
                            </div>
                            <div class="col-2 p-2 border-end border-bottom">
                                <strong>Şuba Kodu</strong>
                            </div>
                            <div class="col-5 p-2 border-bottom">
                                <strong>IBAN</strong>
                            </div>
                        </div>
                        <div class="row g-0">
                            <div class="col-5 p-2 border-end">
                                T. Vakıflar Bankası / Radar Şubesi 
                            </div>
                            <div class="col-2 p-2 border-end">                                
                                616
                            </div>
                            <div class="col-5 p-2">                               
                                TR77 0001 5001 5800 7319 4412 40
                            </div>
                        </div>
                    </div>
                </div>
                
                <hr>
              
                <!-- KAŞE – İMZA BLOKLARI -->
                <div class="kase-container">
                    <div class="row g-0 justify-content-center">
                        <!-- SOL BLOK -->
                        <div class="col-4 me-3">
                            <div class="text-center" 
                                 style="border: 1px dashed #000; padding: 15px; min-height: 180px; font-size: 12px;">
                                <strong>LUMOS SOFT TEKNOLOJİ ve<br>YAZILIM ÇÖZÜMLERİ A.Ş.</strong>
                                <div class="text-center" 
                                     style="border: 1px solid #000; margin-top: 10px; line-height: 1.3;">
                                    V.D: Yenibosna<br>
                                    V.No: 609 126 90 55<br>
                                    Prestige24 Plaza Yenibosna Mh.<br>
                                    Kavak Sokak No:17 Kat:12 D:83<br>
                                    Bahçelievler / İSTANBUL
                                </div>
                            </div>
                        </div>
                        <!-- SAĞ BLOK -->
                        <div class="col-4 ms-3">
                            <div class="text-center" 
                                 style="border: 1px dashed #000; padding: 15px; min-height: 180px; font-size: 12px;">
                                <strong>Müşteri Onayı</strong>
                                <div class="text-center"
                                     style="border: 1px solid #000; margin-top: 10px; line-height: 1.3; min-height: 110px;">
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="footer-area d-flex justify-content-center align-items-center" style="position: absolute; bottom: 0; left: 0; width: 100%; border-top: 1px solid #000; padding: 6px 0;">
                    <div class="text-center w-100" style="font-size: 11px; line-height: 1.2;">
                        lumos@lumossoft.com - www.lumossoft.com - 0850 241 02 49<br>
                        Prestige24 Plaza Yenibosna Merkez Mahallesi Çınar Caddesi Kavak Sokak No:17 Kat:12 D:83 Bahçelievler / İSTANBUL
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<script src="https://cdn.ckeditor.com/ckeditor5/39.0.1/classic/ckeditor.js"></script>


<script>
// ÖDEME PLANLARI YÖNETİMİ
let odemePlanlari = [];

function updateOdemePlani(index, field, value) {
    const active = document.activeElement;
    const start = active.selectionStart;
    const end = active.selectionEnd;

    odemePlanlari[index][field] = value;
    renderOdemePlaniList();
    renderOdemePlaniPreview();

    const newInput = document.querySelector(`[oninput="updateOdemePlani(${index}, '${field}', this.value)"]`);
    if (newInput) {
        newInput.focus();
        newInput.setSelectionRange(start, end);
    }
}

function renderOdemePlaniList() {
    const list = document.getElementById("odemePlanlariListesi");
    list.innerHTML = "";

    odemePlanlari.forEach((op, i) => {
        list.innerHTML += `
            <div class="border p-2 mb-2">
                <div class="d-flex justify-content-between align-items-center mb-2">
                    <label class="form-label fw-bold mb-0">Ödeme Planı ${i + 1}</label>
                    <button class="btn btn-sm btn-danger" onclick="removeOdemePlani(${i})">🗑️ Sil</button>
                </div>
                
                <label>Başlık</label>
                <input class="form-control mb-2" 
                    value="${op.baslik}" 
                    placeholder="SEO, Sosyal Medya, E-Ticaret vb."
                    oninput="updateOdemePlani(${i}, 'baslik', this.value)">

                <label>İçerik</label>
                <textarea class="form-control mb-2" 
                    rows="3"
                    placeholder="Ödeme planı detaylarını buraya yazın..."
                    oninput="updateOdemePlani(${i}, 'icerik', this.value)">${op.icerik}</textarea>
            </div>
        `;
    });
}

function renderOdemePlaniPreview() {
    let html = `
        <!-- SABİT WEB SİTE SATIRI -->
        <div class="row g-0">
            <div class="col-3 p-2 border-end border-bottom bg-light align-content-center">
                <strong>WEB SİTE<br>ÖDEME PLANI</strong>    
            </div>
            <div class="col-9 p-2 border-end border-bottom">
                <span id="p_webodeme">Sözleşme onayı ile birlikte teklif tutarının %50'si banka havalesi şeklinde ödenecektir. İlk ödeme tutarının ardından çalışmalara başlanacaktır. Kalan %50'si ise projenin 25. gününde ödenecektir.</span>
            </div>
        </div>
    `;

    // DİNAMİK ÖDEME PLANLARI
    odemePlanlari.forEach((op, i) => {
        html += `
            <div class="row g-0">
                <div class="col-3 p-2 border-end border-bottom bg-light align-content-center">
                    <strong>${op.baslik.toUpperCase()}<br>ÖDEME PLANI</strong>    
                </div>
                <div class="col-9 p-2 border-end border-bottom">
                    ${op.icerik.replace(/\n/g, "<br>")}
                </div>
            </div>
        `;
    });

    document.querySelector("#odemePlanlariPreview .border").innerHTML = html;
}

function addOdemePlani() {
    odemePlanlari.push({
        baslik: "",
        icerik: ""
    });
    renderOdemePlaniList();
    renderOdemePlaniPreview();
}

function removeOdemePlani(index) {
    odemePlanlari.splice(index, 1);
    renderOdemePlaniList();
    renderOdemePlaniPreview();
}

// EVENT LISTENERS
document.getElementById("addOdemePlanBtn").addEventListener("click", addOdemePlani);

// MEVCUT KODUN DEVAMI...
function getOdemeBasliklari(odemeTip) {
    if (odemeTip == 2) return ["6 Aylık<br><span style='font-size:8px;'>(1.ve 2.Periyot)</span>", "6 Aylık<br><span style='font-size:8px;'>(3.ve 4.Periyot)</span>"];
    if (odemeTip == 3) return ["3 Aylık<br><span style='font-size:8px;'>(1.Periyot)</span>", "3 Aylık<br><span style='font-size:8px;'>(2.Periyot)</span>", "6 Aylık<br><span style='font-size:8px;'>(3.ve 4.Periyot)</span>"];
    if (odemeTip == 4) return ["3 Aylık<br><span style='font-size:8px;'>(1.Periyot)</span>", "3 Aylı<br><span style='font-size:8px;'>(2.Periyot)</span>k", "3 Aylık<br><span style='font-size:8px;'>(3.Periyot)</span>", "3 Aylık<br><span style='font-size:8px;'>(4.Periyot)</span>"];
    return [""];
}

document.getElementById("btnPdfIndir").addEventListener("click", () => {
    let filename = document.querySelector("#pdfName").value.trim();
    if (!filename) {
        alert("PDF dosya adı boş olamaz!");
        return;
    }
    if (!filename.toLowerCase().endsWith(".pdf")) {
        filename += ".pdf";
    }

    const fullHtml = `
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
<style>
${document.querySelector("style").innerHTML}
</style>
</head>
<body>
${document.querySelector("#previewArea1").outerHTML}
${document.querySelector("#previewArea2").outerHTML}
</body>
</html>`;

    const form = document.createElement("form");
    form.method = "POST";
    form.action = "pdf.php";
    form.target = "_blank";

    const htmlInput = document.createElement("input");
    htmlInput.type = "hidden";
    htmlInput.name = "html";
    htmlInput.value = fullHtml;

    const nameInput = document.createElement("input");
    nameInput.type = "hidden";
    nameInput.name = "filename";
    nameInput.value = filename;

    form.appendChild(htmlInput);
    form.appendChild(nameInput);
    document.body.appendChild(form);
    form.submit();
    
    window.lastSavedPdf = filename;
    document.querySelector("#btnWpSend").disabled = false;
});

// DİĞER MEVCUT FONKSİYONLAR...
let satirlar = [];

function updateSatir(index, field, value) {
    const active = document.activeElement;
    const start = active ? active.selectionStart : null;
    const end = active ? active.selectionEnd : null;

    // ---- KRİTİK DÜZELTME ----
    if (field === "odemeTip") {
        const kolon = parseInt(value);
        // fiyat dizisini yeni kolon sayısına göre yeniden oluştur
        satirlar[index].fiyat = new Array(kolon).fill("");
    }
    // -------------------------

    satirlar[index][field] = value;
    renderSatirList();

    const newInput = document.querySelector(`[oninput="updateSatir(${index}, '${field}', this.value)"]`);
    if (newInput && start !== null) {
        newInput.focus();
        newInput.setSelectionRange(start, end);
    }
}


function updateFiyat(index, kolonIndex, value) {
    satirlar[index].fiyat[kolonIndex] = value;
    renderPreview();
}

function renderSatirList() {
    const list = document.getElementById("satirListesi");
    list.innerHTML = "";

    satirlar.forEach((s, i) => {
        list.innerHTML += `
            <div class="border p-2 mb-2">
                <label>Başlık</label>
                <input class="form-control mb-2" 
                    value="${s.baslik}" 
                    oninput="updateSatir(${i}, 'baslik', this.value)">

                <label>İçerik</label>
                <textarea class="form-control mb-2" 
                    rows="3"
                    oninput="updateSatir(${i}, 'icerik', this.value)">${s.icerik}</textarea>

                <label>İş Süresi</label>
                <input class="form-control mb-2"
                    value="${s.sure}"
                    oninput="updateSatir(${i}, 'sure', this.value)">

                <label>Birim/Adet</label>
                <input class="form-control mb-2"
                    value="${s.adet}"
                    oninput="updateSatir(${i}, 'adet', this.value)">

                <label>Ödeme Tipi (Kolon)</label>
                <select class="form-select mb-2" 
                    onchange="updateSatir(${i}, 'odemeTip', this.value)">
                    <option value="1" ${s.odemeTip==1?"selected":""}>Tek Fiyat</option>
                    <option value="2" ${s.odemeTip==2?"selected":""}>2 Kolon</option>
                    <option value="3" ${s.odemeTip==3?"selected":""}>3 Kolon</option>
                    <option value="4" ${s.odemeTip==4?"selected":""}>4 Kolon</option>
                </select>

                ${renderFiyatInputs(i, s.odemeTip)}
            </div>
        `;
    });

    renderPreview();
}

function renderFiyatInputs(i, kolon) {
    let colSize = 12 / kolon; // otomatik kolon hesaplama ör: 12/3 = 4

    let html = `<div class="row">`;

    for (let k = 0; k < kolon; k++) {
        html += `
            <div class="col-${colSize}">
                <label>Fiyat ${k+1}</label>
                <input class="form-control mb-2"
                    value="${satirlar[i].fiyat[k] || ''}"
                    oninput="updateFiyat(${i}, ${k}, this.value)">
            </div>
        `;
    }

    html += "</div>";
    return html;
}


document.getElementById("addSatirBtn").addEventListener("click", () => {
    satirlar.push({
        baslik: "",
        icerik: "",
        sure: "",
        adet: "",
        odemeTip: 1,
        fiyat: []
    });
    renderSatirList();
});

function decodeUserHtml(str = "") {
    return str
        .replace(/\n/g, "<br>")
        .replace(/<script/gi, "&lt;script")   // script engeli
        .replace(/<\/script>/gi, "&lt;/script&gt;"); 
}

function renderPreview() {
    let html = "";

    satirlar.forEach(s => {

        const baslik   = `<span class="safe-html">${s.baslik}</span>`;
        const icerik   = `<span class="safe-html">${decodeUserHtml(s.icerik)}</span>`;
        const sure     = `<span class="safe-html">${s.sure}</span>`;
        const adet     = `<span class="safe-html">${s.adet}</span>`;
        const fiyatlar = renderFiyatPreview(s);

        html += `
        <div class="row g-0">
            <div class="col-4 border-end border-bottom p-0">
                <div class="satir-baslik-bar px-2 py-1 d-flex align-items-center justify-content-center bg-light"
                     style="width:100%; min-height:28px; style="font-size:13px;">
                     ${baslik}
                </div>
                <div class="p-2 d-flex align-items-center justify-content-center text-center" style="font-size:12px;">
                    ${icerik}
                </div>
            </div>

            <div class="col-2 p-2 border-end border-bottom d-flex align-items-center justify-content-center text-center"
                 style="font-size:12px;">
                ${sure}
            </div>

            <div class="col-2 p-1 border-end border-bottom d-flex align-items-center justify-content-center text-center"
                 style="font-size:12px;">
                ${adet}
            </div>

            <div class="col-4 border-bottom d-flex align-items-center justify-content-center text-center"
                 style="font-size:15px;">
                ${fiyatlar}
            </div>
        </div>
        `;
    });

    document.getElementById("dinamikSatirlar").innerHTML = html;
}


function getPeriyotEtiketi(odemeTip, index) {
    if (odemeTip === 2) {
        return index === 0 ? "1. Periyot" : "2. Periyot";
    }
    if (odemeTip === 3) {
        if (index === 0) return "1. Periyot";
        if (index === 1) return "2. Periyot";
        if (index === 2) return "3. ve 4. Periyot";
    }
    if (odemeTip === 4) {
        return `${index + 1}. Periyot`;
    }
    return "";
}

function renderFiyatPreview(s) {

    // ---- TEK KOLON (p-1) ----
    if (s.odemeTip == 1) {
        return `
             <div class="d-flex w-100 h-100 align-items-center p-2 justify-content-center">
                    <span class="safe-html">
                    <strong>$</strong>${s.fiyat[0] || ""}
                </span>
                </div>
        `;
    }

    // ---- ÇOKLU KOLON (tam kaplayan, yapışık) ----
    let cols = "";
    const colSize = 12 / s.odemeTip;
    const basliklar = getOdemeBasliklari(s.odemeTip);

    s.fiyat.forEach((f, index) => {

        cols += `
            <div class="col-${colSize} p-0 border-end h-100">

                <div class="d-flex flex-column h-100 w-100">

                    <div class="satir-baslik-bar px-2 py-1 bg-light w-100 text-center"
                         style="min-height:40px; font-size:12px; font-weight:bold;">
                        ${basliklar[index] || ""}
                    </div>

                    <div class="p-2 text-center h-100 align-content-center">
                        <strong>$</strong>${f || ""}
                    </div>

                </div>

            </div>
        `;
    });

    return `<div class="row g-0 w-100 m-0 h-100">${cols}</div>`;
}




document.querySelector("#btnWpSend").addEventListener("click", () => {
    if (!window.lastSavedPdf) {
        alert("PDF henüz oluşturulmadı!");
        return;
    }

    let number  = document.querySelector("#wpNumber").value.trim();
    let message = document.querySelector("#wpMessage").value.trim();
    let pdfPath = "https://www.dsm.web.tr/teklif/teklifler/" + window.lastSavedPdf;

    fetch("https://dsm-teklif-1.onrender.com/send-pdf", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({
            number: number,
            message: message,
            pdfPath: pdfPath
        })
    })
    .then(r => r.json())
    .then(res => {
        console.log("WP sonucu:", res);
        alert("WhatsApp gönderildi!");
    })
    .catch(err => {
        console.error("WP hata:", err);
        alert("Gönderim başarısız!");
    });
});

// AUTO UPDATE
document.querySelectorAll(".auto-update").forEach(el => {
    el.addEventListener("input", () => {
        const target = document.querySelector(el.dataset.target);
        if (target) {
            target.innerHTML = el.value.replace(/\n/g, "<br>");
        }
    });
});

// CKEDITOR
ClassicEditor
    .create(document.querySelector('#maddelerEditor'), {
        toolbar: [
            'undo', 'redo',
            '|', 'bold', 'italic', 'underline',
            '|', 'bulletedList', 'numberedList',
            '|', 'link', 'blockQuote', 'indent', 'outdent',
            '|', 'code'
        ]
    })
    .then(editor => {
        window.maddelerEditor = editor;
        editor.model.document.on('change:data', () => {
            const html = editor.getData();
            document.querySelector('#p_maddeler').innerHTML = html;
        });
    })
    .catch(error => {
        console.error(error);
    });
</script>
</body>
</html>