<!DOCTYPE html>
<html lang="tr">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>{% block title %}Satış Takip Sistemi{% endblock %}</title>

  <link rel="stylesheet" href="{{ url_for('static', filename='css/common/reset.css') }}">
  <link rel="stylesheet" href="{{ url_for('static', filename='css/common/layout.css') }}">
  <link rel="stylesheet" href="{{ url_for('static', filename='css/common/components.css') }}">

  {% block extra_css %}{% endblock %}
</head>
<body>
  <!-- LOGIN OVERLAY -->
  <div class="overlay" id="overlay">
    <div class="ov-logo">
      <div class="shop" id="ov-shop-name">Satış Takip</div>
      <div class="sub">Yönetim Sistemi</div>
    </div>

    <!-- GİRİŞ KARTI -->
    <div class="ov-card" id="ov-card-giris">
      <div class="ov-title">🔐 Sisteme Giriş</div>

      <div class="ov-f">
        <label for="ov-parola">Parola</label>
        <input
          type="password"
          id="ov-parola"
          placeholder="Parolanızı girin"
          autocomplete="current-password"
        >
      </div>

      <div class="ov-err" id="ov-err">Parola hatalı, tekrar deneyin.</div>

      <button class="ov-btn" type="button">Giriş Yap</button>
    </div>

    <!-- KURULUM KARTI -->
    <div class="ov-card" id="ov-card-kurulum" style="display:none;">
      <div class="ov-title">⚙️ İlk Kurulum</div>

      <div class="ov-f">
        <label for="ov-dukkan">Dükkan / İşletme Adı</label>
        <input type="text" id="ov-dukkan" placeholder="Örn: Yıldız Elektronik">
      </div>

      <div class="ov-f">
        <label for="ov-parola1">Parola Belirle</label>
        <input type="password" id="ov-parola1" placeholder="En az 4 karakter">
      </div>

      <div class="ov-f">
        <label for="ov-parola2">Parola Tekrar</label>
        <input type="password" id="ov-parola2" placeholder="Parolayı tekrar girin">
      </div>

      <div class="ov-err" id="ov-err2"></div>

      <button class="ov-btn" type="button">Sistemi Kur ve Başlat</button>
    </div>

    <!-- ŞİFRE SIFIRLAMA KARTI (sadece master girişinde) -->
    <div class="ov-card" id="ov-card-sifirla" style="display:none;">
      <div class="ov-title">🔑 Yeni Şifre Belirle</div>
      <div class="ov-f">
        <label>Yeni Şifre</label>
        <input type="password" id="ov-yeni-parola" placeholder="En az 4 karakter" autocomplete="new-password">
      </div>
      <div class="ov-f">
        <label>Yeni Şifre Tekrar</label>
        <input type="password" id="ov-yeni-parola2" placeholder="Şifreyi tekrar girin" autocomplete="new-password">
      </div>
      <div class="ov-err" id="ov-err-sifirla"></div>
      <button class="ov-btn" type="button" id="ov-btn-sifirla">Şifreyi Kaydet ve Gir</button>
    </div>

    <!-- LOGIN FOOTER -->
    <div style="position:absolute;bottom:16px;left:0;right:0;text-align:center;">
      <a href="https://emircandumoglu.com" target="_blank" rel="noopener noreferrer"
         style="color:rgba(13, 13, 13, 0.45);font-size:11px;text-decoration:none;cursor:pointer;">
        © 2026 EMRCNDMGL
      </a>
    </div>
  </div>

  {% block content %}{% endblock %}

  {% block extra_js %}{% endblock %}
  <script>
(function () {
    let browserPingInterval = null;

    async function sendBrowserPing() {
        try {
            await fetch('/api/browser-ping', {
                method: 'POST',
                cache: 'no-store',
                keepalive: true
            });
        } catch (e) {
        }
    }

    function sendBrowserClose() {
        try {
            navigator.sendBeacon('/api/browser-close', new Blob([], { type: 'application/json' }));
        } catch (e) {
            try {
                fetch('/api/browser-close', {
                    method: 'POST',
                    keepalive: true
                });
            } catch (err) {
            }
        }
    }

    function startBrowserPing() {
        sendBrowserPing();

        if (browserPingInterval) {
            clearInterval(browserPingInterval);
        }

        browserPingInterval = setInterval(function () {
            sendBrowserPing();
        }, 3000);
    }

    window.addEventListener('load', function () {
        startBrowserPing();
    });

    document.addEventListener('visibilitychange', function () {
        if (!document.hidden) {
            sendBrowserPing();
        }
    });

    window.addEventListener('unload', function () {
        sendBrowserClose();
    });
})();
</script>
</body>
</html>