{% extends 'store/layout/layout.html' %}
{% load static %}
{% load store_extras %}


{% block title %}Product{% endblock %}
{% block style %}{% endblock %}


{% block body %}
<div class="container text-center">
    <nav aria-label="breadcrumb">
        <ol class="breadcrumb">
            <li class="breadcrumb-item"><a href="{% url 'store:homepage' %}">Products</a></li>
            <li class="breadcrumb-item">{{product.product.title|lower|title}}</li>
            <li class="breadcrumb-item active" aria-current="page">{{currency}} {{product.price}}</li>
        </ol>
    </nav>
    <div class="row">
        <div class="col-md-7 col-lg-8">
            <div id="carouselproductImages" class="carousel slide" data-bs-ride="carousel">
                <div class="carousel-inner">
                    {% for image in product.images.all|slice:":1" %}
                    <div class="carousel-item active">
                        <img src="{{image.image.url}}" class="d-block w-100" alt="{{image.name}}">
                    </div>
                    {% endfor %}
                    {% for image in product.images.all|slice:"1:" %}
                    <div class="carousel-item">
                        <img src="{{image.image.url}}" class="d-block w-100" alt="{{image.name}}">
                    </div>
                    {% endfor %}
                </div>
                <button class="carousel-control-prev" type="button" data-bs-target="#carouselproductImages" data-bs-slide="prev">
                    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                    <span class="visually-hidden">Previous</span>
                </button>
                <button class="carousel-control-next" type="button" data-bs-target="#carouselproductImages" data-bs-slide="next">
                    <span class="carousel-control-next-icon" aria-hidden="true"></span>
                    <span class="visually-hidden">Next</span>
                </button>
            </div>
        </div>
        <div class="col-md-5 col-lg-4 text-center mt-4 mt-md-0">
            <div>
            {% if product.discount %}
                <span class="badge bg-dark text-white position-relative fs-4 w-75">
                    {{currency}}
                    <span class="text-decoration-line-through">{{product.price}}</span>
                    {{product.price|calculate_discount:product.discount.percent}}
                    / {{product.unit}}
                    <span class="position-absolute bottom-50 start-100 translate-middle badge rounded-pill bg-danger">
                        {{product.discount.percent}}% off
                    </span>
                </span>
            {% else %}
                <span class="badge bg-dark text-white fs-4 w-75">
                    {{currency}} {{product.price}} / {{product.unit}}
                </span>
            {% endif %}
            {% if product.keyvalues.all %}
            <div class="table-responsive">
                <table class="table table-borderless table-sm align-middle mt-2">
                    <tbody>
                        {% for kv in product.keyvalues.all %}
                        <tr>
                            <td style="width: 35%;" class="text-start p-0 m-0">{{kv.key.key|lower|title}}</td>
                            <td style="width: 65%;" class="text-end p-0 m-0">{{kv.value.value|lower|title}}</td>
                        </tr>
                        {% endfor %}
                    </tbody>
                </table>
            </div>
            {% endif %}
            </div>
            <form onsubmit="add2cart(event, '{{product.id}}');">
                <label for="addToCartInput{{product.id}}" class="form-label">Add to Cart</label>
                <div class="input-group input-group-sm mb-3">
                    <span class="input-group-text bg-dark text-white border-dark w-25">{{product.unit}}</span>
                    <input type="text" class="form-control border-dark toDisable" placeholder="qty" id="addToCartInput{{product.id}}">
                    <span class="input-group-text bg-white text-dark border-dark" id="cartIcon{{product.id}}"><i class="bi bi-cart"></i></span>
                    <button type="submit" class="btn btn-outline-dark toDisable w-25" id="cartSubmitBtn{{product.id}}">Add</button>
                </div>
            </form>
            {% if checkDeliverability %}
            <form onsubmit="checkDeliverability(event, '{{product.id}}');">
                <label for="checkPincodeFormInput" class="form-label">Check Deliverability</label>
                <div class="input-group input-group-sm">
                    <span class="input-group-text bg-dark text-white border-dark w-25">Zipcode</span>
                    <input type="text" class="form-control border-dark toDisable" id="checkPincodeFormInput">
                    <button class="btn btn-outline-dark toDisable w-25" type="submit" id="checkPincodeFormInputBtn">Check</button>
                </div>
            </form>
            <div class="text-success" id="checkPincodeInfoSuccess"></div>
            <div class="text-danger" id="checkPincodeInfoDanger"></div>
            {% endif %}
        </div>
    </div>
    <div class="card my-5" style="width: 100%;">
        <div class="card-body">
            <h5 class="card-title">{{product.product.title|lower|title}}</h5>
            <p class="card-text">{{product.info}}</p>
        </div>
    </div>
</div>

{% endblock %}


{% block script %}
<script src="{% static 'store/js/homepage.js' %}"></script>
{% endblock %}
