<!DOCTYPE html>

<html lang="en">
<head>
        <?php echo view('partials/title-meta', array('title' => 'Product Details')) ?> <?= $this->include('partials/head-css') ?>
    </head>
<body>
<div class="wrapper">
            <?php echo view('partials/topbar', array('subtitle' => 'Ecommerce', 'title' => 'Product Details')) ?> <?= $this->include('partials/sidenav') ?>

            <!-- Start Page Content here -->
<div class="page-content">
<main>
                    <?php echo view('partials/page-title', array('subtitle' => 'Ecommerce', 'title' => 'Product Details')) ?>

                    <div class="container-fluid">
<div class="card">
<div class="card-body">
<div class="grid grid-cols-1 lg:grid-cols-3 gap-base">
<div>
<div class="card sticky top-20">
<!-- Slider -->
<div class="relative" data-hs-carousel='{ "loadingClasses": "opacity-0" }'>
<div class="hs-carousel relative overflow-hidden w-full lg:min-h-120 min-h-90 rounded-lg">
<div class="hs-carousel-body flex flex-nowrap transition-transform duration-700 opacity-0">
<div class="hs-carousel-slide">
<img alt="indicator-img" class="w-full" src="/images/products/single-1.png"/>
</div>
<div class="hs-carousel-slide">
<img alt="indicator-img" class="w-full" src="/images/products/single-2.png"/>
</div>
<div class="hs-carousel-slide">
<img alt="indicator-img" class="w-full" src="/images/products/single-3.png"/>
</div>
<div class="hs-carousel-slide">
<img alt="indicator-img" class="w-full" src="/images/products/single-4.png"/>
</div>
</div>
<div class="hs-carousel-pagination relative mt-5 z-10">
<div class="flex flex-row items-center justify-center gap-4">
<div class="hs-carousel-pagination-item shrink-0 border border-default-300 rounded overflow-hidden cursor-pointer opacity-50 hs-carousel-active:opacity-100">
<img alt="indicator-img" class="w-12" src="/images/products/single-1.png"/>
</div>
<div class="hs-carousel-pagination-item shrink-0 border border-default-300 rounded overflow-hidden cursor-pointer opacity-50 hs-carousel-active:opacity-100">
<img alt="indicator-img" class="w-12" src="/images/products/single-2.png"/>
</div>
<div class="hs-carousel-pagination-item shrink-0 border border-default-300 rounded overflow-hidden cursor-pointer opacity-50 hs-carousel-active:opacity-100">
<img alt="indicator-img" class="w-12" src="/images/products/single-3.png"/>
</div>
<div class="hs-carousel-pagination-item shrink-0 border border-default-300 rounded overflow-hidden cursor-pointer opacity-50 hs-carousel-active:opacity-100">
<img alt="indicator-img" class="w-12" src="/images/products/single-4.png"/>
</div>
</div>
</div>
</div>
</div>
<!-- End Slider -->
<div class="my-5 flex justify-center gap-2">
<a class="btn bg-light hover:text-primary" href="/apps-ecommerce-product-add">
<i class="iconify tabler--pencil text-base"></i>
                                                    Edit
                                                </a>
<a class="btn bg-danger text-white hover:bg-danger-hover" href="/apps-ecommerce-product-add">
<i class="iconify tabler--circle-dashed-plus text-base"></i>
                                                    Delisting
                                                </a>
</div>
</div>
</div>
<div class="lg:col-span-2">
<div class="md:p-7.5">
<div class="mb-5 flex justify-between">
<span class="badge bg-success/15 text-success rounded-full font-semibold text-sm py-1.5 px-3">In Stock</span>
<div class="flex items-center text-base">
<i class="iconify tabler--star-filled text-warning"></i>
<i class="iconify tabler--star-filled text-warning"></i>
<i class="iconify tabler--star-filled text-warning"></i>
<i class="iconify tabler--star-filled text-warning"></i>
<i class="iconify tabler--star-filled text-warning"></i>
<span>
<a class="hover:text-primary ms-1 font-medium" href="/apps-ecommerce-reviews">(859 Reviews)</a>
</span>
</div>
</div>
<div class="mt-5 mb-5 md:mb-7.5">
<h4 class="text-lg">Apple iMac 24” M3 Chip – 4.5K Retina Display</h4>
</div>
<div class="mb-5 grid grid-cols-2 md:mb-7.5 md:grid-cols-4 gap-x-base">
<!-- Updated product details -->
<div>
<h6 class="text-default-400 text-xs mb-1.25 uppercase">SKU:</h6>
<p class="font-medium">IMAC-M3-24</p>
</div>
<div>
<h6 class="text-default-400 text-xs mb-1.25 uppercase">Category:</h6>
<p class="font-medium">Computers</p>
</div>
<div>
<h6 class="text-default-400 text-xs mb-1.25 uppercase">Stock:</h6>
<p class="font-medium">67</p>
</div>
<div>
<h6 class="text-default-400 text-xs mb-1.25 uppercase">Published:</h6>
<p class="font-medium">
                                                        12 Jul, 2025
                                                        <small class="text-default-400">09:00 AM</small>
