<?php
if (!defined('ABSPATH')) exit;

$cur = simpinby_get_currency();
$CURRENCY = $cur["symbol"];

// Load tax settings
$tax_data = get_option("simpinby_tax_settings", ["default_tax_id" => "", "taxes" => []]);
$taxes = $tax_data["taxes"] ?? [];
$default_tax_id = $tax_data["default_tax_id"] ?? "";

// PDF + Company settings
$pdf_settings = get_option("simpinby_pdf_settings", []);

$company_name    = $pdf_settings["company_name"] ?? "";
$company_phone   = $pdf_settings["company_phone"] ?? "";
$company_email   = $pdf_settings["company_email"] ?? "";
$company_address = $pdf_settings["company_address"] ?? "";
$company_website = $pdf_settings["company_website"] ?? "";
$company_logo    = $pdf_settings["logo_url"] ?? "";
?>

<div class="wrap">
  <h1>Create Invoice</h1>

  <form method="post" id="siInvoiceForm">
    <?php wp_nonce_field("simpinby_create_invoice"); ?>

    <!-- TOP HEADER -->
    <div style="display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:10px; background:#fff; border:1px solid #ddd; padding:12px 14px; border-radius:12px; margin-top:12px;">
      <div>
        <h2 style="margin:0; font-size:18px;"><?php echo esc_html($company_name ?: "Company"); ?></h2>
        <?php if (!empty($company_address)): ?>
          <div style="color:#666; margin-top:3px; font-size:12px; line-height:1.3;">
            <?php echo nl2br(esc_html($company_address)); ?>
          </div>
        <?php endif; ?>
      </div>

      <?php if (!empty($company_logo)): ?>
        <div style="text-align:right;">
          <img src="<?php echo esc_url($company_logo); ?>" style="max-height:55px; max-width:160px; object-fit:contain;">
        </div>
      <?php endif; ?>
    </div>

    <!-- FROM + CUSTOMER -->
    <div style="display:flex; gap:12px; flex-wrap:wrap; margin-top:12px;">

      <!-- FROM -->
      <div style="flex:1; min-width:320px; background:#fff; border:1px solid #ddd; padding:12px 14px; border-radius:12px;">
        <h2 style="margin:0 0 8px 0; font-size:14px;">From</h2>

        <div style="font-size:13px; line-height:1.35;">
          <div><b><?php echo esc_html($company_name); ?></b></div>

          <?php if (!empty($company_phone)): ?>
            <div><b>Phone:</b> <?php echo esc_html($company_phone); ?></div>
          <?php endif; ?>

          <?php if (!empty($company_email)): ?>
            <div><b>Email:</b> <?php echo esc_html($company_email); ?></div>
          <?php endif; ?>

          <?php if (!empty($company_website)): ?>
            <div><b>Web:</b> <?php echo esc_html($company_website); ?></div>
          <?php endif; ?>
        </div>
      </div>

      <!-- CUSTOMER -->
      <div style="flex:1; min-width:320px; background:#fff; border:1px solid #ddd; padding:12px 14px; border-radius:12px;">
        <h2 style="margin:0 0 8px 0; font-size:14px;">Customer</h2>

        <div style="display:grid; grid-template-columns: 120px 1fr; gap:6px 10px; align-items:center;">

          <label style="font-weight:600;">Name *</label>
          <div>
            <input type="text" id="simpinby_customer_name" name="customer_name" class="regular-text" required autocomplete="off" style="width:100%;">
            <input type="hidden" id="simpinby_customer_id" name="customer_id">
            <div id="simpinby_customer_suggestions" class="simpinby-suggestions"></div>
          </div>

          <label style="font-weight:600;">Phone</label>
          <div style="display:flex; gap:6px;">
  
          <select id="simpinby_country_code" style="max-width:100px;">
            <option value="">🌍 Select Country</option>
            <option value="1" data-country="US">🇺🇸 (+1)</option>
            <option value="1" data-country="CA">🇨🇦 (+1)</option>

            <option value="44" data-country="GB">🇬🇧 (+44)</option>
            <option value="61" data-country="AU">🇦🇺 (+61)</option>
            <option value="64" data-country="NZ">🇳🇿 (+64)</option>

            <option value="971" data-country="AE">🇦🇪 (+971)</option>
            <option value="966" data-country="SA">🇸🇦 (+966)</option>
            <option value="974" data-country="QA">🇶🇦 (+974)</option>
            <option value="965" data-country="KW">🇰🇼 (+965)</option>
            <option value="968" data-country="OM">🇴🇲 (+968)</option>

            <option value="65" data-country="SG">🇸🇬 (+65)</option>
            <option value="60" data-country="MY">🇲🇾 (+60)</option>
            <option value="66" data-country="TH">🇹🇭 (+66)</option>
            <option value="62" data-country="ID">🇮🇩 (+62)</option>
            <option value="63" data-country="PH">🇵🇭 (+63)</option>

            <option value="49" data-country="DE">🇩🇪 (+49)</option>
            <option value="33" data-country="FR">🇫🇷 (+33)</option>
            <option value="39" data-country="IT">🇮🇹 (+39)</option>
            <option value="34" data-country="ES">🇪🇸 (+34)</option>
            <option value="31" data-country="NL">🇳🇱 (+31)</option>
            <option value="46" data-country="SE">🇸🇪 (+46)</option>
            <option value="41" data-country="CH">🇨🇭 (+41)</option>

            <option value="81" data-country="JP">🇯🇵 (+81)</option>
            <option value="82" data-country="KR">🇰🇷 (+82)</option>
            <option value="86" data-country="CN">🇨🇳 (+86)</option>

            <option value="7" data-country="RU">🇷🇺 (+7)</option>
            <option value="55" data-country="BR">🇧🇷 (+55)</option>
            <option value="52" data-country="MX">🇲🇽 (+52)</option>
            <option value="27" data-country="ZA">🇿🇦 (+27)</option>

            <option value="91" data-country="IN">🇮🇳 (+91)</option>
          </select>

          <input type="text" 
            id="simpinby_customer_phone" 
            name="customer_phone" 
            placeholder="Enter phone number"
            class="regular-text"
            style="width:100%;">
        </div>

          <label style="font-weight:600;">Email</label>
          <input type="email" id="simpinby_customer_email" name="customer_email" class="regular-text" style="width:100%;">

          <label style="font-weight:600;">Address</label>
          <textarea id="simpinby_customer_address" name="customer_address" rows="2" style="width:100%; resize:vertical;"></textarea>

        </div>
      </div>

    </div>

    <hr style="margin:12px 0;">

    <!-- ITEMS -->
    <h2 style="margin:0 0 8px 0;">Invoice Items</h2>

    <table class="widefat striped" id="siItemsTable">
      <thead>
        <tr>
          <th style="width:40%">Product</th>
          <th style="width:15%">Qty</th>
          <th style="width:20%">Price</th>
          <th style="width:20%">Total</th>
          <th style="width:5%"></th>
        </tr>
      </thead>
      <tbody id="siItemsBody"></tbody>
    </table>

    <p style="margin-top:8px;">
      <button type="button" class="button" id="siAddRowBtn">+ Add Row</button>
    </p>

    <hr style="margin:12px 0;">

    <!-- SUMMARY (LEFT) + TAX/DISCOUNT (RIGHT) -->
    <div style="display:flex; gap:12px; flex-wrap:wrap;">

      <!-- SUMMARY -->
      <div style="flex:1; min-width:320px; background:#fff; border:1px solid #ddd; padding:12px 14px; border-radius:12px;">
        <h2 style="margin:0 0 8px 0; font-size:14px;">Summary</h2>

        <table class="form-table" style="margin:0;">
          <tr>
            <th style="padding:6px 0;">Subtotal</th>
            <td style="padding:6px 0;"><?php echo esc_html($CURRENCY); ?> <span id="simpinby_subtotal">0.00</span></td>
          </tr>
          <tr>
            <th style="padding:6px 0;">Tax</th>
            <td style="padding:6px 0;"><?php echo esc_html($CURRENCY); ?> <span id="simpinby_tax_total">0.00</span></td>
          </tr>
          <tr>
            <th style="padding:6px 0;"><b>Total</b></th>
            <td style="padding:6px 0;"><b><?php echo esc_html($CURRENCY); ?> <span id="simpinby_total">0.00</span></b></td>
          </tr>
        </table>
      </div>

      <!-- TAX & DISCOUNT -->
      <div style="flex:1; min-width:320px; background:#fff; border:1px solid #ddd; padding:12px 14px; border-radius:12px;">
        <h2 style="margin:0 0 8px 0; font-size:14px;">Tax & Discount</h2>

        <div style="display:grid; grid-template-columns: 120px 1fr; gap:8px 10px; align-items:center;">

          <label style="font-weight:600;">Tax</label>
          <select name="tax_id" id="simpinby_tax_id" style="width:100%;">
            <option value="">No Tax</option>
            <?php foreach ($taxes as $t): ?>
              <option value="<?php echo esc_attr($t["id"]); ?>" <?php selected($default_tax_id, $t["id"]); ?>>
                <?php echo esc_html($t["name"] . " (" . $t["percent"] . "%)"); ?>
              </option>
            <?php endforeach; ?>
          </select>

          <label style="font-weight:600;">Discount</label>
          <input type="number" step="0.01" name="discount" id="simpinby_discount" value="0" style="width:100%;">

        </div>
      </div>

    </div>

    <p style="margin-top:12px;">
      <button type="submit" name="simpinby_save_invoice" class="button button-primary">Save</button>
      <button type="submit" name="simpinby_save_send_invoice" class="button button-primary">Save & Send Mail</button>
      <a href="<?php echo esc_url( admin_url('admin.php?page=simpinby-invoices') ); ?>" class="button">Cancel</a>
    </p>

  </form>
</div>
