{% extends 'customer/base.html' %}
{% block header %}PreOrder App management{% endblock %}
{% block content %}
<style>
    .admin-content {
        display: flex;
        justify-content: space-between;
        width: fit-content;
        max-width: 1800px;
        margin: 30px;
        margin-bottom: auto;
        padding: 0 20px;
        border-radius: 20px;
        gap:70px;
    }
    .right-section{
        background-color: white;
        padding: 10px;
        border-radius: 20px;
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    }
    .order-content {
        background-color: #fff8dc;
        border: 1px solid #3e2723;
        border-radius: 5px;
        padding: 20px;
        margin: 20px 0;
        width: auto;
        text-align: center;
        flex-grow: 1;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    }
    .left-section{
        background-color: white;
        padding: 10px;
        border-radius: 20px;
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    }

    .section {
        background-color: #fff8dc;
        border: 1px solid #3e2723;
        border-radius: 5px;
        padding: 20px;
        margin: 20px 0;
        width: auto;
        text-align: center;
        flex-grow: 1;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    }
    .section-title{
        background-color: #8b4513;
        color: white;
        padding: 10px;
        border-radius: 5px 5px 0 0;
        margin: -20px -20px 20px -20px;
    }

    .indicator {
        width: 30px;
        height: 30px;
        border-radius: 70%;
    }

    .status-pending {
        background-color: red;
    }

    .status-noticed {
        background-color: yellow;
    }

    .status-fulfilled {
        background-color: green;
    }

    .status-default {
        background-color: gray;
    }

    .submit_order {
        display: flex;
        align-items: center;
        justify-content: center;
    }

</style>
    <div class="admin-content">
        <div class="left-section">
            <div class="section">
                <h2 class="section-title">Add Category</h2>
                <form method="post">
                {% csrf_token %}
                    <input type="text" name="category_name" placeholder="Category Name" required>
                    <button type="submit" name="add_category">Add Category</button>
                </form>
            </div>
        
            <div class="section">
                <h2 class="section-title">Delete Category</h2>
                <form method="post">
                    {% csrf_token %}
                    <select name="category_id" required>
                        {% for category in categories %}
                            <option value="{{ category.id }}">{{ category.name }}</option>
                        {% endfor %}
                    </select>
                    <button type="submit" name="delete_category">Delete Category</button>
                </form>
            </div>
            
            <div class="section">
                <h2 class="section-title">Add Item</h2>
                <form method="post">
                    {% csrf_token %}
                    <input type="text" name="item_name" placeholder="Item Name" required>
                    <select name="category_id" required>
                        {% for category in categories %}
                            <option value="{{ category.id }}">{{ category.name }}</option>
                        {% endfor %}
                    </select>
                    <button type="submit" name="add_item">Add Item</button>
                </form>
            </div>

            <div class="section">
                <h2 class="section-title">Delete Item</h2>
                <form method="post">
                    {%csrf_token%}
                    <select name="item_id" required>
                        {% for item in items %}
                            <option value="{{ item.id }}">{{ item.name }}</option>
                        {% endfor %}
                    </select>
                    <button type="submit" name="delete_item">Delete Item</button>
                </form>
            </div>
        </div>

        <div class="right-section">
            <div class="order-content">
                <h2 class="section-title">Orders</h2>
                <table>
                    <thead>
                        <tr>
                            <th>Order Number</th>
                            <th>Customer Name</th>
                            <th>Items</th>
                            <th>Status</th>
                            <th>Actions</th>
                        </tr>
                    </thead>
                    <tbody>
                        {% for order in orders %}
                            <tr>
                                <td>{{ order.order_number }}</td>
                                <td>{{ order.customer.username }}</td>
                                <td>
                                    {% for item in order.items.all %}
                                        {{ item.name }}{% if not forloop.last %}, {% endif %}
                                    {% endfor %}
                                </td>
                                    
                                <td>
                                    <div class="indicator 
                                    {% if order.status == 'pending' %}
                                        status-pending
                                    {% elif order.status == 'confirmed' %}
                                        status-noticed
                                    {% elif order.status == 'completed' %}
                                        status-fulfilled
                                    {% else %}
                                        status-default
                                    {% endif %}">
                                    </div>
                                
                                </td>
                                <td>
                                    <form method="post" style="display:inline;">
                                        {% csrf_token %}
                                        <input type="hidden" name="order_id" value="{{ order.id }}">
                                        <button type="submit" name="confirm_order">Confirm Order</button>
                                    </form>
                                    <form method="post" style="display:inline;">
                                        {% csrf_token %}
                                        <input type="hidden" name="order_id" value="{{ order.id }}">
                                        <button type="submit" name="completed_order">Completed Order</button>
                                    </form>
                                    <form method="post" style="display:inline;">
                                        {% csrf_token %}
                                        <input type="hidden" name="order_id" value="{{ order.id }}">
                                        <button type="submit" name="delete_order">Delete Order</button>
                                    </form>
                                </td>
                            </tr>
                        {% endfor %}
                    </tbody>
                </table>
            </div>
        </div>

    </div>
    
{% endblock %}