</p>
</div>
<!-- Orders and revenue -->
<div class="mt-0 md:mt-7.5">
<h6 class="text-default-400 text-xs mb-1.25 uppercase">Orders:</h6>
<p class="font-medium">1,428</p>
</div>
<div class="mt-0 md:mt-7.5">
<h6 class="text-default-400 text-xs mb-1.25 uppercase">Revenue:</h6>
<p class="font-medium">$2,350,120.00</p>
</div>
</div>
<h3 class="text-default-400 mb-7.5 flex items-center gap-3">
<del class="text-default-400 text-lg">$1,499.00</del>
<span class="text-danger text-xl font-bold">$1,299.00</span>
<span class="text-default-400 text-lg">(13%)</span>
</h3>
<h5 class="text-default-400 mb-2.5 text-xs uppercase">Product Info:</h5>
<p class="mb-4">
                                                The Apple iMac 24” with the M3 chip redefines performance and design. Featuring a stunning 4.5K Retina display, ultra-fast processing, and a sleek aluminum chassis in multiple colors, it’s perfect for creatives and professionals
                                                alike.
                                            </p>
<p class="mb-5">Enjoy seamless performance with macOS, optimized apps, and powerful memory — all in an all-in-one setup that fits any workspace.</p>
<h6 class="mb-2">Details :</h6>
<ul class="mb-5 flex list-inside list-disc ps-4 flex-col gap-y-1.25">
<li>24” 4.5K Retina Display with True Tone.</li>
<li>Apple M3 chip with 8-core CPU and 10-core GPU.</li>
<li>8GB unified memory (configurable to 24GB).</li>
<li>512GB SSD storage (configurable up to 2TB).</li>
<li>Color-matched Magic Keyboard and Mouse.</li>
</ul>
<a class="text-primary text-sm font-semibold" href="#!">Read More...</a>
<div class="mt-10 md:mt-15">
<div class="card shadow-none border border-dashed border-default-300" data-table="" data-table-rows-per-page="5">
<div class="card-header">
<h4 class="card-title">Manage Reviews</h4>
</div>
<div>
<div class="grid grid-cols-1 lg:grid-cols-12">
<div class="lg:col-span-7">
<div class="flex flex-wrap items-center p-7.5 gap-7.5">
<img alt="Product" class="h-20" src="/images/ratings.svg"/>
<div class="flex flex-col gap-y-2.5">
<h3 class="text-primary flex items-center gap-2.5 text-xl font-bold">
                                                                            4.92
                                                                            <i class="iconify tabler--star-filled text-xl"></i>
