<?php
// যেকোনো ফোল্ডার থেকে সেশন এবং গ্লোবাল পাথ লোড করার জন্য
if (session_status() === PHP_SESSION_NONE) { session_start(); }
$doc_root = $_SERVER['DOCUMENT_ROOT']; // ওয়েবসাইটের রুট ডিরেক্টরি বের করা

// ----------------------------------------------------------------------
// 100% Advanced SEO Setup (Targeted Keywords: free invoice generator, invoice generator free)
// ----------------------------------------------------------------------
$page_title = "Free Invoice Generator | Create Professional PDF Invoices Online";
$page_description = "Use the best free invoice generator to create custom invoices in seconds. Download as PDF, email to clients, and manage your billing easily. 100% invoice generator free online tool.";

// Header File Include (যেকোনো ফোল্ডার থেকে কাজ করবে)
if (file_exists($doc_root . '/includes/header.php')) {
    require_once $doc_root . '/includes/header.php';
} elseif (file_exists($doc_root . '/header.php')) {
    require_once $doc_root . '/header.php';
} else {
    // Fallback
    echo "Header file not found!";
}

// লগইন চেক করা (যাতে লগইন করা ইউজারের ডাটা সেভ করা যায়)
$is_logged_in = isset($_SESSION['user_logged_in']) && $_SESSION['user_logged_in'] === true;
$current_user_id = $is_logged_in ? $_SESSION['user_id'] : null;
?>

<!-- External CSS Linked (Absolute Path - যেকোনো ফোল্ডার থেকে পাবে) -->
<link rel="stylesheet" href="/assets/css/invoice.css">

