<?php
$page_title = "Premium Chiptuning | ECUPRATIX";
$breadcrumb = "Chiptuning";
$active = "chiptuning";
$user_name = $_SESSION["user_name"] ?? "User";
include __DIR__ . "/partials/head.php";?>
<div class="ux-app full-page-chiptuning">
  <style>
    /* PREMIUM UI FOR CHIPTUNING - ISOLATED STYLES */
    :root {
      --accent: #ff2a2a;
      --accent-rgb: 255, 42, 42;
      --card-bg: rgba(18, 19, 23, 0.6);
      --border-light: rgba(255, 255, 255, 0.08);
    }
    
    .full-page-chiptuning { grid-template-columns: 1fr !important; }
    .full-page-chiptuning .ux-side { display: none !important; }
    
    .full-page-chiptuning .ux-content main.main.full { 
      padding-top: 100px !important; 
      padding-left: 30px !important;
      padding-right: 30px !important;
    }

    /* FILTERS */
    .selection-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-bottom: 30px; }
    .filter-card {
      background: var(--card-bg);
      border: 1px solid var(--border-light);
      border-radius: 20px;
      padding: 15px 20px;
      backdrop-filter: blur(15px);
      transition: all 0.3s ease;
    }
    .filter-card:hover { border-color: rgba(var(--accent-rgb), 0.4); }
    .filter-label { font-size: 10px; font-weight: 800; color: var(--accent); text-transform: uppercase; letter-spacing: 1.5px; margin-bottom: 10px; display: block; }
    .filter-wrap { display: flex; align-items: center; gap: 15px; }
    .filter-icon { font-size: 20px; width: 40px; height: 40px; background: rgba(255,255,255,0.03); border-radius: 12px; display: flex; align-items: center; justify-content: center; border: 1px solid var(--border-light); }
    .filter-select {
      background: transparent !important; border: none !important; color: #fff !important;
      font-size: 16px !important; font-weight: 700 !important; width: 100%; cursor: pointer;
      appearance: none; outline: none !important;
    }
    .filter-select option { background: #121318 !important; color: #fff !important; }

    /* WORKSPACE */
    .workspace-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin-bottom: 40px; }
    .workspace-card {
      background: var(--card-bg);
      border: 1px solid var(--border-light);
      border-radius: 28px;
      padding: 25px;
      display: flex; flex-direction: column;
      backdrop-filter: blur(25px);
      min-height: 550px;
      transition: all 0.4s ease;
    }
    .workspace-card:hover { border-color: rgba(var(--accent-rgb), 0.2); transform: translateY(-5px); }
    .card-title { font-size: 13px; font-weight: 800; text-transform: uppercase; letter-spacing: 1px; color: rgba(255,255,255,0.5); margin-bottom: 25px; }

    /* HEX UPLOAD */
    .hex-art-box { height: 200px; background: #000; border-radius: 20px; position: relative; overflow: hidden; cursor: pointer; border: 1px solid rgba(255,255,255,0.05); }
    .hex-stream { font-family: 'JetBrains Mono', monospace; font-size: 9px; color: rgba(0, 255, 140, 0.1); padding: 12px; line-height: 1.4; height: 100%; overflow: hidden; }
    .upload-ui { position: absolute; inset: 0; background: radial-gradient(circle at center, transparent 0%, rgba(0,0,0,0.8) 100%); display: flex; flex-direction: column; align-items: center; justify-content: center; }
    .upload-btn { width: 60px; height: 60px; background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.1); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 24px; margin-bottom: 15px; box-shadow: 0 0 20px rgba(0,0,0,0.5); }
    .upload-text { font-size: 12px; font-weight: 800; letter-spacing: 1px; }

    /* INFO LIST */
    .info-list { display: flex; flex-direction: column; gap: 12px; }
    .info-item { padding: 15px; background: rgba(255,255,255,0.02); border-radius: 15px; border: 1px solid rgba(255,255,255,0.03); display: flex; justify-content: space-between; align-items: center; }
    .info-label { font-size: 11px; font-weight: 700; color: rgba(255,255,255,0.4); text-transform: uppercase; }
    .info-value { font-size: 13px; font-weight: 800; color: #fff; }

    /* MOD BUTTONS */
    .mod-list { display: flex; flex-direction: column; gap: 8px; overflow-y: auto; max-height: 400px; padding-right: 5px; }
    .mod-list::-webkit-scrollbar { width: 4px; }
    .mod-list::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.1); border-radius: 10px; }
    .mod-btn { display: flex; justify-content: space-between; align-items: center; padding: 16px 20px; background: rgba(255,255,255,0.02); border: 1px solid rgba(255,255,255,0.05); border-radius: 18px; cursor: pointer; transition: all 0.2s ease; }
    .mod-btn:hover { background: rgba(255,255,255,0.05); border-color: rgba(255,255,255,0.1); }
    .mod-btn.active { background: rgba(var(--accent-rgb), 0.1); border-color: var(--accent); box-shadow: 0 0 15px rgba(var(--accent-rgb), 0.1); }
    .mod-name { font-size: 13px; font-weight: 700; color: rgba(255,255,255,0.8); }
    .mod-btn.active .mod-name { color: #fff; }
    .mod-indicator { width: 18px; height: 18px; border: 2px solid rgba(255,255,255,0.1); border-radius: 6px; transition: all 0.2s ease; }
    .mod-btn.active .mod-indicator { background: var(--accent); border-color: var(--accent); box-shadow: 0 0 10px var(--accent); }

    /* POPUP */
    .popup-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.7); backdrop-filter: blur(25px); z-index: 10000; display: none; align-items: center; justify-content: center; }
    .popup-content { width: 500px; background: rgba(18, 19, 23, 0.8); border: 1px solid var(--border-light); border-radius: 40px; padding: 50px; text-align: center; box-shadow: 0 30px 60px rgba(0,0,0,0.5); }
    .loader { width: 70px; height: 70px; border: 5px solid rgba(255,42,42,0.1); border-top-color: var(--accent); border-radius: 50%; animation: spin 1s cubic-bezier(0.68, -0.55, 0.27, 1.55) infinite; margin: 0 auto 30px; }
    
    @keyframes spin { to { transform: rotate(360deg); } }
    @keyframes pulse { 0% { opacity: 0.5; } 50% { opacity: 1; } 100% { opacity: 0.5; } }
    .analyzing-text { font-size: 20px; font-weight: 800; margin-bottom: 10px; letter-spacing: 1px; }
    .status-text { font-size: 12px; font-weight: 700; color: var(--accent); text-transform: uppercase; letter-spacing: 3px; animation: pulse 1.5s infinite; }

    @media (max-width: 1400px) { .workspace-grid { grid-template-columns: repeat(2, 1fr); } }
    @media (max-width: 900px) { .selection-grid, .workspace-grid { grid-template-columns: 1fr; } }
  </style>

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

      <section style="margin-bottom: 35px; display: flex; justify-content: space-between; align-items: center;">
        <div>
          <h1 style="font-size: 32px; font-weight: 800; margin: 0;">Chiptuning <span style="color:var(--accent)">Studio</span></h1>
          <p style="color: rgba(255,255,255,0.4); font-weight: 600; margin: 5px 0 0 0;">Yazılım optimizasyon ve modifikasyon merkezi</p>
        </div>
        <div style="display: flex; gap: 10px;">
          <div style="background: rgba(255,255,255,0.03); padding: 10px 20px; border-radius: 12px; border: 1px solid var(--border-light); font-size: 12px; font-weight: 700;">
            SERVER: <span style="color: #00ff8c;">ONLINE</span>
          </div>
        </div>
      </section>

      <section class="selection-grid">
        <div class="filter-card">
          <span class="filter-label">Araç Kategorisi</span>
          <div class="filter-wrap">
            <div class="filter-icon">🚗</div>
            <select class="filter-select">
              <option>Otomobil (Passenger Car)</option>
              <option>Kamyon & Otobüs (Truck & Bus)</option>
              <option>Traktör (Tractor)</option>
              <option>İş Makinesi (Machinery)</option>
            </select>
          </div>
        </div>
        <div class="filter-card">
          <span class="filter-label">Marka (Brand)</span>
          <div class="filter-wrap">
            <div class="filter-icon">🏁</div>
            <select class="filter-select">
              <option>Nissan</option>
              <option>Mercedes-Benz</option>
              <option>BMW</option>
              <option>Volkswagen</option>
              <option>Audi</option>
            </select>
          </div>
        </div>
        <div class="filter-card">
          <span class="filter-label">ECU Ünitesi</span>
          <div class="filter-wrap">
            <div class="filter-icon">🧠</div>
            <select class="filter-select">
              <option>CONTINENTAL SID321</option>
              <option>BOSCH EDC17C64</option>
              <option>BOSCH MD1CS006</option>
              <option>DELPHI DCM7.1</option>
            </select>
          </div>
        </div>
      </section>

      <section class="workspace-grid">
        <!-- 1. UPLOAD -->
        <div class="workspace-card">
          <div class="card-title">1. Veri Girişi</div>
          <div class="hex-art-box" onclick="document.getElementById('fileInput').click()">
            <div id="hexStream" class="hex-stream"></div>
            <div class="upload-ui">
              <div class="upload-btn">🚀</div>
              <span class="upload-text">BINARY DOSYASI SEÇ</span>
              <span style="font-size: 9px; color: rgba(255,255,255,0.3); margin-top: 5px;">Sürükle veya tıkla</span>
            </div>
          </div>
          <input type="file" id="fileInput" hidden onchange="startAnalysis()" />
          <div style="margin-top:auto;">
            <button class="btn primary" style="width:100%; height:60px; border-radius:20px; font-weight:800; font-size:14px; letter-spacing:1px;" onclick="startAnalysis()">DOSYAYI ANALİZ ET</button>
          </div>
        </div>

        <!-- 2. ANALYSIS INFO -->
        <div class="workspace-card">
          <div class="card-title">2. Araç Analizi</div>
          <div class="info-list">
            <div class="info-item">
              <span class="info-label">Marka</span>
              <span class="info-value">Nissan Performance</span>
            </div>
            <div class="info-item">
              <span class="info-label">ECU Modeli</span>
              <span class="info-value">Continental SID321</span>
            </div>
            <div class="info-item">
              <span class="info-label">Dosya Boyutu</span>
              <span class="info-value">4.096 KB (Matched)</span>
            </div>
            <div class="info-item">
              <span class="info-label">Güvenlik (CS)</span>
              <span class="info-value" style="color: #00ff8c;">DOĞRULANDI</span>
            </div>
          </div>
          <div style="margin-top: auto; padding: 20px; background: rgba(0,255,140,0.05); border-radius: 20px; border: 1px solid rgba(0,255,140,0.1); text-align: center;">
            <span style="font-size: 11px; font-weight: 800; color: #00ff8c; letter-spacing: 1px;">YAZILIM UYUMLU</span>
          </div>
        </div>

        <!-- 3. CHIPTUNING -->
        <div class="workspace-card">
          <div class="card-title">3. Performans</div>
          <div class="mod-list">
            <?php 
              $chip = ["Stage 1 Performance", "Stage 2 Extreme", "Pop & Bang Crackle", "Vmax Limit Removal", "Start & Stop OFF", "Sport Display"];
              foreach($chip as $m) {
                echo '<div class="mod-btn" onclick="this.classList.toggle(\'active\')">
                        <span class="mod-name">'.$m.'</span>
                        <div class="mod-indicator"></div>
                      </div>';
              }
            ?>
          </div>
        </div>

        <!-- 4. MODULES -->
        <div class="workspace-card">
          <div class="card-title">4. Modüller</div>
          <div class="mod-list">
            <?php 
              $mods = ["ADBLUE / SCR Removal", "DPF Filter Removal", "EGR Valve OFF", "AGS Shutter OFF", "EXHAUST FLAP", "HOT START Fix"];
              foreach($mods as $m) {
                echo '<div class="mod-btn" onclick="this.classList.toggle(\'active\')">
                        <span class="mod-name">'.$m.'</span>
                        <div class="mod-indicator"></div>
                      </div>';
              }
            ?>
          </div>
        </div>
      </section>
    </main>
  </div>

  <!-- POPUP -->
  <div id="analysisPopup" class="popup-overlay">
    <div class="popup-content">
      <div class="loader"></div>
      <div class="analyzing-text">DOSYA TARANIYOR</div>
      <div class="status-text">LÜTFEN BEKLEYİNİZ...</div>
      <div style="margin-top: 30px; display: flex; flex-direction: column; gap: 10px; text-align: left; max-width: 300px; margin-left: auto; margin-right: auto;">
        <div style="font-size: 11px; color: rgba(255,255,255,0.4); display: flex; align-items: center; gap: 10px;">
          <span style="color: #00ff8c;">✓</span> Binary yapısı kontrol ediliyor
        </div>
        <div style="font-size: 11px; color: rgba(255,255,255,0.4); display: flex; align-items: center; gap: 10px;">
          <span style="color: #00ff8c;">✓</span> Checksum doğrulanıyor
        </div>
        <div style="font-size: 11px; color: rgba(255,255,255,0.4); display: flex; align-items: center; gap: 10px;">
          <span id="popupStatus" style="color: var(--accent);">●</span> Harita verileri eşleştiriliyor
        </div>
      </div>
    </div>
  </div>

  <script>
    function updateHex() {
      const stream = document.getElementById('hexStream');
      if(!stream) return;
      const chars = '0123456789ABCDEF';
      let content = '';
      for(let i=0; i<500; i++) { 
        content += chars[Math.floor(Math.random()*16)] + chars[Math.floor(Math.random()*16)] + ' '; 
      }
      stream.textContent = content;
    }
    setInterval(updateHex, 100);

    function startAnalysis() {
      const popup = document.getElementById('analysisPopup');
      popup.style.display = 'flex';
      
      setTimeout(() => {
        document.getElementById('popupStatus').style.color = '#00ff8c';
        document.getElementById('popupStatus').textContent = '✓';
      }, 1500);

      setTimeout(() => {
        popup.style.display = 'none';
        // Pulse effect for options after closing
        const cards = document.querySelectorAll('.workspace-card');
        cards[2].style.borderColor = 'var(--accent)';
        cards[3].style.borderColor = 'var(--accent)';
        setTimeout(() => {
          cards[2].style.borderColor = 'var(--border-light)';
          cards[3].style.borderColor = 'var(--border-light)';
        }, 2000);
      }, 3000);
    }
  </script>
</div>
<?php include __DIR__ . "/partials/footer.php"; ?>
