<?php
declare(strict_types=1);
session_start();
if (!isset($_SESSION['user_id']) || (int)$_SESSION['user_id'] <= 0) {
    header('Location: login.html');
    exit;
}

$dbHost = getenv('DB_HOST') ?: 'localhost';
$dbUser = getenv('DB_USER') ?: 'root';
$dbPass = getenv('DB_PASSWORD') ?: '';
$dbName = 'listbnb';

try {
    $pdo = new PDO("mysql:host={$dbHost};dbname={$dbName};charset=utf8mb4", $dbUser, $dbPass, [
        PDO::ATTR_ERRMODE => PDO::ERRMODE_EXCEPTION,
        PDO::ATTR_DEFAULT_FETCH_MODE => PDO::FETCH_ASSOC,
    ]);
} catch (Throwable $e) {
    http_response_code(500);
    echo "<!doctype html><html><head><meta charset='utf-8'></head><body><script>alert('Database connection failed.');window.location.href='index.html';</script></body></html>";
    exit;
}

$pdo->exec(
    'CREATE TABLE IF NOT EXISTS products (
        id INT AUTO_INCREMENT PRIMARY KEY,
        product_title VARCHAR(255) NOT NULL,
        product_size ENUM("XS","Small","Medium","Large","XL") NOT NULL,
        price DECIMAL(10,2) NOT NULL,
        `condition` ENUM("New","Used") NOT NULL,
        category VARCHAR(50) NOT NULL,
        product_type VARCHAR(100) NOT NULL,
        brand VARCHAR(100),
        color VARCHAR(50),
        chart_chest VARCHAR(50),
        chart_waist VARCHAR(50),
        chart_hip VARCHAR(50),
        chart_shoulder VARCHAR(50),
        chart_sleeve VARCHAR(50),
        chart_length VARCHAR(50),
        chart_shirt_length VARCHAR(50),
        chart_trouser_length VARCHAR(50),
        description TEXT NOT NULL,
        image1 VARCHAR(255),
        image2 VARCHAR(255),
        image3 VARCHAR(255),
        image4 VARCHAR(255),
        image5 VARCHAR(255),
        user_id INT UNSIGNED,
        status ENUM("Pending","Active","Inactive") NOT NULL DEFAULT "Pending",
        created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP
    ) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4'
);
try { $pdo->exec('ALTER TABLE products ADD COLUMN status ENUM("Pending","Active","Inactive") NOT NULL DEFAULT "Pending"'); } catch (Throwable $e) {}
try { $pdo->exec('ALTER TABLE products ADD COLUMN user_id INT UNSIGNED'); } catch (Throwable $e) {}
try { $pdo->exec('ALTER TABLE products ADD COLUMN color VARCHAR(50)'); } catch (Throwable $e) {}
try { $pdo->exec('ALTER TABLE products ADD COLUMN chart_chest VARCHAR(50)'); } catch (Throwable $e) {}
try { $pdo->exec('ALTER TABLE products ADD COLUMN chart_waist VARCHAR(50)'); } catch (Throwable $e) {}
try { $pdo->exec('ALTER TABLE products ADD COLUMN chart_hip VARCHAR(50)'); } catch (Throwable $e) {}
try { $pdo->exec('ALTER TABLE products ADD COLUMN chart_shoulder VARCHAR(50)'); } catch (Throwable $e) {}
try { $pdo->exec('ALTER TABLE products ADD COLUMN chart_sleeve VARCHAR(50)'); } catch (Throwable $e) {}
try { $pdo->exec('ALTER TABLE products ADD COLUMN chart_length VARCHAR(50)'); } catch (Throwable $e) {}
try { $pdo->exec('ALTER TABLE products ADD COLUMN chart_shirt_length VARCHAR(50)'); } catch (Throwable $e) {}
try { $pdo->exec('ALTER TABLE products ADD COLUMN chart_trouser_length VARCHAR(50)'); } catch (Throwable $e) {}
$products = [];
try {
    $stmt = $pdo->prepare('SELECT * FROM products WHERE user_id=:uid AND status="Active" ORDER BY created_at DESC');
    $stmt->execute([':uid' => (int)$_SESSION['user_id']]);
    $products = $stmt->fetchAll();
} catch (Throwable $e) {
    $products = [];
}

