<?php
require_once __DIR__.'/includes/i18n.php';
$page_title = "Dashboard | ECUPRATIX";
$breadcrumb = "";
$active = "dashboard";
$user_name = $_SESSION["user_name"] ?? "Kullanıcı";
$ip = $_SERVER["REMOTE_ADDR"] ?? "-";

$dongle_serial = $_SESSION["dongle_serial"] ?? "DGL-TR-0000-0000";
$plan_name = $_SESSION["plan_name"] ?? "Standart";
$sub_end = $_SESSION["sub_end"] ?? "2026-12-31";

/* Demo stream items - SON 15 GÜNCELLEME */
$feed_ecu = [];
for($i=1; $i<=15; $i++) {
    $feed_ecu[] = [
        "logo"=>"assets/img/logo_gen3.svg",
        "brand"=>"Brand $i",
        "ecu"=>"ECU-$i",
        "option"=>"Stage $i"
    ];
}
$feed_variant = [];
for($i=1; $i<=15; $i++) {
    $feed_variant[] = [
        "logo"=>"assets/img/logo_gen3.svg",
        "brand"=>"Variant $i",
        "ecu"=>"VAR-$i",
        "option"=>"Option $i"
    ];
}

/* Demo ARGE item */
$arge_item = [
  // Sağ ARGE: 1. alan = ECU resmi, 2. alan = Caterpillar resmi
  "img1"=>"assets/img/arge_ecu.png",
  "img2"=>"assets/img/arge_cat.png",
  "brand"=>"CATERPILLAR",
  "ecu"=>"EDC17CV52",
  "date"=>"2026-02-15"
];

include __DIR__ . "/partials/head.php";
?>
<div class="ux-app">
  <style>
    /* v36: Full-width topbar + sidebar offset (dashboard.php override) */
    html, body { overflow: hidden !important; }
    header.topbar.topbar-wide{
      position: fixed !important;
      top: 0 !important; left: 0 !important; right: 0 !important;
      width: 100vw !important;
      margin: 0 !important;
      border-radius: 0 !important;
      z-index: 9999 !important;
    }
    /* push content + left menu down so it does not sit under the topbar */
    .ux-side{ padding-top: 86px !important; }
    .ux-content main.main.full{ padding-top: 86px !important; }

    /* ===== DASHBOARD SPLIT LAYOUT (menus left, ARGE right) ===== */
    .dashboard-layout.dashboard-split{
      display:grid;
      grid-template-columns: minmax(520px, 1fr) minmax(380px, 520px);
      gap: 24px;
      align-items: start;
      width: 100%;
    }
    /* make menu cards live on the left as a compact 2-col grid */
    .menugrid.menugrid-left{
      margin-top: 0 !important;
      grid-template-columns: repeat(2, minmax(0,1fr)) !important;
      gap: 18px !important;
    }
    .menugrid.menugrid-left .mcard{
      min-height: 150px !important;
      padding: 18px !important;
    }
    .menugrid.menugrid-left .mico{
      width: 52px; height: 52px;
      font-size: 22px;
      border-radius: 16px;
      margin-bottom: 10px;
    }

    /* ARGE single block on the right */
    .arge-panel.arge-right{
      border: 1px solid var(--stroke2);
      background: linear-gradient(180deg, rgba(16,16,16,.96), rgba(6,6,6,.96));
      border-radius: var(--r);
      box-shadow: var(--shadow2);
      padding: 16px;
      overflow: hidden;
    }
    .arge-title{
      font-weight: 800;
      letter-spacing: .3px;
      margin-bottom: 12px;
    }
    .arge-block{ display:flex; flex-direction:column; gap: 14px; }
    .arge-images{
      display:grid;
      grid-template-columns: 1fr 1fr;
      gap: 12px;
    }
    .arge-img{
      border-radius: 14px;
      overflow:hidden;
      border: 1px solid rgba(255,255,255,.08);
      background: rgba(0,0,0,.25);
      aspect-ratio: 1 / 1;
    }
    .arge-img img{
      width:100%;
      height:100%;
      object-fit: cover;
      display:block;
      filter: contrast(1.02) saturate(1.05);
    }
    .arge-meta{
      display:grid;
      grid-template-columns: 1fr;
      gap: 8px;
    }
    .meta-row{
      display:flex;
      align-items:center;
      justify-content:space-between;
      padding: 10px 12px;
      border-radius: 12px;
      border: 1px solid rgba(255,255,255,.08);
      background: rgba(0,0,0,.22);
    }
    .meta-row span{ font-size: 12px; opacity: .75; }
    .meta-row b{ font-size: 13px; }

    /* ===== UPDATES: scrollable table with LOGO - MARKA - ECU - OPSIYON ===== */
    .updates.bottom{
      margin-top: 22px;
      display:grid;
      grid-template-columns: 1fr 1fr;
      gap: 20px;
    }
    .feed-table{
      margin-top: 10px;
      border-radius: 14px;
      border:1px solid rgba(255,255,255,.08);
      background: rgba(0,0,0,.18);
      overflow:hidden;
    }
    .feed-head-row{
      display:grid;
      grid-template-columns: 56px 1.2fr 1fr 1fr;
      gap: 10px;
      padding: 10px 12px;
      font-size: 11px;
      letter-spacing: .25px;
      opacity: .85;
      border-bottom: 1px solid rgba(255,255,255,.08);
      background: rgba(0,0,0,.20);
    }
    .feed-body{
      max-height: clamp(180px, 26vh, 320px);
      overflow:auto;
    }
    .feed-tr{
      display:grid;
      grid-template-columns: 56px 1.2fr 1fr 1fr;
      gap: 10px;
      padding: 10px 12px;
      border-bottom: 1px solid rgba(255,255,255,.06);
      align-items:center;
      font-size: 13px;
    }
    .feed-tr:last-child{ border-bottom: 0; }
    .cell.logo img{
      width: 34px; height: 34px;
      border-radius: 10px;
      border: 1px solid rgba(255,255,255,.12);
      background: rgba(0,0,0,.35);
      display:block;
      padding: 6px;
      object-fit: contain;
    }
    .cell.ecu, .cell.opt{ opacity:.95; }
    .cell.brand{ font-weight: 700; }

    /* responsive: stack ARGE under menus */
    @media (max-width: 1100px){
      .dashboard-layout.dashboard-split{
        grid-template-columns: 1fr;
      }
      .updates.bottom{
        grid-template-columns: 1fr;
      }
    }

  </style>
  <?php $active = $active ?? ""; include __DIR__ . "/partials/user_sidebar.php"; ?>
  <div class="ux-content">
