{% extends 'NewTemplates/new_base.html' %}
{% load static %}
{% block head %}
<title>{{pro_name}}</title>
<meta name="description" content="{{ meta_des }}">
<meta name="keywords" content="{{ meta_key }}">
<link rel="canonical" href="{{ request.build_absolute_uri }}">
{% endblock head %}

{% block body %} 
{% for pro in products %}
<div class="inner-banner">
    <div class="container">
        <h1>{{pro_name}}</h1>
    </div>
</div>
<div class="contentarea">
    <div class="container">
        {% if messages %}
        <div class="container">
            {% for message in messages %}
            <div class="alert alert-{% if message.tags %}{{ message.tags }}{% else %}info{% endif %} alert-dismissible fade show" role="alert">
                {{ message }}
                <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
            </div>
            {% endfor %}
        </div>

        <script>
            document.addEventListener('DOMContentLoaded', function() {
                // Auto-dismiss alerts after 5 seconds
                setTimeout(function() {
                    var alerts = document.querySelectorAll('.alert');
                    alerts.forEach(function(alert) {
                        var bsAlert = new bootstrap.Alert(alert);
                        bsAlert.close();
                    });
                }, 5000);
            });
        </script>
        {% endif %}
        <div class="row">
            <div class="col-4">
                {% if one_image == "one" %}
                <ul class="product-img-one owlcarousel">
                    <li>
                        {% for image in pro.productimage_set.all %}
                        <a href="{{ image.product_image.url }}" data-fancybox="images" data-caption="{{ pro.product_name }}">
                            <img src="{{ image.product_image.url }}" srcset="{{ image.product_image.url }}" alt="{{ pro.product_name }}" />
                        </a>
                        {% endfor %}
                    </li>
                </ul>
                {% else %}
                <ul class="product-img owlcarousel">
                    {% for image in pro.productimage_set.all %}
                    {% if image.product_image %}
                    <li>
                        <a href="{{ image.product_image.url }}" data-fancybox="images" data-caption="{{ pro.product_name }}">
                            <img src="{{ image.product_image.url }}" srcset="{{ image.product_image.url }}" alt="{{ pro.product_name }}" />
                        </a>
                    </li>
                    {% endif %}
                    {% endfor %}
                </ul>
                {% endif %}
            </div>
            <div class="col-8">
                <div class="product-detail">
                    <p>{{description}}</p>
                    <div class="pricebar">
                        <p class="price">
                            <b>Price</b><span class="oldprice">{{ pro.market_price }}</span> {{ pro.price }} QAR
                        </p>
                    </div>
                    <table>
                        <tbody>
                            <tr>
                                <td>Product Code</td>
                                <td>{{ pro.product_code }}</td>
                            </tr>
                            <tr>
                                <td>Quantity</td>
                                <td>{{ pro.quantity }}</td>
                            </tr>
                            {% if pro.brand %}
                            <tr>
                                <td>Brand</td>
                                <td>{{ pro.brand }}</td>
                            </tr>
                            {% endif %}
                            {% if pro.model_no %}
                            <tr>
                                <td>Model No</td>
                                <td>{{ pro.model_no }}</td>
                            </tr>
                            {% endif %}
                            {% if pro.exp_date %}
                            <tr>
                                <td>Exp. Date</td>
                                <td>{{ pro.exp_date }}</td>
                            </tr>
                            {% endif %}
                            {% if pro.manufacturing_country %}
                            <tr>
                                <td>Manufacturing Country</td>
                                <td>{{ pro.manufacturing_country }}</td>
                            </tr>
                            {% endif %}
                            {% if pro.manufacturing_year %}
                            <tr>
                                <td>Manufacturing Year</td>
                                <td>{{ pro.manufacturing_year }}</td>
                            </tr>
                            {% endif %}
                            {% if pro.dimensions %}
                            <tr>
                                <td>Dimensions</td>
                                <td>{{ pro.dimensions }}</td>
                            </tr>
                            {% endif %}
                            {% if pro.reason_to_sell %}
                            <tr>
                                <td>This item is sold due to</td>
                                <td>{{pro.reason_to_sell}}</td>
                            </tr>
                            {% endif %}
                        </tbody>
                    </table>

                    <div class="pricebar">
                        <h3>Please contact for purchase and delivery options</h3>
                        <ul>
                            <li>
                                <a onclick="redirectToPhoneCall()"><i class="lni lni-phone"></i></a>
                            </li>
                            <li>
                                <a onclick="redirectToEmailInquiry('{{ pro.product_name|escapejs }}', '{{ pro.product_code|escapejs }}', '{{ pro.description|escapejs }}', '{{ pro.price|escapejs }}', '{{ pro.brand|escapejs }}', '{{ pro.model_no|escapejs }}', '{{ pro.exp_date|escapejs }}', '{{ pro.manufacturing_country|escapejs }}', '{{ pro.manufacturing_year|escapejs }}', '{{ pro.dimensions|escapejs }}', '{{ pro.reason_to_sell|escapejs }}')">
    <i class="lni lni-envelope"></i>
