{% extends "base.html" %}

{% block title %}Satış Takip Sistemi{% endblock %}

{% block extra_css %}
<link rel="stylesheet" href="{{ url_for('static', filename='css/pages/index.css') }}">
{% endblock %}

{% block content %}
<div class="app-shell">
  <div class="topbar">
    <div class="tb-left">
      <div class="greeting">Hoş Geldiniz</div>
      <div class="shopname" id="shop-name">—</div>
    </div>

    <div class="tb-right">
      <span class="tb-time" id="clock">—</span>

      <button class="tb-btn" id="settings-btn" type="button">
        <svg viewBox="0 0 14 14" fill="none" stroke="currentColor" stroke-width="1.5">
          <circle cx="7" cy="7" r="2"/>
          <path d="M7 1v1.5M7 11.5V13M1 7h1.5M11.5 7H13M2.93 2.93l1.06 1.06M10.01 10.01l1.06 1.06M2.93 11.07l1.06-1.06M10.01 3.99l1.06-1.06"/>
        </svg>
        Ayarlar
      </button>

      <button class="tb-btn" id="lock-btn" type="button">
        <svg viewBox="0 0 14 14" fill="none" stroke="currentColor" stroke-width="1.5">
          <rect x="2.5" y="6" width="9" height="7" rx="1.5"></rect>
          <path d="M4.5 6V4.5a2.5 2.5 0 0 1 5 0V6"></path>
        </svg>
        Kilitle
      </button>
    </div>
  </div>

  <div class="dashboard">
    <div class="stat s-blue">
      <svg class="stat-ico" viewBox="0 0 32 32" fill="white">
        <path d="M4 8h24v16H4z" opacity=".2"></path>
        <path d="M28 6H4a2 2 0 00-2 2v16a2 2 0 002 2h24a2 2 0 002-2V8a2 2 0 00-2-2zm0 18H4V8h24v16z"></path>
        <path d="M8 14h16v2H8zm0 4h10v2H8z"></path>
      </svg>
      <div class="stat-label">Günlük İşlem</div>
      <div class="stat-val" id="d-islem">0</div>
    </div>

    <div class="stat s-green">
      <svg class="stat-ico" viewBox="0 0 32 32" fill="white">
        <path d="M16 4C9.4 4 4 9.4 4 16s5.4 12 12 12 12-5.4 12-12S22.6 4 16 4zm5 13h-4v4h-2v-4H11v-2h4v-4h2v4h4v2z"></path>
      </svg>
      <div class="stat-label">Tahsilat</div>
      <div class="stat-val" id="d-gelen">₺0</div>
    </div>

    <div class="stat s-coral">
      <svg class="stat-ico" viewBox="0 0 32 32" fill="white">
        <path d="M16 4C9.4 4 4 9.4 4 16s5.4 12 12 12 12-5.4 12-12S22.6 4 16 4zm1 18h-2v-2h2v2zm2.6-7.8l-.9.9c-.7.7-1.2 1.3-1.2 2.9h-2v-.5c0-1.2.5-2.3 1.2-3l1.2-1.2c.4-.3.6-.8.6-1.3 0-1.1-.9-2-2-2s-2 .9-2 2H12c0-2.2 1.8-4 4-4s4 1.8 4 4c0 .9-.4 1.7-.9 2.2z"></path>
      </svg>
      <div class="stat-label">Toplam Alacak</div>
      <div class="stat-val" id="d-kalan">₺0</div>
    </div>
  </div>

  <div class="actions">
    <button class="act a-satis" type="button" data-module="sales" data-module-title="Yeni Satış">
      <span class="ico">
        <svg viewBox="0 0 12 12" fill="none" stroke="currentColor" stroke-width="1.8">
          <path d="M1 1h9l-1.3 7H2.3L1 1z"></path>
          <circle cx="4" cy="11" r="0.7" fill="currentColor"></circle>
          <circle cx="8.5" cy="11" r="0.7" fill="currentColor"></circle>
        </svg>
      </span>
      Yeni Satış
    </button>

    <button class="act a-musteri" type="button" data-module="customers" data-module-title="Müşteri Bul">
      <span class="ico">
        <svg viewBox="0 0 12 12" fill="none" stroke="currentColor" stroke-width="1.8">
          <circle cx="6" cy="4" r="2.5"></circle>
          <path d="M1 11c0-2.8 2.2-4.5 5-4.5s5 1.7 5 4.5"></path>
        </svg>
      </span>
      Müşteri Bul
    </button>

    <button class="act a-odeme" type="button" data-module="payment" data-module-title="Ödeme Al">
      <span class="ico">
        <svg viewBox="0 0 12 12" fill="none" stroke="currentColor" stroke-width="1.8">
          <rect x="1" y="2.5" width="10" height="7" rx="1.5"></rect>
          <path d="M1 5h10"></path>
        </svg>
      </span>
      Ödeme Al
    </button>

    <button class="act a-depo" type="button" data-module="storage" data-module-title="Depo">
      <span class="ico">
        <svg viewBox="0 0 12 12" fill="none" stroke="currentColor" stroke-width="1.8">
          <path d="M1 4.5L6 1.5L11 4.5V11H1Z"></path>
          <path d="M4 11V7.5h4V11"></path>
        </svg>
      </span>
      Depo
    </button>

    <button class="act a-satislar" type="button" data-module="sales_list" data-module-title="Satışlar">
      <span class="ico">
        <svg viewBox="0 0 12 12" fill="none" stroke="currentColor" stroke-width="1.8">
          <path d="M2 2h8M2 6h5M2 10h3.5"></path>
        </svg>
      </span>
      Satışlar
    </button>

    <button class="act a-rapor" type="button" data-module="rapor_donem" data-module-title="Raporlar">
      <span class="ico">
        <svg viewBox="0 0 12 12" fill="none" stroke="currentColor" stroke-width="1.8">
          <rect x="1" y="1" width="10" height="10" rx="1.5"></rect>
          <path d="M2 8.5L4 5.5L6.5 7L9 3.5"></path>
        </svg>
      </span>
      Raporlar
    </button>
  </div>

  <div class="workspace">
    <div id="module-root"></div>
  </div>

  <!-- FOOTER -->
  <div style="text-align:center;padding:12px 0 8px;margin-top:auto;">
    <a href="https://emircandumoglu.com" target="_blank" rel="noopener noreferrer"
       style="color:rgba(0, 0, 0, 0.5);font-size:11px;text-decoration:none;cursor:pointer;">
      © 2026 EMRCNDMGL
    </a>
  </div>
</div>

<div class="toast" id="toast"></div>
{% endblock %}

{% block extra_js %}
<script src="{{ url_for('static', filename='js/common/module-loader.js') }}"></script>
<script src="{{ url_for('static', filename='js/pages/index.js') }}"></script>
{% endblock %}