<?php 
declare(strict_types=1);

/**
 * seller/finans.php (UPDATED)
 * - Banka bileşeni: yükseklik ciddi azaltıldı, logo kutusu kaldırıldı (kutusuz logo)
 * - Mobil uyumluluk güçlendirildi (kpi + banka + tablo)
 */

$base   = $base ?? (function_exists('app_base') ? app_base('seller/') : '/seller/');
$active = 'finans';

function h($s): string { return htmlspecialchars((string)$s, ENT_QUOTES, 'UTF-8'); }

/* Sidebar */
include __DIR__ . '/../app/sidebar.php';

/* ✅ Banka logo url (sen gireceksin) */
$bankLogoUrl = 'https://sanatcidan.wanyweb.com/seller/img/zbbanka.png'; // örn: https://site.com/banka-logo.png

$bank = [
  'bank_name'    => 'Ziraat Bankası A.Ş.',
  'account_name' => 'Selim Doğan',
  'iban'         => 'TR12 0006 4000 0012 3456 7890 12',
  'currency'     => 'TRY',
];

$summary = [
  'bekleyen'     => 4120.90,
  'odenmis'      => 18950.40,
  'toplam_satis' => 37210.55,
  'toplam_iade'  => 2490.00,
  'para_birimi'  => 'TRY',
];

$txs = [
  ['dt'=>'2026-01-25 12:10','type'=>'odeme','title'=>'Haftalık ödeme','amount'=> 1890.40,'status'=>'odenmis'],
  ['dt'=>'2026-01-24 19:42','type'=>'satis','title'=>'Sipariş satışı','amount'=>  975.00,'status'=>'tamamlandi'],
  ['dt'=>'2026-01-23 10:05','type'=>'iade','title'=>'İade (kısmi)','amount'=>  -320.00,'status'=>'iade'],
  ['dt'=>'2026-01-22 15:20','type'=>'kesinti','title'=>'Kesinti','amount'=>  -145.25,'status'=>'kesinti'],
  ['dt'=>'2026-01-21 09:30','type'=>'odeme','title'=>'Ödeme bekliyor','amount'=>  2230.50,'status'=>'beklemede'],
];

function money_tr(float $n): string { return number_format($n, 2, ',', '.'); }
function dt_tr(string $s): string { $ts = strtotime($s); return $ts ? date('d M Y, H:i', $ts) : $s; }
function badge(string $status): array {
  return match($status){
    'odenmis'    => ['bg'=>'rgba(16,185,129,.10)','bd'=>'rgba(16,185,129,.28)','tx'=>'#065F46','label'=>'Ödemesi Gelmiş'],
    'beklemede'  => ['bg'=>'rgba(245,158,11,.10)','bd'=>'rgba(245,158,11,.28)','tx'=>'#92400E','label'=>'Beklemede'],
    'tamamlandi' => ['bg'=>'rgba(16,185,129,.10)','bd'=>'rgba(16,185,129,.28)','tx'=>'#065F46','label'=>'Satış'],
    'iade'       => ['bg'=>'rgba(239,68,68,.10)','bd'=>'rgba(239,68,68,.28)','tx'=>'#7F1D1D','label'=>'İade'],
    'kesinti'    => ['bg'=>'rgba(245,158,11,.10)','bd'=>'rgba(245,158,11,.28)','tx'=>'#92400E','label'=>'Kesinti'],
    default      => ['bg'=>'rgba(107,114,128,.08)','bd'=>'rgba(107,114,128,.18)','tx'=>'#374151','label'=>'—'],
  };
}
function kpiHover(string $key): array {
  return match($key){
    'bekleyen' => ['accent'=>'rgba(245,158,11,.85)','ring'=>'rgba(245,158,11,.16)','icon'=>'clock'],
    'odenmis'  => ['accent'=>'rgba(16,185,129,.85)','ring'=>'rgba(16,185,129,.16)','icon'=>'check-circle-2'],
    'satis'    => ['accent'=>'rgba(16,185,129,.85)','ring'=>'rgba(16,185,129,.16)','icon'=>'shopping-bag'],
    'iade'     => ['accent'=>'rgba(239,68,68,.85)','ring'=>'rgba(239,68,68,.14)','icon'=>'corner-down-left'],
    default    => ['accent'=>'rgba(107,114,128,.55)','ring'=>'rgba(107,114,128,.12)','icon'=>'info'],
  };
}