<div class="container">
    <!-- Form Action-এ Absolute Path (/) দেওয়া হয়েছে, যাতে যেকোনো ফোল্ডার থেকে সাবমিট করলে মূল ফাইলে যায় -->
    <form id="invoiceForm" action="/generate_pdf.php" method="POST" enctype="multipart/form-data">
        
        <!-- Hidden Configuration Inputs -->
        <input type="hidden" name="currency_symbol" id="currencyInput" value="$">
        <input type="hidden" name="theme_color" id="themeInput" value="#10b981"> <!-- Updated to Primary Green -->
        <input type="hidden" name="tax_type" id="taxTypeInput" value="percent">
        <input type="hidden" name="discount_type" id="discountTypeInput" value="percent">
        
        <!-- ইউজার লগইন থাকলে তার আইডি ফর্মে পাঠানো হচ্ছে ডাটাবেসে সেভ করার জন্য -->
        <input type="hidden" name="user_id" value="<?php echo htmlspecialchars($current_user_id ?? '', ENT_QUOTES, 'UTF-8'); ?>">
        <input type="hidden" name="is_logged_in" value="<?php echo $is_logged_in ? '1' : '0'; ?>">

        <div class="invoice-card" id="print-area">
            
            <label class="logo-placeholder" id="logoPreviewContainer" style="cursor:pointer; display:flex; flex-direction:column; background-size:contain; background-repeat:no-repeat; background-position:center; height: 100px; border: 1px dashed #cbd5e1; align-items:center; justify-content:center; border-radius:8px; margin-bottom:20px; transition: 0.3s; background-color: #f8fafc;">
                <div id="logoTextWrapper" style="color:#64748b; font-weight: 500;"><i class="fa fa-camera" style="font-size: 20px; margin-bottom: 5px; color: var(--primary-green);"></i> <br> Add Logo</div>
                <input type="file" name="logo" id="logoInput" accept="image/*" style="display:none;">
            </label>

            <div class="edit-label-wrapper" style="margin-bottom: 25px;">
                <input type="text" name="label_invoice" class="edit-label-input title-color-sync" value="INVOICE" style="font-size: 36px; font-weight: 700; color: var(--app-theme-color); margin: 0; padding: 0; letter-spacing: 1px;">
                <i class="fas fa-pencil-alt" style="font-size: 16px;"></i>
            </div>

            <div class="input-group-invoice" style="width: 150px; border: 1px solid #e2e8f0; border-radius: 6px; padding: 5px 10px;">
                <span style="color:#94a3b8; margin-right:5px; font-weight: 600;">#</span>
                <input type="text" name="invoice_number" value="" placeholder="1" style="border: none; outline: none; font-weight: 600; width: 100%;">
            </div>

            <div style="display: flex; flex-direction: column; gap: 5px; margin-bottom: 20px; margin-top: 20px;">
                <div class="edit-label-wrapper" style="width: 100%;">
                    <input type="text" name="label_from" class="edit-label-input" value="From" style="font-weight: 700; font-size: 14px; color: #334155;">
                    <i class="fas fa-pencil-alt"></i>
                </div>
                <textarea name="from_text" id="fromText" class="text-area-box calc-input auto-save" rows="1" placeholder="Who is this from?"></textarea>
            </div>
            
            <div style="display: flex; flex-direction: column; gap: 5px; margin-bottom: 20px;">
                <div class="edit-label-wrapper" style="width: 100%;">
                    <input type="text" name="label_to" class="edit-label-input" value="To" style="font-weight: 700; font-size: 14px; color: #334155;">
                    <i class="fas fa-pencil-alt"></i>
                </div>
                <textarea name="to_text" class="text-area-box calc-input" rows="1" placeholder="Who is this to?"></textarea>
            </div>

            <textarea name="optional_text" class="text-area-box calc-input" rows="1" placeholder="(optional)"></textarea>

            <!-- Invoice Details -->
            <div class="invoice-details-grid" style="display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 15px; margin-top: 20px; margin-bottom: 30px;">
                <div class="info-row">
                    <div class="edit-label-wrapper">
                        <input type="text" name="label_date" class="edit-label-input" value="Date">
                        <i class="fas fa-pencil-alt"></i>
                    </div>
                    <input type="date" name="date" class="info-input" value="<?php echo date('Y-m-d'); ?>">
                </div>
                <div class="info-row">
                    <div class="edit-label-wrapper">
                        <input type="text" name="label_terms" class="edit-label-input" value="Payment Terms">
                        <i class="fas fa-pencil-alt"></i>
                    </div>
                    <input type="text" name="payment_terms" class="info-input" value="" placeholder="e.g. Net 15">
                </div>
                <div class="info-row">
                    <div class="edit-label-wrapper">
                        <input type="text" name="label_due" class="edit-label-input" value="Due Date">
                        <i class="fas fa-pencil-alt"></i>
                    </div>
                    <input type="date" name="due_date" class="info-input">
                </div>
                <div class="info-row">
                    <div class="edit-label-wrapper">
                        <input type="text" name="label_po" class="edit-label-input" value="PO Number">
                        <i class="fas fa-pencil-alt"></i>
                    </div>
                    <input type="text" name="po_number" class="info-input" value="" placeholder="e.g. 2872575341">
                </div>
            </div>

            <!-- Items Engine -->
            <div id="itemsWrapper">
                <div class="item-container" style="background: #f8fafc; padding: 15px; border-radius: 8px; border: 1px solid #e2e8f0; margin-bottom: 15px;">
                    <div class="item-header" style="display: flex; justify-content: space-between; margin-bottom: 10px; font-size: 13px; color: var(--text-muted); font-weight: 600;">
                        <span>Item</span>
                        <div>Amount: <span class="item-amount-top dyn-curr">$0.00</span> <span class="remove-item" onclick="removeItem(this)" style="margin-left:15px; cursor:pointer; color:#ef4444; font-weight:bold; font-size:18px; display:none;">&times;</span></div>
                    </div>
                    <div class="item-inputs" style="display: flex; gap: 10px; margin-bottom: 10px;">
                        <div style="position:relative; flex:1;">
                            <span class="dyn-curr-sym" style="position:absolute; left:12px; top:10px; color:#64748b; font-weight: 600;">$</span>
                            <input type="number" name="item_rate[]" class="input-sm calc-input item-rate" style="padding-left:30px; width: 100%; box-sizing: border-box;" value="" placeholder="Rate" step="0.01">
                        </div>
                        <div style="display:flex; align-items:center; gap:8px;">
                            <span style="color:#94a3b8; font-weight: bold;">&times;</span>
                            <input type="number" name="item_qty[]" class="input-sm calc-input item-qty" value="" placeholder="Qty" style="width:70px;" min="1">
                        </div>
                    </div>
                    <textarea name="item_desc[]" class="text-area-box calc-input" rows="1" placeholder="Description of item/service..." style="margin-bottom: 0; background: #ffffff;"></textarea>
                </div>
            </div>

            <button type="button" class="btn-line-item title-color-sync-bg" onclick="addLineItem()" style="color:var(--app-theme-color); border:1.5px dashed var(--app-theme-color); background:#ecfdf5; padding:10px 20px; border-radius:6px; font-weight:600; cursor:pointer; margin-top:5px; transition:0.3s; width: 100%; display: flex; justify-content: center; align-items: center; gap: 8px;">
                <i class="fa fa-plus-circle"></i> Add Line Item
            </button>

            <!-- Summary Engine Custom Design -->
            <div class="summary-container" style="display: flex; flex-direction: column; align-items: flex-end; margin-top: 40px;">
                
                <div class="summary-row" style="display:flex; justify-content:space-between; width:100%; max-width:320px; margin-bottom:15px; align-items:center;">
                    <div class="edit-label-wrapper">
                        <input type="text" name="label_subtotal" class="edit-label-input" value="Subtotal" style="text-align: right; width: 100px; font-weight: 500;">
                    </div>
                    <span id="subtotalDisplay" class="dyn-curr" style="font-weight: 600;">$0.00</span>
                </div>

                <div class="action-links" id="actionLinksContainer" style="display: flex; gap: 15px; margin-bottom: 20px; color: var(--app-theme-color); font-weight: 500; font-size: 14px;">
                    <span id="addDiscountBtn" onclick="showRow('discount')" style="cursor: pointer;"><i class="fa fa-plus"></i> Discount</span>
                    <span id="addTaxBtn" onclick="showRow('tax')" style="cursor: pointer;"><i class="fa fa-plus"></i> Tax</span>
                    <span id="addShippingBtn" onclick="showRow('shipping')" style="cursor: pointer;"><i class="fa fa-plus"></i> Shipping</span>
                </div>

                <!-- Discount Row -->
                <div class="summary-row" id="row-discount" style="display:none; justify-content:space-between; width:100%; max-width:320px; margin-bottom:12px; align-items:center;">
                    <div class="edit-label-wrapper">
                        <input type="text" name="label_discount" class="edit-label-input" value="Discount" style="text-align: right; width: 100px;">
                    </div>
                    <div style="display:flex; align-items:center; gap: 10px;">
                        <div class="summary-input-group" style="display: flex; border: 1px solid #e2e8f0; border-radius: 6px; overflow: hidden;">
                            <input type="number" name="discount_amount" id="discountInput" class="calc-input" value="0" step="0.01" style="border: none; width: 70px; padding: 8px; text-align: center;">
                            <span class="indicator" id="discountSym" style="background: #f1f5f9; padding: 8px 12px; border-left: 1px solid #e2e8f0; color: #475569; font-weight: 600;">%</span>
                            <button type="button" class="toggle-btn" onclick="toggleCalcType('discount')" style="border: none; background: #e2e8f0; cursor: pointer; padding: 0 10px;"><i class="fa fa-sync-alt" style="color: #475569;"></i></button>
                        </div>
                        <span class="remove-row-btn" onclick="hideRow('discount')" style="cursor: pointer; color: #ef4444; font-size: 20px;">&times;</span>
                    </div>
                </div>

                <!-- Tax Row -->
                <div class="summary-row" id="row-tax" style="display:none; justify-content:space-between; width:100%; max-width:320px; margin-bottom:12px; align-items:center;">
                    <div class="edit-label-wrapper">
                        <input type="text" name="label_tax" class="edit-label-input" value="Tax" style="text-align: right; width: 100px;">
                    </div>
                    <div style="display:flex; align-items:center; gap: 10px;">
                        <div class="summary-input-group" style="display: flex; border: 1px solid #e2e8f0; border-radius: 6px; overflow: hidden;">
                            <input type="number" name="tax_amount" id="taxInput" class="calc-input" value="0" step="0.01" style="border: none; width: 70px; padding: 8px; text-align: center;">
                            <span class="indicator" id="taxSym" style="background: #f1f5f9; padding: 8px 12px; border-left: 1px solid #e2e8f0; color: #475569; font-weight: 600;">%</span>
                            <button type="button" class="toggle-btn" onclick="toggleCalcType('tax')" style="border: none; background: #e2e8f0; cursor: pointer; padding: 0 10px;"><i class="fa fa-sync-alt" style="color: #475569;"></i></button>
                        </div>
                        <span class="remove-row-btn" onclick="hideRow('tax')" style="cursor: pointer; color: #ef4444; font-size: 20px;">&times;</span>
                    </div>
                </div>

                <!-- Shipping Row -->
                <div class="summary-row" id="row-shipping" style="display:none; justify-content:space-between; width:100%; max-width:320px; margin-bottom:12px; align-items:center;">
                    <div class="edit-label-wrapper">
                        <input type="text" name="label_shipping" class="edit-label-input" value="Shipping" style="text-align: right; width: 100px;">
                    </div>
                    <div style="display:flex; align-items:center; gap: 10px;">
                        <div class="summary-input-group" style="display: flex; align-items: center; border: 1px solid #e2e8f0; border-radius: 6px; padding-left: 10px;">
                            <span class="dyn-curr-sym" style="color:#475569; font-weight: 600;">$</span>
                            <input type="number" name="shipping_amount" id="shippingInput" class="calc-input" value="0" step="0.01" style="border: none; width: 80px; padding: 8px;">
                        </div>
                        <span class="remove-row-btn" onclick="hideRow('shipping')" style="cursor: pointer; color: #ef4444; font-size: 20px;">&times;</span>
                    </div>
                </div>

                <div class="summary-row grand-total" style="display:flex; justify-content:space-between; width:100%; max-width:320px; margin-bottom:15px; margin-top: 15px;">
                    <div class="edit-label-wrapper">
                        <input type="text" name="label_total" class="edit-label-input" value="Total" style="font-weight: 700; text-align: right; width: 100px; font-size: 16px;">
                    </div>
                    <span id="totalDisplay" class="dyn-curr" style="font-size: 18px; font-weight: 700;">$0.00</span>
                </div>

                <div class="summary-row" style="display:flex; justify-content:space-between; width:100%; max-width:320px; margin-bottom:10px; align-items: center;">
                    <div class="edit-label-wrapper">
                        <input type="text" name="label_paid" class="edit-label-input" value="Amount Paid" style="text-align: right; width: 100px;">
                    </div>
                    <div class="summary-input-group" style="display: flex; align-items: center; border: 1px solid #e2e8f0; border-radius: 6px; padding-left: 10px;">
                        <span class="dyn-curr-sym" style="color:#475569; font-weight: 600;">$</span>
                        <input type="number" name="amount_paid" id="paidInput" class="calc-input" value="0" step="0.01" style="border: none; width: 80px; padding: 8px;">
                    </div>
                </div>

                <div class="summary-row balance-due" style="display:flex; justify-content:space-between; width:100%; max-width:320px; padding:15px 0; border-top: 2px solid #e2e8f0; margin-top:10px;">
                    <div class="edit-label-wrapper">
                        <input type="text" name="label_balance" class="edit-label-input" value="Balance Due" style="text-align: right; width: 120px; font-weight: 700; color: #334155;">
                    </div>
                    <span class="grand-total dyn-curr" id="balanceDisplay" style="padding-right:10px; font-size: 20px; font-weight: 800; color: var(--app-theme-color);">$0.00</span>
                </div>
            </div>

            <!-- Notes & Terms -->
            <div class="section-title edit-label-wrapper" style="margin-top:30px; display:block; width:100%;">
                <input type="text" name="label_notes" class="edit-label-input" value="Notes" style="font-weight:700; font-size:13px; text-transform:uppercase; color: #64748b;">
            </div>
            <textarea name="notes" class="text-area-box calc-input" rows="2" placeholder="Notes - any relevant information not already covered" style="background: #f8fafc; border: 1px solid #e2e8f0;"></textarea>

            <div class="section-title edit-label-wrapper" style="display:block; width:100%; margin-top: 20px;">
                <input type="text" name="label_terms_cond" class="edit-label-input" value="Terms" style="font-weight:700; font-size:13px; text-transform:uppercase; color: #64748b;">
            </div>
            <textarea name="terms" class="text-area-box calc-input" rows="2" placeholder="Terms and conditions - late fees, payment methods, delivery schedule" style="background: #f8fafc; border: 1px solid #e2e8f0;"></textarea>

        </div>

        <!-- Customization Panel -->
        <div class="footer-selectors" style="background:#ffffff; padding:25px; border-radius:12px; border:1px solid #e2e8f0; margin-top:30px; box-shadow: 0 4px 15px rgba(0,0,0,0.03);">
            <div style="font-size:14px; font-weight:600; margin-bottom:8px; color:#334155;">Invoice Theme</div>
            <select style="width:100%; padding:12px; border:1px solid #cbd5e1; border-radius:6px; margin-bottom:20px; background:#fff; outline: none; font-size: 15px;">
                <option>Classic</option>
                <option>Modern</option>
                <option>Professional</option>
            </select>

            <div style="font-size:14px; font-weight:600; margin-bottom:8px; color:#334155;">Currency</div>
            <select name="currency" id="currencySelector" style="width:100%; padding:12px; border:1px solid #cbd5e1; border-radius:6px; margin-bottom:20px; background:#fff; outline: none; font-size: 15px;">
                <option value="$">USD ($)</option>
                <option value="৳">BDT (৳)</option>
                <option value="€">EUR (€)</option>
                <option value="£">GBP (£)</option>
                <option value="₹">INR (₹)</option>
            </select>
            
            <?php if($is_logged_in): ?>
                <a href="#" style="color:var(--app-theme-color); font-weight:600; text-decoration:none; display: flex; align-items: center; gap: 8px;"><i class="fas fa-save"></i> Save settings as default</a>
            <?php else: ?>
                <a href="/login/" style="color:#ef4444; font-weight:600; text-decoration:none; display: flex; align-items: center; gap: 8px; font-size: 14px;"><i class="fas fa-lock"></i> Log in to save defaults</a>
            <?php endif; ?>
            
            <!-- Download Button (Submits form to generate PDF & saves data if logged in) -->
            <button type="submit" style="width:100%; background: linear-gradient(135deg, var(--app-theme-color), #059669); color:#fff; border:none; padding:16px; border-radius:8px; font-size:16px; font-weight:bold; margin-top:25px; cursor:pointer; box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3); transition: 0.3s; display: flex; justify-content: center; align-items: center; gap: 10px;">
                <i class="fas fa-file-pdf" style="font-size: 18px;"></i> Download PDF
            </button>
        </div>
    </form>
</div>

<!-- External JS Linked (Absolute Path - যেকোনো ফোল্ডার থেকে পাবে) -->
<script src="/assets/js/invoice.js"></script>

<?php
// Footer File Include (যেকোনো ফোল্ডার থেকে কাজ করবে)
if (file_exists($doc_root . '/includes/footer.php')) {
    require_once $doc_root . '/includes/footer.php';
} elseif (file_exists($doc_root . '/footer.php')) {
    require_once $doc_root . '/footer.php';
}
?>