{% extends "Lipa_mdogo/base_dashboard.html" %}
{% load humanize %}

{% block title %}Shop | Lipa Mdogo Mdogo{% endblock %}

{% block content %}
<h4 class="mb-4">Shop Items</h4>

<!-- 🔔 Shop Notice / Promo -->
<div class="alert alert-warning text-center mb-4 overflow-hidden">
    <marquee behavior="scroll" direction="left" scrollamount="5">
        🔥 New items added weekly • Pay small small with Lipa Mdogo Mdogo • No hidden charges • Need an item not listed here? Get in touch.  🔥
    </marquee>
</div>


<div class="row g-3">

{% if items %}
{% for item in items %}
<div class="col-lg-3 col-md-4 col-sm-6 col-6">
    <div class="card shadow-sm h-100">

        <!-- Image -->
        <div class="ratio ratio-1x1 bg-light">
            {% if item.image %}
                <img src="{{ item.image.url }}"
                     class="card-img-top object-fit-cover"
                     alt="{{ item.name }}">
            {% else %}
                <div class="d-flex align-items-center justify-content-center text-muted small">
                    No Image
                </div>
            {% endif %}
        </div>

        <div class="card-body d-flex flex-column p-2">
            <h6 class="card-title mb-1 text-truncate">{{ item.name }}</h6>
            <p class="text-muted mb-2 small">KES {{ item.selling_price|intcomma }}</p>

            <button
                class="btn btn-outline-primary btn-sm mt-auto w-100"
                data-bs-toggle="modal"
                data-bs-target="#itemModal"
                data-item-name="{{ item.name }}"
                data-item-price="KES {{ item.selling_price|intcomma }}"
                data-item-description="{{ item.description|escape|linebreaksbr|safe }}"
                data-item-image="{% if item.image %}{{ item.image.url }}{% endif %}"
            >
                View Info
            </button>
        </div>
    </div>
</div>
{% endfor %}
{% else %}
<div class="col-12">
    <div class="alert alert-info text-center">
        No items available at the moment.
    </div>
</div>
{% endif %}
</div>

<!-- Modal -->
<div class="modal fade" id="itemModal" tabindex="-1">
    <div class="modal-dialog modal-dialog-centered modal-lg modal-fullscreen-sm-down">
        <div class="modal-content">

            <div class="modal-header">
                <h5 class="modal-title" id="modalItemName"></h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>

            <div class="modal-body">

                <div class="ratio ratio-1x1 mb-3 bg-light">
                    <img id="modalItemImage" class="object-fit-cover w-100" alt="">
                </div>

                <p class="text-muted mb-1" id="modalItemPrice"></p>
                <p class="small" id="modalItemDescription"></p>

                <hr>

                <h6>Purchase Options</h6>

                <div class="row g-2">
                    <div class="col-12 col-md-6">
                        <div class="border rounded p-3 h-100">
                            <h6 class="text-success mb-1">Buy on Cash</h6>
                            <p class="small text-muted">Pay full amount upfront.</p>
                            <button class="btn btn-success btn-sm w-100" disabled>
                                Contact {{COMPANY_PHONE}}
                            </button>
                        </div>
                    </div>

                    <div class="col-12 col-md-6">
                        <div class="border rounded p-3 h-100">
                            <h6 class="text-primary mb-1">Lipa Mdogo Mdogo</h6>
                            <p class="small text-muted">Flexible installment payments.</p>
                            <button class="btn btn-primary btn-sm w-100" disabled>
                                Contact {{COMPANY_PHONE}}
                            </button>
                        </div>
                    </div>
                </div>

                <hr>

                <div class="text-center">
                    <p class="small text-muted mb-2">
                        Need help or a custom plan?
                    </p>
                    <a href="#" class="btn btn-outline-secondary btn-sm disabled">
                        Contact Admin
                    </a>
                </div>

            </div>
        </div>
    </div>
</div>

{% endblock %}

{% block extra_js %}
<script>
const itemModal = document.getElementById('itemModal');

itemModal.addEventListener('show.bs.modal', function (event) {
    const button = event.relatedTarget;

    document.getElementById('modalItemName').textContent =
        button.getAttribute('data-item-name');

    document.getElementById('modalItemPrice').textContent =
        button.getAttribute('data-item-price');

    document.getElementById('modalItemDescription').textContent =
        button.getAttribute('data-item-description');

    const imageUrl = button.getAttribute('data-item-image');
    const modalImage = document.getElementById('modalItemImage');

    if (imageUrl) {
        modalImage.src = imageUrl;
        modalImage.classList.remove('d-none');
    } else {
        modalImage.classList.add('d-none');
    }
});
</script>
{% endblock %}