<!DOCTYPE html>
<html lang="en">
<head>
    <script async src="https://www.googletagmanager.com/gtag/js?id=G-08HXYLBJ50"></script>
    <script>
    window.dataLayer = window.dataLayer || [];
    function gtag(){dataLayer.push(arguments);}
    gtag('js', new Date());

    gtag('config', 'G-08HXYLBJ50');
    </script>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- SEO CHANGE: Updated Title -->
    <title>Free PDF Invoice Generator | Create & Download Invoices Online - Free-PDF-Invoice.com</title>

    <!-- SEO CHANGE: Meta Description -->
    <meta name="description" content="Create professional PDF invoices quickly and for free with Free-PDF-Invoice.com. Our online invoice generator is easy to use, customizable with your logo, and requires no sign-up. Download your invoice instantly!">

    <!-- SEO CHANGE: Keywords (less impactful now, but good to have a few core ones) -->
    <meta name="keywords" content="free pdf invoice, pdf invoice generator, online invoice maker, create invoice, invoice template, free invoice tool, business invoice">

    <!-- SEO CHANGE: Canonical URL -->
    <link rel="canonical" href="https://www.free-pdf-invoice.com/" />

    <!-- SEO CHANGE: Open Graph / Facebook Meta Tags -->
    <meta property="og:title" content="Free PDF Invoice Generator | Create & Download Invoices Online - Free-PDF-Invoice.com" />
    <meta property="og:description" content="Easily create professional PDF invoices online for free. Customizable, no sign-up, instant download." />
    <meta property="og:type" content="website" />
    <meta property="og:url" content="https://www.free-pdf-invoice.com/" />
    <meta property="og:image" content="https://www.free-pdf-invoice.com/og-image.png" /> <!-- Create an appealing image (e.g., 1200x630px) -->
    <meta property="og:site_name" content="Free-PDF-Invoice.com" />

    <!-- SEO CHANGE: Twitter Card Meta Tags -->
    <meta name="twitter:card" content="summary_large_image" />
    <meta name="twitter:title" content="Free PDF Invoice Generator | Create & Download Invoices Online - Free-PDF-Invoice.com" />
    <meta name="twitter:description" content="Easily create professional PDF invoices online for free. Customizable, no sign-up, instant download." />
    <meta name="twitter:image" content="https://www.free-pdf-invoice.com/twitter-image.png" /> <!-- Create an image for Twitter (can be same as og:image) -->
    <!-- If you have a Twitter handle: <meta name="twitter:site" content="@YourTwitterHandle"> -->

    <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-4630084820229876"
    crossorigin="anonymous"></script>
    <style>
        body {
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
            margin: 0;
            padding: 0;
            background-color: #f0f2f5;
            color: #333;
            line-height: 1.6;
        }

        .ad-placeholder-visual {
            background-color: #e9e9e9;
            border: 1px dashed #ccc;
            display: flex;
            align-items: center;
            justify-content: center;
            text-align: center;
            color: #777;
            font-size: 0.9em;
            box-sizing: border-box;
        }

        .ad-margin-left-container,
        .ad-margin-right-container {
            display: none;
        }

        .ad-mobile-placeholder {
            display: block;
            width: 100%;
            margin: 20px 0;
        }
        .ad-mobile-placeholder .ad-placeholder-visual {
            min-height: 50px;
            padding: 10px;
        }

        .page-grid-wrapper {
            display: grid;
            grid-template-columns: 1fr;
            grid-template-areas: "main";
            width: 100%;
        }

        .container {
            grid-area: main;
            background-color: #fff;
            margin: 20px auto;
            padding: 15px;
            border-radius: 8px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
            width: 95%;
            max-width: 800px;
            box-sizing: border-box;
        }

        /* SEO CHANGE: Added a small intro/outro text style */
        .intro-text, .footer-text {
            text-align: center;
            color: #4b4f56;
            font-size: 0.95em;
            margin-bottom: 15px;
            padding: 0 10px;
        }
        .footer-text {
            margin-top: 30px;
            font-size: 0.85em;
            border-top: 1px solid #eee;
            padding-top: 15px;
        }


        h1, h2 {
            color: #1d2129;
            text-align: center;
        }
        /* SEO CHANGE: Ensured H1 is prominent */
        h1 { margin-bottom: 5px; font-size: 2em; /* Slightly larger for primary keyword */ }
        /* SEO CHANGE: H2 to be more descriptive for SEO */
        h2 { margin-bottom: 20px; font-size: 1.2em; color: #606770; font-weight: normal;}

        .form-section {
            margin-bottom: 25px;
            padding: 15px;
            border: 1px solid #ccd0d5;
            border-radius: 5px;
            background-color: #f7f8fa;
        }
        .form-section legend {
            font-weight: bold;
            padding: 0 10px;
            color: #007bff;
            font-size: 1.1em;
        }
        .form-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            gap: 15px;
        }
        label {
            display: block;
            margin-bottom: 5px;
            font-weight: 600;
            font-size: 0.9em;
            color: #4b4f56;
        }
        input[type="text"],
        input[type="email"],
        input[type="date"],
        input[type="number"],
        textarea,
        select,
        input[type="file"] {
            width: 100%;
            padding: 10px;
            margin-bottom: 10px;
            border: 1px solid #ccd0d5;
            border-radius: 4px;
            box-sizing: border-box;
            font-size: 1em;
        }
        input[type="file"] {
            padding: 7px;
        }
        textarea {
            min-height: 70px;
            resize: vertical;
        }
        button, .button-like {
            background-color: #007bff;
            color: white;
            padding: 10px 15px;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            font-size: 1em;
            transition: background-color 0.3s;
            text-align: center;
            display: inline-block;
        }
        button:hover, .button-like:hover {
            background-color: #0056b3;
        }
        .button-secondary {
            background-color: #6c757d;
        }
        .button-secondary:hover {
            background-color: #5a6268;
        }
        .button-success { background-color: #28a745; }
        .button-success:hover { background-color: #218838; }
        .button-info { background-color: #17a2b8; }
        .button-info:hover { background-color: #138496; }

        .table-responsive {
            overflow-x: auto;
            margin-bottom: 15px;
        }
        .items-table {
            width: 100%;
            min-width: 600px;
            border-collapse: collapse;
        }
        .items-table th, .items-table td {
            border: 1px solid #ddd;
            padding: 8px;
            text-align: left;
            vertical-align: top;
        }
        .items-table th {
            background-color: #f0f2f5;
            font-size: 0.9em;
        }
        .items-table input[type="text"],
        .items-table input[type="number"] {
            margin-bottom: 0;
            padding: 8px;
            width: 100%;
            box-sizing: border-box;
        }
        .items-table .item-total {
            font-weight: bold;
        }
        .remove-item-btn {
            background-color: #dc3545;
            padding: 6px 10px;
            font-size: 0.85em;
            width: 100%;
            box-sizing: border-box;
        }
        .remove-item-btn:hover {
            background-color: #c82333;
        }
        .totals {
            text-align: right;
            margin-top: 20px;
            padding-right: 10px;
        }
        .totals p {
            font-size: 1em;
            margin: 8px 0;
        }
        .totals strong {
            display: inline-block;
            min-width: 100px;
        }
        .totals label {
            display: inline;
            margin-right: 5px;
        }
        .totals input[type="number"] {
            width: 70px;
            display: inline-block;
            padding: 8px;
        }
        .logo-preview {
            max-width: 150px;
            max-height: 80px;
            margin-top: 5px;
            border: 1px solid #ddd;
            padding: 5px;
            object-fit: contain;
        }
        .center-button {
            text-align: center;
            margin-top: 25px;
        }
        .center-button button {
            padding: 12px 25px;
            font-size: 1.1em;
            width: 100%;
            max-width: 300px;
        }
        .details-buttons {
            margin-top: 15px;
            display: flex;
            gap: 10px;
            flex-wrap: wrap;
        }
        .details-buttons button {
            flex-grow: 1;
            font-size: 0.9em;
            padding: 8px 10px;
        }
        #statusMessage {
            text-align: center;
            margin-bottom: 15px;
            padding: 10px;
            border-radius: 4px;
            font-weight: bold;
            display: none;
        }
        #statusMessage.success { color: #155724; background-color: #d4edda; border: 1px solid #c3e6cb; }
        #statusMessage.error   { color: #721c24; background-color: #f8d7da; border: 1px solid #f5c6cb; }


        @media (min-width: 1250px) {
            .page-grid-wrapper {
                grid-template-columns: 1fr minmax(auto, 800px) 1fr;
                grid-template-areas: "adleft main adright";
                justify-items: center;
                gap: 20px;
                padding: 0 20px;
            }

            .ad-margin-left-container {
                grid-area: adleft;
                display: flex;
                justify-content: flex-end;
                width: 100%;
                padding-top: 20px;
            }
            .ad-margin-right-container {
                grid-area: adright;
                display: flex;
                justify-content: flex-start;
                width: 100%;
                padding-top: 20px;
            }

            .ad-margin-left-container .ad-placeholder-visual,
            .ad-margin-right-container .ad-placeholder-visual {
                width: 160px;
                min-height: 600px;
            }

            .container {
                width: 100%;
                margin: 20px 0;
            }

            .ad-mobile-placeholder {
                display: none;
            }
        }


        @media (max-width: 768px) {
            /* SEO CHANGE: Adjust H1/H2 sizes for mobile if needed */
            h1 { font-size: 1.8em; }
            h2 { font-size: 1.1em; }
            .container {
                margin: 10px auto;
                padding: 10px;
            }
             .items-table {
                min-width: 0;
            }
            .items-table th, .items-table td {
                 padding: 6px;
            }
             .items-table input[type="text"], .items-table input[type="number"] {
                font-size: 0.95em;
            }
             .remove-item-btn {
                padding: 8px 5px;
            }
        }
        @media (max-width: 480px) {
            h1 { font-size: 1.6em; }
            h2 { font-size: 1em; }
            .form-grid {
                grid-template-columns: 1fr;
            }
            .details-buttons button,
            #addItemBtn {
                width: 100%;
                margin-bottom: 10px;
            }
            .details-buttons {
                flex-direction: column;
            }
        }
    </style>
    <!-- jsPDF Library -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.5.1/jspdf.umd.min.js"></script>
    <!-- jsPDF-AutoTable plugin -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf-autotable/3.8.2/jspdf.plugin.autotable.min.js"></script>

    <!-- SEO CHANGE: JSON-LD Schema Markup for WebApplication/Tool -->
    <script type="application/ld+json">
    {
      "@context": "https://schema.org",
      "@type": "WebApplication",
      "name": "Free PDF Invoice Generator",
      "description": "Create and download professional PDF invoices for free. Easy-to-use online tool with logo customization and instant PDF generation. Ideal for small businesses and freelancers.",
      "url": "https://www.free-pdf-invoice.com/",
      "applicationCategory": "BusinessApplication",
      "operatingSystem": "Any (Web browser)",
      "offers": {
        "@type": "Offer",
        "price": "0",
        "priceCurrency": "USD"
      },
      "keywords": "pdf invoice, free invoice generator, online invoice, create invoice, invoice maker",
      "provider": {
        "@type": "Organization",
        "name": "Free-PDF-Invoice.com",
        "url": "https://www.free-pdf-invoice.com/"
      },
      "softwareHelp": {
        "@type": "CreativeWork",
        "name": "How to use the Free PDF Invoice Generator",
        "description": "Simply fill in your company details, client information, invoice specifics, and itemized list. Then, click 'Generate PDF Invoice' to download your document."
      },
      "screenshot": "https://www.free-pdf-invoice.com/screenshot.png"  // Replace with an actual screenshot URL
    }
    </script>

</head>
<body>

    <div class="page-grid-wrapper">

        <div class="ad-margin-left-container">
            <div class="ad-placeholder-visual">
                <p>Desktop Left Ad<br>(e.g., 160x600)</p>
            </div>
        </div>

        <div class="container">
            <!-- SEO CHANGE: Updated H1 and H2 -->
            <h1>Free PDF Invoice Generator</h1>
            <h2>Create Professional PDF Invoices Quickly & Easily Online</h2>

            <!-- SEO CHANGE: Added a small introductory paragraph -->
            <p class="intro-text">
                Welcome to Free-PDF-Invoice.com! Use our simple tool to generate professional PDF invoices in minutes.
                Customize with your details, add items, and download your invoice instantly—all for free!
            </p>

            <div class="ad-mobile-placeholder" id="ad-mobile-top">
                <div class="ad-placeholder-visual">
                    <p>Mobile Ad - Top<br>(e.g., 320x50)</p>
                </div>
            </div>

            <div id="statusMessage"></div>

            <form id="invoiceForm">
                <fieldset class="form-section">
                    <legend>Your Company (Sender)</legend>
                    <div class="form-grid">
                        <div>
                            <label for="yourCompanyName">Company Name:</label>
                            <input type="text" id="yourCompanyName" name="yourCompanyName" value="Your Company LLC">
                        </div>
                        <div>
                            <label for="yourName">Your Name (Optional):</label>
                            <input type="text" id="yourName" name="yourName">
                        </div>
                        <div>
                            <label for="yourAddress">Address:</label>
                            <input type="text" id="yourAddress" name="yourAddress" value="123 Your Street, City, Country">
                        </div>
                        <div>
                            <label for="yourEmail">Email:</label>
                            <input type="email" id="yourEmail" name="yourEmail" value="you@example.com">
                        </div>
                        <div>
                            <label for="yourPhone">Phone:</label>
                            <input type="text" id="yourPhone" name="yourPhone" value="+1 234 567 890">
                        </div>
                        <div>
                            <label for="yourLogo">Your Logo (Optional):</label>
                            <input type="file" id="yourLogo" name="yourLogo" accept="image/*">
                            <!-- SEO CHANGE: Slightly more descriptive alt text -->
                            <img id="logoPreview" src="#" alt="Your company logo preview for the invoice" class="logo-preview" style="display:none;">
                        </div>
                    </div>
                    <div class="details-buttons">
                        <button type="button" id="saveMyDetailsBtn" class="button-success">Save My Details</button>
                        <button type="button" id="loadMyDetailsBtn" class="button-info">Load My Details</button>
                    </div>
                </fieldset>

                <fieldset class="form-section">
                    <legend>Client (Recipient)</legend>
                    <div class="form-grid">
                        <div>
                            <label for="clientCompanyName">Company Name:</label>
                            <input type="text" id="clientCompanyName" name="clientCompanyName" value="Client Corp.">
                        </div>
                        <div>
                            <label for="clientName">Contact Name (Optional):</label>
                            <input type="text" id="clientName" name="clientName">
                        </div>
                        <div>
                            <label for="clientAddress">Address:</label>
                            <input type="text" id="clientAddress" name="clientAddress" value="456 Client Avenue, Town, Country">
                        </div>
                        <div>
                            <label for="clientEmail">Email:</label>
                            <input type="email" id="clientEmail" name="clientEmail" value="client@example.com">
                        </div>
                    </div>
                </fieldset>

                <fieldset class="form-section">
                    <legend>Invoice Details</legend>
                    <div class="form-grid">
                        <div>
                            <label for="invoiceNumber">Invoice Number:</label>
                            <input type="text" id="invoiceNumber" name="invoiceNumber" value="INV-2024-001">
                        </div>
                        <div>
                            <label for="invoiceDate">Invoice Date:</label>
                            <input type="date" id="invoiceDate" name="invoiceDate">
                        </div>
                        <div>
                            <label for="dueDate">Due Date:</label>
                            <input type="date" id="dueDate" name="dueDate">
                        </div>
                         <div>
                            <label for="currencySymbol">Currency Symbol:</label>
                            <input type="text" id="currencySymbol" name="currencySymbol" value="$" style="width: 60px;">
                        </div>
                    </div>
                </fieldset>

                <div class="ad-mobile-placeholder" id="ad-mobile-mid">
                    <div class="ad-placeholder-visual">
                        <p>Mobile Ad - Mid<br>(e.g., 300x250)</p>
                    </div>
                </div>

                <fieldset class="form-section">
                    <legend>Items</legend>
                    <div class="table-responsive">
                        <table id="itemsTable" class="items-table">
                            <thead>
                                <tr>
                                    <th>Description</th>
                                    <th>Quantity</th>
                                    <th>Unit Price</th>
                                    <th>Total</th>
                                    <th>Action</th>
                                </tr>
                            </thead>
                            <tbody>
                                <!-- Item rows will be added here -->
                            </tbody>
                        </table>
                    </div>
                    <button type="button" id="addItemBtn" class="button-secondary">Add Item</button>
                </fieldset>

                <fieldset class="form-section">
                    <legend>Summary & Notes</legend>
                    <div class="totals">
                        <p>Subtotal: <span id="subtotalDisplay">0.00</span></p>
                        <div>
                            <label for="taxRate">Tax Rate (%):</label>
                            <input type="number" id="taxRate" name="taxRate" value="0" min="0" step="0.01">
                        </div>
                        <p>Tax Amount: <span id="taxAmountDisplay">0.00</span></p>
                        <p><strong>Total: <span id="grandTotalDisplay">0.00</span></strong></p>
                    </div>
                    <div>
                        <label for="notes">Notes/Payment Instructions:</label>
                        <textarea id="notes" name="notes">Thank you for your business! Payment is due within 15 days. Use this section for bank details, payment terms, or any other notes for your client.</textarea>
                    </div>
                </fieldset>

                <div class="ad-mobile-placeholder" id="ad-mobile-bottom">
                     <div class="ad-placeholder-visual">
                        <p>Mobile Ad - Bottom<br>(e.g., 300x250)</p>
                    </div>
                </div>

                <div class="center-button">
                    <button type="button" id="generatePdfBtn">Generate PDF Invoice</button>
                </div>
            </form>

            <!-- SEO CHANGE: Added a small footer text area for more content -->
            <div class="footer-text">
                <p>© <span id="currentYear"></span> Free-PDF-Invoice.com - Your go-to free online PDF invoice generator. Create unlimited invoices for your business or freelance work. Fast, simple, and effective.</p>
                <p>Need a quick invoice template? Our tool helps you make a PDF invoice in seconds. Supports company logos, tax calculations, and custom notes.</p>
            </div>
        </div>

        <div class="ad-margin-right-container">
            <div class="ad-placeholder-visual">
                <p>Desktop Right Ad<br>(e.g., 160x600)</p>
            </div>
        </div>

    </div>

    <script>
        // JavaScript remains the same as your previous version
        if (typeof window.jspdf === 'undefined') {
            console.error("Error: jsPDF library not loaded. Ensure you are online or libraries are locally hosted.");
            const statusDiv = document.getElementById('statusMessage');
            if (statusDiv) {
                statusDiv.textContent = "Error: PDF library not loaded. Please check internet connection.";
                statusDiv.className = 'error';
                statusDiv.style.display = 'block';
            }
        }
        const { jsPDF } = window.jspdf || {};

        document.addEventListener('DOMContentLoaded', function () {
            // SEO CHANGE: Set current year in footer
            const yearSpan = document.getElementById('currentYear');
            if(yearSpan) yearSpan.textContent = new Date().getFullYear();

            const invoiceForm = document.getElementById('invoiceForm');
            const itemsTableBody = document.getElementById('itemsTable').querySelector('tbody');
            const addItemBtn = document.getElementById('addItemBtn');
            const generatePdfBtn = document.getElementById('generatePdfBtn');
            const taxRateInput = document.getElementById('taxRate');
            const currencySymbolInput = document.getElementById('currencySymbol');
            const statusMessageDiv = document.getElementById('statusMessage');

            const MY_DETAILS_KEY = 'invoiceGeneratorMyDetails_v1';
            const saveMyDetailsBtn = document.getElementById('saveMyDetailsBtn');
            const loadMyDetailsBtn = document.getElementById('loadMyDetailsBtn');
            
            let logoBase64 = null;
            const logoInput = document.getElementById('yourLogo');
            const logoPreview = document.getElementById('logoPreview');

            function showStatusMessage(message, type = 'success', duration = 3000) {
                statusMessageDiv.textContent = message;
                statusMessageDiv.className = type;
                statusMessageDiv.style.display = 'block';
                setTimeout(() => {
                    statusMessageDiv.style.display = 'none';
                }, duration);
            }

            try {
                const today = new Date().toISOString().split('T')[0];
                document.getElementById('invoiceDate').value = today;
                const dueDate = new Date();
                dueDate.setDate(dueDate.getDate() + 15);
                document.getElementById('dueDate').value = dueDate.toISOString().split('T')[0];
            } catch (e) { console.error("Error setting dates:", e); }


            logoInput.addEventListener('change', function(event) {
                const file = event.target.files[0];
                if (file) {
                    const reader = new FileReader();
                    reader.onload = function(e) {
                        logoPreview.src = e.target.result;
                        logoPreview.style.display = 'block';
                        logoBase64 = e.target.result;
                    }
                    reader.onerror = function() {
                        showStatusMessage('Error reading logo file.', 'error');
                        logoPreview.style.display = 'none';
                        logoPreview.src = "#";
                        logoBase64 = null;
                    }
                    reader.readAsDataURL(file);
                } else {
                    logoPreview.style.display = 'none';
                    logoPreview.src = "#";
                    logoBase64 = null;
                }
            });

            function addItemRow(description = "Service/Product", quantity = 1, unitPrice = 0) {
                const row = itemsTableBody.insertRow();
                row.innerHTML = `
                    <td><input type="text" class="item-description" value="${description}" placeholder="Item description"></td>
                    <td><input type="number" class="item-quantity" value="${quantity}" min="0" step="any"></td>
                    <td><input type="number" class="item-unit-price" value="${unitPrice}" min="0" step="0.01"></td>
                    <td><span class="item-total">0.00</span></td>
                    <td><button type="button" class="remove-item-btn">Remove</button></td>
                `;
                row.querySelector('.remove-item-btn').addEventListener('click', function () {
                    row.remove();
                    updateTotals();
                });
                ['.item-quantity', '.item-unit-price', '.item-description'].forEach(selector => {
                    row.querySelector(selector).addEventListener('input', updateTotals);
                });
                updateTotals();
            }

            function updateTotals() {
                let subtotal = 0;
                const currency = currencySymbolInput.value || "$";
                itemsTableBody.querySelectorAll('tr').forEach(row => {
                    const quantity = parseFloat(row.querySelector('.item-quantity').value) || 0;
                    const unitPrice = parseFloat(row.querySelector('.item-unit-price').value) || 0;
                    const itemTotal = quantity * unitPrice;
                    row.querySelector('.item-total').textContent = itemTotal.toFixed(2);
                    subtotal += itemTotal;
                });

                const taxRate = parseFloat(taxRateInput.value) || 0;
                const taxAmount = subtotal * (taxRate / 100);
                const grandTotal = subtotal + taxAmount;

                document.getElementById('subtotalDisplay').textContent = `${currency}${subtotal.toFixed(2)}`;
                document.getElementById('taxAmountDisplay').textContent = `${currency}${taxAmount.toFixed(2)}`;
                document.getElementById('grandTotalDisplay').textContent = `${currency}${grandTotal.toFixed(2)}`;
            }

            addItemBtn.addEventListener('click', () => addItemRow());
            taxRateInput.addEventListener('input', updateTotals);
            currencySymbolInput.addEventListener('input', updateTotals);


            function saveMyCompanyDetails() {
                try {
                    const details = {
                        companyName: document.getElementById('yourCompanyName').value,
                        yourName: document.getElementById('yourName').value,
                        address: document.getElementById('yourAddress').value,
                        email: document.getElementById('yourEmail').value,
                        phone: document.getElementById('yourPhone').value,
                        logoDataUrl: logoBase64
                    };
                    localStorage.setItem(MY_DETAILS_KEY, JSON.stringify(details));
                    showStatusMessage('Your company details saved!', 'success');
                } catch (e) {
                    console.error("Error saving details:", e);
                    showStatusMessage('Could not save details. Storage might be full or unavailable.', 'error');
                }
            }

            function loadMyCompanyDetails(isAutoLoad = false) {
                try {
                    const savedDetails = localStorage.getItem(MY_DETAILS_KEY);
                    if (savedDetails) {
                        const details = JSON.parse(savedDetails);
                        document.getElementById('yourCompanyName').value = details.companyName || document.getElementById('yourCompanyName').value;
                        document.getElementById('yourName').value = details.yourName || document.getElementById('yourName').value;
                        document.getElementById('yourAddress').value = details.address || document.getElementById('yourAddress').value;
                        document.getElementById('yourEmail').value = details.email || document.getElementById('yourEmail').value;
                        document.getElementById('yourPhone').value = details.phone || document.getElementById('yourPhone').value;

                        if (details.logoDataUrl) {
                            logoBase64 = details.logoDataUrl;
                            logoPreview.src = details.logoDataUrl;
                            logoPreview.style.display = 'block';
                        } else {
                            logoPreview.style.display = 'none';
                            logoPreview.src = "#";
                            logoBase64 = null;
                        }
                        if (!isAutoLoad) {
                            showStatusMessage('Your company details loaded.', 'success');
                        } else {
                             console.log('Auto-loaded company details.');
                        }
                    } else {
                        if (!isAutoLoad) {
                            showStatusMessage('No saved company details found.', 'error');
                        }
                    }
                } catch (e) {
                    console.error("Error loading details:", e);
                    if (!isAutoLoad) showStatusMessage('Error loading details.', 'error');
                }
            }

            if (saveMyDetailsBtn) saveMyDetailsBtn.addEventListener('click', saveMyCompanyDetails);
            if (loadMyDetailsBtn) loadMyDetailsBtn.addEventListener('click', () => loadMyCompanyDetails(false));
            
            loadMyCompanyDetails(true);
            addItemRow("Example Service", 1, 100);


            generatePdfBtn.addEventListener('click', function () {
                if (typeof jsPDF === 'undefined' || !jsPDF.API || typeof jsPDF.API.autoTable === 'undefined') {
                    showStatusMessage("PDF generation library not ready. Please check connection or try again.", "error");
                    console.error("jsPDF or jsPDF-AutoTable not loaded.");
                    return;
                }

                try {
                    const doc = new jsPDF();
                    const currency = currencySymbolInput.value || "$";
                    
                    // Constants used throughout PDF generation
                    const pageMargin = 15;
                    const contentWidth = doc.internal.pageSize.getWidth() - 2 * pageMargin;

                    // ---- START OF MODIFIED SECTION FOR YOUR COMPANY DETAILS ----
                    let currentY = 15; // Initial Y position for content on the page

                    // Sender (Your Company) Details
                    const yourCompanyX = pageMargin;
                    let detailsX = yourCompanyX; // X-coordinate for text, may shift if logo is present
                    const companyNameVal = document.getElementById('yourCompanyName').value || "Your Company";
                    const yourNameVal = document.getElementById('yourName').value;
                    const yourAddressVal = document.getElementById('yourAddress').value;
                    const yourEmailVal = `Email: ${document.getElementById('yourEmail').value}`;
                    const yourPhoneVal = `Phone: ${document.getElementById('yourPhone').value}`;
                    
                    const smallTextLineHeight = 5;        // Line height for font size 9/10 details
                    const afterLargeCompanyNameGap = 7;   // Gap after a large company name (no logo)
                    const afterMediumCompanyNameGap = 6;  // Gap after medium company name (next to logo)
                    const companyNameTopOffsetWithLogo = 4; // Fine-tuning Y pos of company name next to logo for better visual
                    const sectionEndSpacing = 10;         // Space after the entire sender block

                    if (logoBase64) {
                        try {
                            const imgProps = doc.getImageProperties(logoBase64);
                            const logoMaxWidth = 40; 
                            const logoMaxHeight = 25; 
                            
                            let finalLogoWidth = imgProps.width;
                            let finalLogoHeight = imgProps.height;

                            // Scale logo to fit within bounds while maintaining aspect ratio
                            if (finalLogoWidth > logoMaxWidth) {
                                finalLogoHeight = (finalLogoHeight * logoMaxWidth) / finalLogoWidth;
                                finalLogoWidth = logoMaxWidth;
                            }
                            if (finalLogoHeight > logoMaxHeight) {
                                finalLogoWidth = (finalLogoWidth * logoMaxHeight) / finalLogoHeight;
                                finalLogoHeight = logoMaxHeight;
                            }

                            doc.addImage(logoBase64, imgProps.format || 'PNG', yourCompanyX, currentY, finalLogoWidth, finalLogoHeight);
                            
                            detailsX = yourCompanyX + finalLogoWidth + 5; // Text starts to the right of the logo + a small gap
                            
                            let textBlockCurrentY = currentY; // Y position for the text block next to the logo

                            // Print Company Name (medium size, bold)
                            doc.setFontSize(12);
                            doc.setFont(undefined, 'bold');
                            const companyNameYPos = textBlockCurrentY + companyNameTopOffsetWithLogo;
                            doc.text(companyNameVal, detailsX, companyNameYPos);
                            textBlockCurrentY = companyNameYPos + afterMediumCompanyNameGap; 
                            
                            // Print Other Details (small size, normal)
                            doc.setFontSize(9);
                            doc.setFont(undefined, 'normal');
                            let detailsWerePrinted = false; // To track if any detail line is printed
                            if (yourNameVal) { doc.text(yourNameVal, detailsX, textBlockCurrentY); textBlockCurrentY += smallTextLineHeight; detailsWerePrinted = true;}
                            // Always print address, email, phone even if empty, to maintain structure, or check if they exist
                            doc.text(yourAddressVal, detailsX, textBlockCurrentY); textBlockCurrentY += smallTextLineHeight; detailsWerePrinted = true;
                            doc.text(yourEmailVal, detailsX, textBlockCurrentY); textBlockCurrentY += smallTextLineHeight; detailsWerePrinted = true;
                            doc.text(yourPhoneVal, detailsX, textBlockCurrentY); textBlockCurrentY += smallTextLineHeight; detailsWerePrinted = true;

                            const logoBottomY = currentY + finalLogoHeight;
                            // If details were printed, textBlockCurrentY is now at the baseline for the *next* line.
                            // So, the actual bottom of the text is textBlockCurrentY - smallTextLineHeight.
                            // If no details were printed, the bottom is the company name's baseline.
                            const textBlockBottomY = detailsWerePrinted ? (textBlockCurrentY - smallTextLineHeight) : companyNameYPos;
                            currentY = Math.max(logoBottomY, textBlockBottomY) + sectionEndSpacing;

                        } catch (e) {
                            console.error("Error adding logo, falling back to text only for sender:", e);
                            currentY = 15; // Reset Y in case of error mid-logo processing
                            doc.setFontSize(16);
                            doc.setFont(undefined, 'bold');
                            doc.text(companyNameVal, yourCompanyX, currentY);
                            currentY += afterLargeCompanyNameGap;
                            
                            doc.setFontSize(9);
                            doc.setFont(undefined, 'normal');
                            if (yourNameVal) { doc.text(yourNameVal, yourCompanyX, currentY); currentY += smallTextLineHeight; }
                            doc.text(yourAddressVal, yourCompanyX, currentY); currentY += smallTextLineHeight;
                            doc.text(yourEmailVal, yourCompanyX, currentY); currentY += smallTextLineHeight;
                            doc.text(yourPhoneVal, yourCompanyX, currentY); 
                            currentY += sectionEndSpacing; // Add spacing after the last line
                        }
                    } else {
                        // No logo: Print company name large, then details below
                        doc.setFontSize(16);
                        doc.setFont(undefined, 'bold');
                        doc.text(companyNameVal, yourCompanyX, currentY);
                        currentY += afterLargeCompanyNameGap;
                        
                        doc.setFontSize(9);
                        doc.setFont(undefined, 'normal');
                        if (yourNameVal) { doc.text(yourNameVal, yourCompanyX, currentY); currentY += smallTextLineHeight; }
                        doc.text(yourAddressVal, yourCompanyX, currentY); currentY += smallTextLineHeight;
                        doc.text(yourEmailVal, yourCompanyX, currentY); currentY += smallTextLineHeight;
                        doc.text(yourPhoneVal, yourCompanyX, currentY); 
                        currentY += sectionEndSpacing; // Add spacing after the last line
                    }
                    // ---- END OF MODIFIED SECTION FOR YOUR COMPANY DETAILS ----

                    // Invoice Details (top right)
                    const invoiceDetailsX = doc.internal.pageSize.getWidth() - pageMargin;
                    let invoiceDetailsY = 15; // Y position for "INVOICE" and its details
                    
                    doc.setFontSize(18);
                    doc.setFont(undefined, 'bold');
                    doc.text("INVOICE", invoiceDetailsX, invoiceDetailsY, { align: 'right' });
                    doc.setFont(undefined, 'normal');
                    invoiceDetailsY += 7;

                    doc.setFontSize(10);
                    doc.text(`Invoice #: ${document.getElementById('invoiceNumber').value}`, invoiceDetailsX, invoiceDetailsY, { align: 'right' }); invoiceDetailsY += 5;
                    doc.text(`Date: ${document.getElementById('invoiceDate').value}`, invoiceDetailsX, invoiceDetailsY, { align: 'right' }); invoiceDetailsY += 5;
                    doc.text(`Due Date: ${document.getElementById('dueDate').value}`, invoiceDetailsX, invoiceDetailsY, { align: 'right' });
                    
                    // currentY is now the bottom of the sender block (left side).
                    // invoiceDetailsY is now the bottom of the invoice header block (right side).
                    // The next section (BILL TO) should start below both.
                    currentY = Math.max(currentY, invoiceDetailsY + sectionEndSpacing); // Use sectionEndSpacing for consistency


                    // BILL TO (Client Details)
                    doc.setFontSize(10);
                    doc.setFont(undefined, 'bold');
                    doc.text("BILL TO:", pageMargin, currentY);
                    doc.setFont(undefined, 'normal');
                    currentY += smallTextLineHeight + 2; // Slightly more space after "BILL TO:"
                    doc.text(document.getElementById('clientCompanyName').value, pageMargin, currentY); currentY += smallTextLineHeight;
                    const clientNameVal = document.getElementById('clientName').value;
                    if (clientNameVal) { doc.text(clientNameVal, pageMargin, currentY); currentY += smallTextLineHeight; }
                    doc.text(document.getElementById('clientAddress').value, pageMargin, currentY); currentY += smallTextLineHeight;
                    doc.text(document.getElementById('clientEmail').value, pageMargin, currentY); currentY += sectionEndSpacing; // Space before table

                    // Items Table
                    const head = [['Description', 'Qty', 'Unit Price', 'Total']];
                    const body = [];
                    itemsTableBody.querySelectorAll('tr').forEach(row => {
                        const description = row.querySelector('.item-description').value;
                        const quantity = parseFloat(row.querySelector('.item-quantity').value) || 0;
                        const unitPrice = parseFloat(row.querySelector('.item-unit-price').value) || 0;
                        body.push([
                            description,
                            quantity.toFixed(2),
                            `${currency}${unitPrice.toFixed(2)}`,
                            `${currency}${(quantity * unitPrice).toFixed(2)}`
                        ]);
                    });

                    doc.autoTable({
                        startY: currentY,
                        head: head,
                        body: body,
                        theme: 'striped',
                        headStyles: { fillColor: [22, 160, 133], textColor: 255 },
                        margin: { left: pageMargin, right: pageMargin },
                        columnStyles: {
                            0: { cellWidth: 'auto' }, // Description column
                            1: { halign: 'right', cellWidth: 20 },
                            2: { halign: 'right', cellWidth: 30 },
                            3: { halign: 'right', cellWidth: 30 }
                        },
                        didDrawPage: function (data) {}
                    });
                    currentY = doc.lastAutoTable.finalY + 10;

                    // Totals Section
                    const totalsXAlignRight = doc.internal.pageSize.getWidth() - pageMargin;
                    const totalsLabelX = totalsXAlignRight - 50; // Position for labels like "Subtotal:"
                    doc.setFontSize(10);

                    doc.text(`Subtotal:`, totalsLabelX, currentY, {align: 'left'});
                    doc.text(`${document.getElementById('subtotalDisplay').textContent}`, totalsXAlignRight, currentY, { align: 'right' });
                    currentY += 6;

                    const taxRateVal = parseFloat(taxRateInput.value) || 0;
                    if (taxRateVal > 0) {
                        doc.text(`Tax (${taxRateVal}%):`, totalsLabelX, currentY, {align: 'left'});
                        doc.text(`${document.getElementById('taxAmountDisplay').textContent}`, totalsXAlignRight, currentY, { align: 'right' });
                        currentY += 6;
                    }

                    doc.setFontSize(12);
                    doc.setFont(undefined, 'bold');
                    doc.text(`Total:`, totalsLabelX, currentY, {align: 'left'});
                    doc.text(`${document.getElementById('grandTotalDisplay').textContent}`, totalsXAlignRight, currentY, { align: 'right' });
                    currentY += 10;
                    doc.setFont(undefined, 'normal');

                    // Notes Section
                    const notes = document.getElementById('notes').value;
                    if (notes) {
                        doc.setFontSize(10);
                        doc.text("Notes & Payment Instructions:", pageMargin, currentY);
                        currentY += 5;
                        const noteLines = doc.splitTextToSize(notes, contentWidth);
                        doc.text(noteLines, pageMargin, currentY);
                        // currentY would be updated by the height of noteLines if needed for more content below
                    }

                    const invoiceNum = document.getElementById('invoiceNumber').value.replace(/[^a-z0-9]/gi, '_') || "invoice";
                    doc.save(`${invoiceNum}.pdf`);
                } catch (e) {
                    console.error("Error generating PDF:", e);
                    showStatusMessage("An error occurred while generating the PDF.", "error");
                }
            });
        });
    </script>

</body>
</html>