{% extends 'layouts/app.html.twig' %}

{% block title %}Nouvelle vente - Rsaff{% endblock %}

{% block app_content %}

<div class="sale-mobile mx-auto">

    {# Header #}
    <div class="d-flex align-items-center mb-4">

        <a href="{{ path('app_dashboard') }}"
           class="btn btn-outline-secondary me-3">
            <i class="bi bi-arrow-left"></i>
        </a>

        <div>
            <h1 class="h5 mb-0">Nouvelle vente</h1>

            <small class="text-body-secondary">
                Stand actuel
            </small>
        </div>

    </div>


    <form method="post" action="{{ path('app_sale_create') }}" id="mobileSaleForm">

        <input type="hidden" name="_token" value="{{ csrf_token('create-sale') }}">

        {# Valeur réellement envoyée à Symfony #}
        <input type="hidden" name="amount" id="saleAmount" value="0.00">


        {# Affichage du montant #}
        <div class="text-center mb-4">

            <div class="text-body-secondary small text-uppercase mb-2">
                Montant
            </div>

            <div class="sale-amount" id="saleAmountDisplay">
                0,00 €AAA
            </div>

        </div>


        {# Pavé numérique #}
        <div class="sale-keypad mb-3">

            {% for number in 1..9 %}
                <button type="button"
                        class="btn sale-key"
                        data-digit="{{ number }}">
                    {{ number }}
                </button>
            {% endfor %}

            <button type="button"
                    class="btn sale-key sale-key-clear"
                    id="saleClear">
                C
            </button>

            <button type="button"
                    class="btn sale-key"
                    data-digit="0">
                0
            </button>

            <button type="button"
                    class="btn sale-key"
                    id="saleBackspace"
                    aria-label="Effacer le dernier chiffre">
                <i class="bi bi-backspace"></i>
            </button>

        </div>


        {# Détails facultatifs #}
        <div class="text-center mb-3">

            <button type="button"
                    class="btn btn-link text-decoration-none"
                    data-bs-toggle="collapse"
                    data-bs-target="#saleDetails"
                    aria-expanded="false"
                    aria-controls="saleDetails">

                <i class="bi bi-plus-circle me-1"></i>
                Ajouter des détails

            </button>

        </div>


        <div class="collapse mb-4"
             id="saleDetails">

            <div class="card">
                <div class="card-body">

                    {# Paiement #}
                    <label class="form-label">
                        Moyen de paiement
                    </label>

                    <div class="d-grid gap-2 d-sm-flex mb-4">

                        <input type="radio"
                               class="btn-check"
                               name="paymentMethod"
                               id="mobilePaymentCash"
                               value="cash"
                               checked>

                        <label class="btn btn-outline-secondary"
                               for="mobilePaymentCash">
                            <i class="bi bi-cash me-1"></i>
                            Espèces
                        </label>


                        <input type="radio"
                               class="btn-check"
                               name="paymentMethod"
                               id="mobilePaymentCard"
                               value="card">

                        <label class="btn btn-outline-secondary"
                               for="mobilePaymentCard">
                            <i class="bi bi-credit-card me-1"></i>
                            Carte
                        </label>


                        <input type="radio"
                               class="btn-check"
                               name="paymentMethod"
                               id="mobilePaymentCheck"
                               value="check">

                        <label class="btn btn-outline-secondary"
                               for="mobilePaymentCheck">
                            Chèque
                        </label>

                    </div>


                    {# Stand #}
                    <div class="mb-3">

                        <label for="mobileSaleStand"
                               class="form-label">
                            Stand
                        </label>

                        <select name="stand"
                                id="mobileSaleStand"
                                class="form-select">

                            <option value="">
                                Stand actuel
                            </option>

                        </select>

                    </div>


                    {# Note #}
                    <div>

                        <label for="mobileSaleNote"
                               class="form-label">
                            Note
                        </label>

                        <textarea name="note"
                                  id="mobileSaleNote"
                                  class="form-control"
                                  rows="2"
                                  maxlength="500"
                                  placeholder="Facultatif..."></textarea>

                    </div>

                </div>
            </div>

        </div>


        {# Validation #}
        <button type="submit"
                class="btn btn-success btn-lg w-100"
                id="saleSubmit"
                disabled>

            <i class="bi bi-check-lg me-2"></i>

            Enregistrer
            <span id="saleSubmitAmount">
                0,00 €
            </span>

        </button>

    </form>

</div>

{% endblock %}