<section class="module-page rapor-donem-page">

  <div class="module-head">
    <div>
      <h2 class="module-title">Dönemsel Rapor</h2>
      <p class="module-sub">Seçili dönem için satış & ödeme detayları</p>
    </div>
    <button class="rd-excel-btn" id="rd-excel-btn" type="button">
      <svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.6" width="14" height="14">
        <rect x="2" y="1" width="9" height="14" rx="1"/><path d="M11 1l3 3v11H5"/><path d="M8 6l-3 4m3-4l3 4"/>
      </svg>
      Excel İndir
    </button>
  </div>

  <!-- FİLTRE BARI -->
  <div class="rd-toolbar">
    <div class="rd-pills" id="rd-aralik-pills">
      <button class="rd-pill" data-val="bugun">Bugün</button>
      <button class="rd-pill active" data-val="bu_hafta">Bu Hafta</button>
      <button class="rd-pill" data-val="bu_ay">Bu Ay</button>
      <button class="rd-pill" data-val="ozel">Özel Aralık</button>
    </div>

    <div class="rd-ozel-wrap" id="rd-ozel-wrap" style="display:none;">
      <input type="date" id="rd-bas" class="rd-date-input">
      <span class="rd-date-sep">—</span>
      <input type="date" id="rd-bit" class="rd-date-input">
      <button class="rd-ara-btn" id="rd-ara-btn" type="button">Ara</button>
    </div>
  </div>

  <!-- ÖZET ŞERİT -->
  <div class="rd-ozet-serit">
    <div class="rd-ozet-item">
      <span class="rd-ozet-label">Satış Adedi</span>
      <span class="rd-ozet-val" id="rd-adet">—</span>
    </div>
    <div class="rd-ozet-sep"></div>
    <div class="rd-ozet-item">
      <span class="rd-ozet-label">Toplam Ciro</span>
      <span class="rd-ozet-val rd-ozet-val--blue" id="rd-ciro">—</span>
    </div>
    <div class="rd-ozet-sep"></div>
    <div class="rd-ozet-item">
      <span class="rd-ozet-label">Tahsil Edilen</span>
      <span class="rd-ozet-val rd-ozet-val--green" id="rd-tahsilat">—</span>
    </div>
    <div class="rd-ozet-sep"></div>
    <div class="rd-ozet-item">
      <span class="rd-ozet-label">Kalan Borç</span>
      <span class="rd-ozet-val rd-ozet-val--red" id="rd-kalan">—</span>
    </div>
  </div>

  <!-- TABLO -->
  <div class="rd-table-wrap">
    <table class="rd-table">
      <thead>
        <tr>
          <th class="rd-th">Tarih</th>
          <th class="rd-th">Müşteri</th>
          <th class="rd-th">Ürün</th>
          <th class="rd-th rd-th-num">Satış Fiyatı</th>
          <th class="rd-th rd-th-num">Peşinat</th>
          <th class="rd-th rd-th-num">Sonraki Öd.</th>
          <th class="rd-th rd-th-num">Toplam Ödenen</th>
          <th class="rd-th rd-th-num">Kalan</th>
          <th class="rd-th rd-th-center">Durum</th>
        </tr>
      </thead>
      <tbody id="rd-tbody"></tbody>
    </table>
    <div id="rd-empty" class="rd-empty" style="display:none;">Bu dönemde kayıt bulunamadı.</div>
    <div id="rd-loading" class="rd-loading">Yükleniyor…</div>
  </div>

  <!-- YAZDIR butonu (gizli, print için) -->
  <button class="rd-print-btn" id="rd-print-btn" type="button">
    <svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.6" width="14" height="14">
      <rect x="3" y="1" width="10" height="5" rx="0.5"/>
      <path d="M3 6H1v7h2v-3h10v3h2V6h-2"/>
      <rect x="3" y="10" width="10" height="5" rx="0.5"/>
    </svg>
    Yazdır
  </button>

</section>
