{% extends "georgeforge/base.html" %}
{% load i18n %}
{% load humanize %}
{% load static %}
{% load django_bootstrap5 %}
{% block details %}
    {% include "georgeforge/partials/discord_notice.html" %}
    <div class="row mb-3">
        <div class="col-12 col-md-6">
            <input id="store-search"
                   type="search"
                   class="form-control"
                   placeholder="{% translate 'Search store...' %}"
                   aria-label="{% translate 'Search store' %}" />
        </div>
        <div class="col-12 col-md-6 text-end">
            <button id="cart-toggle"
                    class="btn btn-primary position-relative"
                    type="button">
                {% translate "Cart" %}
                <span id="cart-counter"
                      class="position-absolute top-0 start-100 translate-middle badge rounded-pill bg-danger"
                      style="display: none">0</span>
            </button>
        </div>
    </div>
    {% for group_name, entries in for_sale %}
        <div class="store-group" data-group="{{ group_name }}">
            <h4>{{ group_name }}</h4>
            <ul class="list-group pb-2">
                {% for entry in entries %}
                    <li class="list-group-item store-item d-flex flex-row align-items-center justify-content-start"
                        data-for-sale-id="{{ entry.id }}"
                        data-eve-type-id="{{ entry.eve_type.id }}"
                        data-eve-type-name="{{ entry.eve_type.name }}"
                        data-eve-type-icon="{{ entry.eve_type.icon_url }}"
                        data-price="{{ entry.price }}"
                        data-deposit="{{ entry.deposit }}"
                        data-description="{{ entry.description }}">
                        <div class="p-2">
                            <span>
                                <img height="64"
                                     width="64"
                                     src="{{ entry.eve_type.icon_url }}"
                                     alt="{% translate 'Item Icon' %}" />
                            </span>
                            <span>{% translate entry.eve_type.name %}</span>
                        </div>
                        <div class="p-2 flex-grow-1">
                            <span>{{ entry.description|safe }}</span>
                        </div>
                        <div class="p-2 text-start">
                            <span>{% translate "Price" %}:</span>
                            <br />
                            {% if entry.deposit %}
                                <span>{% translate "Deposit" %}:</span>
                            {% endif %}
                        </div>
                        <div class="p-2 text-end">
                            <span>{{ entry.price|intcomma }} {% translate "ISK" %}</span>
                            <br />
                            {% if entry.deposit %}
                                <span>{{ entry.deposit|intcomma }} {% translate "ISK" %}</span>
                            {% endif %}
                        </div>
                        <div class="p-2 d-flex align-items-center gap-2">
                            <input type="number"
                                   class="form-control form-control-sm"
                                   id="quantity-{{ entry.id }}"
                                   value="1"
                                   min="1"
                                   style="width: 80px" />
                            <button class="btn btn-primary add-to-cart" data-for-sale-id="{{ entry.id }}">{% translate "Add to Cart" %}</button>
                        </div>
                    </li>
                {% endfor %}
            </ul>
        </div>
    {% endfor %}
    <div id="cart-overlay" class="cart-overlay"></div>
    <div id="cart-drawer" class="cart-drawer">
        <div class="d-flex justify-content-between align-items-center mb-3">
            <h4>{% translate "Shopping Cart" %}</h4>
            <button type="button" class="btn-close" id="cart-close"></button>
        </div>
        <div id="cart-items"></div>
        <div id="cart-empty" class="text-center text-muted py-5">
            <p>{% translate "Your cart is empty" %}</p>
        </div>
        <div id="cart-summary" class="mt-3 pt-3 border-top" style="display: none;">
            <h5>{% translate "Summary" %}</h5>
            <div class="d-flex justify-content-between">
                <strong>{% translate "Total Items" %}:</strong>
                <span id="cart-total-items">0</span>
            </div>
            <div class="d-flex justify-content-between">
                <strong>{% translate "Total Cost" %}:</strong>
                <span id="cart-total-cost">0 ISK</span>
            </div>
            <div class="d-flex justify-content-between">
                <strong>{% translate "Total Deposit" %}:</strong>
                <span id="cart-total-deposit">0 ISK</span>
            </div>
        </div>
        <div id="cart-checkout" class="mt-4" style="display: none;">
            <form id="checkout-form">
                {% csrf_token %}
                <div class="mb-3">
                    <label for="delivery-system" class="form-label">{% translate "Delivery System (for all items)" %}</label>
                    <select class="form-select" id="delivery-system" required>
                        <option value="">{% translate "Select delivery location" %}</option>
                        {% for ds in delivery_systems %}<option value="{{ ds.system.id }}">{{ ds.friendly }}</option>{% endfor %}
                    </select>
                </div>
                <div class="mb-3">
                    <label for="notes" class="form-label">{% translate "Order Notes (for all items)" %}</label>
                    <textarea class="form-control" id="notes" rows="3"></textarea>
                </div>
                <button type="submit" class="btn btn-primary w-100">{% translate "Checkout" %}</button>
            </form>
        </div>
    </div>
{% endblock details %}
{% block extra_javascript %}
    <script src="{% static 'georgeforge/js/store-search.js' %}"></script>
    <script src="{% static 'georgeforge/js/cart.js' %}"></script>
{% endblock extra_javascript %}
{% block extra_css %}
    <style>
        .cart-drawer {
            position: fixed;
            top: 0;
            right: -400px;
            width: 400px;
            height: 100vh;
            background: var(--bs-body-bg);
            box-shadow: -2px 0 5px rgba(0,0,0,0.1);
            transition: right 0.3s ease-in-out;
            z-index: 1050;
            padding: 20px;
            overflow-y: auto;
        }
        .cart-drawer.open {
            right: 0;
        }
        .cart-overlay {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0,0,0,0.5);
            z-index: 1040;
            display: none;
        }
        .cart-overlay.open {
            display: block;
        }
        .cart-item {
            border-bottom: 1px solid var(--bs-border-color);
            padding: 10px 0;
        }
        .cart-item:last-child {
            border-bottom: none;
        }
    </style>
{% endblock extra_css %}
{% block extra_script %}
{% endblock extra_script %}