</a>
                            </li>
                            <li>
                                <a href="{% url 'new_add_to_cart' pro.id %}"><i class="lni lni-whatsapp"></i></a>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
{% endfor %}

<script>
    // Function to redirect to email
    function redirectToEmailInquiry(productName, productCode, description, price, brand, modelNo, expDate, country, year, dimensions, reason) {
    // Email configuration
    const email = 'sales@surplusmarket.com';
    const subject = 'Regarding Product Inquiry';
    
    // Build email body with product details
    let body = 'Hello,\n\n';
    body += 'I am interested in the following product:\n\n';
    body += `Product Name: ${productName}\n`;
    body += `Product Code: ${productCode}\n`;
    body += `Price: ${price}\n`;
    
    // Add optional fields if they exist
    if (brand) body += `Brand: ${brand}\n`;
    if (modelNo) body += `Model No: ${modelNo}\n`;
    if (expDate) body += `Expiration Date: ${expDate}\n`;
    if (country) body += `Manufacturing Country: ${country}\n`;
    if (year) body += `Manufacturing Year: ${year}\n`;
    if (dimensions) body += `Dimensions: ${dimensions}\n`;
    if (reason) body += `Reason for Sale: ${reason}\n`;
    
    // Add description at the end
    if (description) body += `\nDescription: ${description}\n`;
    
    // Encode the subject and body for the mailto URL
    const encodedSubject = encodeURIComponent(subject);
    const encodedBody = encodeURIComponent(body);
    
    // Create the mailto URL
    const mailtoUrl = `mailto:${email}?subject=${encodedSubject}&body=${encodedBody}`;
    
    // Navigate to the mailto URL
    window.location.href = mailtoUrl;
}
</script>


<script>
// Function to redirect to phone call
function redirectToPhoneCall() {
    // Replace 'your_phone_number' with the actual phone number
    window.location.href = "tel:+97430269988";
}
</script>

<script>
$(document).ready(function () {
    $('[data-fancybox="images"]').fancybox({
        passive: false
    });
});
</script>

<script>
AOS.init();

var owl = $(".product-img");
owl.owlCarousel({
    margin: 10,
    loop: true,
    autoplay: true,
    autoplayTimeout: 4000,
    autoplayHoverPause: true,
    center: false,
    nav: false,
    dots: true,
    rows: 2,
    responsive: {
        0: {
            items: 1,
            margin: 10,
            dots: true,
        },
        600: {
            items: 1,
            dots: true,
        },
        1000: {
            items: 1,
        },
    },
    onInitialized: function (event) {
        if (event && event.target) {
            event.target.addEventListener('touchstart', function (e) { }, { passive: false });
        }
    },
});
</script>
{% endblock body %}