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

{% block title %}Votre panier | {{ parent() }}{% endblock %}

{% block body %}
	<div class="breadcrumb-area">
        <div class="container">
            <div class="row">
                <div class="col-12">
                    <div class="row breadcrumb_box  align-items-center">
                        <div class="col-lg-6 col-md-6 col-sm-12 text-center text-md-left">
                            <h2 class="breadcrumb-title">Boutique</h2>
                        </div>
                        <div class="col-lg-6  col-md-6 col-sm-12">
                            <!-- breadcrumb-list start -->
                            <ul class="breadcrumb-list text-center text-md-right">
                                <li class="breadcrumb-item"><a href="{{ path('default')}}">Accueil</a></li>
                                <li class="breadcrumb-item"><a href="{{ path('shop') }}">Boutique</a></li>
                                <li class="breadcrumb-item active">Caisse</li>
                            </ul>
                            <!-- breadcrumb-list end -->
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="checkout-area pt-100px pb-100px">
        <div class="container">
            <div class="row">
                <div class="col-lg-6">
                    <div class="billing-info-wrap">
                        <h3>Détails de la facturation</h3>
                        <div class="row">
                            <div class="col-lg-6 col-md-6">
                                <div class="billing-info mb-4">
                                    <label>Prénoms *</label>
                                    <input type="text" name="customer_first_name" id="customer_first_name" value="{{ app.user ? app.user.firstName }}" />
                                </div>
                            </div>
                            <div class="col-lg-6 col-md-6">
                                <div class="billing-info mb-4">
                                    <label>Nom *</label>
                                    <input type="text" name="customer_last_name" id="customer_last_name" value="{{ app.user ? app.user.lastName }}" />
                                </div>
                            </div>
                            <div class="col-lg-6 col-md-6">
                                <div class="billing-info mb-4">
                                    <label>Téléphone *</label>
                                    <input type="text" name="customer_phone_number" id="customer_phone_number" value="{{ app.user ? app.user.phoneNumber }}" />
                                </div>
                            </div>
                            <div class="col-lg-6 col-md-6">
                                <div class="billing-info mb-4">
                                    <label>Adresse e-mail</label>
                                    <input type="text" name="customer_email" id="customer_email" value="{{ app.user ? app.user.email }}"/>
                                </div>
                            </div>
                            <div class="col-lg-12">
                                <div class="billing-info mb-4">
                                    <label>Adresse complet *</label>
                                    <input type="text" name="customer_address" id="customer_address" value="{{ app.user ? app.user.address }}"/>
                                </div>
                            </div>
                            
                        </div>
                        {# <div class="checkout-account mb-30px">
                            <input class="checkout-toggle2 w-auto h-auto" id="is_account_created" type="checkbox" />
                            <label for="is_account_created">Créer un compte?</label>
                        </div>
                        <div class="checkout-account-toggle open-toggle2 mb-30">
                            <input placeholder="Adresse e-mail" type="email" name="customer_user_email" id="customer_user_email"/>
                            <input placeholder="Mot de passe" type="password" name="customer_user_password" id="customer_user_password" />
                            <button class="btn-hover checkout-btn" type="submit">S'inscrire</button>
                        </div> #}
                        <div class="additional-info-wrap">
                            <h4>Information additionnelle</h4>
                            <div class="additional-info">
                                <label>Notes</label>
                                <textarea placeholder="Notes sur votre commande, par ex. notes spéciales pour la livraison." name="customer_message" id="customer_message"></textarea>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-lg-6 mt-md-30px mt-lm-30px ">
                    <div class="your-order-area">
                        <h3>Votre commande</h3>
                        <div class="your-order-wrap gray-bg-4">
                            <div class="your-order-product-info">
                                <div class="your-order-top">
                                    <table class="table table-bordered">
                                        <thead>
                                            <tr>
                                                <th width="60%">Article</th>
                                                <th class="text-center">Total</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            {% for item in items %}
                                                <tr>
                                                    <td>{{ item.product.title }}</td>
                                                    <td class="text-center">{{ item.product.price|number_format(0, ',', ' ') }} {{ app_devise }}</td>
                                                </tr>
                                            {% endfor %}
                                        </tbody>
                                    </table>
                                </div>
                                {# <div class="your-order-bottom">
                                    <ul>
                                        <li class="your-order-shipping">Expédition</li>
                                        <li>A vos frais</li>
                                    </ul>
                                </div> #}
                                <div class="your-order-total">
                                    <ul>
                                        <li class="order-total">Total</li>
                                        <li>{{ total|number_format(0, ',', ' ') }} {{ app_devise }}</li>
                                    </ul>
                                </div>
                            </div>
                            <div class="payment-method">
                                <div class="payment-accordion element-mrg">
                                    <div id="faq" class="panel-group">
                                        <div class="panel panel-default single-my-account m-0">
                                            <div class="panel-heading my-account-title">
                                                <h4 class="panel-title"><a data-bs-toggle="collapse" href="#my-account-1" class="collapsed" aria-expanded="true">Virement bancaire direct</a>
                                                </h4>
                                            </div>
                                            <div id="my-account-1" class="panel-collapse collapse show" data-bs-parent="#faq">

                                                <div class="panel-body">
                                                    <p>Veuillez envoyer un chèque au nom du magasin, à la rue du magasin, à la ville du magasin, à l'état/au comté du magasin, au code postal du magasin.</p>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="panel panel-default single-my-account m-0">
                                            <div class="panel-heading my-account-title">
                                                <h4 class="panel-title"><a data-bs-toggle="collapse" href="#my-account-2" aria-expanded="false" class="collapsed">Paiements par chèque</a></h4>
                                            </div>
                                            <div id="my-account-2" class="panel-collapse collapse" data-bs-parent="#faq">

                                                <div class="panel-body">
                                                    <p>Veuillez envoyer un chèque au nom du magasin, à la rue du magasin, à la ville du magasin, à l'état/au comté du magasin, au code postal du magasin.</p>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="panel panel-default single-my-account m-0">
                                            <div class="panel-heading my-account-title">
                                                <h4 class="panel-title"><a data-bs-toggle="collapse" href="#my-account-3">Paiement à la livraison</a></h4>
                                            </div>
                                            <div id="my-account-3" class="panel-collapse collapse" data-bs-parent="#faq">

                                                <div class="panel-body">
                                                    <p>Veuillez envoyer un chèque au nom du magasin, à la rue du magasin, à la ville du magasin, à l'état/au comté du magasin, au code postal du magasin.</p>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="Place-order mt-25">
                            {% if is_granted('ROLE_CUSTOMER') %}
                                <a class="btn-hover" href="#" onclick="apiPlaceOrder();">Passer la commande</a>
                                {% else %}
                                    <a class="btn-hover" href="{{ path('app_login') }}" >Se connecter pour valider la commande</a>
                            {% endif %}
                            
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    
    {# <div class="section pb-100px" data-aos="fade-up" data-aos-delay="200">
        <div class="container">
            <!-- section title start -->
            <div class="row">
                <div class="col-md-12">
                    <div class="section-title text-left mb-11">
                        <h2 class="title">Vous pourriez aussi aimer</h2>
                    </div>
                </div>
            </div>
            <!-- section title start -->
            <div class="new-product-slider swiper-container slider-nav-style-1" data-aos="fade-up" data-aos-delay="200">
                <div class="new-product-wrapper swiper-wrapper">
                    {% for product in special_offers_products %}
						{{ include('default/_newProductBox.html.twig') }}
						{{ include('default/_productModal.html.twig') }}
                    {% endfor %}
                </div>
                <!-- Add Arrows -->
                <div class="swiper-buttons">
                    <div class="swiper-button-next"></div>
                    <div class="swiper-button-prev"></div>
                </div>
            </div>
        </div>
    </div> #}
{% endblock %}