{% extends 'store_layout_two.html' %}
{% load static %}
{% block content %}
<title>Beni | View Product</title>

<link rel="stylesheet" href="{% static 'store/build/css/countrySelect.css' %}">
<style>
.upload-im img {
    height: 120px;
    width: 120px;
    object-fit: cover;
    margin-right: 10px;
    margin-bottom: 10px;
}
.uploaded-media {
    display: flex;
    flex-flow: row wrap;
}
</style>
<title>Beni | View Product</title>
<div class="content-body">
          
    <!-- row -->

    <div class="container-fluid">
        <div class="row page-titles profile mx-0">
            <div class="col">
                <h2 class="fs-32 mb-0">View Product</h2>
            </div>

        </div>

        <div class="row">
            <div class="col-lg-12 col-xl-12">
                <div class="card mt-4">
                    <div class="card-body view-prdct">
                        <div class="row">
                            <div class="col-12 col-md-3">
                                <label>Name in English</label>
                            </div>
                            <div class="col-12 col-md-9">
                                <p>{{product_obj.product_name_english}}</p>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-12 col-md-3">
                                <label>Name in Arabic</label>
                            </div>
                            <div class="col-12 col-md-9">
                                <p>{{product_obj.product_name_arabic}}</p>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-12 col-md-3">
                                <label>Product Category</label>
                            </div>
                            <div class="col-12 col-md-9">
                                <p>{{product_obj.maincategory.category_name_english}}</p>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-12 col-md-3">
                                <label>Product Sub-Category</label>
                            </div>
                            <div class="col-12 col-md-9">
                                <p>{{product_obj.subcategory.category_name_english}}</p>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-12 col-md-3">
                                <label>Description in English</label>
                            </div>
                            <div class="col-12 col-md-9">
                                <p>{{ product_obj.description_english}}</p>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-12 col-md-3">
                                <label>Description in Arabic</label>
                            </div>
                            <div class="col-12 col-md-9">
                                <p>{{ product_obj.description_arabic}}</p>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-12 col-md-3">
                                <label>Brand</label>
                            </div>
                            <div class="col-12 col-md-9">
                                <p>{{ product_obj.brand.brand_name_english}}</p>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-12 col-md-3">
                                <label>Stone</label>
                            </div>
                            <div class="col-12 col-md-9">
                                <p>{{ product_obj.stone.stone_name_english}}</p>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-12 col-md-3">
                                <label>Model Name</label>
                            </div>
                            <div class="col-12 col-md-9">
                                <p>{{ product_obj.model_name}}</p>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-12 col-md-3">
                                <label>Size</label>
                            </div>
                            <div class="col-12 col-md-9">
                                <p>{{ product_obj.size}}</p>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-12 col-md-3">
                                <label>Weight</label>
                            </div>
                            <div class="col-12 col-md-9">
                                <p>{{ product_obj.weight}}</p>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-12 col-md-3">
                                <label>Color</label>
                            </div>
                            <div class="col-12 col-md-9">
                                <p>{{ product_obj.color}}</p>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-12 col-md-3">
                                <label>Quantity</label>
                            </div>
                            <div class="col-12 col-md-9">
                                <p>{{ product_obj.quantity }}</p>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-12 col-md-3">
                                <label>Price</label>
                            </div>
                            <div class="col-12 col-md-9">
                                <p>SAR {{ product_obj.price}}</p>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-12 col-md-3">
                                <label>Price after Discount</label>
                            </div>
                            <div class="col-12 col-md-9">
                                <p>SAR {{ product_obj.price_discount}}</p>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-12 col-md-3">
                                <label>Uploaded Media</label>
                            </div>
                            <div class="col-12 col-md-9">
                                <div class="uploaded-media">
                                    <div class="upload-im">
                                        {% for img in product_images %}
                                        <img src="{{ img }}">
                                        {% endfor %}
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<script src="https://code.jquery.com/jquery-latest.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

{% endblock %}