<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Tank Receipt</title>
    <link href="https://fonts.googleapis.com/css2?family=Almarai:wght@400;700&display=swap" rel="stylesheet">
    <style>
        body {
            direction:rtl;
            font-family: 'Almarai', sans-serif;
            margin: 20px;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            min-height: 100vh;
            background-color: #f8f9fa;
            position: relative;
        }
        .container {
            max-width: 800px;
            width: 100%;
            background: #fff;
            padding: 20px;
            box-shadow: 0 0 15px rgba(0, 0, 0, 0.1);
            border-radius: 8px;
        }
        table {
            width: 100%;
            border-collapse: collapse;
            margin-bottom: 20px;
        }
        table, th, td {
            border: 1px solid #ddd;
        }
        th, td {
            padding: 10px;
            text-align: center;
        }
        .btn {
            margin-bottom: 20px;
            margin-right: 10px;
            padding: 10px 20px;
            background-color: #007bff;
            color: white;
            border: none;
            border-radius: 5px;
            cursor: pointer;
        }
        .btn:hover {
            background-color: #0056b3;
        }
        .customer-info, .selection-type {
            margin-bottom: 20px;
              font-size: 17px;
        }
        .textarea-container {
            margin-bottom: 20px;
        }
        .background-image {
            width: 100%;
            height: auto;
            position: absolute;
            top: 0;
            left: 0;
            z-index: -1;
            opacity: 0.2;
        }
        @media print {
    @page {
        margin: 0;
    }
    body {
        margin: 0;
        white-space: pre-wrap; /* Preserve line breaks and spacing */
    }
    header, footer {
        display: none;
    }
    textarea {
        white-space: pre-wrap; /* Preserves line breaks and spacing */
        border: none; /* Remove the border for a clean print look */
        overflow: visible; /* Ensure content isn't clipped */
        resize: none; /* Prevent resizing during printing */
      }
}
    </style>
