{% extends "admin/base_site.html" %}

{% block content %}
<div id="content-main">
    <p>Total orders with status PAID: {{ total_orders }}</p>
    <p>Total items to prepare: {{ total_items }}</p>

    <div style="margin-bottom: 20px;">
        <button onclick="window.print()" style="margin-right: 10px">Print This Page</button>
        <a href="?" class="button" style="margin-right: 10px">Back to Orders</a>

        <!-- Global prepare button -->
        <form method="POST" action="{% url 'admin:prepare_all_orders' %}" style="display: inline;">
            {% csrf_token %}
            <button type="submit"
                    onclick="return confirm('Are you sure you want to mark all orders as prepared?')"
                    style="background-color: #28a745; color: white; border: none; padding: 5px 10px; cursor: pointer;">
                Mark All Orders as Prepared
            </button>
        </form>
    </div>

    <h2>Items Summary</h2>
    <table style="width: 100%; border-collapse: collapse;">
        <thead>
            <tr>
                <th style="text-align: left; padding: 8px; border-bottom: 1px solid #ddd;">Product</th>
                <th style="text-align: left; padding: 8px; border-bottom: 1px solid #ddd;">Color</th>
                <th style="text-align: left; padding: 8px; border-bottom: 1px solid #ddd;">Size</th>
                <th style="text-align: left; padding: 8px; border-bottom: 1px solid #ddd;">Quantity</th>
                <th style="text-align: left; padding: 8px; border-bottom: 1px solid #ddd;">Orders</th>
            </tr>
        </thead>
        <tbody>
            {% for item in items %}
            <tr>
                <td style="padding: 8px; border-bottom: 1px solid #ddd;">{{ item.product.title }}</td>
                <td style="padding: 8px; border-bottom: 1px solid #ddd;">
                    {% if item.color %}
                    <span style="display: inline-block; width: 15px; height: 15px; border-radius: 50%; background-color: {{ item.color.colorHex }}; margin-right: 5px;"></span>
                    {{ item.color.name }}
                    {% else %}
                    -
                    {% endif %}
                </td>
                <td style="padding: 8px; border-bottom: 1px solid #ddd;">{{ item.size.name|default:"-" }}</td>
                <td style="padding: 8px; border-bottom: 1px solid #ddd; font-weight: bold;">{{ item.quantity }}</td>
                <td style="padding: 8px; border-bottom: 1px solid #ddd;">
                    {% for order_id in item.orders %}
                    <a href="../order/{{ order_id }}/change/">Order #{{ order_id }}</a>{% if not forloop.last %}, {% endif %}
                    {% endfor %}
                </td>
            </tr>
            {% empty %}
            <tr>
                <td colspan="5" style="padding: 8px; text-align: center;">No items to prepare</td>
            </tr>
            {% endfor %}
        </tbody>
    </table>

    <h2 style="margin-top: 30px;">Order Details</h2>
    <table style="width: 100%; border-collapse: collapse;">
        <thead>
            <tr>
                <th style="text-align: left; padding: 8px; border-bottom: 1px solid #ddd;">Order #</th>
                <th style="text-align: left; padding: 8px; border-bottom: 1px solid #ddd;">Date</th>
                <th style="text-align: left; padding: 8px; border-bottom: 1px solid #ddd;">Customer</th>
                <th style="text-align: left; padding: 8px; border-bottom: 1px solid #ddd;">Shipping Address</th>
                <th style="text-align: left; padding: 8px; border-bottom: 1px solid #ddd;">Items</th>
                <th style="text-align: left; padding: 8px; border-bottom: 1px solid #ddd;">Actions</th>
            </tr>
        </thead>
        <tbody>
            {% for order in orders %}
            <tr>
                <td style="padding: 8px; border-bottom: 1px solid #ddd;"><a href="../order/{{ order.id }}/change/">Order #{{ order.id }}</a></td>
                <td style="padding: 8px; border-bottom: 1px solid #ddd;">{{ order.date_ordered|date:"Y-m-d H:i" }}</td>
                <td style="padding: 8px; border-bottom: 1px solid #ddd;">
                    {% if order.user %}
                        {{ order.user.email }}
                    {% elif order.guest_user %}
                        {{ order.guest_user.email }} (Guest)
                    {% else %}
                        Unknown
                    {% endif %}
                </td>
                <td style="padding: 8px; border-bottom: 1px solid #ddd;">
                    {% if order.shipping_address %}
                        {{ order.shipping_address.street_address }}
                        {% if order.shipping_address.apartment %}, {{ order.shipping_address.apartment }}{% endif %}<br>
                        {{ order.shipping_address.postal_code }} {{ order.shipping_address.city }}<br>
                        {{ order.shipping_address.state }}, {{ order.shipping_address.country }}
                    {% else %}
                        No shipping address
                    {% endif %}
                </td>
                <td style="padding: 8px; border-bottom: 1px solid #ddd;">
                    {% for item in order.items.all %}
                        {{ item.quantity }}x {{ item.product.title }}
                        {% if item.color %} ({{ item.color.name }}){% endif %}
                        {% if item.size %} [{{ item.size.name }}]{% endif %}
                        <br>
                    {% endfor %}
                </td>
                <td style="padding: 8px; border-bottom: 1px solid #ddd;">
                    <form method="POST" action="{% url 'admin:prepare_order' order.id %}" style="display: inline;">
                        {% csrf_token %}
                        <button type="submit"
                                style="background-color: #28a745; color: white; border: none; padding: 5px 10px; margin-right: 5px; cursor: pointer;">
                            Mark as Prepared
                        </button>
                    </form>

                    <form method="POST" action="{% url 'admin:cancel_and_refund_order' order.id %}" style="display: inline;">
                        {% csrf_token %}
                        <button type="submit"
                                onclick="return confirm('Are you sure you want to cancel and refund this order?')"
                                style="background-color: #dc3545; color: white; border: none; padding: 5px 10px; cursor: pointer;">
                            Cancel & Refund
                        </button>
                    </form>
                </td>
            </tr>
            {% empty %}
            <tr>
                <td colspan="6" style="padding: 8px; text-align: center;">No orders found</td>
            </tr>
            {% endfor %}
        </tbody>
    </table>

    <style>
        @media print {
            button, .button, #header, .breadcrumbs {
                display: none !important;
            }
            body {
                padding: 0;
                margin: 0;
            }
        }
    </style>
</div>
{% endblock %}
