{% extends "georgeforge/base.html" %}
{% load i18n %}
{% load humanize %}
{% load static %}
{% load georgeforge_extras %}
{% load django_bootstrap5 %}
{% block details %}
    {% include "georgeforge/partials/discord_notice.html" %}
    <div class="row mb-3">
        <div class="col-12 ms-auto 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>
    <div class="table-responsive">
        <table class="table table-hover table-striped w-100" id="table-store">
            <thead>
                <tr>
                    <th class="d-none">{% translate "Group Order" %}</th>
                    <th class="d-none">{% translate "Group Name" %}</th>
                    <th>{% translate "Item" %}</th>
                    <th>{% translate "Description" %}</th>
                    <th>{% translate "Price" %}</th>
                    <th>{% translate "Deposit" %}</th>
                    <th class="text-end">{% translate "Actions" %}</th>
                </tr>
            </thead>
            <tbody>
                {% for group_name, entries in for_sale %}
                    {% for entry in entries %}
                        <tr class="store-item"
                            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 }}"
                            data-group="{{ group_name }}">
                            <td class="d-none group-order">{{ forloop.parentloop.counter0 }}</td>
                            <td class="d-none group-name">{{ group_name }}</td>
                            <td>
                                <div class="d-flex align-items-center gap-2">
                                    <div class="position-relative" style="width: 32px; height: 32px;">{{ entry.eve_type|evetype_icon:32|safe }}</div>
                                    <span>{% translate entry.eve_type.name %}</span>
                                </div>
                            </td>
                            <td>{{ entry.description|safe }}</td>
                            <td data-sort="{{ entry.price }}">{{ entry.price|intcomma }} ISK</td>
                            <td data-sort="{{ entry.deposit }}">
                                {% if entry.deposit %}
                                    {{ entry.deposit|intcomma }} ISK
                                {% else %}
                                    -
                                {% endif %}
                            </td>
                            <td>
                                <div class="d-flex align-items-center gap-2 justify-content-end">
                                    <input type="number"
                                           class="form-control form-control-sm quantity-input"
                                           id="quantity-{{ entry.id }}"
                                           value="1"
                                           min="1"
                                           style="width: 80px" />
                                    <button class="btn btn-primary btn-sm add-to-cart"
                                            data-for-sale-id="{{ entry.id }}">{% translate "Add" %}</button>
                                </div>
                            </td>
                        </tr>
                    {% endfor %}
                {% endfor %}
            </tbody>
        </table>
    </div>
    <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 %}
    {% include "bundles/datatables-js-bs5.html" %}
    {% include "bundles/moment-js.html" %}
    {% get_datatables_language_static LANGUAGE_CODE as DT_LANG_PATH %}
    <script src="{% static 'georgeforge/js/store-table.js' %}"></script>
    <script src="{% static 'georgeforge/js/cart.js' %}"></script>
{% endblock extra_javascript %}
{% block extra_css %}
    {% include "bundles/datatables-css-bs5.html" %}
    <style>
            .group-row th {
            font-weight: 600;
            padding: 12px 16px;
            border-bottom: 2px solid var(--bs-border-color);
        }
        .pip {
            display: block;
            position: absolute;
            top: 0px;
        }
        .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 %}