<?php 
// সেশন স্টার্ট এবং CSRF টোকেন জেনারেট (সিকিউরিটির জন্য)
if (session_status() === PHP_SESSION_NONE) {
    session_start();
}
if (empty($_SESSION['csrf_token'])) {
    $_SESSION['csrf_token'] = bin2hex(random_bytes(32));
}
include 'header.php'; 
?>

<!-- External CSS Linked -->
<link rel="stylesheet" href="/assets/css/invoice.css">

<div class="container">
    <!-- 
      Fix 1: target="_blank" যোগ করা হয়েছে। 
      এর ফলে ফর্ম সাবমিট করলে PDF সরাসরি ডাউনলোড না হয়ে নতুন ট্যাবে ওপেন হবে। 
      গুগল একে আর "Drive-by download" বা ক্ষতিকর সাইট হিসেবে ধরবে না।
    -->
    <form id="invoiceForm" action="/generate_pdf.php" method="POST" enctype="multipart/form-data" target="_blank">
        
        <!-- Fix 2: CSRF Security Token (সিকিউরিটির জন্য লুকানো ইনপুট) -->
        <input type="hidden" name="csrf_token" value="<?php echo $_SESSION['csrf_token']; ?>">
        
        <input type="hidden" name="currency_symbol" id="currencyInput" value="$">
        <input type="hidden" name="theme_color" id="themeInput" value="#2ecc71">
        <input type="hidden" name="tax_type" id="taxTypeInput" value="percent">
        <input type="hidden" name="discount_type" id="discountTypeInput" value="percent">

        <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 #ccc; align-items:center; justify-content:center; border-radius:4px; margin-bottom:20px;">
                <div id="logoTextWrapper" style="color:#aaa;"><i class="fa fa-camera"></i> &nbsp; Add Logo</div>
                <input type="file" name="logo" id="logoInput" accept="image/*" style="display:none;">
            </label>

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

            <div class="input-group-invoice" style="width: 150px;">
                <span style="color:#999; margin-right:5px;">#</span>
                <!-- Fix 3: required ফিল্ড যুক্ত করা হয়েছে -->
                <input type="text" name="invoice_number" value="" placeholder="1" required>
            </div>

            <div style="display: flex; flex-direction: column; gap: 5px; margin-bottom: 15px;">
                <div class="edit-label-wrapper" style="width: 100%;">
                    <input type="text" name="label_from" class="edit-label-input" value="From" style="font-weight: bold; font-size: 13px;">
                    <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?" required></textarea>
            </div>
            
            <div style="display: flex; flex-direction: column; gap: 5px; margin-bottom: 15px;">
                <div class="edit-label-wrapper" style="width: 100%;">
                    <input type="text" name="label_to" class="edit-label-input" value="To" style="font-weight: bold; font-size: 13px;">
                    <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?" required></textarea>
            </div>

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

            <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'); ?>" required>
            </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 id="itemsWrapper">
                <div class="item-container">
                    <div class="item-header" style="display: flex; justify-content: space-between; margin-bottom: 10px; font-size: 13px; color: var(--text-muted);">
                        <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:#e74c3c; font-weight:bold; font-size:16px; display:none;">×</span></div>
                    </div>
                    <div class="item-inputs">
                        <div style="position:relative; flex:1;">
                            <span class="dyn-curr-sym" style="position:absolute; left:10px; top:8px; color:#999;">$</span>
                            <input type="number" name="item_rate[]" class="input-sm calc-input item-rate" style="padding-left:25px;" value="" placeholder="Rate" step="0.01" required>
                        </div>
                        <div style="display:flex; align-items:center; gap:5px;">
                            <span style="color:#999">×</span>
                            <input type="number" name="item_qty[]" class="input-sm calc-input item-qty" value="" placeholder="Qty" style="width:60px;" min="1" required>
                        </div>
                    </div>
                    <textarea name="item_desc