HockeyCMS-SHOP/themes/default/seller_orders.html.twig

{% extends "base.html.twig" %}

{% block title %}{{ t.customer_orders }} - {{ site_title }}{% endblock %}

{% block extra_css %}
<style>
    /* --- SELLER DASHBOARD COMMON STYLES --- */
    .dashboard-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 30px; border-bottom: 2px solid var(--border-color); padding-bottom: 15px; }
    .dashboard-header h2 { margin: 0; color: var(--primary); font-size: 24px; text-transform: uppercase; letter-spacing: 1px; font-weight: 800; display: flex; align-items: center; gap: 10px; }
    
    .dashboard-nav { display: flex; gap: 10px; }
    .nav-btn { padding: 10px 15px; border-radius: 6px; text-decoration: none; font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; transition: 0.2s; border: 1px solid transparent; }
    .nav-btn.active { background: rgba(249, 115, 22, 0.1); color: var(--primary); border-color: rgba(249, 115, 22, 0.2); }
    .nav-btn:not(.active) { background: rgba(255,255,255,0.05); color: var(--text-main); border-color: var(--border-color); }
    .nav-btn:hover { background: rgba(255,255,255,0.1); }

    .alert { padding: 15px; border-radius: 6px; margin-bottom: 25px; font-weight: 600; font-size: 14px;}
    .success { background: rgba(16, 185, 129, 0.1); color: var(--accent-green); border: 1px solid rgba(16, 185, 129, 0.2); }
    .error { background: rgba(239, 68, 68, 0.1); color: #ef4444; border: 1px solid rgba(239, 68, 68, 0.2); }

    /* --- ORDERS STYLES --- */
    .orders-container { max-width: 1000px; margin: 0 auto; }
    
    .order-card { background: var(--panel-bg); border-radius: var(--border-radius); box-shadow: var(--shadow-sm); border: 1px solid var(--border-color); margin-bottom: 25px; overflow: hidden; display: flex; flex-direction: column;}
    
    .order-header { background: rgba(0,0,0,0.2); padding: 15px 25px; display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid var(--border-color); }
    .order-id { font-size: 18px; font-weight: 900; color: var(--text-main); }
    .order-date { font-size: 13px; color: var(--text-muted); font-weight: 600; }
    
    .order-body { padding: 25px; display: grid; grid-template-columns: 1fr 1.5fr; gap: 30px; }
    
    .customer-info h4 { margin-top: 0; color: var(--primary); font-size: 14px; text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 12px; }
    .customer-info p { margin: 0 0 8px 0; font-size: 14px; color: var(--text-main); display: flex; align-items: center; gap: 8px; }
    .customer-info p i { color: var(--text-muted); font-size: 12px; }
    
    .order-items h4 { margin-top: 0; color: var(--primary); font-size: 14px; text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 12px; }
    .item-row { display: flex; justify-content: space-between; align-items: center; padding: 10px 0; border-bottom: 1px solid rgba(255,255,255,0.05); }
    .item-row:last-child { border-bottom: none; padding-bottom: 0; }
    .item-title { font-weight: 600; color: var(--text-main); font-size: 15px; }
    .item-qty { background: rgba(255,255,255,0.1); padding: 2px 8px; border-radius: 4px; font-size: 12px; font-weight: bold; margin-left: 10px; color: var(--text-muted); }
    .item-price { font-weight: 800; color: var(--accent-green); }
    
    /* --- ORDER ACTIONS (STATUS & DELETE) --- */
    .order-actions { background: rgba(0,0,0,0.15); padding: 15px 25px; border-top: 1px solid var(--border-color); display: flex; justify-content: space-between; align-items: center; }
    
    .status-form { display: flex; align-items: center; gap: 10px; }
    .status-select { padding: 8px 12px; background: #0f172a; border: 1px solid var(--border-color); border-radius: 6px; color: var(--text-main); font-family: 'Inter', sans-serif; font-size: 13px; font-weight: 600; outline: none; }
    .status-select:focus { border-color: var(--primary); }
    
    .btn-update { padding: 8px 15px; background: rgba(16, 185, 129, 0.1); border: 1px solid rgba(16, 185, 129, 0.2); color: var(--accent-green); font-size: 13px; font-weight: 700; border-radius: 6px; cursor: pointer; text-transform: uppercase; transition: 0.2s; }
    .btn-update:hover { background: var(--accent-green); color: white; }
    
    .delete-form { margin: 0; }
    .btn-delete { padding: 8px 15px; background: rgba(239, 68, 68, 0.1); border: 1px solid rgba(239, 68, 68, 0.2); color: #ef4444; font-size: 13px; font-weight: 700; border-radius: 6px; cursor: pointer; text-transform: uppercase; transition: 0.2s; }
    .btn-delete:hover { background: #ef4444; color: white; }

    @media (max-width: 768px) {
        .dashboard-header { flex-direction: column; gap: 15px; text-align: center; }
        .order-body { grid-template-columns: 1fr; gap: 20px; padding: 20px;}
        .customer-info { border-bottom: 1px solid var(--border-color); padding-bottom: 20px; }
        .order-actions { flex-direction: column; gap: 15px; align-items: stretch; padding: 20px;}
        .status-form { justify-content: space-between; }
    }
</style>
{% endblock %}

{% block content %}
    <div class="dashboard-header">
        <h2>🏪 {{ t.seller_panel }}</h2>
        <div class="dashboard-nav">
            <a href="seller_dashboard.php" class="nav-btn">{{ t.my_listings }}</a>
            <a href="seller_orders.php" class="nav-btn active">{{ t.customer_orders }}</a>
        </div>
    </div>

    <div class="orders-container">
        
        {% if message %}
            {{ message|raw }}
        {% endif %}

        {% if orders|length > 0 %}
            {% for order in orders %}
                <div class="order-card">
                    <div class="order-header">
                        <div class="order-id">#{{ order.id }}</div>
                        <div style="display: flex; align-items: center; gap: 15px;">
                            <div class="order-date">{{ order.created_at|date("d/m/Y H:i") }}</div>
                        </div>
                    </div>
                    
                    <div class="order-body">
                        <div class="customer-info">
                            <h4>{{ t.customer }} & {{ t.contact }}</h4>
                            <p>👤 <strong>{{ order.customer_name }}</strong></p>
                            <p>✉️ <a href="mailto:{{ order.customer_email }}" style="color: var(--accent-blue); text-decoration: none;">{{ order.customer_email }}</a></p>
                            <p>📞 {{ order.customer_phone }}</p>
                            <p>📍 {{ order.shipping_address }}</p>
                        </div>
                        
                        <div class="order-items">
                            <h4>{{ t.my_products }}</h4>
                            {% for item in order.items %}
                                <div class="item-row">
                                    <div>
                                        <span class="item-title">{{ item.title }}</span>
                                        <span class="item-qty">x{{ item.quantity }}</span>
                                    </div>
                                    <div class="item-price">{{ item.price|number_format(2, ',', '.') }} €</div>
                                </div>
                            {% endfor %}
                        </div>
                    </div>

                    <!-- ORDER ACTIONS (Status & Delete) -->
                    <div class="order-actions">
                        <!-- Φόρμα αλλαγής Status -->
                        <form method="POST" action="seller_orders.php" class="status-form">
                            <input type="hidden" name="action" value="update_status">
                            <input type="hidden" name="order_id" value="{{ order.id }}">
                            <select name="status" class="status-select">
                                <option value="pending" {% if order.status == 'pending' %}selected{% endif %}>{{ t.status_pending }}</option>
                                <option value="completed" {% if order.status == 'completed' %}selected{% endif %}>{{ t.status_completed }}</option>
                                <option value="cancelled" {% if order.status == 'cancelled' %}selected{% endif %}>{{ t.status_cancelled }}</option>
                            </select>
                            <button type="submit" class="btn-update">{{ t.btn_update }}</button>
                        </form>
                        
                        <!-- Φόρμα Διαγραφής Παραγγελίας -->
                        <form method="POST" action="seller_orders.php" class="delete-form" onsubmit="return confirm('{{ t.confirm_delete }}');">
                            <input type="hidden" name="action" value="delete_order">
                            <input type="hidden" name="order_id" value="{{ order.id }}">
                            <button type="submit" class="btn-delete">{{ t.btn_delete }}</button>
                        </form>
                    </div>

                </div>
            {% endfor %}
        {% else %}
            <div style="text-align: center; padding: 80px 20px; color: var(--text-muted); background: var(--panel-bg); border-radius: var(--border-radius); border: 1px dashed var(--border-color);">
                <span style="font-size: 50px; display: block; margin-bottom: 15px; opacity: 0.5;">🛒</span>
                <strong style="font-size: 18px; color: var(--text-main);">{{ t.no_orders }}</strong>
            </div>
        {% endif %}
    </div>
{% endblock %}