</h3>
<p>Based on 245 verified reviews</p>
<p class="text-default-400 text-xs">Feedback collected from real customers who purchased our templates</p>
<div>
<span class="badge badge-label bg-success text-white">+12 new this week</span>
</div>
</div>
</div>
</div>
<div class="lg:col-span-5">
<div class="space-y-2.5 p-7.5">
<!-- 5 Star -->
<div class="flex items-center gap-2">
<div class="text-default-800 text-sm text-nowrap">5 Star</div>
<div aria-valuemax="100" aria-valuemin="0" aria-valuenow="25" class="bg-default-200 flex h-2 w-full overflow-hidden rounded-full" role="progressbar">
<div class="bg-primary flex flex-col justify-center overflow-hidden rounded-s-full text-center text-xs whitespace-nowrap text-white transition duration-500" style="width: 85%"></div>
</div>
<div class="text-end">
<span class="badge bg-light text-dark font-semibold">128</span>
</div>
</div>
<!-- 4 Star -->
<div class="flex items-center gap-2">
<div class="text-default-800 text-sm text-nowrap">4 Star</div>
<div aria-valuemax="100" aria-valuemin="0" aria-valuenow="25" class="bg-default-200 flex h-2 w-full overflow-hidden rounded-full" role="progressbar">
<div class="bg-primary flex flex-col justify-center overflow-hidden rounded-s-full text-center text-xs whitespace-nowrap text-white transition duration-500" style="width: 30%"></div>
</div>
<div class="text-end">
<span class="badge bg-light text-dark font-semibold">37</span>
</div>
</div>
<!-- 3 Star -->
<div class="flex items-center gap-2">
<div class="text-default-800 text-sm text-nowrap">3 Star</div>
<div aria-valuemax="100" aria-valuemin="0" aria-valuenow="25" class="bg-default-200 flex h-2 w-full overflow-hidden rounded-full" role="progressbar">
<div class="bg-primary flex flex-col justify-center overflow-hidden rounded-s-full text-center text-xs whitespace-nowrap text-white transition duration-500" style="width: 3%"></div>
</div>
<div class="text-end">
<span class="badge bg-light text-dark font-semibold">15</span>
</div>
</div>
<!-- 2 Star -->
<div class="flex items-center gap-2">
<div class="text-default-800 text-sm text-nowrap">2 Star</div>
<div aria-valuemax="100" aria-valuemin="0" aria-valuenow="25" class="bg-default-200 flex h-2 w-full overflow-hidden rounded-full" role="progressbar">
<div class="bg-primary flex flex-col justify-center overflow-hidden rounded-s-full text-center text-xs whitespace-nowrap text-white transition duration-500" style="width: 1%"></div>
</div>
<div class="text-end">
<span class="badge bg-light text-dark font-semibold">7</span>
</div>
</div>
<!-- 1 Star -->
<div class="flex items-center gap-2">
<div class="text-default-800 text-sm text-nowrap">1 Star</div>
<div aria-valuemax="100" aria-valuemin="0" aria-valuenow="25" class="bg-default-200 flex h-2 w-full overflow-hidden rounded-full" role="progressbar">
<div class="bg-primary flex flex-col justify-center overflow-hidden rounded-s-full text-center text-xs whitespace-nowrap text-white transition duration-500" style="width: 1%"></div>
</div>
<div class="text-end">
<span class="badge bg-light text-dark font-semibold">2</span>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="table-wrapper">
<table class="table table-hover text-wrap">
<thead class="bg-light/25 text-2xs font-medium uppercase border-t border-dashed border-default-200">
<tr>
<th>Reviewer</th>
<th style="width: 18rem">Review</th>
<th data-table-sort="">Date</th>
<th data-table-sort="">Status</th>
<th class="text-center" style="width: 1%">Actions</th>
</tr>
</thead>
<tbody>
<!-- Row 1 -->
<tr>
<td>
<div class="flex items-center gap-2.5">
<div class="size-8">
<img alt="Sophia Lee" class="h-full w-full rounded-full object-cover" src="/images/users/user-8.jpg"/>
</div>
<div>
<h5 class="text-sm leading-tight font-medium">Sophia Lee</h5>
<p class="text-default-400 text-xs">sophia.lee@digitalshop.com</p>
</div>
</div>
</td>
<td>
<div class="text-warning flex items-center gap-1 text-base">
<i class="iconify tabler--star-filled text-warning"></i>
<i class="iconify tabler--star-filled text-warning"></i>
<i class="iconify tabler--star-filled text-warning"></i>
<i class="iconify tabler--star-filled text-warning"></i>
<i class="iconify tabler--star-filled text-warning"></i>
</div>
<h5 class="text-default-800 mt-3 mb-2 text-sm font-medium">Great product, would buy again!</h5>
<p class="text-default-400 text-sm italic">"These earbuds are amazing, the sound quality is top-notch. Totally worth the price!"</p>
</td>
<td>
<span class="flex items-center gap-1.5">
                                                                            22 Apr, 2025
                                                                            <span class="text-default-400 block text-xs">04:10 PM</span>
