{{ header }}
<section style="border-top:solid 1px #dee2e6;">
<div id="product-info" class="container">
  <nav class="franklin-breadcrumb" aria-label="breadcrumb">
    <ol class="breadcrumb mb-0">
        {% for breadcrumb in breadcrumbs %}
            <li class="breadcrumb-item {% if loop.last %}active{% endif %}">
                {% if loop.last %}
                    {{ breadcrumb.text }}
                {% elseif loop.first %}
                    <a href="{{ breadcrumb.href }}">
                        <i class="bi bi-house-door-fill"></i> Home
                    </a>
                {% else %}
                    <a href="{{ breadcrumb.href }}">
                        {{ breadcrumb.text }}
                    </a>
                {% endif %}
            </li>
        {% endfor %}
    </ol>
</nav>
</div>
</section>
<section class="common-pageheader">
    <div class="container">
<h1 class="product-title">
                    {{ heading_title }}
                </h1>
</section>
</div>
<div id="product-info" class="container" style="padding-bottom:50px;">
  <div class="row">{{ column_left }}
    <div id="content" class="col">
      {{ content_top }}
      <div class="franklin-product-hero">
    <div class="row g-5">

        <!-- Product Gallery -->
        <div class="col-lg-6">

            <div class="product-gallery">

                <div class="product-main-image">

                    {% if thumb %}
                        <img src="{{ thumb }}"
                             alt="{{ heading_title }}"
                             title="{{ heading_title }}"
                             id="mainProductImage"
                             class="img-fluid rounded shadow-sm">
                    {% endif %}

                </div>

                {% if images %}
                <div class="product-thumbnails mt-3 d-flex gap-2 flex-wrap">

                    <button class="thumb active" type="button">
                        <img src="{{ thumb }}" data-image="{{ thumb }}" class="img-thumbnail">
                    </button>

                    {% for image in images %}
                    <button class="thumb" type="button">
                        <img src="{{ image.thumb }}"
                             data-image="{{ image.popup }}"
                             class="img-thumbnail">
                    </button>
                    {% endfor %}

                </div>
                {% endif %}

            </div>

        </div>

        <!-- Product Details -->
        <div class="col-lg-6">

            <div class="product-summary">

                {% if review_status %}
                <div class="product-rating mb-3">

                    {% for i in 1..5 %}
                        {% if rating < i %}
                            <i class="bi bi-star"></i>
                        {% else %}
                            <i class="bi bi-star-fill text-warning"></i>
                        {% endif %}
                    {% endfor %}

                    <span class="ms-2">
                        {{ text_reviews }}
                    </span>

                </div>
                {% endif %}

                <h2 class="product-title">
                    {{ heading_title }}
                </h2>

                {% if manufacturer %}
                <div class="product-brand mb-2">
                    <strong>Brand:</strong>
                    {{ manufacturer }}
                </div>
                {% endif %}

                <div class="product-stock mb-3">

                    <span class="badge bg-success">

                        {{ stock }}

                    </span>

                </div>

                {% if price %}

                <div class="price-box mb-4">

                    {% if special %}

                        <div class="old-price">
                            {{ price }}
                        </div>

                        <div class="new-price">
                            {{ special }}
                        </div>

                    {% else %}

                        <div class="new-price">
                            {{ price }}
                        </div>

                    {% endif %}

                </div>

                {% endif %}

                <!-- Quantity -->
                
                <div id="product">

