<section class="module-page saleslist-page">
  <div class="module-head">
    <div>
      <h2 class="module-title">Satışlar</h2>
      <p class="module-sub">Tüm satış kayıtları</p>
    </div>
  </div>

  <!-- FİLTRE BARI -->
  <div class="sl-toolbar">
    <div class="sl-search-wrap">
      <svg class="sl-search-ico" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.8">
        <circle cx="6.5" cy="6.5" r="4.5"/><line x1="10.5" y1="10.5" x2="14" y2="14"/>
      </svg>
      <input type="text" id="sl-search" class="sl-search-input" placeholder="Müşteri veya ürün ara…" autocomplete="off">
    </div>
    <div class="sl-pills" id="sl-tarih-pills">
      <button class="sl-pill active" data-val="">Tümü</button>
      <button class="sl-pill" data-val="bugun">Bugün</button>
      <button class="sl-pill" data-val="hafta">Bu Hafta</button>
      <button class="sl-pill" data-val="ay">Bu Ay</button>
    </div>
    <div class="sl-pills" id="sl-durum-pills">
      <button class="sl-pill active" data-val="">Hepsi</button>
      <button class="sl-pill" data-val="borclu">Borçlu</button>
      <button class="sl-pill" data-val="kapali">Kapandı</button>
    </div>
  </div>

  <!-- TABLO -->
  <div class="sl-table-wrap">
    <table class="sl-table">
      <thead>
        <tr>
          <th class="sl-th sl-th-sort" data-col="tarih">Tarih <span class="sl-sort-ico">↓</span></th>
          <th class="sl-th sl-th-sort" data-col="musteri">Müşteri <span class="sl-sort-ico"></span></th>
          <th class="sl-th sl-th-sort" data-col="urun">Ürün <span class="sl-sort-ico"></span></th>
          <th class="sl-th sl-th-num sl-th-sort" data-col="fiyat">Fiyat <span class="sl-sort-ico"></span></th>
          <th class="sl-th sl-th-num sl-th-sort" data-col="odenen">Ödenen <span class="sl-sort-ico"></span></th>
          <th class="sl-th sl-th-num sl-th-sort" data-col="kalan">Kalan <span class="sl-sort-ico"></span></th>
          <th class="sl-th sl-th-center">Durum</th>
        </tr>
      </thead>
      <tbody id="sl-tbody"></tbody>
    </table>
    <div id="sl-empty" class="sl-empty" style="display:none;">Kayıt bulunamadı.</div>
    <div id="sl-loading" class="sl-loading">Yükleniyor…</div>
  </div>

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