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

{% block title %}
{% trans %}payment{% endtrans %} | {% trans %}app_name{% endtrans %}
{% endblock %}
{% block body_class %}checkout-page{% endblock %}
{% block body %}
<div id="page-content">        
    <!--Body Container-->
    <!--Breadcrumbs-->
    <div class="breadcrumbs-wrapper">
        <div class="container">
            <div class="breadcrumbs"><a href="index.html" title="Back to the home page">Home</a> <span aria-hidden="true">|</span> <span>Checkout</span></div>
        </div>
    </div>
    <!--End Breadcrumbs-->
    <!--Page Title with Image-->
    <div class="page-title"><h1>Payer votre commande</h1></div>
    <!--End Page Title with Image-->
    <div class="container">
        <div class="row billing-fields">
            <div class="col-xl-8 col-lg-8 col-md-8 col-sm-12">
                <div class="your-order-payment">
                    <div class="your-payment">
                        <h2 class="payment-title mb-3">Paiement</h2>
                        <div class="payment-method">
                            <div class="payment-accordion">
                                <div id="accordion" class="payment-section">
                                    <div class="card mb-2">
                                        <div id="collapseFour">
                                            <div class="card-body">
                                                <fieldset>
                                                    <div class="row">
                                                        <div class="form-group col-md-6 col-lg-6 col-xl-6 required">
                                                            <label for="input-cardname">Name on Card <span class="required-f">*</span></label>
                                                            <input name="cardname" value="" placeholder="Card Name" id="input-cardname" class="form-control" type="text">
                                                        </div>
                                                        <div class="form-group col-md-6 col-lg-6 col-xl-6 required">
                                                            <label for="input-country">Credit Card Type <span class="required-f">*</span></label>
                                                            <select name="country_id" class="form-control">
                                                                <option value=""> --- Please Select --- </option>
                                                                <option value="1">American Express</option>
                                                                <option value="2">Visa Card</option>
                                                                <option value="3">Master Card</option>
                                                                <option value="4">Discover Card</option>
                                                            </select>
                                                        </div>
                                                    </div>
                                                    <div class="row">
                                                        <div class="form-group col-md-6 col-lg-6 col-xl-6 required">
                                                            <label for="input-cardno">Credit Card Number  <span class="required-f">*</span></label>
                                                            <input name="cardno" value="" placeholder="Credit Card Number" id="input-cardno" class="form-control" type="text">
                                                        </div>
                                                        <div class="form-group col-md-6 col-lg-6 col-xl-6 required">
                                                            <label for="input-cvv">CVV Code <span class="required-f">*</span></label>
                                                            <input name="cvv" value="" placeholder="Card Verification Number" id="input-cvv" class="form-control" type="text">
                                                        </div>
                                                    </div>
                                                    <div class="row">
                                                        <div class="form-group col-md-6 col-lg-6 col-xl-6 required">
                                                            <label>Expiration Date <span class="required-f">*</span></label>
                                                            <input type="date" name="exdate" class="form-control">
                                                        </div>
                                                        <div class="form-group col-md-6 col-lg-6 col-xl-6 required">
                                                            <img class="padding-25px-top xs-padding-5px-top" src="{{ asset('front/assets/images/payment-img.jpg') }}" alt="card" title="card">
                                                        </div>
                                                    </div>
                                                    <div class="row">
                                                        <div class="form-group col-md-6 col-lg-6 col-xl-6 required">
                                                        <button class="btn" value="Place order" type="submit">Place order</button>
                                                    </div>
                                                </fieldset>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-xl-4 col-lg-4 col-md-4 col-sm-12 sm-margin-30px-bottom">
                <div class="create-ac-content bg-light-gray padding-20px-all">
                    <h2 class="login-title mb-3">Récapitulatif de commande</h2>
                    
                    <div class="solid-border">	
                        <div class="row border-top pt-2">
                            <span class="col-12 col-sm-6 cart__subtotal-title">Articles</span>
                            <span class="col-12 col-sm-6 text-right">10.00 €</span>
                          </div>
                          <div class="row border-bottom pb-2 pt-2">
                            <span class="col-12 col-sm-6 cart__subtotal-title">Livraison</span>
                            <span class="col-12 col-sm-6 text-right">Gratuit</span>
                          </div>                          
                        <div class="row border-bottom pb-2 pt-2">
                          <span class="col-12 col-sm-6 cart__subtotal-title"><strong>Grand Total</strong></span>
                          <span class="col-12 col-sm-6 cart__subtotal-title cart__subtotal text-right"><span class="money">$1001.00</span></span>
                        </div>
                        <p class="cart_tearm">
      
                        </p>
                        <input type="submit" name="checkout" id="cartCheckout" class="btn btn--small-wide checkout" value="Passer commande">
                    </div>
                </div>
            </div>
        </div>
        <!--End Main Content-->        
    </div><!--End Body Container-->
</div>
{% endblock %}