<form id="form-product">

    {# Product options go here (if any) #}

    {# Subscription plans (if any) #}

    <div class="quantity-box mb-4">

        <label class="form-label">
            {{ entry_qty }}
        </label>

        <div class="qty-control">

            <button type="button" class="qty-minus">−</button>

            <input
                type="number"
                id="input-quantity"
                name="quantity"
                value="{{ minimum }}"
                min="{{ minimum }}">

            <button type="button" class="qty-plus">+</button>

        </div>

    </div>

    <div class="d-grid gap-3">

        <button
            type="submit"
            id="button-cart"
            class="btn btn-success btn-lg">

            <i class="bi bi-cart3 me-2"></i>
            {{ button_cart }}

        </button>

        <button
            type="button"
            class="btn btn-warning btn-lg btn-buy-now">

            <i class="bi bi-lightning-fill me-2"></i>
            Buy Now

        </button>

    </div>

    <input
        type="hidden"
        name="product_id"
        value="{{ product_id }}"
        id="input-product-id">

</form>

</div>

                <div class="product-actions mt-4">

                    <div class="product-actions mt-4">

    <button
        type="button"
        class="btn btn-outline-success rounded-pill btn-wishlist"
        data-product-id="{{ product_id }}">

        <i class="bi bi-heart-fill text-danger"></i>

        Add to Wishlist

    </button>

</div>

                   
                </div>

            </div>

        </div>

    </div>

    <!-- Trust Badges -->

    <div class="row mt-5">

        <div class="col-md-2 col-6">
            🌿
            <br>
            100% Herbal
        </div>

        <div class="col-md-2 col-6">
            🚚
            <br>
            Free Delivery
        </div>

        <div class="col-md-2 col-6">
            🔒
            <br>
            Secure Checkout
        </div>

        <div class="col-md-2 col-6">
            📦
            <br>
            Cash on Delivery
        </div>

        <div class="col-md-2 col-6">
            🩺
            <br>
            Doctor Formulated
        </div>

        <div class="col-md-2 col-6">
            🇮🇳
            <br>
            Made in India
        </div>

    </div>

</div>
      <div class="franklin-tabs mt-5">

    <ul class="nav nav-pills justify-content-center mb-4" id="productTabs">

        <li class="nav-item">
            <button class="nav-link active"
                    data-bs-toggle="pill"
                    data-bs-target="#description">
                Description
            </button>
        </li>

        <li class="nav-item">
            <button class="nav-link"
                    data-bs-toggle="pill"
                    data-bs-target="#benefits">
                Benefits
            </button>
        </li>

        <li class="nav-item">
            <button class="nav-link"
                    data-bs-toggle="pill"
                    data-bs-target="#ingredients">
                Ingredients
            </button>
        </li>

        <li class="nav-item">
            <button class="nav-link"
                    data-bs-toggle="pill"
                    data-bs-target="#dosage">
                Dosage
            </button>
        </li>

        {% if review_status %}
        <li class="nav-item">
            <button class="nav-link"
                    data-bs-toggle="pill"
                    data-bs-target="#reviews">
                Reviews
            </button>
        </li>
        {% endif %}

    </ul>

    <div class="tab-content">

        <!-- Description -->

        <div class="tab-pane fade show active"
             id="description">

            <div class="franklin-card">

                {{ description }}

            </div>

        </div>

        <!-- Benefits -->

        <div class="tab-pane fade"
             id="benefits">

            <div class="franklin-card">

                <h3>Key Benefits</h3>

                <ul class="benefit-list">

                    <li>Supports overall wellness</li>

                    <li>Made from carefully selected herbal ingredients</li>

                    <li>Traditionally inspired Ayurvedic formulation</li>

                    <li>Suitable for regular wellness routines (follow label directions)</li>

                    <li>Manufactured under quality-controlled conditions</li>

                </ul>

            </div>

        </div>

        <!-- Ingredients -->

        <div class="tab-pane fade"
             id="ingredients">

            <div class="franklin-card">

                <h3>Ingredients</h3>

                <p>

                    Product-specific ingredient information can be displayed here.
                    You may later populate this section from OpenCart attributes or
                    an additional product field.

                </p>

            </div>

        </div>

        <!-- Dosage -->

        <div class="tab-pane fade"
             id="dosage">

            <div class="franklin-card">

                <h3>Recommended Usage</h3>

                <p>

                    Use as directed on the product label or by a qualified healthcare professional.

                </p>

            </div>

        </div>

        {% if review_status %}

        <div class="tab-pane fade"
             id="reviews">

            {{ review }}

        </div>

        {% endif %}

    </div>

</div>
      
      {{ related }}
      {{ content_bottom }}
    </div>
    {{ column_right }}
  </div>
</div>
<script type="text/javascript"><!--
$('#input-subscription').on('change', function(e) {
    var element = this;

    $('.subscription').addClass('d-none');

    $('#subscription-description-' + $(element).val()).removeClass('d-none');
});

$('#form-product').on('submit', function(e){

    e.preventDefault();

    franklinCart.add(
        $('#input-product-id').val(),
        $('#input-quantity').val()
    );

});

document.addEventListener('click', function(e){

    const btn = e.target.closest('.btn-wishlist');

    if(!btn) return;

    e.preventDefault();

    franklinWishlist.add(btn.dataset.productId);

});
//--></script>
<script src="catalog/view/theme/franklin/javascript/product.js"></script>
{{ footer }}