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

{% block body %}
    {% include 'layout/header.html.twig' %}
    
    <div class="container mt-4">
        <div class="row">
            <div class="d-md-6">
                <a href="{{ path('app_market') }}" class="btn btn-primary">Back to Market</a>
            </div>
        </div>
        {% if market is not null %}
            <div class="row my-3">
                <div class="card">
                    <div class="card-header">
                        Market info
                    </div>
                    <ul class="list-group list-group-flush">
                        <li class="list-group-item">Project Name: {{ market.project.projectName }}</li>
                        <li class="list-group-item">Project Type: {{ market.project.type }}</li>
                        <li class="list-group-item">Vintage: {{ market.vintage.year }}</li>
                        <li class="list-group-item">Quantity Grams: {{ market.sellOrder.quantityGrams|number_format(0, '.', ',') }}</li>
                        <li class="list-group-item">Price Dollars: ${{ (market.sellOrder.priceCents / 100)|number_format(2, '.', ',') }}</li>
                    </ul>
                </div>
            </div>
        {% endif %}
        <div class="row">
            <div class="col-md-7 offset-md-3">
                <div class="border rounded shadow p-4 mb-5 bg-body rounded">
                    <h2 class="mb-5 text-center">Request Carbon Credit Retirement</h2>
                    
                    {{ form_start(form, {'attr': {'class': 'form'}}) }}
                        <div class="mb-3 row">
                            <label for="{{ form.vintage_id.vars.id }}" class="col-md-5 col-form-label">{{ form_label(form.vintage_id, 'Vintage ID') }}</label>
                            <div class="col-md-7">
                                {{ form_widget(form.vintage_id, {'attr': {'class': 'form-control'}}) }}
                            </div>
                        </div>
                        <div class="mb-3 row">
                            <label for="{{ form.quantity_grams.vars.id }}" class="col-md-5 col-form-label">{{ form_label(form.quantity_grams, 'Quantity Grams') }}</label>
                            <div class="col-md-7">
                                {{ form_widget(form.quantity_grams, {'attr': {'class': 'form-control'}}) }}
                            </div>
                        </div>
                        <div class="mb-3 row">
                            <label for="{{ form.sell_order_id.vars.id }}" class="col-md-5 col-form-label">{{ form_label(form.sell_order_id, 'Sell Order ID') }}</label>
                            <div class="col-md-7">
                                {{ form_widget(form.sell_order_id, {'attr': {'class': 'form-control'}}) }}
                            </div>
                        </div>
                        <div class="mb-3 row">
                            <label for="{{ form.expected_price_dollars.vars.id }}" class="col-md-5 col-form-label">{{ form_label(form.expected_price_dollars, 'Expected Price') }}</label>
                            <div class="col-md-7">
                                {% if form_errors(form.expected_price_dollars) %}
                                    {{ form_widget(form.expected_price_dollars, {'attr': {'class': 'form-control is-invalid'}}) }}
                                    <div class="invalid-feedback">
                                        {{ form_errors(form.expected_price_dollars) }}
                                    </div>
                                {% else %}
                                    {{ form_widget(form.expected_price_dollars, {'attr': {'class': 'form-control'}}) }}
                                {% endif %}
                            </div>
                        </div>
                        <div class="mt-5 d-flex justify-content-center">
                            <button type="submit" class="btn btn-primary w-25">Submit</button>
                        </div>
                    {{ form_end(form) }}
                </div>

                {% if form_errors(form) %}
                    <div class="mt-4">
                        <h2>Errors:</h2>
                        <ul class="text-danger">
                            {% for error in form_errors(form) %}
                                <li>{{ error.message }}</li>
                            {% endfor %}
                        </ul>
                    </div>
                {% endif %}

                {% if apiError is not null %}
                    <div class="alert alert-danger mt-4">
                        <ul>
                            <li>Status code: {{ apiError.statusCode }}</li>
                            <li>Message: {{ apiError.message }}</li>
                        </ul>
                    </div>
                {% endif %}

                {% if apiResult is not null %}
                    <div class="mt-4">
                        <h2>API Response:</h2>
                        <ul>
                            {% for key, value in apiResult %}
                                <li><strong>{{ key }}:</strong> {{ value is same as(true) ? 'true' : value is same as(false) ? 'false' : value }}</li>
                            {% endfor %}
                        </ul>
                    </div>
                {% endif %}
            </div>
        </div>
    </div>
{% endblock %}