{% extends 'layout.html.twig' %}

{% block title %}Administration{% endblock %}

{% block content %}
    <main class="container-md">
        <h1>Admin</h1>
        <div class="d-flex justify-content-evenly">
            <a class="btn btn-primary mb-3 mx-3" href="{{ path('app_category_new') }}">Add new category</a>
            <a class="btn btn-primary mb-3 mx-3" href="{{ path('app_product_new') }}">Add new product</a>
        </div>

        <h3>Categories</h3>

        <div class="table-responsive">
            <table class="table align-middle">
                <thead>
                    <tr>
                        <th scope="col">Id</th>
                        <th scope="col">Name</th>
                        <th scope="col">Description</th>
                        <th scope="col"></th>
                    </tr>
                </thead>
                <tbody>
                    {% for category in categories %}
                        <tr>
                            <td>{{ category.id }}</td>
                            <td>{{ category.name }}</td>
                            <td>{{ category.description }}</td>
                            <td>
                                <a href="{{ path('app_category_show', {'id': category.id}) }}">Show</a>
                                <a href="{{ path('app_category_edit', {'id': category.id}) }}">Edit</a>
                            </td>
                        </tr>
                    {% else %}
                        <tr>
                            <td colspan="4" class="text-center py-5">No categories found</td>
                        </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>

        <h3>Products</h3>

        <div class="table-responsive">
            <table class="table align-middle">
                <thead>
                    <tr>
                        <th scope="col">Id</th>
                        <th scope="col">Name</th>
                        <th scope="col">Categories</th>
                        <th scope="col">Description</th>
                        <th scope="col">Price</th>
                        <th scope="col">Available</th>
                        <th scope="col"></th>
                    </tr>
                </thead>
                <tbody>
                    {% for product in products %}
                        <tr>
                            <td>{{ product.id }}</td>
                            <td>{{ product.name }}</td>
                            <td>{{ product.category }}</td>
                            <td class="text-break">{{ product.description }}</td>
                            <td>{{ product.price }}</td>
                            <td>{{ product.available ? 'Yes' : 'No' }}</td>
                            <td>
                                <a href="{{ path('app_product_show', {'id': product.id}) }}">Show</a>
                                <a href="{{ path('app_product_edit', {'id': product.id}) }}">Edit</a>
                            </td>
                        </tr>
                    {% else %}
                        <tr>
                            <td colspan="7" class="text-center py-5">No products found</td>
                        </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>

        <h3>Users</h3>

        <div class="table-responsive">
            <table class="table align-middle">
                <thead>
                    <tr>
                        <th scope="col">Id</th>
                        <th scope="col">Email</th>
                        <th scope="col">Roles</th>
                        <th scope="col">FirstName</th>
                        <th scope="col">LastName</th>
                        <th scope="col">Phone</th>
                        <th scope="col"></th>
                    </tr>
                </thead>
                <tbody>
                    {% for user in users %}
                        <tr>
                            <td>{{ user.id }}</td>
                            <td>{{ user.email }}</td>
                            <td>{{ user.roles ? user.roles|json_encode : '' }}</td>
                            <td>{{ user.firstName }}</td>
                            <td>{{ user.lastName }}</td>
                            <td>{{ user.phone }}</td>
                            <td>
                                <a href="{{ path('app_user_edit_with_id', {'id': user.id}) }}">Edit</a>
                            </td>
                        </tr>
                    {% else %}
                        <tr>
                            <td colspan="7" class="text-center py-5">No users found</td>
                        </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>

        <h3>Orders</h3>

        <div class="table-responsive">
            <table class="table align-middle">
                <thead>
                    <tr>
                        <th scope="col">Id</th>
                        <th scope="col">Order number</th>
                        <th scope="col">User</th>
                        <th scope="col">Date</th>
                        <th scope="col">Valid</th>
                        <th scope="col"></th>
                    </tr>
                </thead>
                <tbody>
                    {% for order in orders %}
                        <tr>
                            <td>{{ order.id }}</td>
                            <td>{{ order.orderNumber }}</td>
                            <td>{{ order.user.firstName ~ ' ' ~ order.user.lastName ~ ' (' ~ order.user.id ~ ')' }}</td>
                            <td>{{ order.dateTime|date("Y-m-d H:i:s") }}</td>
                            <td>{{ order.valid ? 'Yes' : 'No' }}</td>
                            <td>
                                <a href="{{ path('app_order_show', {'id': order.id}) }}">Show</a>
                            </td>
                        </tr>
                    {% else %}
                        <tr>
                            <td colspan="6" class="text-center py-5">No orders found</td>
                        </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>
    </main>
{% endblock %}