</head>
<body>
    <img src="14.jpg" class="background-image">
    <div class="container">
        <div class="selection-type">
            <label for="typeSelect">Select Type: </label>
            <select id="typeSelect" name="typeSelect">
                <option value="Invoice">فاتورة</option>
                <option value="Quotation">عرض سعر</option>
            </select>
        </div>
        <div class="customer-info">
            <label for="customerName">Customer Name: </label>
            <input type="text" id="customerName" name="customerName">
            <br>
            <label for="receiptDate">Date: </label>
            <input type="date" id="receiptDate" name="receiptDate">
        </div>
        <div class="textarea-container" id="textareaContainer"></div>
        <button class="btn" onclick="addText()">Add Text</button>
        <button class="btn" onclick="addRow()">Add Row</button>
        <table id="tankTable">
            <thead>
                <tr>
                    <th>Tank Dimension and Capacity</th>
                    <th>Qty</th>
                    <th>Sub Total</th>
                    <th>Total</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td><input type="text" name="dimension_capacity"></td>
                    <td><input type="number" name="qty"></td>
                    <td><input type="text" name="subtotal"></td>
                    <td><input type="text" name="total"></td>
                </tr>
            </tbody>
        </table>
        <button class="btn" onclick="printPDF()">Print as PDF</button>
    </div>

    <script>
        function addRow() {
            const table = document.getElementById('tankTable').getElementsByTagName('tbody')[0];
            const newRow = table.insertRow();

            const cell1 = newRow.insertCell(0);
            const cell2 = newRow.insertCell(1);
            const cell3 = newRow.insertCell(2);
            const cell4 = newRow.insertCell(3);

            cell1.innerHTML = '<input type="text" name="dimension_capacity">';
            cell2.innerHTML = '<input type="number" name="qty">';
            cell3.innerHTML = '<input type="text" name="subtotal">';
            cell4.innerHTML = '<input type="text" name="total">';
        }

        function addText() {
            const textareaContainer = document.getElementById('textareaContainer');
            const textarea = document.createElement('textarea');
             textarea.value = `يسرنا ان نقدم العرض السعري بخصوص خزانات ماء بريس ستيل (HDG) المفككة الحاصلة ٩ على شهادة المنشأ الماليزية والمفحوصة من قبل الجهاز المركزي للتقييس والسيطرة النوعية (BUREAU VERITAS) وعدة مختبرات داخل العراق </br>
 </br>
حيث يتكون الخزان من القطع المعدنية المغلونة:  
- جدران وارضية الخزان سمك 5 ملم 
- سقف الخزان سمك 3 ملم 
 </br>
قياس القطعة: 1.22 * 1.22 حسب المواصفة البريطانية BS1564:1975 </br>
 </br>
قياس الخزانات:

عدد القطع للخزان: 

 </br>
 </br>
سعر تجهيز وربط القطعة الواحدة: 215$ مع كافة ملحقات الخزان: </br>
- رباطات داخلية 
- كازكيت 
- براغي 
- سلم خارجي واحد فقط 
- سلم داخلي واحد فقط 
- 4 فتحات لدخول الماء وخروج الماء والطفح والتنظيف 
- فتحة منهول واحدة قياس 60 * 60 </br>
 </br>
 </br>
ملاحظة: </br>
- يتم تزويدكم بشهادة المنشأ الماليزية وشهادة فحص جهاز التقييس والسيطرة المركزي وبعض الشهادات المحلية </br>
- صور اعمالنا (C.V) مرفوقة بالصفحة الخاصة بنا على الفيسبوك </br>
 </br>

`


            textarea.cols = 50;
            textareaContainer.appendChild(textarea);
        }

        function printPDF() {
            const customerName = document.getElementById('customerName').value;
            const receiptDate = document.getElementById('receiptDate').value;
            const typeSelect = document.getElementById('typeSelect').value;
            const tableRows = document.querySelectorAll('#tankTable tbody tr');
            const additionalText = document.querySelector('#textareaContainer textarea')?.value || '';
            console.log(JSON.stringify(additionalText)); // Shows \n as explicit line breaks
            let tableData = '';

            tableRows.forEach(row => {
                const cells = row.querySelectorAll('input');
                if (cells[0].value && cells[1].value && cells[2].value && cells[3].value) {
                    tableData += `
                        <tr>
                            <td>${cells[0].value}</td>
                            <td>${cells[1].value}</td>
                            <td>${cells[2].value}</td>
                            <td>${cells[3].value}</td>
                        </tr>`;
                }
            });

            if (tableData) {
                const newWindow = window.open('', '', 'width=800,height=600');
                newWindow.document.write(`
                    <html>
                        <head>
                            <title>Print Receipt</title>
                            <link href="https://fonts.googleapis.com/css2?family=Almarai:wght@400;700&display=swap" rel="stylesheet">
                            <style>
                                body {
                                    direction:rtl;
                                    font-family: 'Almarai', sans-serif;
                                    margin: 20px;
                                    position: relative;
                                    display: flex;
                                    flex-direction: column;
                                    align-items: center;
                                    
                                    min-height: 85vh;
                                }
                                table {
                                    width: 100%;
                                    border-collapse: collapse;
                                    margin-bottom: 20px;
                                }
                                table, th, td {
                                    border: 1px solid black;
                                }
                                th, td {
                                    padding: 10px;
                                    text-align: center;
                                    background: rgba(255, 255, 255, 0.8);
                                }
                                .header-info {
                                    text-align: left;
                                    margin-bottom: 20px;
                                    font-size: 24px;
                                    font-weight: bold;
                                   
                                }
                                .type-title {
                                    text-align: center;
                                    font-size: 24px;
                                    font-weight: bold;
                                    margin-bottom: 20px;
                                     padding-top: 150px;
                                }
                                .additional-text {
                                    margin-bottom: 20px;
                                    text-align: right;
                                    padding-right :8px;
                                }
                                .background-image {
                                    width: 100%;
                                    height: auto;
                                    position: absolute;
                                    top: 0;
                                    left: 0;
                                    z-index: -1;
                                    
                                }
                                 @media print {
            @page {
                margin: 0;
            }
            body {
                margin: 0;
            }
            header, footer {
                display: none;
            }
        }
        .container1 {
    display: flex;
    justify-content: space-between;
    width: 100%;
}

.left1, .right1 {
    white-space: nowrap;  /* Prevents text from wrapping */
}
.left1 {
    margin-right: 60px; /* Adjust this value to control the space */
}
        
        
                            </style>
                        </head>
                        <body>
                            <img src="14.jpg" class="background-image">
                            <div class="type-title">${typeSelect}</div>
                            <div class="header-info" style="direction:ltr; width="100%" >
                            
                            <div class="container1">
    <div class="left1">
        <strong>التاريخ :</strong> ${receiptDate}
    </div>
    <div class="right1">
        
        <strong>الى : </strong> ${customerName}
    </div>
</div>
                                
                            </div>
                            <div class="additional-text">
                                ${additionalText}
                            </div>
                            <table style="direction:ltr;">
                                <thead>
                                    <tr>
                                        <th>Tank Dimension and Capacity</th>
                                        <th>Qty</th>
                                        <th>Sub Total</th>
                                        <th>Total</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    ${tableData}
                                </tbody>
                            </table>
                        </body>
                    </html>
                `);
                newWindow.document.close();
                newWindow.onload = function() {
                    newWindow.print();
                };
            } else {
                alert('Please add data to the table before printing.');
            }
        }
    </script>
</body>
</html>
