<section class="module-page payment-page">
  <div class="module-head">
    <div>
      <h2 class="module-title">Ödeme Al</h2>
      <p class="module-sub">Müşteri seç, satışı bul, ödemeyi kaydet.</p>
    </div>
  </div>

  <!-- MÜŞTERİ ARAMA -->
  <div class="pay-search-block">
    <div class="pay-autocomplete-wrap">
      <input
        type="text"
        id="pay-customer-input"
        class="pay-input"
        placeholder="Müşteri adı, telefon veya TC..."
        autocomplete="off"
      >
      <div id="pay-customer-results" class="pay-autocomplete-list" style="display:none;"></div>
    </div>
  </div>

  <!-- MÜŞTERİ SEÇİLİNCE -->
  <div id="pay-customer-panel" class="pay-customer-panel" style="display:none;">
    <div class="pay-customer-head">
      <div class="pay-customer-avatar" id="pay-avatar"></div>
      <div class="pay-customer-info">
        <div class="pay-customer-name" id="pay-customer-name"></div>
        <div class="pay-customer-meta" id="pay-customer-meta"></div>
      </div>
      <button type="button" class="pay-profile-btn" id="pay-profile-btn">Profil &rarr;</button>
      <button type="button" class="pay-change-btn" id="pay-change-btn">Değiştir</button>
    </div>
    <div id="pay-sales-list" class="pay-sales-list"></div>
  </div>

  <!-- ÖDEME DRAWER -->
  <div id="pay-backdrop" class="pay-backdrop" style="display:none;"></div>
  <div id="pay-drawer" class="pay-drawer" style="display:none;">
    <div class="pay-drawer-head">
      <div class="pay-drawer-urun" id="pay-drawer-urun"></div>
      <button type="button" class="pay-drawer-close" id="pay-drawer-close">&#x2715;</button>
    </div>
    <div class="pay-drawer-ozet">
      <div class="pay-drawer-ozet-row">
        <span class="pay-ozet-label">Satış Tarihi</span>
        <span class="pay-ozet-val" id="pay-d-tarih"></span>
      </div>
      <div class="pay-drawer-ozet-row">
        <span class="pay-ozet-label">Satış Fiyatı</span>
        <span class="pay-ozet-val" id="pay-d-fiyat"></span>
      </div>
      <div class="pay-drawer-ozet-row">
        <span class="pay-ozet-label">İlk Peşinat</span>
        <span class="pay-ozet-val" id="pay-d-pesinat"></span>
      </div>
      <div class="pay-drawer-ozet-row">
        <span class="pay-ozet-label">Toplam Ödenen</span>
        <span class="pay-ozet-val pay-val-green" id="pay-d-odened"></span>
      </div>
      <div class="pay-drawer-ozet-row pay-ozet-kalan-row">
        <span class="pay-ozet-label">Kalan Borç</span>
        <span class="pay-ozet-val pay-val-red" id="pay-d-kalan"></span>
      </div>
    </div>
    <div class="pay-drawer-gecmis" id="pay-drawer-gecmis"></div>
    <div class="pay-drawer-form">
      <div class="pay-form-field">
        <label>Alınan Tutar</label>
        <input type="number" id="pay-miktar" class="pay-input" min="0" step="0.01" placeholder="&#x20BA;0">
      </div>
      <div class="pay-form-field">
        <label>Not (opsiyonel)</label>
        <input type="text" id="pay-not" class="pay-input" placeholder="Ödeme notu">
      </div>
      <button type="button" class="pay-submit-btn" id="pay-submit-btn">Ödemeyi Kaydet</button>
    </div>
  </div>

  <!-- MÜŞTERİ PROFİL DRAWER -->
  <div id="pay-cust-backdrop" class="cust-backdrop" style="display:none;"></div>
  <div id="pay-cust-drawer" class="cust-drawer pay-cust-drawer" style="display:none;">
    <div class="cust-drawer-head">
      <div class="cust-drawer-avatar" id="pay-cust-avatar"></div>
      <div class="cust-drawer-info">
        <div class="cust-drawer-name" id="pay-cust-name"></div>
        <div class="cust-drawer-meta" id="pay-cust-meta"></div>
      </div>
      <button type="button" class="cust-drawer-close" id="pay-cust-close">&#x2715;</button>
    </div>
    <div class="cust-ozet-row" id="pay-cust-ozet"></div>
    <div class="cust-satis-list" id="pay-cust-satis-list"></div>
  </div>
</section>