</span>
</td>
<td>
<span class="badge text-2xs font-semibold bg-success/15 text-success">Published</span>
</td>
<td>
<div class="flex justify-center gap-1.5">
<a class="btn btn-icon btn-sm border border-default-300 hover:border-default-400" href="#">
<i class="iconify tabler--eye text-base"></i>
</a>
<a class="btn btn-icon btn-sm border border-default-300 hover:border-default-400" href="#">
<i class="iconify tabler--edit text-base"></i>
</a>
<a class="btn btn-icon btn-sm border border-default-300 hover:border-default-400" data-table-delete-row="" href="#">
<i class="iconify tabler--trash text-base"></i>
</a>
</div>
</td>
</tr>
<!-- Row 2 -->
<tr>
<td>
<div class="flex items-center gap-2.5">
<div class="size-8">
<img alt="David Smith" class="h-full w-full rounded-full object-cover" src="/images/users/user-6.jpg"/>
</div>
<div>
<h5 class="text-sm leading-tight font-medium">David Smith</h5>
<p class="text-default-400 text-xs">david.smith@healthstore.com</p>
</div>
</div>
</td>
<td class="w-xs px-4 py-3">
<div class="text-warning flex items-center gap-1 text-base">
<i class="iconify tabler--star-filled text-warning"></i>
<i class="iconify tabler--star-filled text-warning"></i>
<i class="iconify tabler--star-filled text-warning"></i>
<i class="iconify tabler--star-filled text-warning"></i>
<i class="iconify tabler--star text-warning"></i>
</div>
<h5 class="text-default-800 mt-3 mb-2 text-sm font-medium">Decent, but overpriced</h5>
<p class="text-default-400 text-sm italic">"It does the job, but I feel like it's a little expensive for what it offers."</p>
</td>
<td>
<span class="flex items-center gap-1.5">
                                                                            23 Apr, 2025
                                                                            <span class="text-default-400 block text-xs">02:20 PM</span>
</span>
</td>
<td>
<span class="badge text-2xs font-semibold bg-warning/15 text-warning">Pending</span>
</td>
<td>
<div class="flex justify-center gap-1.5">
<a class="btn btn-icon btn-sm border border-default-300 hover:border-default-400" href="#">
<i class="iconify tabler--eye text-base"></i>
</a>
<a class="btn btn-icon btn-sm border border-default-300 hover:border-default-400" href="#">
<i class="iconify tabler--edit text-base"></i>
</a>
<a class="btn btn-icon btn-sm border border-default-300 hover:border-default-400" data-table-delete-row="" href="#">
<i class="iconify tabler--trash text-base"></i>
</a>
</div>
</td>
</tr>
<!-- Row 3 -->
<tr>
<td>
<div class="flex items-center gap-2.5">
<div class="size-8">
<img alt="Alice Johnson" class="h-full w-full rounded-full object-cover" src="/images/users/user-3.jpg"/>
</div>
<div>
<h5 class="text-sm leading-tight font-medium">Alice Johnson</h5>
<p class="text-default-400 text-xs">alice.johnson@homesupplies.com</p>
</div>
</div>
</td>
<td class="w-xs px-4 py-3">
<div class="text-warning flex items-center gap-1 text-base">
<i class="iconify tabler--star-filled text-warning"></i>
<i class="iconify tabler--star-filled text-warning"></i>
<i class="iconify tabler--star-filled text-warning"></i>
<i class="iconify tabler--star-filled text-warning"></i>
<i class="iconify tabler--star-filled text-warning"></i>
</div>
<h5 class="text-default-800 mt-3 mb-2 text-sm font-medium">Amazing quality!</h5>
<p class="text-default-400 text-sm italic">"The TV has incredible picture quality. Totally worth the investment!"</p>
</td>
<td>
<span class="flex items-center gap-1.5">
                                                                            24 Apr, 2025
                                                                            <span class="text-default-400 block text-xs">09:15 AM</span>
