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

{% block title %}{% endblock %}

{% block body %}

<!-- breadcrumb area start -->
<div class="breadcrumb-area">
    <div class="container-fluid">
        <div class="row">
            <div class="col-12">
                <div class="breadcrumb-wrap text-center">
                    <h2 class="breadcrumb-title">SPRINT & SPORTS | {% trans %}Paiement{% endtrans %}</h2>
                    <nav aria-label="breadcrumb">
                        <ul class="breadcrumb">
                            <li class="breadcrumb-item"><a href="{{ path("index") }}">{% trans %}Accueil{% endtrans %}</a></li>
                            <li class="breadcrumb-item"><a href="{{ path('cart_display') }}">{% trans %}Panier{% endtrans %}</a></li>
                            <li class="breadcrumb-item active" aria-current="page">{% trans %}Paiement{% endtrans %}</li>
                        </ul>
                    </nav>
                </div>
            </div>
        </div>
        <br>
        <br>
    </div>
</div>
<!-- breadcrumb area end -->

<!-- checkout main wrapper start -->
<div class="checkout-page-wrapper pt-98 pb-98 pt-sm-60 pb-sm-60">
    <div class="container">
        <div class="row">
            <div class="col-12">
                {% if user == null %}
                    <!-- Checkout Login Coupon Accordion Start -->
                    <div class="checkoutaccordion" id="checkOutAccordion">
                        <div class="card">
                            <h3>{% trans %}Déjà client ?{% endtrans %} <span data-bs-toggle="collapse" data-bs-target="#logInaccordion">{% trans %}Se connecter{% endtrans %}</span></h3>

                            <div id="logInaccordion" class="collapse" data-parent="#checkOutAccordion">
                                <div class="card-body">
                                    <p>{% trans %}Si vous avez un compte <strong>Sprint & Sports</strong>, connectez vous à l'aide de vos identifiants.{% endtrans %}</p>
                                    <div class="login-reg-form-wrap">
                                        <div class="row">
                                            <div class="col-lg-7 m-auto">
                                                <form action="{{path('app_login')}}" method="post">
                                                    <div class="row">
                                                        <div class="col-md-12">
                                                            <div class="single-input-item">
                                                                <input type="email" name="email" placeholder="{% trans %}Email{% endtrans %}"
                                                                       required/>
                                                            </div>
                                                        </div>

                                                        <div class="col-md-12">
                                                            <div class="single-input-item">
                                                                <input type="password" name="password" placeholder="{% trans %}Mot de passe{% endtrans %}"
                                                                       required/>
                                                            </div>
                                                        </div>
                                                    </div>
                                                    <input type="hidden" name="_csrf_token"
                                                    value="{{ csrf_token('authenticate') }}">
                                                    <input type="hidden" name="route"
                                                           value="{{ path('cart_checkout') }}">

                                                    <div class="single-input-item">
                                                        <div class="login-reg-form-meta d-flex align-items-center justify-content-between">
{#                                                            <a href="#" class="forget-pwd">Mot de passe oublié ?</a>#}
                                                        </div>
                                                    </div>

                                                    <div class="single-input-item">
                                                        <button class="check-btn sqr-btn">{% trans %}Se connecter{% endtrans %}</button>
                                                    </div>
                                                </form>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!-- Checkout Login Coupon Accordion End -->
                {% endif %}
            </div>
        </div>
        <form action="{{ path('create_order') }}" method="post">
        <div class="row">
            <!-- Checkout Billing Details -->
            <div class="col-lg-6">
                <div class="checkout-billing-details-wrap">
                    <h2>Vos informations</h2>
                    <div class="billing-form-wrap">

                            <div class="row">
                                <div class="col-md-6">
                                    <div class="single-input-item">
                                        <label for="f_name" class="required">{% trans %}Prénom{% endtrans %}</label>
                                        <input type="text" name="f_name" id="f_name" value="{{ user != null ? user.prenom : '' }}" required/>
                                    </div>
                                </div>

                                <div class="col-md-6">
                                    <div class="single-input-item">
                                        <label for="l_name" class="required">{% trans %}Nom{% endtrans %}</label>
                                        <input type="text" name="l_name" id="l_name"  value="{{ user != null ? user.nom : '' }}" required/>
                                    </div>
                                </div>
                            </div>

                            <div class="single-input-item">
                                <label for="email" class="required">{% trans %}Email{% endtrans %}</label>
                                <input type="email" name="email" id="email" value="{{ user != null ? user.email : '' }}" required/>
                            </div>


                            <div class="single-input-item">
                                <label for="street-address" class="required">{% trans %}Adresse{% endtrans %}</label>
                                <input type="text" name="address" id="street-address" value="{{ user != null ? user.adresse : '' }}" required/>
                            </div>

                            <div class="single-input-item">
                                <label for="town" class="required">{% trans %}Ville{% endtrans %}</label>
                                <input type="text" name="town" id="town"  value="{{ user != null ? user.city : '' }}" required/>
                            </div>

                            <div class="single-input-item">
                                <label for="phone" class="required">{% trans %}Téléphone{% endtrans %}</label>
                                <input type="text" name="phone" id="phone" id="email" value="{{ user != null ? user.tel : '' }}" required/>
                            </div>
                        {% if user == null %}
                            <div class="checkout-box-wrap">
                                <div class="single-input-item">
                                    <div class="custom-control custom-checkbox">
                                        <input type="checkbox" class="custom-control-input" id="create_pwd">
                                        <label class="custom-control-label" for="create_pwd">{% trans %}Créer un compte ?{% endtrans %}</label>
                                    </div>
                                </div>
                                <div class="account-create single-form-row">
                                    <p>{% trans %}Créez votre compte en renseignant un mot de passe.{% endtrans %}</p>
                                    <div class="single-input-item">
                                        <label for="pwd" >{% trans %}Mot de passe{% endtrans %}</label>
                                        <input type="password" name="pwd" id="pwd" />
                                    </div>
                                </div>
                            </div>
                        {%  endif %}
                    </div>
                </div>
            </div>

            <!-- Order Summary Details -->
            <div class="col-lg-6 mt-5 mt-lg-0">
                <div class="order-summary-details">
                    <h2>Panier</h2>
                    <div class="order-summary-content">
                        <!-- Order Summary Table -->
                        <div class="order-summary-table table-responsive text-center">
                            <table class="table table-bordered">
                                <thead>
                                <tr>
                                    <th>{% trans %}Produits{% endtrans %}</th>
                                    <th>{% trans %}Total{% endtrans %}</th>
                                </tr>
                                </thead>
                                <tbody>
                                {% for item in cart.items %}
                                    <tr>
                                        <td><a href="{{ path('product_details', { id: item.productId.id }) }}">{{ item.productId.label }} <strong> × {{ item.qte }}</strong></a></td>
                                        <td>{{ (item.productId.price * item.qte)|number_format(2, ',', ' ') }}</td> DZD
                                    </tr>
                                {% endfor %}
                                </tbody>
                                <tfoot>
                                <tr>
                                    <td>{% trans %}Prix HT{% endtrans %}</td>
                                    <td class="sub-total">{{ cart.price|number_format(2, ',', ' ') }} </td>
                                </tr>
                                <tr>
                                    <td>{% trans %}TVA (20%){% endtrans %}</td>
                                    <td class="sub-total">{{ (cart.price * 0.2)|number_format(2, ',', ' ') }} </td>
                                </tr>
                                <tr class="total">
                                    <td>{% trans %}Total{% endtrans %}</td>
                                    <td class="total-amount">{{ (cart.price * 1.2)|number_format(2, ',', ' ') }} </td>
                                    <input type="hidden" name="price" id="price" value="{{ (cart.price * 1.2) }}"/>
                                </tr>
                                </tfoot>
                            </table>
                        </div>
                        <!-- Order Payment Method -->
                        <div class="order-payment-method">
                            <div class="single-payment-method show">
                                <div class="payment-method-name">
                                    <div class="custom-control custom-radio d-flex">
                                        <input type="radio" id="cashon" name="paymentmethod" value="cash"
                                               class="custom-control-input" checked/>
                                        <label class="custom-control-label" for="cashon">{% trans %}Paiement{% endtrans %}</label>
                                    </div>
                                </div>
                                <div class="payment-method-details" data-method="cash">
                                    <p>{% trans %}Payer par carte bancaire{% endtrans %}</p>
                                </div>
                            </div>
                            <div class="summary-footer-area">
                                <div class="custom-control custom-checkbox mb-30 d-flex">
                                    <input type="checkbox" class="custom-control-input" id="terms" required/>
                                    <label class="custom-control-label" for="terms">{% trans %}J'accepte les <a href="#">conditions générales</a> du site.{% endtrans %}</label>
                                </div>
                                <button type="submit" class="check-btn sqr-btn">{% trans %}Payer{% endtrans %}</button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        </form>
    </div>
</div>
<!-- checkout main wrapper end -->
{% endblock %}