<section class="best-mobile-section new-bg pt-5">
    <div class="container my-5">
        <div class="row gy-4 gx-lg-5 align-items-center">
            <div class="col-md-6">
                <div class="img-div-productDetails">
                    <img class="card-img-top mb-5 mb-md-0" src="<?=$product['url']?>" alt="<?=$product['name']?>">
                </div>
            </div>
            <div class="col-md-6">
                <h3 class="productDetails-title">
                    <?=$product['name']?>
                </h3>
                <h2 class="productDetails-title-price">
                    $<?=$product['price']?>
                </h2>
                <p class="lead card-text">
                    <?=$product['shortDescription']?>
                </p>

                <h5 class="accordion-header mb-2">
                    Quantity
                </h5>
                <div class="input-group productDetail-div mb-3">
                    <span class="input-group-text productDetail-text left" onclick="updateQuantity('minus');">-</span>
                    <input type="number" min="1" step="1" id="qty" class="form-control productDetail-text" value="1">
                    <span class="input-group-text productDetail-text right" oninput="this.value = Math.abs(this.value)" onclick="updateQuantity('plus');">+</span>
                </div>
                <div class="d-flex align-items-end pt-3 px-0 pb-0 mt-auto">
                    <button class="read-more-btn buy mt-0" onclick="addToCart();">Add To Cart</button>
                </div>
            </div>
        </div>
    </div>
</section>

<section>
    <div class="container">
        <div class="productDetails-content">
            <h2 class="productDetails-titleNew">
                Description
            </h2>
            <p class="lead card-text">
            <p class="lead card-text">
                <?=$product['description']?>
            </p>
            </p>
        </div>
    </div>
</section>


<section class="pt-5">
    <div class="container mt-5">
        <h1 class="best-mobile-title text-center mb-3"> Related <span class="showcase-span"> Products</span>
        </h1>
        <div class="row">

            <div class="col-md-4 col-sm-6 d-flex">
                <div class="card w-100 my-2 shadow-2-strong">
                    <img src="<?= base_url('/assets/img/1.png') ?>" class="card-img-top">
                    <div class="card-body d-flex flex-column">
                        <h4 class="me-1 name-title">Yes T-Shirt</h4>
                        <h5 class="mb-1 me-1 card-title price-title">$120.00</h5>
                        <p class="card-text">It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout.</p>
                        <div class="d-flex align-items-end pt-3 px-0 pb-0 mt-auto">
                            <button class="read-more-btn buy mt-0">
                                Buy Now
                            </button>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-md-4 col-sm-6 d-flex">
                <div class="card w-100 my-2 shadow-2-strong">
                    <img src="<?= base_url('/assets/img/2.png') ?>" class="card-img-top">
                    <div class="card-body d-flex flex-column">
                        <h4 class="me-1 name-title">Yes T-Shirt</h4>
                        <h5 class="mb-1 me-1 card-title price-title">$120.00</h5>
                        <p class="card-text">It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout.</p>
                        <div class="d-flex align-items-end pt-3 px-0 pb-0 mt-auto">
                            <button class="read-more-btn buy mt-0">
                                Buy Now
                            </button>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-md-4 col-sm-6 d-flex">
                <div class="card w-100 my-2 shadow-2-strong">
                    <img src="<?= base_url('/assets/img/3.png') ?>" class="card-img-top">
                    <div class="card-body d-flex flex-column">
                        <h4 class="me-1 name-title">Yes T-Shirt</h4>
                        <h5 class="mb-1 me-1 card-title price-title">$11.00</h5>
                        <p class="card-text">It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout.</p>
                        <div class="d-flex align-items-end pt-3 px-0 pb-0 mt-auto">
                            <button class="read-more-btn buy mt-0">
                                Buy Now
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
<script>
function addToCart() {
    let qty = $('#qty').val();
    window.location.href = '<?=base_url()?>site/addtocart/<?=$productId?>/' + qty;
}

function updateQuantity(sign) {
    let qty = $('#qty').val();
    qty = Number(qty);
    if (sign == 'plus') {
        qty = qty + 1;
    } else {
        if (qty == 1) return;
        qty = qty - 1;
    }
    $('#qty').val(String(qty));
}
</script>