/* Filter */
$q    = trim((string)($_GET['q'] ?? ''));
$type = trim((string)($_GET['type'] ?? ''));
$filtered = $txs;

if ($q !== '') {
  $filtered = array_values(array_filter($filtered, function($t) use ($q){
    return (mb_stripos((string)$t['title'], $q) !== false)
        || (mb_stripos((string)$t['dt'], $q) !== false);
  }));
}
if ($type !== '') {
  $filtered = array_values(array_filter($filtered, fn($t)=> (string)$t['type'] === $type));
}
?>
<!DOCTYPE html>
<html lang="tr">
<head>
  <meta charset="UTF-8" />
  <title>Finans</title>
  <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" />
  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700;800;900&display=swap" rel="stylesheet">
  <script src="https://cdn.tailwindcss.com"></script>
  <script defer src="https://unpkg.com/lucide@latest"></script>

  <style>
   :root{
    --bg:#F3F4F6;
    --card:#FFFFFF;
    --text:#3d3e40;
    --muted:#6B7280;
    --line:rgba(31,41,55,.14);
    --soft:#F8FAFC;
    --radius:10px;
    --radius2:8px;
    --sbw:0px;
  }
  html,body{height:100%;}
  body{
    margin:0;
    background:var(--bg);
    font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
    color:var(--text);
    overflow-x:hidden;
  }

  .mainWrap{
    margin-left: var(--sbw);
    width: calc(100vw - var(--sbw));
    max-width: calc(100vw - var(--sbw));
    overflow-x:hidden;
  }
  .wrap{padding:14px;}
  .panel{
    background:var(--card);
    border:1px solid var(--line);
    border-radius:var(--radius);
    overflow:hidden;
  }

  .topbar{
    padding:14px 14px;
    border-bottom:1px solid var(--line);
    display:flex;align-items:flex-start;justify-content:space-between;gap:12px;
  }
  .title{font-weight:900;letter-spacing:-.02em;font-size:16px;color:#595859;}
  .subtle{color:var(--muted);font-weight:800;font-size:12px;}

  .tools{display:flex;gap:10px;align-items:center;flex-wrap:wrap;justify-content:flex-end;}
  .search{
    display:flex;align-items:center;gap:10px;
    height:42px;padding:0 12px;
    border:1px solid var(--line);
    border-radius:var(--radius2);
    background:var(--soft);
    min-width:260px;
  }
  .search input{
    border:0;outline:0;background:transparent;width:100%;
    font-weight:900;font-size:13px;color:var(--text);
  }
  .select{
    height:42px;
    padding:0 12px;
    border:1px solid var(--line);
    border-radius:var(--radius2);
    background:#fff;
    font-weight:900;font-size:13px;
    color:var(--text);
    outline:0;
    min-width:170px;
  }
  .btn{
    height:42px;padding:0 12px;
    border:1px solid var(--line);
    border-radius:var(--radius2);
    background:#fff;
    font-weight:900;font-size:13px;
    display:inline-flex;align-items:center;gap:8px;
    cursor:pointer;color:var(--text);
    transition:transform .12s ease, box-shadow .12s ease, background .12s ease;
  }
  .btn:hover{
    transform:translateY(-1px);
    box-shadow:0 10px 20px rgba(31,41,55,.08);
  }

  /* ✅ SUM */
  .sum{
    padding:14px;
    display:grid;
    grid-template-columns:repeat(4, minmax(0,1fr));
    gap:12px;
    border-bottom:1px solid var(--line);
    background:linear-gradient(180deg, rgba(248,250,252,.65), rgba(255,255,255,1));
  }
  .kpi{
    border:1px solid var(--line);
    border-radius:var(--radius);
    background:rgba(255,255,255,.92);
    padding:12px;
    display:flex;
    gap:12px;
    align-items:stretch;
    min-height:78px;
    position:relative;
    overflow:hidden;
    transition:transform .12s ease, box-shadow .12s ease, border-color .12s ease;
  }
  .kpi:before{
    content:"";
    position:absolute;
    left:0;top:0;bottom:0;
    width:3px;
    background:transparent;
    transition:background .12s ease;
  }
  .kpi:hover{
    transform:translateY(-1px);
    border-color:rgba(31,41,55,.22);
    box-shadow:0 12px 24px rgba(31,41,55,.10), 0 0 0 4px var(--ring);
  }
  .kpi:hover:before{ background: var(--accent); }
  .kpiMain{flex:1;display:flex;flex-direction:column;justify-content:space-between;}
  .kpiLabel{font-weight:900;font-size:12px;color:var(--muted);letter-spacing:.01em;}
  .kpiVal{font-weight:950;font-size:18px;color:#595859;margin-top:4px;}
  .kpiCur{font-weight:900;font-size:12px;color:var(--muted);}
  .kpiIcon{
    width:40px;height:40px;
    border:1px solid var(--line);
    border-radius:12px;
    display:flex;align-items:center;justify-content:center;
    background:#fff;
    flex:0 0 40px;
    transition:border-color .12s ease, box-shadow .12s ease;
    color:#475569;
  }
  .kpi:hover .kpiIcon{
    box-shadow:0 10px 18px rgba(31,41,55,.10);
    border-color:rgba(31,41,55,.22);
  }

  /* ✅ BANKA (KISA + LOGO KUTUSUZ) */
  .bankBar{
    margin:12px 14px;
    border:1px solid var(--line);
    border-radius:var(--radius);
    background:rgba(255,255,255,.92);
  }
  .bankRow{
    padding:10px 12px;                 /* ✅ yükseklik düşürüldü */
    display:flex;
    align-items:center;
    gap:12px;
    flex-wrap:wrap;
  }
  .bankLeft{
    display:flex;
    align-items:center;
    gap:10px;
    min-width:240px;
  }
  .bankLeft .t{
    display:flex;flex-direction:column;gap:2px;
  }
  .bankTitle{
    font-weight:950;
    font-size:12px;
    color:#595859;
    display:flex;align-items:center;gap:8px;
  }
  .bankSub{
    font-weight:800;
    font-size:12px;
    color:var(--muted);
    line-height:1.2;
  }
  .bankLogoImg{
    height:22px;                       /* ✅ küçük logo */
    width:auto;
    max-width:140px;
    object-fit:contain;
    display:block;
  }

  .bankMid{
    flex:1;
    min-width:260px;
    display:flex;
    align-items:center;
    gap:10px;
    flex-wrap:wrap;
  }
  .kv{
    display:flex;flex-direction:column;gap:2px;
    min-width:190px;
  }
  .kv .k{color:var(--muted);font-weight:900;font-size:11px;letter-spacing:.01em;}
  .kv .v{color:#595859;font-weight:950;font-size:13px;word-break:break-word;}

  .bankRight{
    display:flex;
    align-items:center;
    gap:8px;
    margin-left:auto;
  }
  .copyBtn{
    height:34px;
    padding:0 12px;
    border-radius:999px;
    border:1px solid var(--line);
    background:#fff;
    font-weight:900;
    font-size:12px;
    color:var(--text);
    display:inline-flex;align-items:center;gap:8px;
    cursor:pointer;
    transition:transform .12s ease, box-shadow .12s ease;
    white-space:nowrap;
  }
  .copyBtn:hover{transform:translateY(-1px);box-shadow:0 10px 20px rgba(31,41,55,.08);}

  /* TABLE */
  .tableWrap{width:100%;overflow:auto;}
  table{width:100%;border-collapse:separate;border-spacing:0;min-width:980px;}
  thead th{
    text-align:left;
    padding:12px 12px;
    font-size:12px;
    color:#595859;
    font-weight:900;
    background:#F1F5F9;
    border-bottom:1px solid var(--line);
    white-space:nowrap;
  }
  tbody td{
    padding:12px 12px;
    border-bottom:1px solid var(--line);
    font-weight:800;
    font-size:13px;
    vertical-align:middle;
    white-space:nowrap;
    color:var(--text);
    background:#fff;
  }
  tbody tr:hover td{background:var(--soft);}

  /* ✅ SADECE TAG: PİLL -> DİKDÖRTGEN (KÖŞELER HAFİF YUMUŞAK) */
  .tag{
    display:inline-flex;align-items:center;justify-content:center;
    height:28px;padding:0 12px;
    border-radius:8px; /* <-- değişen tek yer */
    font-weight:950;font-size:12px;
    border:1px solid transparent;
    transition:transform .12s ease, box-shadow .12s ease;
  }
  .tag:hover{transform:translateY(-1px);box-shadow:0 8px 14px rgba(31,41,55,.08);}

  .amt{font-weight:950;text-align:right;}
  .amt.pos{color:#065F46;}
  .amt.neg{color:#7F1D1D;}
  .muted{color:var(--muted);font-weight:800;font-size:12px;}

  .rowTools{display:flex;align-items:center;gap:10px;justify-content:flex-end;}
  .pill{
    height:34px;padding:0 12px;border-radius:999px;
    border:1px solid var(--line);
    background:#fff;font-weight:900;font-size:12px;color:var(--text);
    display:inline-flex;align-items:center;gap:8px;
    cursor:pointer;
    transition:transform .12s ease, box-shadow .12s ease;
  }
  .pill:hover{transform:translateY(-1px);box-shadow:0 10px 20px rgba(31,41,55,.08);}

  /* ✅ Mobil iyileştirme */
  @media (max-width: 1024px){
    .wrap{padding:10px;}
    .topbar{flex-direction:column;align-items:stretch;}
    .tools{justify-content:flex-start;}
    .search{min-width:0;width:100%;}
    .select{min-width:0;width:100%;}
    .btn{width:100%;justify-content:center;}

    /* KPI: tek sütun */
    .sum{grid-template-columns:1fr;gap:10px;}

    /* Banka: tamamen mobil uyumlu */
    .bankBar{margin:10px;}
    .bankRow{padding:10px;}
    .bankLeft{min-width:0;width:100%;}
    .bankMid{min-width:0;width:100%;}
    .kv{min-width:0;width:100%;}
    .bankRight{width:100%;justify-content:flex-start;margin-left:0;}

    table{min-width:920px;}
    .mainWrap{ margin-left:0; width:100vw; max-width:100vw; }
  }
  </style>
</head>
<body>

<main class="mainWrap" id="mainWrap">
  <div class="wrap">

    <div class="panel">
      <div class="topbar">
        <div class="flex flex-col gap-1">
          <div class="title">Finans</div>
          <div class="subtle">Ödemeler, satışlar, iadeler ve hareket dökümü</div>
        </div>

        <form method="get" class="tools">
          <div class="search">
            <i data-lucide="search" class="w-4 h-4" style="color:var(--muted)"></i>
            <input name="q" value="<?= h($q) ?>" placeholder="Ara: açıklama / tarih" />
          </div>

          <select class="select" name="type">
            <option value="">Tüm Türler</option>
            <option value="odeme"   <?= $type==='odeme'?'selected':'' ?>>Ödeme</option>
            <option value="satis"   <?= $type==='satis'?'selected':'' ?>>Satış</option>
            <option value="iade"    <?= $type==='iade'?'selected':'' ?>>İade</option>
            <option value="kesinti" <?= $type==='kesinti'?'selected':'' ?>>Kesinti</option>
          </select>

          <button class="btn" type="submit">
            <i data-lucide="filter" class="w-4 h-4"></i> Filtrele
          </button>
        </form>
      </div>

      <?php
        $hBek = kpiHover('bekleyen');
        $hOde = kpiHover('odenmis');
        $hSat = kpiHover('satis');
        $hIad = kpiHover('iade');
      ?>

      <div class="sum">
        <div class="kpi" style="--accent:<?=h($hBek['accent'])?>; --ring:<?=h($hBek['ring'])?>;">
          <div class="kpiMain">
            <div class="kpiLabel">Bekleyen Ödeme</div>
            <div>
              <div class="kpiVal"><?= h(money_tr((float)$summary['bekleyen'])) ?></div>
              <div class="kpiCur"><?= h((string)$summary['para_birimi']) ?></div>
            </div>
          </div>
          <div class="kpiIcon"><i data-lucide="<?=h($hBek['icon'])?>" class="w-5 h-5"></i></div>
        </div>

        <div class="kpi" style="--accent:<?=h($hOde['accent'])?>; --ring:<?=h($hOde['ring'])?>;">
          <div class="kpiMain">
            <div class="kpiLabel">Ödemesi Gelmiş</div>
            <div>
              <div class="kpiVal"><?= h(money_tr((float)$summary['odenmis'])) ?></div>
              <div class="kpiCur"><?= h((string)$summary['para_birimi']) ?></div>
            </div>
          </div>
          <div class="kpiIcon"><i data-lucide="<?=h($hOde['icon'])?>" class="w-5 h-5"></i></div>
        </div>

        <div class="kpi" style="--accent:<?=h($hSat['accent'])?>; --ring:<?=h($hSat['ring'])?>;">
          <div class="kpiMain">
            <div class="kpiLabel">Bugüne Kadarki Satış</div>
            <div>
              <div class="kpiVal"><?= h(money_tr((float)$summary['toplam_satis'])) ?></div>
              <div class="kpiCur"><?= h((string)$summary['para_birimi']) ?></div>
            </div>
          </div>
          <div class="kpiIcon"><i data-lucide="<?=h($hSat['icon'])?>" class="w-5 h-5"></i></div>
        </div>

        <div class="kpi" style="--accent:<?=h($hIad['accent'])?>; --ring:<?=h($hIad['ring'])?>;">
          <div class="kpiMain">
            <div class="kpiLabel">Toplam İade Tutarı</div>
            <div>
              <div class="kpiVal"><?= h(money_tr((float)$summary['toplam_iade'])) ?></div>
              <div class="kpiCur"><?= h((string)$summary['para_birimi']) ?></div>
            </div>
          </div>
          <div class="kpiIcon"><i data-lucide="<?=h($hIad['icon'])?>" class="w-5 h-5"></i></div>
        </div>
      </div>

      <!-- ✅ BANKA (KISA) -->
      <section class="bankBar" aria-label="Ödemelerin gerçekleştiği banka hesabı">
        <div class="bankRow">
          <div class="bankLeft">
            <?php if ($bankLogoUrl): ?>
              <img class="bankLogoImg" src="<?= h($bankLogoUrl) ?>" alt="Banka logosu">
            <?php endif; ?>

            <div class="t">
              <div class="bankTitle">
                <i data-lucide="landmark" class="w-4 h-4" style="color:#64748B"></i>
                Banka Hesabı
              </div>
              <div class="bankSub"><?= h($bank['bank_name']) ?> • <?= h($bank['currency']) ?></div>
            </div>
          </div>

          <div class="bankMid">
            <div class="kv">
              <div class="k">Hesap Adı</div>
              <div class="v"><?= h($bank['account_name']) ?></div>
            </div>
            <div class="kv" style="min-width:260px;">
              <div class="k">IBAN</div>
              <div class="v" style="letter-spacing:.02em;"><?= h($bank['iban']) ?></div>
            </div>
          </div>

          <div class="bankRight">
            <button class="copyBtn" type="button" onclick="copyText('<?= h($bank['iban']) ?>')">
              <i data-lucide="copy" class="w-4 h-4"></i> IBAN Kopyala
            </button>
          </div>
        </div>
      </section>

      <div class="tableWrap">
        <table>
          <thead>
            <tr>
              <th class="w-[44px]"><input type="checkbox" onclick="toggleAll(this)"></th>
              <th>Tarih</th>
              <th>Tür</th>
              <th>Açıklama</th>
              <th style="text-align:right;">Tutar</th>
              <th style="text-align:right;">İşlem</th>
            </tr>
          </thead>
          <tbody>
            <?php if (empty($filtered)): ?>
              <tr>
                <td colspan="6" style="padding:16px;color:var(--muted);font-weight:900;background:#fff;">Sonuç bulunamadı.</td>
              </tr>
            <?php else: ?>
              <?php foreach ($filtered as $t): ?>
                <?php
                  $b = badge((string)$t['status']);
                  $amt = (float)($t['amount'] ?? 0);
                  $isNeg = $amt < 0;
                ?>
                <tr>
                  <td><input type="checkbox" class="rowchk"></td>
                  <td><?= h(dt_tr((string)$t['dt'])) ?></td>
                  <td>
                    <span class="tag"
                          style="background:<?=h($b['bg'])?>;border-color:<?=h($b['bd'])?>;color:<?=h($b['tx'])?>;">
                      <?= h($b['label']) ?>
                    </span>
                  </td>
                  <td>
                    <div style="font-weight:950; color:#595859;"><?= h((string)$t['title']) ?></div>
                    <div class="muted"><?= h((string)$t['type']) ?></div>
                  </td>
                  <td class="amt <?= $isNeg ? 'neg' : 'pos' ?>">
                    <?= h(($isNeg ? '-' : '').money_tr(abs($amt))) ?> <?= h((string)$summary['para_birimi']) ?>
                  </td>
                  <td>
                    <div class="rowTools">
                      <button class="pill" type="button" onclick="alert('Detay (demo)')">
                        <i data-lucide="eye" class="w-4 h-4"></i> Detay
                      </button>
                      <button class="pill" type="button" onclick="alert('Dışa aktar (demo)')">
                        <i data-lucide="download" class="w-4 h-4"></i> Dışa Aktar
                      </button>
                    </div>
                  </td>
                </tr>
              <?php endforeach; ?>
            <?php endif; ?>
          </tbody>
        </table>
      </div>

    </div>

  </div>
</main>

<script>
  function toggleAll(master){
    document.querySelectorAll('.rowchk').forEach(ch => ch.checked = master.checked);
  }

  function copyText(txt){
    try{
      navigator.clipboard.writeText(txt);
      alert('Kopyalandı: ' + txt);
    }catch(e){
      const ta = document.createElement('textarea');
      ta.value = txt;
      document.body.appendChild(ta);
      ta.select();
      document.execCommand('copy');
      ta.remove();
      alert('Kopyalandı: ' + txt);
    }
  }

  function applySidebarGap(){
    const pick = (sels) => {
      for (const s of sels){
        const el = document.querySelector(s);
        if (el) return el;
      }
      return null;
    };
    const sidebar = pick(['#sidebar', '.sidebar', 'aside.sidebar', 'nav.sidebar', 'aside', 'nav']);

    let w = 0;
    if (sidebar && window.innerWidth >= 1025) {
      const r = sidebar.getBoundingClientRect();
      const st = getComputedStyle(sidebar);
      const visible = st.display !== 'none' && st.visibility !== 'hidden' && r.width > 56 && r.height > 200 && r.left <= 12;
      const offCanvas = (r.right <= 10) || (r.left < -20);
      if (visible && !offCanvas) w = Math.round(r.width);
    }
    document.documentElement.style.setProperty('--sbw', w + 'px');
  }

  window.addEventListener('DOMContentLoaded', () => {
    if (window.lucide) window.lucide.createIcons();
    applySidebarGap();
    window.addEventListener('resize', applySidebarGap);
    document.addEventListener('click', () => setTimeout(applySidebarGap, 220));
  });
</script>

</body>
</html>
