{% extends 'washerman/dashboard.html.twig' %}

{% block title %}Washerman Products{% endblock %}

{% block dashboard_content %}
    <div class="container mt-5">
        <h2 class="mb-4">Add Laundry Products</h2>

        {% for message in app.flashes('success') %}
            <div class="alert alert-success">{{ message }}</div>
        {% endfor %}
        {% for message in app.flashes('error') %}
            <div class="alert alert-danger">{{ message }}</div>
        {% endfor %}
        <form method="post" enctype="multipart/form-data" class="mb-4">
            <div class="row mb-3">
                <div class="col-md-3">
                    <select name="product" class="form-select" required>
                        <option value="">Select Product</option>
                        {% for product in products %}
                            <option value="{{ product }}">{{ product }}</option>
                        {% endfor %}
                    </select>
                </div>
                <div class="col-md-2">
                    <input type="number" step="0.01" name="wash" placeholder="Wash" class="form-control">
                </div>
                <div class="col-md-2">
                    <input type="number" step="0.01" name="press" placeholder="Press" class="form-control">
                </div>
                <div class="col-md-2">
                    <input type="number" step="0.01" name="both" placeholder="Wash + Press" class="form-control">
                </div>
                <div class="col-md-2">
                    <input type="file" name="image" accept="image/*" class="form-control">
                </div>
                <div class="col-md-1">
                    <button type="submit" class="btn btn-primary w-100">Add</button>
                </div>
            </div>
        </form>

        <h4>Added Products</h4>
        <table class="table table-bordered align-middle">
            <thead class="table-light">
            <tr>
                <th>ID</th>
                <th>Image</th>
                <th>Product</th>
                <th>Wash</th>
                <th>Press</th>
                <th>Wash + Press</th>
                <th>Actions</th>
            </tr>
            </thead>
            <tbody>
            {% for item in items %}
                <tr>
                    <td>{{ item.id }}</td>
                    <td>
                        {% if item.image %}
                            <img src="{{ asset('uploads/' ~ item.image) }}" alt="Product Image" width="60" height="60" class="rounded">
                        {% else %}
                            <span class="text-muted">No image</span>
                        {% endif %}
                    </td>
                    <td>{{ item.product }}</td>
                    <td>{{ item.washPrice ?? '-' }}</td>
                    <td>{{ item.pressPrice ?? '-' }}</td>
                    <td>{{ item.washAndPressPrice ?? '-' }}</td>
                    <td>
                        <a href="{{ path('washerman_product_edit', {id: item.id}) }}" class="btn btn-sm btn-warning">Edit</a>
                        <form action="{{ path('washerman_product_delete', {id: item.id}) }}" method="post" style="display:inline;">
                            <input type="hidden" name="_token" value="{{ csrf_token('delete_product_' ~ item.id) }}">
                            <button type="submit" class="btn btn-sm btn-danger" onclick="return confirm('Are you sure you want to delete this product?')">
                                Delete
                            </button>
                        </form>
                    </td>
                </tr>
            {% else %}
                <tr><td colspan="7" class="text-center">No products added yet</td></tr>
            {% endfor %}
            </tbody>
        </table>
    </div>
{% endblock %}