?><!doctype html>
<html class="no-js" lang="zxx">
<head>
    <meta charset="utf-8">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <title>My Products - ListBnb</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 {
        --primary: #4f46e5;
        --primary-light: #eef2ff;
        --primary-dark: #4338ca;
        --success: #10b981;
        --danger: #ef4444;
        --warning: #f59e0b;
        --dark: #1f2937;
        --light: #f9fafb;
        --border: #e5e7eb;
        --text: #374151;
        --text-light: #6b7280;
        --radius: 12px;
        --shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.03);
        --transition: all 0.2s ease-in-out;
      }

      body {
        background-color: #f3f4f6;
        color: var(--text);
        font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
        line-height: 1.5;
      }

      .tp-profile-area {
        padding: 60px 0;
      }

      .breadcrumb__title {
        font-size: 24px;
        font-weight: 700;
        color: var(--dark);
        margin-bottom: 30px;
        position: relative;
        padding-bottom: 15px;
      }

      .breadcrumb__title::after {
        content: '';
        position: absolute;
        left: 0;
        bottom: 0;
        width: 60px;
        height: 3px;
        background: var(--primary);
        border-radius: 3px;
      }

      .my-products-card {
        background: #fff;
        border: 1px solid var(--border);
        border-radius: var(--radius);
        box-shadow: var(--shadow);
        transition: var(--transition);
        display: flex;
        flex-direction: column;
        height: 100%;
        overflow: hidden;
        position: relative;
      }

      .my-products-card:hover {
        transform: translateY(-5px);
        box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
      }

      .my-products-image {
        max-width: 100%;
        max-height: 400px;
        width: auto !important;
        height: auto !important;
        margin: 0 auto;
        display: block !important;
        object-fit: contain;
        object-position: center;
        border-radius: var(--radius) var(--radius) 0 0;
        background-color: #f8f9fa;
        padding: 10px;
      }

      .tp-form-title {
        font-size: 18px;
        font-weight: 600;
        color: var(--dark);
        margin: 0 0 15px;
        padding: 0 20px;
        padding-top: 20px;
      }

      .my-products-body {
        padding: 0 20px 20px;
        flex: 1;
        display: flex;
        flex-direction: column;
      }

      .my-products-body p {
        margin: 0 0 8px;
        font-size: 14px;
        color: var(--text);
      }

      .my-products-body p strong {
        color: var(--dark);
        font-weight: 600;
        min-width: 100px;
        display: inline-block;
      }

      .line-clamp-3 {
        display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
        overflow: hidden;
        text-overflow: ellipsis;
        margin: 10px 0;
        color: var(--text-light);
        font-size: 14px;
        line-height: 1.5;
      }

      .my-products-actions {
        display: flex;
        gap: 12px;
        margin-top: auto;
        padding-top: 15px;
        border-top: 1px solid var(--border);
      }

      .myprod-slider {
        position: relative;
        border-radius: var(--radius) var(--radius) 0 0;
        overflow: hidden;
        background-color: #f8f9fa;
        min-height: 200px;
        display: flex !important;
        align-items: center;
        justify-content: center;
      }
      
      .myprod-slider .slick-track {
        display: flex !important;
        align-items: center;
        justify-content: center;
      }

      .myprod-slider .slick-prev,
      .myprod-slider .slick-next {
        width: 32px;
        height: 32px;
        border-radius: 50%;
        background: rgba(0, 0, 0, 0.4);
        z-index: 2;
        transition: var(--transition);
      }

      .myprod-slider .slick-prev {
        left: 15px;
      }

      .myprod-slider .slick-next {
        right: 15px;
      }

      .myprod-slider .slick-prev:hover,
      .myprod-slider .slick-next:hover {
        background: rgba(0, 0, 0, 0.6);
      }

      .myprod-slider .slick-prev:before {
        content: '\2039';
        font-size: 20px;
        line-height: 32px;
        color: #fff;
      }

      .myprod-slider .slick-next:before {
        content: '\203A';
        font-size: 20px;
        line-height: 32px;
        color: #fff;
      }

      /* Dots navigation removed */

      .status-badge {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        padding: 4px 12px;
        border-radius: 999px;
        font-size: 12px;
        font-weight: 500;
        text-transform: capitalize;
      }

      .status-Pending {
        background: #fffbeb;
        color: #b45309;
        border: 1px solid #fde68a;
      }

      .status-Active {
        background: #ecfdf5;
        color: #047857;
        border: 1px solid #a7f3d0;
      }

      .status-Inactive {
        background: #fef2f2;
        color: #b91c1c;
        border: 1px solid #fecaca;
      }

      .action-btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 6px;
        padding: 8px 16px;
        border-radius: 8px;
        font-size: 13px;
        font-weight: 500;
        text-decoration: none;
        transition: var(--transition);
        border: 1px solid transparent;
      }

      .action-edit {
        background: #e0f2fe;
        color: #0369a1;
        border-color: #bae6fd;
      }

      .action-edit:hover {
        background: #bae6fd;
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(2, 132, 199, 0.1);
      }

      .action-delete {
        background: #fee2e2;
        color: #b91c1c;
        border-color: #fecaca;
      }

      .action-delete:hover {
        background: #fecaca;
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(220, 38, 38, 0.1);
      }

      .no-products {
        text-align: center;
        padding: 60px 20px;
        background: #fff;
        border-radius: var(--radius);
        box-shadow: var(--shadow);
      }

      .no-products i {
        font-size: 48px;
        color: var(--primary-light);
        margin-bottom: 20px;
        display: inline-block;
      }

      .no-products h4 {
        font-size: 18px;
        font-weight: 600;
        color: var(--dark);
        margin-bottom: 10px;
      }

      .no-products p {
        color: var(--text-light);
        margin-bottom: 20px;
      }

      .no-products .btn-add-product {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        padding: 10px 20px;
        background: var(--primary);
        color: white;
        border-radius: 8px;
        text-decoration: none;
        font-weight: 500;
        transition: var(--transition);
      }

      .no-products .btn-add-product:hover {
        background: var(--primary-dark);
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(79, 70, 229, 0.2);
      }

      @media (max-width: 767px) {
        .my-products-card {
          margin: 0 10px;
        }
        
        .my-products-actions {
          flex-direction: column;
        }
        
        .action-btn {
          width: 100%;
          justify-content: center;
        }
      }
    </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="tp-header-logo">
                     <a href="index-2.php" class="brand-text">ReWear</a>
                  </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>
                           <li class="has-dropdown">
                              <a href="index-2.php">Home</a>
                              <!-- <div class="tp-submenu submenu has-homemenu">
                                 <div class="row gx-6 row-cols-1 row-cols-md-2 row-cols-xl-3">
                                    <div class="col homemenu">
                                       <div class="homemenu-thumb mb-15">
                                          <img src="assets/img/menu/home-1.jpg" alt="">
                                          <div class="homemenu-btn">
                                             <a class="tp-menu-btn" href="index.html">Demo page</a>
                                          </div>
                                       </div>
                                       <div class="homemenu-content text-center">
                                          <h4 class="homemenu-title">
                                             <a href="index.html">Home 01</a>
                                          </h4>
                                       </div>
                                    </div>
                                    <div class="col homemenu">
                                       <div class="homemenu-thumb mb-15">
                                          <img src="assets/img/menu/home-2.jpg" alt="">
                                          <div class="homemenu-btn">
                                             <a class="tp-menu-btn" href="index-2.html">Demo page</a>
                                          </div>
                                       </div>
                                       <div class="homemenu-content text-center">
                                          <h4 class="homemenu-title">
                                             <a href="index-2.html">Home 02</a>
                                          </h4>
                                       </div>
                                    </div>
                                    <div class="col homemenu">
                                       <div class="homemenu-thumb mb-15">
                                          <img src="assets/img/menu/home-3.jpg" alt="">
                                          <div class="homemenu-btn">
                                             <a class="tp-menu-btn" href="index-3.html">Demo page</a>
                                          </div>
                                       </div>
                                       <div class="homemenu-content text-center">
                                          <h4 class="homemenu-title">
                                             <a href="index-3.html">Home 03</a>
                                          </h4>
                                       </div>
                                    </div>
                                 </div>
                              </div> -->
                           </li>
                           <li class="has-dropdown">
                            <a href="#">Categories</a>
                              <ul class="submenu tp-submenu">
                                 <li><a href="category.php?category=Summer%20Clothing">Summer Clothing</a></li>
                                    <li><a href="category.php?category=Winter%20Clothing">Winter Clothing</a></li>
                                    <li><a href="category.php?category=Party%20%26%20Formal%20Wear">Party & Formal Wear</a></li>
                                    <li><a href="category.php?category=Active%20Wear%20%2F%20Gym%20Wear">Active Wear / Gym Wear</a></li>
                                    <li><a href="category.php?category=Nightwear%20%2F%20Sleepwear">Nightwear / Sleepwear</a></li>
                                    <li><a href="category.php?category=Modest%20Wear">Modest Wear</a></li>
                                    <li><a href="category.php?category=Casual%20Wear">Casual Wear</a></li>
                              </ul>
                           </li>
                           <li><a href="chat.php">Chat</a></li>
                           <li><a href="my-products.php">My Products</a></li>
                        </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" style="gap:10px">
                     <div class="tp-header-sign-box d-none d-sm-block d-flex align-items-center gap-8">
                        <a href="logout.php"><i class="fa-solid fa-right-from-bracket"></i>Logout</a>
                     </div>
                     <div class="tp-header-btn d-none d-xl-block">
                        <a class="tp-btn-theme" href="listing-ads.php"><span>Post Your Ad <i class="fa-sharp fa-regular fa-arrow-right-long"></i></span></a>
                     </div>
                  </div>
               </div>
            </div>
         </div>
      </div>
   </header>

   <main>
      <div class="tp-profile-area">
         <div class="container">
            <div class="row">
               <div class="col-12">
                  <h3 class="breadcrumb__title">My Products</h3>
               </div>
            </div>
            <div class="row g-4">
               <?php if (!empty($products)): ?>
                  <?php foreach ($products as $p): ?>
                  <div class="col-xl-4 col-lg-6 col-md-6">
                     <div class="my-products-card">
                        <?php $hasImages = false; ?>
                        <div class="myprod-slider">
                           <?php for ($i=1; $i<=5; $i++): 
                              $k = 'image'.$i; 
                              if (!empty($p[$k])): 
                                 $hasImages = true; ?>
                                 <div><img class="my-products-image" src="<?php echo htmlspecialchars($p[$k], ENT_QUOTES); ?>" alt="<?php echo htmlspecialchars($p['product_title'] ?? 'Product Image', ENT_QUOTES); ?>"/></div>
                              <?php endif; 
                           endfor; 
                           if (!$hasImages): ?>
                              <div><img class="my-products-image" src="assets/img/placeholder-product.jpg" alt="No image available"/></div>
                           <?php endif; ?>
                        </div>
                        
                        <div class="my-products-body">
                           <h4 class="tp-form-title"><?php echo htmlspecialchars($p['product_title'] ?? 'Untitled Product', ENT_QUOTES); ?></h4>
                           
                           <p><strong>Price:</strong> $<?php echo number_format((float)($p['price'] ?? 0), 2); ?></p>
                           <p><strong>Size:</strong> <?php echo htmlspecialchars($p['product_size'] ?? 'N/A', ENT_QUOTES); ?></p>
                           <p><strong>Condition:</strong> <?php echo htmlspecialchars($p['condition'] ?? 'N/A', ENT_QUOTES); ?></p>
                           <p><strong>Category:</strong> <?php echo htmlspecialchars($p['category'] ?? 'N/A', ENT_QUOTES); ?></p>
                           
                           <?php if (!empty($p['brand'])): ?>
                           <p><strong>Brand:</strong> <?php echo htmlspecialchars($p['brand'], ENT_QUOTES); ?></p>
                           <?php endif; ?>
                           
                           <?php if (!empty($p['description'])): ?>
                           <p class="line-clamp-3"><?php echo htmlspecialchars($p['description'], ENT_QUOTES); ?></p>
                           <?php endif; ?>
                           
                           <?php $st = isset($p['status']) ? (string)$p['status'] : ''; ?>
                           <?php if ($st !== ''): ?>
                           <div class="d-flex align-items-center mb-3">
                              <strong class="me-2">Status:</strong>
                              <span class="status-badge status-<?php echo htmlspecialchars($st, ENT_QUOTES); ?>">
                                 <i class="fa-solid fa-circle" style="font-size: 8px; margin-right: 6px;"></i>
                                 <?php echo htmlspecialchars($st, ENT_QUOTES); ?>
                              </span>
                           </div>
                           <?php endif; ?>
                           
                           <div class="my-products-actions">
                              <a class="action-btn action-edit" href="product_edit.php?id=<?php echo (int)$p['id']; ?>">
                                 <i class="fa-solid fa-pen"></i>
                                 <span>Edit</span>
                              </a>
                              <form action="product_delete.php" method="post" onsubmit="return confirm('Are you sure you want to delete this product? This action cannot be undone.')" style="width: 100%;">
                                 <input type="hidden" name="id" value="<?php echo (int)$p['id']; ?>"/>
                                 <button class="action-btn action-delete" type="submit" style="width: 100%;">
                                    <i class="fa-solid fa-trash"></i>
                                    <span>Delete</span>
                                 </button>
                              </form>
                           </div>
                        </div>
                     </div>
                  </div>
                  <?php endforeach; ?>
               <?php else: ?>
               <div class="col-12">
                  <div class="no-products">
                     <i class="fa-regular fa-box-open"></i>
                     <h4>No Products Found</h4>
                     <p>You haven't added any products yet. Start by adding your first product to your collection.</p>
                     <a href="listing-ads.php" class="btn-add-product">
                        <i class="fa-solid fa-plus"></i>
                        <span>Add New Product</span>
                     </a>
                  </div>
               </div>
               <?php endif; ?>
            </div>
            
            <?php if (!empty($products)): ?>
            <div class="row mt-4">
               <div class="col-12 text-center">
                  <a href="listing-ads.php" class="btn-add-product" style="display: inline-flex; margin-top: 20px;">
                     <i class="fa-solid fa-plus"></i>
                     <span>Add Another Product</span>
                  </a>
               </div>
            </div>
            <?php endif; ?>
         </div>
      </div>
   </main>

   <footer>
      <div class="tp-footer-area z-index black-bg fix p-relative pt-115 pb-70">
         <div class="tp-footer-big-text d-none d-md-block">
            <span>ReWear</span>
         </div>
         <div class="container">
            <div class="row">
               <div class="col-xl-6 col-lg-6 mb-50 wow tpfadeLeft" data-wow-duration=".9s" data-wow-delay=".5s">
                  <div class="tp-footer-widget">
                     <div class="tp-form-box">
                        <div class="tp-footer-title-box pb-50">
                           <span class="tp-section-subtitle-2 mb-10">support email</span>
                           <h4 class="tp-form-title">
                              <a href="mailto:info@listbnb.com">info@listbnb.com</a>
                           </h4>
                        </div>
                        <form action="#">
                           <div class="row">
                              <div class="col-xl-6 col-lg-6 col-md-6 col-12">
                                 <div class="tp-form-input-box">
                                    <label>full name</label>
                                    <input type="text" placeholder="Your name">
                                 </div>
                              </div>
                              <div class="col-xl-6 col-lg-6 col-md-6 col-12">
                                 <div class="tp-form-input-box">
                                    <label>email address</label>
                                    <input type="email" placeholder="Your email">
                                 </div>
                              </div>
                              <div class="col-12">
                                 <div class="tp-form-textarea-box">
                                    <label>message</label>
                                    <textarea placeholder="Your message"></textarea>
                                 </div>
                              </div>
                           </div>                       
                        </form>
                        <div class="tp-form-button">
                           <button class="tp-btn-black theme-bg" type="submit">
                              <span>
                                 Submit 
                                 <i class="fa-sharp fa-regular fa-arrow-right-long"></i>
                              </span>
                           </button>
                        </div>
                     </div>
                  </div>
               </div>
               <div class="col-xl-6 col-lg-6 mb-50 wow tpfadeRight" data-wow-duration=".9s" data-wow-delay=".7s">
                  <div class="tp-footer-widget">                     
                     <div class="tp-footer-right">
                        <h4 class="tp-form-title pb-30">Essential</h4>
                        <div class="tp-footer-list pb-65">
                           <ul>
                              <li><a href="#">Company & Contact Info</a></li>
                              <li><a href="sitemap.html">Sitemap</a></li>
                              <li><a href="privacy.html">Privacy Policy</a></li>
                              <li><a href="faq.html">FAQ Page</a></li>
                              <li><a href="terms.html">Terms & Conditions</a></li>
                           </ul>
                        </div>
                        <div class="tp-footer-content tp-footer-content-border">
                  <p><i>ReWear</i> a Largest Classified Listing Marketplace offers perfect WordPress Ads classified Themes to build your own classified websites.</p>
                           <a href="contact.html"><i class="fal fa-arrow-right-long"></i> Get It Now</a>
                        </div>
                     </div>
                  </div>
               </div>
            </div>
         </div>
      </div>
      <!-- copy-right area start -->
      <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 wow tpfadeUp" data-wow-duration=".9s" data-wow-delay=".3s">
                     <div class="tp-copyright-left d-flex align-items-center justify-content-center justify-content-md-start">
                        <div class="tp-copyright-logo d-none d-xl-block"><span>ReWear</span></div>
                        <div class="tp-copyright-text text-center text-md-start">
                           <p>Copyright & Design by <a href="#">@ThemePure</a> - 2024</p>
                        </div>
                     </div>
                  </div>
                  <div class="col-xl-5 col-lg-6 col-md-6 col-sm-5 wow tpfadeUp" data-wow-duration=".9s" data-wow-delay=".3s">
                     <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>
                           <a href="#"><i class="fa-brands fa-behance"></i></a>
                           <a href="#"><i class="fa-brands fa-youtube"></i></a>
                        </div>
                        <div class="tp-copyright__lang d-none d-md-block">
                           <ul>
                               <li>
                                   <a id="tp-copyright__lang-toogle" href="javascript:void(0)">
                                       English
                                       <span><i class="fa-regular fa-angle-up"></i></span>
                                   </a>
                                   <ul class="tp-copyright__lang-submenu">
                                       <li>
                                           <a href="#">Arabic</a>
                                       </li>
                                       <li>
                                           <a href="#">Spanish</a>
                                       </li>
                                       <li>
                                           <a href="#">Mandarin</a>
                                       </li>
                                   </ul>
                               </li>
                           </ul>
                       </div>
                     </div>
                  </div>
               </div>
            </div>
         </div>
      </div>
      <!-- copy-right area end -->
   </footer>

   <script src="assets/js/vendor/jquery.js"></script>
   <script src="assets/js/bootstrap-bundle.js"></script>
   <script src="assets/js/slick.min.js"></script>
   <script>
      $(document).ready(function(){
         // Initialize product image slider
         $('.myprod-slider').slick({
            dots: false, // Disable dots navigation
            infinite: true,
            speed: 500,
            fade: false,
            cssEase: 'ease-in-out',
            autoplay: true,
            autoplaySpeed: 3000,
            centerMode: true,
            centerPadding: '0',
            prevArrow: '<button type="button" class="slick-prev" aria-label="Previous"><i class="fa-solid fa-chevron-left"></i></button>',
            nextArrow: '<button type="button" class="slick-next" aria-label="Next"><i class="fa-solid fa-chevron-right"></i></button>',
            customPaging: function() {
               return ''; // This removes the counter completely
            },
            responsive: [
               {
                  breakpoint: 768,
                  settings: {
                     arrows: false
                  }
               }
            ]
         });
         
         // Add smooth scrolling to all links
         $('a[href*="#"]').on('click', function(event) {
            if (this.hash !== '') {
               event.preventDefault();
               const hash = this.hash;
               $('html, body').animate({
                  scrollTop: $(hash).offset().top - 100
               }, 800, function(){
                  window.location.hash = hash;
               });
            }
         });
         
         // Add confirmation for delete action
         $('form[action*="delete"]').on('submit', function() {
            return confirm('Are you sure you want to delete this product? This action cannot be undone.');
         });
      });
   </script>
   <script src="assets/js/slick.js"></script>
   <script src="assets/js/magnific-popup.js"></script>
   <script src="assets/js/nice-select.js"></script>
   <script src="assets/js/purecounter.js"></script>
   <script src="assets/js/countdown.js"></script>
   <script src="assets/js/wow.js"></script>
   <script src="assets/js/isotope-pkgd.js"></script>
   <script src="assets/js/imagesloaded-pkgd.js"></script>
   <script src="assets/js/ajax-form.js"></script>
   <script src="assets/js/main.js"></script>
   <script>
      (function(){
         if (window.jQuery && jQuery.fn && jQuery.fn.slick) {
            jQuery('.myprod-slider').each(function(){
               var $el = jQuery(this);
               $el.slick({
                  slidesToShow: 1,
                  slidesToScroll: 1,
                  arrows: true,
                  customPaging: function() {
                     return ''; // This removes the counter completely
                  },
                  dots: true,
                  autoplay: false,
                  adaptiveHeight: true
               });
            });
         }
      })();
   </script>
</body>
</html>
