<section class="module-page sales-page">
  <div class="module-head sales-head">
    <div>
      <h2 class="module-title">Yeni Satış</h2>
      <p class="module-sub">Müşteri ve ürün bilgilerini girip hızlıca satış kaydı oluştur.</p>
    </div>

    <div class="sales-head-actions">
      <button type="button" class="sales-history-btn" id="sales-history-btn">
        Geçmiş İşlem Ekle
      </button>
    </div>
  </div>

  <form id="sales-form" class="sales-form" autocomplete="off">
    <div class="sales-main-grid">
      <div class="sales-card sales-card-customer">
        <div class="sales-card-title">Müşteri Bilgisi</div>

        <div class="sales-field">
          <label for="sales-customer-name">Ad Soyad</label>
          <div class="sales-autocomplete-wrap">
            <input type="text" id="sales-customer-name" class="sales-input"
              placeholder="Müşteri adı soyadı yaz..." autocomplete="off">
            <div id="sales-customer-results" class="sales-autocomplete-list" style="display:none;"></div>
          </div>
        </div>

        <input type="hidden" id="sales-customer-id">
        <input type="hidden" id="sales-customer-type" value="">

        <div class="sales-two-col">
          <div class="sales-field">
            <label for="sales-customer-phone">Telefon</label>
            <input type="text" id="sales-customer-phone" class="sales-input sales-sub-input"
              placeholder="Telefon numarası">
          </div>
          <div class="sales-field">
            <label for="sales-customer-tc">TC</label>
            <input type="text" id="sales-customer-tc" class="sales-input sales-sub-input"
              placeholder="TC kimlik numarası">
          </div>
        </div>
      </div>

      <div class="sales-card sales-card-product">
        <div class="sales-card-title">Ürün ve Tutar</div>

        <div class="sales-field">
          <label for="sales-product-search">Ürün</label>
          <div class="sales-autocomplete-wrap">
            <input type="text" id="sales-product-search" class="sales-input"
              placeholder="Ürün adı yaz..." autocomplete="off">
            <div id="sales-product-results" class="sales-autocomplete-list" style="display:none;"></div>
          </div>
        </div>

        <input type="hidden" id="sales-product-id">
        <input type="hidden" id="sales-product-name">

        <div class="sales-two-col">
          <div class="sales-field">
            <label for="sales-default-price">Ürün Fiyatı</label>
            <input type="text" id="sales-default-price" class="sales-input sales-readonly"
              placeholder="Liste fiyatı" readonly>
          </div>
          <div class="sales-field">
            <label for="sales-stock-info">Stok</label>
            <input type="text" id="sales-stock-info" class="sales-input sales-readonly"
              placeholder="Stok bilgisi" readonly>
          </div>
        </div>

        <div class="sales-two-col">
          <div class="sales-field">
            <label for="sales-price">Satış Fiyatı</label>
            <input type="number" id="sales-price" class="sales-input" min="0" step="0.01"
              placeholder="Satış fiyatı">
          </div>
          <div class="sales-field">
            <label for="sales-pesinat">Peşinat</label>
            <input type="number" id="sales-pesinat" class="sales-input" min="0" step="0.01"
              placeholder="Alınan peşinat">
          </div>
        </div>

        <div class="sales-field">
          <label for="sales-kalan">Kalan</label>
          <input type="text" id="sales-kalan" class="sales-input sales-readonly sales-kalan-input"
            value="₺0" readonly>
        </div>

        <div class="sales-field">
          <label for="sales-note">Not</label>
          <textarea id="sales-note" class="sales-textarea" rows="5"
            placeholder="İsteğe bağlı not"></textarea>
        </div>
      </div>
    </div>

    <div class="sales-actions-bar">
      <button type="button" class="sales-clear-btn" id="sales-clear-btn">Formu Temizle</button>
      <button type="submit" class="sales-save-btn">Satışı Kaydet</button>
    </div>
  </form>
</section>

<!-- GEÇMİŞ İŞLEM MODAL -->
<div id="gecmis-modal" class="gecmis-overlay" style="display:none;">
  <div class="gecmis-panel">
    <div class="gecmis-panel-head">
      <span class="gecmis-panel-title">Geçmiş İşlem Ekle</span>
      <button type="button" class="gecmis-close-btn" id="gecmis-close-btn">✕</button>
    </div>

    <form id="gecmis-form" class="gecmis-form" autocomplete="off">

      <div class="gecmis-row">
        <div class="gecmis-field">
          <label>Ad Soyad</label>
          <input type="text" id="g-musteri-ad" class="sales-input" placeholder="Müşteri adı soyadı">
        </div>
        <div class="gecmis-field gecmis-field-sm">
          <label>Tarih</label>
          <input type="date" id="g-tarih" class="sales-input">
        </div>
      </div>

      <div class="gecmis-row">
        <div class="gecmis-field gecmis-field-sm">
          <label>Telefon</label>
          <input type="text" id="g-telefon" class="sales-input" placeholder="+90">
        </div>
        <div class="gecmis-field gecmis-field-sm">
          <label>TC</label>
          <input type="text" id="g-tc" class="sales-input" placeholder="TC kimlik">
        </div>
      </div>

      <div class="gecmis-field">
        <label>Ürün Adı</label>
        <input type="text" id="g-urun-ad" class="sales-input" placeholder="Satılan ürün adı">
      </div>

      <div class="gecmis-row">
        <div class="gecmis-field gecmis-field-sm">
          <label>Satış Fiyatı</label>
          <input type="number" id="g-fiyat" class="sales-input" min="0" step="0.01" placeholder="₺0">
        </div>
        <div class="gecmis-field gecmis-field-sm">
          <label>Peşinat</label>
          <input type="number" id="g-pesinat" class="sales-input" min="0" step="0.01" placeholder="₺0">
        </div>
        <div class="gecmis-field gecmis-field-sm">
          <label>Kalan</label>
          <input type="text" id="g-kalan" class="sales-input sales-readonly sales-kalan-input"
            value="₺0" readonly>
        </div>
      </div>

      <div class="gecmis-field">
        <label>Not</label>
        <input type="text" id="g-not" class="sales-input" placeholder="İsteğe bağlı not">
      </div>

      <div class="gecmis-actions">
        <button type="submit" class="sales-save-btn gecmis-save-btn">Kaydet</button>
      </div>

    </form>
  </div>
</div>