<main class="main full">
  <?php include __DIR__ . "/partials/topbar.php"; ?>

  <style>
    .dashboard-layout { display: grid; grid-template-columns: 400px 1fr; gap: 30px; margin-bottom: 40px; }
    .arge-panel { background: linear-gradient(145deg, #121212, #050505); border: 1px solid rgba(255, 0, 0, 0.2); border-radius: 28px; padding: 25px; display: flex; flex-direction: column; gap: 20px; }
    .arge-title { font-size: 18px; font-weight: 900; color: #ff0000; text-transform: uppercase; letter-spacing: 2px; text-align: center; }
    .arge-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; }
    .arge-img { aspect-ratio: 1/1; background: #000; border-radius: 15px; border: 1px solid rgba(255,255,255,0.05); overflow: hidden; position: relative; }
    .arge-img img { width: 100%; height: 100%; object-fit: cover; opacity: 0.6; transition: 0.3s; }
    .arge-img:hover img { opacity: 1; }
    .arge-label { position: absolute; bottom: 10px; left: 10px; background: #ff0000; color: #fff; font-size: 9px; font-weight: 800; padding: 3px 8px; border-radius: 4px; }
    @media (max-width: 1200px) { .dashboard-layout { grid-template-columns: 1fr; } .arge-panel { display: none; } }
  </style>

  <div class="dashboard-layout dashboard-split">
  <div class="dash-left">
    <section class="menugrid menugrid-left">
      <a class="mcard" href="chiptuning.php">
        <div class="mico red">⚡</div>
        <div class="mtxt">
          <div class="mtitle">Chiptuning</div>
          <div class="msub">ECU yazılım optimizasyonu</div>
        </div>
      </a>

      <a class="mcard" href="dtc.php">
        <div class="mico">⛭</div>
        <div class="mtxt">
          <div class="mtitle">DTC Removal</div>
          <div class="msub">Opsiyon <img class="opt-ico" src="assets/icons/gen3 modül svg/gen3 modül svg/rot-light_STAGE-1.svg" alt=""> yönetimi</div>
        </div>
      </a>

      <a class="mcard" href="requests.php">
        <div class="mico">🗎</div>
        <div class="mtxt">
          <div class="mtitle">Talepler</div>
          <div class="msub">Servis talepleri ve geçmişi</div>
        </div>
      </a>

      <a class="mcard" href="account.php">
        <div class="mico">👤</div>
        <div class="mtxt">
          <div class="mtitle">Hesap</div>
          <div class="msub">Profil ve ayarlar</div>
        </div>
      </a>

      <a class="mcard" href="support.php">
        <div class="mico">🎧</div>
        <div class="mtxt">
          <div class="mtitle">Destek</div>
          <div class="msub">Yardım ve iletişim</div>
        </div>
      </a>

      <a class="mcard" href="dashboard.php">
        <div class="mico red">🔌</div>
        <div class="mtxt">
          <div class="mtitle">Plug</div>
          <div class="msub">Panel & kullanıcı bilgileri</div>
        </div>
      </a>
    </section>
  </div>

  <aside class="arge-panel arge-right">
    <div class="arge-title">ARGE Aşaması</div>
    <div class="arge-block">
      <div class="arge-images">
        <div class="arge-img"><img src="<?= htmlspecialchars($arge_item['img1']) ?>" alt="ARGE 1"></div>
        <div class="arge-img"><img src="<?= htmlspecialchars($arge_item['img2']) ?>" alt="ARGE 2"></div>
      </div>
      <div class="arge-meta">
        <div class="meta-row"><span>Marka</span><b><?= htmlspecialchars($arge_item['brand']) ?></b></div>
        <div class="meta-row"><span>ECU</span><b><?= htmlspecialchars($arge_item['ecu']) ?></b></div>
        <div class="meta-row"><span>Yayın Tarihi</span><b><?= htmlspecialchars($arge_item['date']) ?></b></div>
      </div>
    </div>
  </aside>
</div>

<!-- 4) UPDATES -->
  <section class="updates bottom">
    <div class="upcard">
      <div class="uphead">
        <div class="uptitle">New ECU</div>
        <div class="upbadge">UPDATE</div>
      </div>
      
      <div class="feed-table">
        <div class="feed-head-row">
          <div class="hcell">LOGO</div>
          <div class="hcell">MARKA</div>
          <div class="hcell">ECU</div>
          <div class="hcell">OPSİYON</div>
        </div>
        <div class="feed-body">
          <?php foreach($feed_ecu as $it): ?>
            <div class="feed-tr">
              <div class="cell logo"><img src="<?= htmlspecialchars($it["logo"]) ?>" alt="logo"></div>
              <div class="cell brand"><?= htmlspecialchars($it["brand"]) ?></div>
              <div class="cell ecu"><?= htmlspecialchars($it["ecu"]) ?></div>
              <div class="cell opt"><?= htmlspecialchars($it["option"]) ?></div>
            </div>
          <?php endforeach; ?>
        </div>
      </div>
    
      <a class="chip" href="chiptuning.php">Open</a>
    </div>

    <div class="upcard">
      <div class="uphead">
        <div class="uptitle">New Variant</div>
        <div class="upbadge">UPDATE</div>
      </div>
      
      <div class="feed-table">
        <div class="feed-head-row">
          <div class="hcell">LOGO</div>
          <div class="hcell">MARKA</div>
          <div class="hcell">ECU</div>
          <div class="hcell">OPSİYON</div>
        </div>
        <div class="feed-body">
          <?php foreach($feed_variant as $it): ?>
            <div class="feed-tr">
              <div class="cell logo"><img src="<?= htmlspecialchars($it["logo"]) ?>" alt="logo"></div>
              <div class="cell brand"><?= htmlspecialchars($it["brand"]) ?></div>
              <div class="cell ecu"><?= htmlspecialchars($it["ecu"]) ?></div>
              <div class="cell opt"><?= htmlspecialchars($it["option"]) ?></div>
            </div>
          <?php endforeach; ?>
        </div>
      </div>
    
      <a class="chip" href="requests.php">Open</a>
    </div>
  </section>

  <div class="footer-note">© <?= date("Y") ?> ECUPRATIX. Tüm hakları saklıdır.</div>
</main>
  </div>
</div>
<?php include __DIR__ . "/partials/footer.php"; ?>