{% extends "layout.html" %}

{% set title = 'Payment' %}

{% block content %}

<div class="steps-wrapper">
    <div class="container">
        <ul class="steps list-unstyled d-flex justify-content-between align-items-center">
            <li class="active text-capitalize text-center">cart</li>
            <li class="active text-capitalize text-center">shipping</li>
            <li class="active current text-capitalize text-center">payment</li>
            <li class="text-capitalize text-center">summery</li>
        </ul>
    </div>
</div>


<section class="section checkout">
    <div class="container">
        <div class="section-title">
            <h3 class="toshiba-title text-bold no-margin mbmd">Payment method</h3>
            {% include '../template/component/toshiba-border.html' %}
        </div>
        <div class="boxed mtlg">
            <h4 class="mb-3">How would you like to pay <span class="text-brand">35412 EGP</span></h4>
            <ul class="nav nav-pills mb-3" id="payment-tab" role="tablist">
                <li class="nav-item">
                    <a class="nav-link mr-4 active" id="payment-credit-tab" data-toggle="pill" href="#payment-credit"
                       role="tab" aria-controls="payment-credit" aria-selected="true">
                        <i class="fa fa-credit-card mr-3"></i>Credit or debit card
                    </a>
                </li>
                <li class="nav-item">
                    <a class="nav-link " id="payment-cash-tab" data-toggle="pill" href="#payment-cash" role="tab"
                       aria-controls="payment-cash" aria-selected="false">
                        <i class="fa fa-money-bill-alt mr-3"></i>Cash on delivery
                    </a>
                </li>
            </ul>
            <div class="tab-content" id="payment-tabContent">
                <div class="tab-pane fade show active" id="payment-credit" role="tabpanel"
                     aria-labelledby="payment-credit-tab">
                    <div class="mb-2 mt-4 text-muted"><strong>Your saved cards</strong></div>
                    <div class="saved-cards">
                        <div class="card-item">
                            <div class="d-flex align-items-center justify-content-between">
                                <div class="card-details">
                                    <input id="visa" checked="" type="radio" class="custom-radio" name="cardType"
                                           value="">
                                    <label class="card-logo" for="visa">
                                        <img src="./assets/images/visa.png" alt="">
                                        <strong>****1234</strong>
                                    </label>
                                </div>
                                <div class="card-name">Mukhar Ali Gomaa</div>
                                <div class="card-name">09/22</div>
                                <div class="card-cvv">
                                    <input type="text" class="form-control" placeholder="cvv">
                                </div>
                            </div>
                        </div>
                        <div class="card-item">
                            <div class="d-flex align-items-center justify-content-between">
                                <div class="card-details">
                                    <input id="mastercard" checked="" type="radio" class="custom-radio" name="cardType"
                                           value="">
                                    <label class="card-logo" for="mastercard">
                                        <img src="./assets/images/mastercard.png" alt="">
                                        <strong>****4321</strong>
                                    </label>
                                </div>
                                <div class="card-name">Mukhar Ali Gomaa</div>
                                <div class="card-name">07/25</div>
                                <div class="card-cvv">
                                    <input type="text" class="form-control" placeholder="cvv">
                                </div>
                            </div>
                        </div>
                        <div class="card-item">
                            <div class="d-flex align-items-center justify-content-between">
                                <div class="card-details">
                                    <input id="meeza" checked="" type="radio" class="custom-radio" name="cardType"
                                           value="">
                                    <label class="card-logo" for="meeza">
                                        <img src="./assets/images/meeza-logo.png" alt="">
                                        <strong>****4321</strong>
                                    </label>
                                </div>
                                <div class="card-name">Mukhar Ali Gomaa</div>
                                <div class="card-name">07/25</div>
                                <div class="card-cvv">
                                    <input type="text" class="form-control" placeholder="cvv">
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="text-right mt-2">
                        <a href="#" class="add-new text-link">
                            <i class="fa fa-plus mr-2"></i>Add new card
                        </a>
                    </div>
                    <div class="new mt-4">
                        <form action="">
                            <div class="row">
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label for="cardNumber">Card number *</label>
                                        <input type="text" class="form-control" id="cardNumber" placeholder="Card number">
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label for="cardName">Card holder's name *</label>
                                        <input type="text" class="form-control" id="cardName" placeholder="Card holder's name">
                                    </div>
                                </div>
                                <div class="col-lg-3 col-md-6">
                                    <div class="form-group">
                                        <label for="expiryDate">Expiry date *</label>
                                        <input type="text" class="form-control" id="expiryDate"
                                               placeholder="MM/YY">
                                    </div>
                                </div>
                                <div class="col-lg-3 col-md-6">
                                    <div class="form-group">
                                        <label for="cvc">CVC *</label>
                                        <input type="text" class="form-control" id="cvc"
                                               placeholder="CVC">
                                    </div>
                                </div>
                            </div>
                            <button type="submit" class="btn mr-3">Save Card</button>
                            <button type="submit" class="btn btn-gray close-new">Cancel</button>
                        </form>
                    </div>
                </div>
                <div class="tab-pane fade" id="payment-cash" role="tabpanel" aria-labelledby="payment-cash-tab"></div>
            </div>
        </div>
        <div class="row mt-4">
            <div class="col-lg-5 offset-lg-7 col-md-6">
                <div class="subtotal">
                    <div class="d-flex justify-content-between mb-2">
                        <div class="sub sub-sm">items subtotal:</div>
                        <div class="price price-sm order-last">35212 EGP</div>
                    </div>
                    <div class="d-flex justify-content-between mb-3 pb-3 bb">
                        <div class="sub sub-sm">+ Shipping</div>
                        <div class="price price-sm order-last">200 EGP</div>
                    </div>
                    <div class="d-flex justify-content-between">
                        <div class="order-sub">
                            <div class="sub text-bold">Order subtotal:</div>
                            <div class="items-no">2 items</div>
                        </div>
                        <div class="price order-last">35412 EGP</div>
                    </div>
                </div>
                <a href="summery.html" class="btn text-capitalize d-block mt-4">checkout</a>
            </div>
        </div>
    </div>
</section>


{% endblock content %}