</span>
</td>
<td>
<span class="badge text-2xs font-semibold bg-success/15 text-success">Published</span>
</td>
<td>
<div class="flex justify-center gap-1.5">
<a class="btn btn-icon btn-sm border border-default-300 hover:border-default-400" href="#">
<i class="iconify tabler--eye text-base"></i>
</a>
<a class="btn btn-icon btn-sm border border-default-300 hover:border-default-400" href="#">
<i class="iconify tabler--edit text-base"></i>
</a>
<a class="btn btn-icon btn-sm border border-default-300 hover:border-default-400" data-table-delete-row="" href="#">
<i class="iconify tabler--trash text-base"></i>
</a>
</div>
</td>
</tr>
<!-- Row 4 -->
<tr>
<td>
<div class="flex items-center gap-2.5">
<div class="size-8">
<img alt="Michael Green" class="h-full w-full rounded-full object-cover" src="/images/users/user-2.jpg"/>
</div>
<div>
<h5 class="text-sm leading-tight font-medium">Michael Green</h5>
<p class="text-default-400 text-xs">michael.green@mobileshop.com</p>
</div>
</div>
</td>
<td class="w-xs px-4 py-3">
<div class="text-warning flex items-center gap-1 text-base">
<i class="iconify tabler--star-filled text-warning"></i>
<i class="iconify tabler--star-filled text-warning"></i>
<i class="iconify tabler--star-filled text-warning"></i>
<i class="iconify tabler--star-filled text-warning"></i>
<i class="iconify tabler--star-filled text-warning"></i>
</div>
<h5 class="text-default-800 mt-3 mb-2 text-sm font-medium">Perfect phone, highly recommended!</h5>
<p class="text-default-400 text-sm italic">"The camera is amazing and the performance is smooth. Definitely the best smartphone I have used!"</p>
</td>
<td>
<span class="flex items-center gap-1.5">
                                                                            25 Apr, 2025
                                                                            <span class="text-default-400 block text-xs">11:30 AM</span>
</span>
</td>
<td>
<span class="badge text-2xs font-semibold bg-success/15 text-success">Published</span>
</td>
<td>
<div class="flex justify-center gap-1.5">
<a class="btn btn-icon btn-sm border border-default-300 hover:border-default-400" href="#">
<i class="iconify tabler--eye text-base"></i>
</a>
<a class="btn btn-icon btn-sm border border-default-300 hover:border-default-400" href="#">
<i class="iconify tabler--edit text-base"></i>
</a>
<a class="btn btn-icon btn-sm border border-default-300 hover:border-default-400" data-table-delete-row="" href="#">
<i class="iconify tabler--trash text-base"></i>
</a>
</div>
</td>
</tr>
<!-- Row 5 -->
<tr>
<td>
<div class="flex items-center gap-2.5">
<div class="size-8">
<img alt="Chris Evans" class="h-full w-full rounded-full object-cover" src="/images/users/user-4.jpg"/>
</div>
<div>
<h5 class="text-sm leading-tight font-medium">Chris Evans</h5>
<p class="text-default-400 text-xs">chris.evans@gamestore.com</p>
</div>
</div>
</td>
<td class="w-xs px-4 py-3">
<div class="text-warning flex items-center gap-1 text-base">
<i class="iconify tabler--star-filled text-warning"></i>
<i class="iconify tabler--star-filled text-warning"></i>
<i class="iconify tabler--star-filled text-warning"></i>
<i class="iconify tabler--star-filled text-warning"></i>
<i class="iconify tabler--star text-warning"></i>
</div>
<h5 class="text-default-800 mt-3 mb-2 text-sm font-medium">Great for gaming but heavy</h5>
<p class="text-default-400 text-sm italic">"The performance is amazing, but it's a bit too heavy to carry around all day."</p>
</td>
<td>
<span class="flex items-center gap-1.5">
                                                                            26 Apr, 2025
                                                                            <span class="text-default-400 block text-xs">10:00 AM</span>
</span>
</td>
<td>
<span class="badge text-2xs font-semibold bg-warning/15 text-warning">Pending</span>
</td>
<td>
<div class="flex justify-center gap-1.5">
<a class="btn btn-icon btn-sm border border-default-300 hover:border-default-400" href="#">
<i class="iconify tabler--eye text-base"></i>
</a>
<a class="btn btn-icon btn-sm border border-default-300 hover:border-default-400" href="#">
<i class="iconify tabler--edit text-base"></i>
</a>
<a class="btn btn-icon btn-sm border border-default-300 hover:border-default-400" data-table-delete-row="" href="#">
<i class="iconify tabler--trash text-base"></i>
</a>
</div>
</td>
</tr>
</tbody>
</table>
</div>
<div class="card-footer border-light">
<div data-table-pagination-info="reviews"></div>
<div data-table-pagination=""></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</main>

                <?= $this->include('partials/footer') ?>
            </div>
<!-- End Page content -->
</div>

        <?= $this->include('partials/customizer') ?> <?= $this->include('partials/footer-scripts') ?>

        <!-- Custom table -->
<script src="/js/pages/custom-table.js"></script>
</body>
</html>