<?php declare(strict_types=1);
session_start();
$isAdmin = isset($_SESSION['role']) && $_SESSION['role'] === 'Admin' && isset($_SESSION['user_id']) && (int)$_SESSION['user_id'] > 0;
if (!$isAdmin) {
  header('Location: login.html');
  exit;
}
?>
<!doctype html>
<html class="no-js" lang="zxx">
<head>
  <meta charset="utf-8">
  <meta http-equiv="x-ua-compatible" content="ie=edge">
  <title>Admin • Add Product</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="shortcut icon" type="image/x-icon" href="assets/img/logo/favicon.png">
  <link rel="stylesheet" href="assets/css/bootstrap.css">
  <link rel="stylesheet" href="assets/css/animate.css">
  <link rel="stylesheet" href="assets/css/swiper-bundle.css">
  <link rel="stylesheet" href="assets/css/slick.css">
  <link rel="stylesheet" href="assets/css/magnific-popup.css">
  <link rel="stylesheet" href="assets/css/font-awesome-pro.css">
  <link rel="stylesheet" href="assets/css/spacing.css">
  <link rel="stylesheet" href="assets/css/custom-animation.css">
  <link rel="stylesheet" href="assets/css/main.css">
  <style>
    :root{--ad-bg:#0f0f10;--ad-card:#ffffff;--ad-border:#e6e8eb;--ad-muted:#6b7280;--ad-title:#121317;--ad-accent:#4f46e5}
    .tp-profile-area{padding-top:0!important;padding-bottom:48px!important}
    .tp-header-area.tp-header-inner-style{margin-bottom:0;border-bottom:1px solid #1b1b1b}
    .admin-layout{display:grid;grid-template-columns:260px 1fr;gap:24px;margin-top:24px}
    .section{background:var(--ad-card);border:1px solid var(--ad-border);border-radius:16px;padding:20px}
    .admin-main .card{background:var(--ad-card);border:1px solid var(--ad-border);border-radius:16px}
    .admin-main .card-header{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;border-bottom:1px solid var(--ad-border)}
    .admin-main .card-title{font-weight:700;color:var(--ad-title)}
    .admin-main .breadcrumb{display:flex;gap:8px;color:var(--ad-muted);font-size:14px}
    .admin-main .breadcrumb .sep{opacity:.6}
    .admin-main .actions{display:flex;gap:10px}
    .btn-primary{display:inline-flex;align-items:center;gap:8px;border:1px solid transparent;border-radius:10px;padding:10px 14px;background:var(--ad-accent);color:#fff;box-shadow:0 6px 16px rgba(79,70,229,.25)}
    .btn-primary:hover{filter:brightness(1.05)}
    .btn-primary span{font-weight:600}
    .btn-secondary{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--ad-border);border-radius:10px;padding:10px 14px;background:#f7f7f9;color:#111}
    .grid-2{display:grid;grid-template-columns:1fr 1fr;gap:20px}
    .grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
    .tp-login-input-box label{font-weight:600;color:var(--ad-title);margin-bottom:8px}
    .tp-login-input input, .tp-login-textarea textarea, .postbox__select select{width:100%;height:44px;padding:10px 12px;background:#fff;border:1px solid var(--ad-border);border-radius:10px;color:#111;box-shadow:none}
    .tp-login-textarea textarea{height:auto;min-height:140px;resize:vertical}
    .tp-login-input input::placeholder, .tp-login-textarea textarea::placeholder{color:var(--ad-muted)}
    .tp-login-input input:focus, .tp-login-textarea textarea:focus, .postbox__select select:focus{outline:none;border-color:var(--ad-accent);box-shadow:0 0 0 3px rgba(79,70,229,.15)}
    .postbox__select{position:relative}
    .postbox__select select{appearance:none;-webkit-appearance:none;-moz-appearance:none;padding-right:36px}
    .postbox__select::after{content:"";position:absolute;right:12px;top:50%;transform:translateY(-50%);width:0;height:0;border-left:6px solid transparent;border-right:6px solid transparent;border-top:6px solid #9aa0a6;pointer-events:none}
    .upload-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:10px}
    .upload-card{border:1px solid var(--ad-border);border-radius:12px;background:#fff}
    .upload-drop{position:relative;min-height:100px;border-radius:12px;border:1px dashed #cbd5e1;background:#f8fafc;display:flex;align-items:center;justify-content:center;overflow:hidden}
    .upload-drop.dragover{border-color:var(--ad-accent);background:#f0f1ff}
    .upload-drop img{width:100%;height:100%;object-fit:cover}
    .upload-actions{display:flex;gap:8px;padding:8px;justify-content:center}
    .upload-input{display:none}
    .form-actions{display:flex;gap:10px;margin-top:8px}
    .preview-card{background:#fff;border:1px solid var(--ad-border);border-radius:16px;overflow:hidden}
    .preview-head{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;border-bottom:1px solid var(--ad-border)}
    .preview-title{font-weight:700;color:var(--ad-title)}
    .preview-body{padding:16px}
    .preview-thumb{width:100%;height:220px;object-fit:cover;background:#f2f3f5;border-radius:12px}
    .preview-meta{display:flex;align-items:center;justify-content:space-between;margin-top:10px}
    .preview-price{color:var(--ad-accent);font-weight:700}
    .preview-badge{display:inline-block;background:#fff;border:1px solid var(--ad-accent);color:#111;border-radius:10px;padding:4px 10px;font-size:12px;font-weight:700}
    .admin-sidebar .menu-title{font-weight:700;color:#111;margin-bottom:8px}
    .admin-sidebar ul{list-style:none;padding-left:0;margin:0 0 16px}
    .admin-sidebar ul li a{display:flex;align-items:center;gap:8px;padding:10px 12px;border-radius:10px;color:#111;border:1px solid transparent}
    .admin-sidebar ul li a:hover{background:#f7f7f9}
    .admin-sidebar ul li a.active{background:#f0f1ff;border-color:#e3e5ff}
    @media(max-width:992px){.admin-layout{grid-template-columns:1fr}.grid-2{grid-template-columns:1fr}.upload-grid{grid-template-columns:1fr 1fr}}
  </style>
</head>
<body>
  <header class="tp-header-height">
    <div id="header-sticky" class="tp-header-area tp-header-inner-style">
      <div class="container">
        <div class="row align-items-center">
          <div class="col-xl-3 col-lg-6 col-md-6 col-6">
            <div class="header-left"><div class="admin-headline">Admin Dashboard</div></div>
          </div>
          <div class="col-xl-6 col-lg-4 d-none d-xl-block">
            <div class="tp-header-menu"><nav class="tp-main-menu-content"><ul></ul></nav></div>
          </div>
          <div class="col-xl-3 col-lg-6 col-md-6 col-6">
            <div class="tp-header-right d-flex align-items-center justify-content-end">
              <div class="tp-header-sign-box d-none d-sm-block">
                <a href="logout.php"><i class="fa-solid fa-right-from-bracket"></i>Logout</a>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </header>

  <main>
    <div class="tp-profile-area z-index pb-120 pt-60">
      <div class="container">
        <div class="admin-layout">
          <div class="section sidebar-card">
            <aside class="admin-sidebar">
              <div class="menu-title">Menu</div>
              <ul>
                <li><a href="admin-dashboard.php"><i class="fa-regular fa-grid-2"></i> Dashboard</a></li>
              </ul>
              <div class="menu-title">Product & Order</div>
              <ul>
                <li><a href="admin-products.php" class="active"><i class="fa-regular fa-box"></i> Manage Products</a></li>
                <li><a href="admin-order-requests.php"><i class="fa-regular fa-cart-shopping"></i> Manage Order Requests</a></li>
              </ul>
              <div class="menu-title">Site Content</div>
              <ul>
                <li><a href="admin-home-images.php"><i class="fa-regular fa-image"></i> Home Image</a></li>
              </ul>
              <div class="menu-title">Accounts & Roles</div>
              <ul>
                <li><a href="admin-users.php"><i class="fa-regular fa-users"></i> Customers</a></li>
                <li><a href="#"><i class="fa-regular fa-user-tie"></i> Sellers</a></li>
                <li><a href="#"><i class="fa-regular fa-chart-pie-simple"></i> Reports</a></li>
              </ul>
            </aside>
          </div>
          <section class="admin-main">
            <div class="card mb-20">
              <div class="card-header">
                <div>
                  <h4 class="card-title"><i class="fa-regular fa-plus" style="margin-right:8px"></i>Add Product</h4>
                  <div class="breadcrumb"><span>Products</span><span class="sep">/</span><span>Add Product</span></div>
                </div>
                <div class="actions">
                  <a href="admin-products.php" class="btn-secondary"><i class="fa-regular fa-box"></i><span>Back to Products</span></a>
                </div>
              </div>
            </div>
            <div class="section">
              <form action="product_add.php" method="post" enctype="multipart/form-data">
                <div class="grid-2">
                  <div>
                    <div class="tp-login-input-box text-start mb-20">
                      <label>Product Title <i> *</i></label>
                      <div class="tp-login-input p-relative">
                        <input type="text" name="product_title" placeholder="Product name" required>
                      </div>
                    </div>
                    <div class="tp-login-input-box text-start mb-20">
                      <label>Product Size <i> *</i></label>
                      <div class="postbox__select">
                        <select name="product_size" required>
                          <option value="">Select Size</option>
                          <option value="XS">XS</option>
                          <option value="Small">Small</option>
                          <option value="Medium">Medium</option>
                          <option value="Large">Large</option>
                          <option value="XL">XL</option>
                        </select>
                      </div>
                    </div>
                    <div class="tp-login-input-box text-start mb-20">
                      <label>Price <i> *</i></label>
                      <div class="tp-login-input p-relative">
                        <input type="number" name="price" placeholder="Price" step="0.01" required>
                      </div>
                    </div>
                    <div class="tp-login-input-box text-start mb-20">
                      <label>Condition <i> *</i></label>
                      <div class="postbox__select">
                        <select name="condition" required>
                          <option value="">Select Condition</option>
                          <option value="New">New</option>
                          <option value="Used">Used</option>
                        </select>
                      </div>
                    </div>
                    <div class="tp-login-input-box text-start mb-20">
                      <label>Category <i> *</i></label>
                      <div class="postbox__select">
                        <select name="category" required>
                          <option value="">Select Category</option>
                          <option value="summer">Summer Clothing</option>
                          <option value="winter">Winter Clothing</option>
                          <option value="dress_type">By Dress Type</option>
                          <option value="party_formal">Party & Formal Wear</option>
                          <option value="active">Active Wear / Gym Wear</option>
                          <option value="nightwear">Nightwear / Sleepwear</option>
                          <option value="modest">Modest Wear</option>
                          <option value="casual">Casual Wear</option>
                          <option value="spring">Spring Clothing</option>
                          <option value="autumn">Autumn / Fall Clothing</option>
                        </select>
                      </div>
                    </div>
                    <div class="tp-login-input-box text-start mb-20">
                      <label>Product Type <i> *</i></label>
                      <div class="tp-login-input p-relative">
                        <input type="text" name="product_type" placeholder="e.g. Abaya" required>
                      </div>
                    </div>
                    <div class="tp-login-input-box text-start mb-20">
                      <label>Brand</label>
                      <div class="tp-login-input p-relative">
                        <input type="text" name="brand" placeholder="Type here">
                      </div>
                    </div>
                    <div class="tp-login-input-box text-start mb-20">
                      <label>Color</label>
                      <div class="tp-login-input p-relative">
                        <input type="text" name="color" placeholder="e.g. Red">
                      </div>
                    </div>
                  </div>
                  <div>
                    <div class="preview-card mb-20">
                      <div class="preview-head"><div class="preview-title">Product Preview</div></div>
                      <div class="preview-body">
                        <img id="pvThumb" class="preview-thumb" src="assets/img/listing/listing-1-1.png" alt="thumb">
                        <div class="preview-meta">
                          <div id="pvTitle">Product name</div>
                          <div id="pvPrice" class="preview-price">$0.00</div>
                        </div>
                        <div style="margin-top:8px"><span id="pvCond" class="preview-badge">Condition</span></div>
                      </div>
                    </div>
                    <div class="tp-login-input-box text-start mb-20">
                      <label>Product Description <i> *</i></label>
                      <div class="tp-login-textarea p-relative">
                        <textarea name="description" placeholder="Write details" required></textarea>
                      </div>
                    </div>
                    <div class="mb-10"><h5 class="tp-form-title">Size Chart</h5><p class="text-muted" style="font-size:12px">Provide measurements (optional)</p></div>
                    <div class="grid-3">
                      <div class="tp-login-input-box text-start mb-15">
                        <label>Chest</label>
                        <div class="tp-login-input p-relative"><input type="text" name="chart_chest" placeholder="e.g. 34-36 in"></div>
                      </div>
                      <div class="tp-login-input-box text-start mb-15">
                        <label>Waist</label>
                        <div class="tp-login-input p-relative"><input type="text" name="chart_waist" placeholder="e.g. 28-30 in"></div>
                      </div>
                      <div class="tp-login-input-box text-start mb-15">
                        <label>Hip</label>
                        <div class="tp-login-input p-relative"><input type="text" name="chart_hip" placeholder="e.g. 36-38 in"></div>
                      </div>
                      <div class="tp-login-input-box text-start mb-15">
                        <label>Shoulder</label>
                        <div class="tp-login-input p-relative"><input type="text" name="chart_shoulder" placeholder="e.g. 16 in"></div>
                      </div>
                      <div class="tp-login-input-box text-start mb-15">
                        <label>Sleeve Length</label>
                        <div class="tp-login-input p-relative"><input type="text" name="chart_sleeve" placeholder="shoulder to wrist"></div>
                      </div>
                      <div class="tp-login-input-box text-start mb-15">
                        <label>Length</label>
                        <div class="tp-login-input p-relative"><input type="text" name="chart_length" placeholder="e.g. 25 in"></div>
                      </div>
                      <div class="tp-login-input-box text-start mb-15">
                        <label>Shirt/Jacket Length</label>
                        <div class="tp-login-input p-relative"><input type="text" name="chart_shirt_length" placeholder="shoulder to hem"></div>
                      </div>
                      <div class="tp-login-input-box text-start mb-15">
                        <label>Trouser/Inseam</label>
                        <div class="tp-login-input p-relative"><input type="text" name="chart_trouser_length" placeholder="waist to ankle"></div>
                      </div>
                    </div>
                    <div class="mb-10"><h5 class="tp-form-title">Images</h5></div>
                    <div class="upload-grid">
                      <div class="upload-card">
                        <div class="upload-drop" data-index="1"></div>
                        <div class="upload-actions">
                          <label class="btn-secondary" style="cursor:pointer">
                            <input class="upload-input" type="file" name="image1" accept="image/png,image/jpeg">
                            <span>Browse</span>
                          </label>
                        </div>
                      </div>
                      <div class="upload-card">
                        <div class="upload-drop" data-index="2"></div>
                        <div class="upload-actions">
                          <label class="btn-secondary" style="cursor:pointer">
                            <input class="upload-input" type="file" name="image2" accept="image/png,image/jpeg">
                            <span>Browse</span>
                          </label>
                        </div>
                      </div>
                      <div class="upload-card">
                        <div class="upload-drop" data-index="3"></div>
                        <div class="upload-actions">
                          <label class="btn-secondary" style="cursor:pointer">
                            <input class="upload-input" type="file" name="image3" accept="image/png,image/jpeg">
                            <span>Browse</span>
                          </label>
                        </div>
                      </div>
                      <div class="upload-card">
                        <div class="upload-drop" data-index="4"></div>
                        <div class="upload-actions">
                          <label class="btn-secondary" style="cursor:pointer">
                            <input class="upload-input" type="file" name="image4" accept="image/png,image/jpeg">
                            <span>Browse</span>
                          </label>
                        </div>
                      </div>
                      <div class="upload-card">
                        <div class="upload-drop" data-index="5"></div>
                        <div class="upload-actions">
                          <label class="btn-secondary" style="cursor:pointer">
                            <input class="upload-input" type="file" name="image5" accept="image/png,image/jpeg">
                            <span>Browse</span>
                          </label>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
                <div class="form-actions">
                  <a href="admin-products.php" class="btn-secondary"><i class="fa-regular fa-arrow-left"></i><span>Cancel</span></a>
                  <button type="submit" class="btn-primary"><i class="fa-regular fa-plus"></i><span>Add Product</span></button>
                </div>
              </form>
            </div>
          </section>
        </div>
      </div>
    </div>
  </main>

  <footer>
    <div class="tp-copyright-area black-bg">
      <div class="container">
        <div class="tp-copyright-ptb">
          <div class="row align-items-center">
            <div class="col-xl-7 col-lg-6 col-md-6 col-sm-7">
              <div class="tp-copyright-left d-flex align-items-center justify-content-center justify-content-md-start">
                <div class="tp-copyright-text text-center text-md-start">
                  <p>ReWear Admin</p>
                </div>
              </div>
            </div>
            <div class="col-xl-5 col-lg-6 col-md-6 col-sm-5">
              <div class="tp-copyright-right justify-content-center d-flex justify-content-sm-end align-items-center">
                <div class="tp-copyright-social">
                  <a href="#"><i class="fa-brands fa-facebook-f"></i></a>
                  <a href="#"><i class="fa-brands fa-twitter"></i></a>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </footer>

  <script src="assets/js/vendor/jquery.js"></script>
  <script src="assets/js/bootstrap-bundle.js"></script>
  <script src="assets/js/slick.js"></script>
  <script src="assets/js/main.js"></script>
  <script>
    (function(){
      function fmtPrice(n){ try{ var v = parseFloat(n||'0'); return '$'+v.toFixed(2); }catch(e){ return '$0.00'; } }
      function val(name){ var el = document.querySelector('[name="'+name+'"]'); return el ? el.value : ''; }
      function updatePreview(){
        var t = val('product_title')||'Product name';
        var p = val('price');
        var c = val('condition')||'Condition';
        var pvT = document.getElementById('pvTitle');
        var pvP = document.getElementById('pvPrice');
        var pvC = document.getElementById('pvCond');
        var pvImg = document.getElementById('pvThumb');
        if(pvT) pvT.textContent = t;
        if(pvP) pvP.textContent = fmtPrice(p);
        if(pvC) pvC.textContent = c;
        if(pvImg){
          var firstDrop = document.querySelector('.upload-drop[data-index="1"] img');
          if(firstDrop) pvImg.src = firstDrop.src;
        }
      }
      ['product_title','price','condition'].forEach(function(n){ var el = document.querySelector('[name="'+n+'"]'); if(el){ el.addEventListener('input', updatePreview); el.addEventListener('change', updatePreview); } });
      var inputs = document.querySelectorAll('.upload-input');
      inputs.forEach(function(input){
        input.addEventListener('change', function(e){
          var file = e.target.files && e.target.files[0];
          var card = e.target.closest('.upload-card');
          var drop = card ? card.querySelector('.upload-drop') : null;
          if(file && drop){
            var url = URL.createObjectURL(file);
            drop.innerHTML = '<img src="'+url+'" alt="img">';
            var idx = drop.getAttribute('data-index');
            if(idx === '1'){ var pvImg = document.getElementById('pvThumb'); if(pvImg) pvImg.src = url; }
          }
        });
      });
      var drops = document.querySelectorAll('.upload-drop');
      drops.forEach(function(drop){
        drop.addEventListener('dragover', function(e){ e.preventDefault(); drop.classList.add('dragover'); });
        drop.addEventListener('dragleave', function(){ drop.classList.remove('dragover'); });
        drop.addEventListener('drop', function(e){
          e.preventDefault(); drop.classList.remove('dragover');
          var idx = drop.getAttribute('data-index');
          var input = drop.parentElement.querySelector('.upload-input');
          var files = e.dataTransfer.files;
          if(input && files && files.length){
            input.files = files;
            var file = files[0];
            var url = URL.createObjectURL(file);
            drop.innerHTML = '<img src="'+url+'" alt="img">';
            if(idx === '1'){ var pvImg = document.getElementById('pvThumb'); if(pvImg) pvImg.src = url; }
          }
        });
      });
      updatePreview();
    })();
  </script>
</body>
</html>
