@extends('layouts.frontend.appClient')
@section('title', "Mon compte")
@section('css')
    <style>
        footer {
            background-color: #f5f5f5;
        }
        .ps-footer__copyright {
            padding: 5px 0;
            display: flex;
            flex-flow: row nowrap;
            justify-content: space-between;
            background: #047112;
        }
        .ps-footer__copyright p {
            margin-bottom: 0;
            line-height: 30px;
            color: #ffffff;
        }
        h3,h4{
            color: #047112;
        }
        h5 {
            font-size: 20px;
            color: #666;
        }
        .ps-block--categories-box, .ps-block__content{
            box-shadow: 2px 2px 6px #ccc;
            border-radius: 10px;
        }
       .ps-product-list{
           box-shadow: 1px 1px 2px #e9ecef;
            border-radius: 10px;
        }
        .ps-block--categories-box {
            margin-bottom: 30px;
            padding: 40px;
            background-color: #ffffff;
        }
        .ps-list--link li a {
            display: inline-block;
            color: #666;
            line-height: 41px;
            font-size: 16px;
            position: relative;
            margin-left: 25px;
        }
        .ps-product-list .ps-section__content {
            padding-top: 20px;
        }
        .menu-item-has-children{
            margin-top: 10px;
        }
        .menu-item-icon{
            font-size: 20px;
            padding: 10px;
            box-shadow: inset 0 0 0 2000px rgb(19 177 51 / 16%);
            color: #047112;
            border-radius: 50%;
            margin-right: 50px;
        }
        .menu-item-icon-user {
            font-size: 23px!important;
            font-weight: bold;
            padding: 4px;
            border-radius: 50%;
            border: 2px solid;
        }
            .ps-list--menu-cateogories,.ps-list--categories{
                padding-left: 40px !important;
                padding-right: 20px !important;
                padding-top: 20px !important;
                padding-bottom: 20px !important;
            }
            .ps-list--categories li a {
                display: block;
                line-height: 25px;
                font-size: 18px;
            }
            .ps-block--menu-categories .ps-list--menu-cateogories > li > a {
                display: block;
                padding: 10px 0;
                font-size: 16px;
                line-height: 26px;
                border-bottom: none;
            }
            .ps-list--categories li .sub-toggle i:before {
                content: "\f054";
                font-family: 'FontAwesome' !important;
            }
            .ps-block--site-features.ps-block--site-features-2 .ps-block__item {
                max-width: 100%;
                padding: 5px 11px;
            }
            .ps-block--menu-categories {
                position: relative;
                background-color: #ffffff;
                padding: 15px 15px;
            }
            .ps-block--menu-categories {
                display: block;
            }
            #shop-categories .ps-catalog-top {
                padding: 15px 0;
            }
        .ps-list--link li.active a {
            font-size: 18px;
           border-bottom:2px solid #047112;
        }
        @media (max-width: 767px) {
            .ps-list--categories li a {
                display: block;
                line-height: 25px;
                font-size: 12px;
            }
        }
        @media (min-width: 768px){
            .col-md-6 {
                margin-bottom: -22px;
            }
        }
        .ps-btn, button.ps-btn {
            margin: 10px;
        }

        .radio{
            max-width: 450px;
            display:flex;
            justify-content: space-between;
            padding: 5px 15px 5px 10px;
            margin: 20px auto;
            border: 1px solid #DFDFDF;
            border-radius: 3px;
            background: linear-gradient(to bottom, white, #F4F4F4);
        }
        .radio *{
            align-self: center;
        }

        .radio label,
        .radio label span{
            text-align: right;
            display: block;
        }

        .radio img{
            max-width: 45px;
            position: relative;
            left: 25px;
        }
        .form-group > input[type='radio']:after {
            width: 22px;
            height: 22px;
            border-radius: 15px;
            top: -9px;
            left: -3px;
            position: relative;
            background-color: #fff;
            content: '';
            display: inline-block;
            visibility: visible;
            border: 1px solid #068d18;
        }

        .form-group > input[type='radio']:checked:after {
            width: 25px;
            height: 25px;
            border-radius: 15px;
            top: -9px;
            left: -3px;
            position: relative;
            background-color: #068d18;
            content: '';
            display: inline-block;
            visibility: visible;
            border: 2px solid #068d18;
        }
        input[type='radio']:after {
            width: 15px;
            height: 15px;
            border-radius: 15px;
            top: -2px;
            left: -1px;
            position: relative;
            background-color: #fff;
            content: '';
            display: inline-block;
            visibility: visible;
            border: 1px solid #068d18;
        }

        input[type='radio']:checked:after {
            width: 15px;
            height: 15px;
            border-radius: 15px;
            top: -2px;
            left: -1px;
            position: relative;
            background-color: #068d18;
            content: '';
            display: inline-block;
            visibility: visible;
            border: 2px solid #068d18;
        }
        .ps-btn {
            border: 2px solid #047112;
        }
        .ps-btn.btn-secondary {
            color: #fff;
            border: 1px solid #047112;
            background-color: #04711247;
        }

        .ps-block--payment-method {
            margin-bottom: 0px;
            padding: 8px;
            background-color: #eaeaea;
        }
        .form-group {
            margin-bottom: 0.5rem;
        }
        .select2-container--default .select2-selection--single {
            background-color: #fff;
            border: none;
            border-radius: 0.6rem!important;
        }
        .select2 .select2-selection--single .select2-selection__rendered {
             line-height: 28px;
            padding: 10px 20px;
        }
        section{padding:5% 0}
        .alizarin{background:#047112}
        .midnight-blue{background:#2c3e50}
        .peter-river{background:#3498db}
        .dl{background:#f0f0f0;padding:30px 0;border-radius:20px;position:relative}
        .dl:before{content:" ";height:20px;width:20px;background:#ddd;border-radius:20px;position:absolute;left:50%;top:20px;margin-left:-10px}
        .dl .brand{text-transform:uppercase;letter-spacing:3px;padding:10px 15px;margin-top:10px;text-align:center;min-height:100px}
        .dl .discount{
            min-height: 50px;
            position: relative;
            font-size: 50px;
            line-height: 69px;
            text-align: center;
            font-weight: 700;
            padding: 10px 15px 0;
            color: #f8f9fa;}
        .dl .discount:after{content:" ";border-right:20px solid transparent;border-left:20px solid transparent;position:absolute;bottom:-20px;left:20%}
        .dl .discount.alizarin:after{border-top:20px solid #047112}
        .dl .discount .type{font-size:20px;letter-spacing:1px;text-transform:uppercase;margin-top:-30px}
        .dl .descr{color:#999;margin-top:10px;padding:20px 15px}
        .dl .ends{padding:0 15px;color:#ffbb00;margin-bottom:10px}
        .dl .coupon{min-height:50px;text-align:center;text-transform:uppercase;font-weight:700;font-size:18px;padding:20px 15px}
        .dl .coupon a.open-code{color:#047112}
        .dl .coupon .code{letter-spacing:1px;border-radius:4px;margin-top:10px;padding:10px 15px;color:#ffbb00;background:#f0f0f0}
        p.footer_icons >a:hover {
            color: #ffbc03;
        }
        .header--standard .header__content-left {
            margin-left: -95px;
        }
        .hidden{
            display: none !important;
        }
        .return_to_dashboard:hover {
             color: #ffbb00 !important;
            font-weight: bold;
         }
        .ps-table--shopping-cart thead tr th {
            text-align: initial !important;
        }
</style>
@endsection
@section('content')
    <div class="ps-page--shop" id="shop-categories">
        <div class="container">

            <div class="ps-catalog-top">
            </div>

            <div class="ps-product-list ps-product-list--2">
                <h3>Bonjour {{auth()->user()->lastName}}!</h3>
                <div class="ps-section__content mainDashboard">
                    <div class="row">
                        <div class="col-md-5">
                            <h4>Je gere mon compte</h4>
                            <div class="ps-block--categories-box">
                                <h5 class="widget-title">Mes informations personnels</h5>
                                <ul class="ps-list--link ps-tab-list" style="margin-bottom: 0">
                                    <li class="active"><a href="#tab-1">Tableau de bord</a></li>
                                    <li><a href="#tab-2">Mes idenficants</a></li>
                                    <li><a href="#tab-7">Sécurité</a></li>
                                    <li><a href="#tab-3">Mes moyens de paiements</a></li>
                                    <li><a href="#tab-4">Mes coupons</a></li>
                                <h5 class="widget-title" style="margin-top:30px">Mes historique de courses</h5>
                                    <li><a href="#tab-5">Mes tickets de caisse </a></li>
                                    <li><a href="#tab-6">Mes commandes en ligne</a></li>
                                </ul>
                            </div>
                        </div>
                        <div class="col-md-7">
                            <div class="ps-tabs">
                                <div class="ps-tab active" id="tab-1">
                                    <div class="ps-block--menu-categories" data-mh="catalog-top">
                                        <h4>Mes courses</h4>
                                        <div class="ps-block__content">

                                            <ul class="ps-list--categories">
                                                <li class="menu-item-has-children" id="my_order"><a href="#"><i class="bi bi-cart3 menu-item-icon"></i> Mes commandes <span class="sub-toggle"><i class="fa fa-chevron-right"></i></span></a>
                                                </li>
                                                <li class="menu-item-has-children" id="my_frequent_buy"><a href="#"><i class="icon-tags menu-item-icon"></i> Mes achats frequents<span class="sub-toggle"><i class="fa fa-chevron-right"></i></span></a>
                                                </li>
                                                <li class="menu-item-has-children" id="my_favourite"><a href="#"><i class="icon-heart menu-item-icon"></i> Mes Favoris<span class="sub-toggle"><i class="fa fa-chevron-right"></i></span></a>
                                                </li>
                                            </ul>

                                        </div>
                                    </div>
                                    <div class="ps-block--menu-categories" data-mh="catalog-top">
                                <h4>Support</h4>
                                <div class="ps-block__content">
                                    <div class="ps-block--site-features ps-block--site-features-2" style="border-radius:10px;box-shadow: 1px 2px 2px #ccc;padding: 20px 0 50px;border: 1px solid #ede7e780;">
                                        <div class="ps-block__item">
                                            <div class="ps-block__left"><img src="{{asset('frontend/images/call-center.png')}}"></div>
                                            <div class="ps-block__right">
                                                <h4>Service Client</h4>
                                                <p>Retrouvez l'ensemble des possibilités pour nous contacter</p>
                                                <a href="#">Nous contacter</a>
                                            </div>
                                        </div>
                                        <div class="ps-block__item">
                                            <div class="ps-block__left"><img src="{{asset('frontend/images/icon-info.png')}}"></div>
                                            <div class="ps-block__right">
                                                <h4>Foire aux questions</h4>
                                                <p>A chaque problème sa solution! Retrouvez les réponses à vos questions</p>
                                                <a href="#">Voir la FAQ</a>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                                </div>
                                <div class="ps-tab" id="tab-2">
                                    <h4>Mes idenficants</h4>
                                    <div class="ps-block--categories-box" style="padding: 20px">
                                         <form action="#" method="post">
                                             <div class="w-100 text-center my-20" style="color: #068d18; display: inline-block;">
                                                 <input type="radio" name="civility" id="mr" @if($user->civility=="M")checked @endif value="M">
                                                 <label for="mr" style="margin-right: 10px;">Monsieur</label>
                                                 <input  type="radio" id="mme" name="civility" @if($user->civility=="Mme")checked @endif value="Mme">
                                                 <label for="mme">Madame</label>
                                             </div>
                                        <div class="row">
                                            <div class="col-md-6">
                                                <label for="prenom">Prénom*</label>
                                                <input name="lastName" type="text" class="form-control" id="prenom" placeholder="Ex: Thomas" value="{{$user->lastName}}"><br><br>
                                            </div>
                                            <div class="col-md-6">
                                                <label for="nom">Nom*</label>
                                                <input name="firstName" type="text" class="form-control" id="nom" placeholder="Ex: Melenchon" value="{{$user->firstName}}"><br><br>
                                            </div>
                                            <div class="col-md-6">
                                                <label for="naissance">Date de naissance*</label>
                                                <input name="birthday" type="date" class="form-control" id="naissance" placeholder="Ex: 06-06-1983" value="{{date('Y-m-d',strtotime($user->birthday))}}"><br><br>
                                            </div>
                                            <div class="col-md-6">
                                                <label for="email">Adresse électronique*</label>
                                                <input name="email" type="email" class="form-control" id="email" placeholder="Ex: exemple@domain.fr"  value="{{$user->email}}"><br><br>
                                            </div>
                                            <div class="col-md-6">
                                                <label for="tel">Numéro de téléphone*</label>
                                                <input name="phone" type="text" class="phone form-control" id="phone" data-inputmask="'mask': '09 99 99 99 99'" value="{{$user->phone}}"><br><br>
                                            </div>
                                            <div class="col-md-6">
                                                @include('extensions.select-city')
                                                <br><br>
                                            </div>
                                            <div class="col-md-6">
                                                <label for="livraison1">Adresse de livrasion - Ligne 1*</label>
                                                <input name="billingAddress" type="text" class="form-control" id="livraison1" placeholder="Ex: 77620, la ferté sous jouarres" value="{{$user->billingAddress}}"><br><br>
                                            </div>
                                            <div class="col-md-6">
                                                <label for="livraison1">Adresse de livrasion - Ligne 2*</label>
                                                <input name="billingAddress2" type="text" class="form-control" id="livraison1" placeholder="Ex: 77620, la ferté sous jouarres" value="{{$user->billingAddress2}}"><br><br>
                                            </div>
                                        </div>
                                        <br>
                                        <div class="text-center">
                                            <button type="submit" class="ps-btn">Mise à jour</button>
                                        </div>
                                        <br><br>
                                    </form>
                                    </div>
                                </div>
                                <div class="ps-tab" id="tab-7">
                                    <h4>Réinitialiser votre mot de passe</h4>
                                    <div class="ps-block--categories-box" style="padding: 10px;min-height:465px">
                                        @include('extensions.reset_password_component')
                                    </div>
                                </div>
                                <div class="ps-tab" id="tab-3">
                                    <h4 class="text-center">Mes moyens de paiements</h4>
                                    <div class="ps-block--categories-box" style="padding: 20px">
                                        <div class="container-fluid">
                                            <div class="row">
                                                <div class="col-md-12">
                                                    <div class="col-sm-12 field" style="text-align:center"><a href="#" type="button" class="btn" data-toggle="modal"  data-target="#paymentModal"><h4><i class="bi bi-plus-circle-dotted"></i> Nouveau moyen de paiement</h4></a>
                                                    </div>
                                                    @foreach($user->visaCards as $visaCard)
                                                      @if($visaCard->type == 'Visa')
                                                     <div class="radio form-group">
                                                        <input id="CC-0" type="radio" name="availPayment" value="4582" checked>
                                                        <img src="{{asset('images/icons/visa_logo.png')}}" alt="Carte Visa">
                                                        <label for="CC-0">**** **** **** 4582<span>Visa</span></label>
                                                    </div>
                                                     @endif
                                                     @if($visaCard->type == 'MasterCard')
                                                          <div class="radio form-group">
                                                        <input id="CC-2" type="radio" name="availPayment" value="5079">
                                                        <img src="{{asset('images/icons/master-card-icon.png')}}" alt="Carte Master">
                                                        <label for="CC-2">**** **** **** 5079<span>MasterCard</span></label>
                                                    </div>
                                                     @endif
                                                    @if($visaCard->type == 'AmEx')
                                                        <div class="radio form-group">
                                                        <input id="CC-3" type="radio" name="availPayment" value="5809">
                                                        <img src="{{asset('images/icons/american-express-icon.png')}}" alt="Carte American Express">
                                                        <label for="CC-3">**** **** **** 809<span>AmEx</span></label>
                                                    </div>
                                                    @endif
                                                   @endforeach
                                                    <div class="form-group col-sm-12">
                                                        <div class="col-sm-12 field" style="text-align:center">
                                                            <button type="submit" class="ps-btn">Enregistrer le mode de paiement </button>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="ps-tab" id="tab-4">
                                    <h4>Mes coupons</h4>
                                    <div class="ps-block--categories-box" style="padding: 20px">
                                        <section id="labels">
                                                <div class="row">
                                                    <div class="col-sm-6 col-md-6">
                                                        <div class="dl">
                                                            <div class="brand">
                                                                <h2>mango</h2>
                                                            </div>
                                                            <div class="discount alizarin">30%
                                                                <div class="type">off</div>
                                                            </div>
                                                            <div class="descr">
                                                                <strong>Mei mucius gloriatur reprimique mollis*.</strong>
                                                                Ad sonet perfecto antiopam mei, denique molestie ne has.
                                                            </div>
                                                            <div class="ends">
                                                                <small>* Conditions and restrictions apply.</small>
                                                            </div>
                                                            <div class="coupon midnight-blue">
                                                                <a data-toggle="collapse" href="#code-1" class="open-code">Get a code</a>
                                                                <div id="code-1" class="collapse code">LV5MAY14</div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                        </section>
                                    </div>

                                </div>
                                <div class="ps-tab" id="tab-5">
                                    <h4 class="text-center">Mes tickets de caisse</h4>
                                    <div class="ps-block--categories-box" style="padding: 20px">
                                        <div class="ps-section__right">
                                            <div class="ps-section--account-setting">
                                                <div class="ps-section__header">
                                                    <h3>Factures</h3>
                                                </div>
                                                <div class="ps-section__content">
                                                    <div class="table-responsive">
                                                        <table class="table ps-table ps-table--invoices">
                                                            <thead>
                                                            <tr>
                                                                <th>Id</th>
                                                                <th>Titre</th>
                                                                <th>Date</th>
                                                                <th>Montant</th>
                                                                <th>Statut</th>
                                                            </tr>
                                                            </thead>
                                                            <tbody>
                                                            <tr>
                                                                <td><a href="invoice-detail.html">500884010</a></td>
                                                                <td><a href="product-default.html">Marshall Kilburn Portable Wireless Speaker</a></td>
                                                                <td>20-1-2020</td>
                                                                <td>42.99</td>
                                                                <td>Successful delivery</td>
                                                            </tr>
                                                            <tr>
                                                                <td><a href="invoice-detail.html">593347935</a></td>
                                                                <td><a href="product-default.html">Herschel Leather Duffle Bag In Brown Color</a></td>
                                                                <td>20-1-2020</td>
                                                                <td>199.99</td>
                                                                <td>Cancel</td>
                                                            </tr>
                                                            <tr>
                                                                <td><a href="invoice-detail.html">593347935</a></td>
                                                                <td><a href="product-default.html">Xbox One Wireless Controller Black Color</a></td>
                                                                <td>20-1-2020</td>
                                                                <td>199.99</td>
                                                                <td>Cancel</td>
                                                            </tr>
                                                            <tr>
                                                                <td><a href="invoice-detail.html">615397400</a></td>
                                                                <td><a href="product-default.html">Grand Slam Indoor Of Show Jumping Novel</a></td>
                                                                <td>20-1-2020</td>
                                                                <td>41.00</td>
                                                                <td>Cancel</td>
                                                            </tr>
                                                            </tbody>
                                                        </table>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="ps-tab" id="tab-6">
                                    <h4>Mes commandes en ligne</h4>
                                    <div class="ps-block--categories-box" style="padding: 20px">
                                        <div class="ps-section__content">
                                            <div class="table-responsive">
                                                <table class="table ps-table--shopping-cart ps-table--responsive">
                                                    <thead>
                                                    <tr>
                                                        <th>Nom du produit</th>
                                                        <th>PRIX</th>
                                                        <th>QUANTITÉ</th>
                                                        <th>TOTAL</th>
                                                        <th>ACTION</th>
                                                    </tr>
                                                    </thead>
                                                    <tbody>
                                                    <tr>
                                                        <td data-label="Product">
                                                            <div class="ps-product--cart">
                                                                <div class="ps-product__thumbnail"><a href="product-default.html"><img src="img/products/shop/1.jpg" alt="" /></a></div>
                                                                <div class="ps-product__content"><a href="product-default.html">Apple iPhone Retina 6s Plus 64GB</a>
                                                                    <p>Sold By:<strong> YOUNG SHOP</strong></p>
                                                                </div>
                                                            </div>
                                                        </td>
                                                        <td class="price" data-label="Price">$1310.00</td>
                                                        <td data-label="Quantity">
                                                            <div class="form-group--number">
                                                                <button class="up">+</button>
                                                                <button class="down">-</button>
                                                                <input class="form-control" type="text" placeholder="1" value="1">
                                                            </div>
                                                        </td>
                                                        <td data-label="Total">$1310.00</td>
                                                        <td data-label="Actions"><a href="#"><i class="icon-cross"></i></a></td>
                                                    </tr>
                                                    <tr>
                                                        <td data-label="Product">
                                                            <div class="ps-product--cart">
                                                                <div class="ps-product__thumbnail"><a href="product-default.html"><img src="img/products/shop/1.jpg" alt="" /></a></div>
                                                                <div class="ps-product__content"><a href="product-default.html">Apple iPhone Retina 6s Plus 64GB</a>
                                                                    <p>Sold By:<strong> YOUNG SHOP</strong></p>
                                                                </div>
                                                            </div>
                                                        </td>
                                                        <td class="price" data-label="Price">$1150.00</td>
                                                        <td data-label="Quantity">
                                                            <div class="form-group--number">
                                                                <button class="up">+</button>
                                                                <button class="down">-</button>
                                                                <input class="form-control" type="text" placeholder="1" value="1">
                                                            </div>
                                                        </td>
                                                        <td data-label="Total">$1150.00</td>
                                                        <td data-label="Actions"><a href="#"><i class="icon-cross"></i></a></td>
                                                    </tr>
                                                    <tr>
                                                        <td data-label="Product">
                                                            <div class="ps-product--cart">
                                                                <div class="ps-product__thumbnail"><a href="product-default.html"><img src="img/products/shop/2.jpg" alt="" /></a></div>
                                                                <div class="ps-product__content"><a href="product-default.html">Marshall Kilburn Portable Wireless Speaker</a>
                                                                    <p>Sold By:<strong> YOUNG SHOP</strong></p>
                                                                </div>
                                                            </div>
                                                        </td>
                                                        <td class="price" data-label="Price">$42.99 - $60.00</td>
                                                        <td data-label="Quantity">
                                                            <div class="form-group--number">
                                                                <button class="up">+</button>
                                                                <button class="down">-</button>
                                                                <input class="form-control" type="text" placeholder="1" value="1">
                                                            </div>
                                                        </td>
                                                        <td data-label="Total">$42.99 - $60.00</td>
                                                        <td data-label="Actions"><a href="#"><i class="icon-cross"></i></a></td>
                                                    </tr>
                                                    </tbody>
                                                </table>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="ps-section__content myOrder hidden">
                    <div class="row">
                        <div class="col-md-12">
                            <h4><a href="#" class="return_to_dashboard"><i class="bi bi-arrow-left-short"></i>Retour au tableau de bord </a></h4>
                            <div class="ps-block--categories-box">
                                <div class="ps-section__right">
                                    <div class="ps-section--account-setting">
                                        <div class="ps-section__header">
                                            <h3>Mes commandes</h3>
                                        </div>
                                        <div class="ps-section__content">
                                            <div class="table-responsive">
                                                <table class="table ps-table--shopping-cart ps-table--responsive">
                                                    <thead>
                                                    <tr>
                                                        <th>Nom du produit</th>
                                                        <th>PRIX</th>
                                                        <th>QUANTITÉ</th>
                                                        <th>TOTAL</th>
                                                        <th>ACTION</th>
                                                    </tr>
                                                    </thead>
                                                    <tbody>
                                                    <tr>
                                                        <td data-label="Product">
                                                            <div class="ps-product--cart">
                                                                <div class="ps-product__thumbnail"><a href="product-default.html"><img src="img/products/shop/1.jpg" alt="" /></a></div>
                                                                <div class="ps-product__content"><a href="product-default.html">Apple iPhone Retina 6s Plus 64GB</a>
                                                                    <p>Sold By:<strong> YOUNG SHOP</strong></p>
                                                                </div>
                                                            </div>
                                                        </td>
                                                        <td class="price" data-label="Price">$1310.00</td>
                                                        <td data-label="Quantity">
                                                            <div class="form-group--number">
                                                                <button class="up">+</button>
                                                                <button class="down">-</button>
                                                                <input class="form-control" type="text" placeholder="1" value="1">
                                                            </div>
                                                        </td>
                                                        <td data-label="Total">$1310.00</td>
                                                        <td data-label="Actions"><a href="#"><i class="icon-cross"></i></a></td>
                                                    </tr>
                                                    <tr>
                                                        <td data-label="Product">
                                                            <div class="ps-product--cart">
                                                                <div class="ps-product__thumbnail"><a href="product-default.html"><img src="img/products/shop/1.jpg" alt="" /></a></div>
                                                                <div class="ps-product__content"><a href="product-default.html">Apple iPhone Retina 6s Plus 64GB</a>
                                                                    <p>Sold By:<strong> YOUNG SHOP</strong></p>
                                                                </div>
                                                            </div>
                                                        </td>
                                                        <td class="price" data-label="Price">$1150.00</td>
                                                        <td data-label="Quantity">
                                                            <div class="form-group--number">
                                                                <button class="up">+</button>
                                                                <button class="down">-</button>
                                                                <input class="form-control" type="text" placeholder="1" value="1">
                                                            </div>
                                                        </td>
                                                        <td data-label="Total">$1150.00</td>
                                                        <td data-label="Actions"><a href="#"><i class="icon-cross"></i></a></td>
                                                    </tr>
                                                    <tr>
                                                        <td data-label="Product">
                                                            <div class="ps-product--cart">
                                                                <div class="ps-product__thumbnail"><a href="product-default.html"><img src="img/products/shop/2.jpg" alt="" /></a></div>
                                                                <div class="ps-product__content"><a href="product-default.html">Marshall Kilburn Portable Wireless Speaker</a>
                                                                    <p>Sold By:<strong> YOUNG SHOP</strong></p>
                                                                </div>
                                                            </div>
                                                        </td>
                                                        <td class="price" data-label="Price">$42.99 - $60.00</td>
                                                        <td data-label="Quantity">
                                                            <div class="form-group--number">
                                                                <button class="up">+</button>
                                                                <button class="down">-</button>
                                                                <input class="form-control" type="text" placeholder="1" value="1">
                                                            </div>
                                                        </td>
                                                        <td data-label="Total">$42.99 - $60.00</td>
                                                        <td data-label="Actions"><a href="#"><i class="icon-cross"></i></a></td>
                                                    </tr>
                                                    </tbody>
                                                </table>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="ps-section__content myFrequentBuy hidden">
                    <div class="row">
                        <div class="col-md-12">
                            <h4><a href="#" class="return_to_dashboard"><i class="bi bi-arrow-left-short"></i>Retour au tableau de bord </a></h4>
                            <div class="ps-block--categories-box">
                                <div class="ps-section__right">
                                    <div class="ps-section--account-setting">
                                        <div class="ps-section__header">
                                            <h3>Mes achats frequents</h3>
                                        </div>
                                        <div class="ps-section__content">
                                            <div class="table-responsive">
                                                <table class="table ps-table--shopping-cart ps-table--responsive">
                                                    <thead>
                                                    <tr>
                                                        <th>Nom du produit</th>
                                                        <th>PRIX</th>
                                                        <th>QUANTITÉ</th>
                                                        <th>TOTAL</th>
                                                        <th>ACTION</th>
                                                    </tr>
                                                    </thead>
                                                    <tbody>
                                                    <tr>
                                                        <td data-label="Product">
                                                            <div class="ps-product--cart">
                                                                <div class="ps-product__thumbnail"><a href="product-default.html"><img src="img/products/shop/1.jpg" alt="" /></a></div>
                                                                <div class="ps-product__content"><a href="product-default.html">Apple iPhone Retina 6s Plus 64GB</a>
                                                                    <p>Sold By:<strong> YOUNG SHOP</strong></p>
                                                                </div>
                                                            </div>
                                                        </td>
                                                        <td class="price" data-label="Price">$1310.00</td>
                                                        <td data-label="Quantity">
                                                            <div class="form-group--number">
                                                                <button class="up">+</button>
                                                                <button class="down">-</button>
                                                                <input class="form-control" type="text" placeholder="1" value="1">
                                                            </div>
                                                        </td>
                                                        <td data-label="Total">$1310.00</td>
                                                        <td data-label="Actions"><a href="#"><i class="icon-cross"></i></a></td>
                                                    </tr>
                                                    <tr>
                                                        <td data-label="Product">
                                                            <div class="ps-product--cart">
                                                                <div class="ps-product__thumbnail"><a href="product-default.html"><img src="img/products/shop/1.jpg" alt="" /></a></div>
                                                                <div class="ps-product__content"><a href="product-default.html">Apple iPhone Retina 6s Plus 64GB</a>
                                                                    <p>Sold By:<strong> YOUNG SHOP</strong></p>
                                                                </div>
                                                            </div>
                                                        </td>
                                                        <td class="price" data-label="Price">$1150.00</td>
                                                        <td data-label="Quantity">
                                                            <div class="form-group--number">
                                                                <button class="up">+</button>
                                                                <button class="down">-</button>
                                                                <input class="form-control" type="text" placeholder="1" value="1">
                                                            </div>
                                                        </td>
                                                        <td data-label="Total">$1150.00</td>
                                                        <td data-label="Actions"><a href="#"><i class="icon-cross"></i></a></td>
                                                    </tr>
                                                    <tr>
                                                        <td data-label="Product">
                                                            <div class="ps-product--cart">
                                                                <div class="ps-product__thumbnail"><a href="product-default.html"><img src="img/products/shop/2.jpg" alt="" /></a></div>
                                                                <div class="ps-product__content"><a href="product-default.html">Marshall Kilburn Portable Wireless Speaker</a>
                                                                    <p>Sold By:<strong> YOUNG SHOP</strong></p>
                                                                </div>
                                                            </div>
                                                        </td>
                                                        <td class="price" data-label="Price">$42.99 - $60.00</td>
                                                        <td data-label="Quantity">
                                                            <div class="form-group--number">
                                                                <button class="up">+</button>
                                                                <button class="down">-</button>
                                                                <input class="form-control" type="text" placeholder="1" value="1">
                                                            </div>
                                                        </td>
                                                        <td data-label="Total">$42.99 - $60.00</td>
                                                        <td data-label="Actions"><a href="#"><i class="icon-cross"></i></a></td>
                                                    </tr>
                                                    </tbody>
                                                </table>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="ps-section__content myFavourite hidden">
                    <div class="row">
                        <div class="col-md-12">
                            <h4><a href="#" class="return_to_dashboard"><i class="bi bi-arrow-left-short"></i>Retour au tableau de bord </a></h4>
                            <div class="ps-block--categories-box">
                                <div class="ps-section__right">
                                    <div class="ps-section--account-setting">
                                        <div class="ps-section__header">
                                            <h3>Mes Favoris</h3>
                                        </div>
                                        <div class="ps-section__content">
                                            <div class="table-responsive">
                                                <table class="table ps-table--shopping-cart ps-table--responsive">
                                                    <thead>
                                                    <tr>
                                                        <th>Nom du produit</th>
                                                        <th>PRIX</th>
                                                        <th></th>
                                                    </tr>
                                                    </thead>
                                                    <tbody>
                                                    <tr>
                                                        <td data-label="Product">
                                                            <div class="ps-product--cart">
                                                                <div class="ps-product__thumbnail"><a href="product-default.html"><img src="img/products/shop/1.jpg" alt="" /></a></div>
                                                                <div class="ps-product__content"><a href="product-default.html">Apple iPhone Retina 6s Plus 64GB</a>
                                                                    <p>Sold By:<strong> YOUNG SHOP</strong></p>
                                                                </div>
                                                            </div>
                                                        </td>
                                                        <td class="price" data-label="Price">$1310.00</td>
                                                        <td data-label="Actions"><a href="#"><i class="icon-cross"></i></a></td>
                                                    </tr>
                                                    <tr>
                                                        <td data-label="Product">
                                                            <div class="ps-product--cart">
                                                                <div class="ps-product__thumbnail"><a href="product-default.html"><img src="img/products/shop/1.jpg" alt="" /></a></div>
                                                                <div class="ps-product__content"><a href="product-default.html">Apple iPhone Retina 6s Plus 64GB</a>
                                                                    <p>Sold By:<strong> YOUNG SHOP</strong></p>
                                                                </div>
                                                            </div>
                                                        </td>
                                                        <td class="price" data-label="Price">$1150.00</td>
                                                        <td data-label="Actions"><a href="#"><i class="icon-cross"></i></a></td>
                                                    </tr>
                                                    <tr>
                                                        <td data-label="Product">
                                                            <div class="ps-product--cart">
                                                                <div class="ps-product__thumbnail"><a href="product-default.html"><img src="img/products/shop/2.jpg" alt="" /></a></div>
                                                                <div class="ps-product__content"><a href="product-default.html">Marshall Kilburn Portable Wireless Speaker</a>
                                                                    <p>Sold By:<strong> YOUNG SHOP</strong></p>
                                                                </div>
                                                            </div>
                                                        </td>
                                                        <td class="price" data-label="Price">$42.99 - $60.00</td>
                                                        <td data-label="Actions"><a href="#"><i class="icon-cross"></i></a></td>
                                                    </tr>
                                                    </tbody>
                                                </table>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="modal fade" id="paymentModal" tabindex="-1" role="dialog" aria-labelledby="editModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered" role="document">
            <div class="modal-content" id="edit-content">
                <div class="modal-header">
                    <h5 class="modal-title">Ajouter un moyen de paiement</h5>
                    <button class="close" type="button" data-dismiss="modal" aria-label="Close" data-original-title="" title=""><span aria-hidden="true">×</span></button>
                </div>
                <div class="modal-body">
                    <div class="ps-block--shipping">
                        <h4>Méthodes de paiement</h4>
                        <div class="ps-block--payment-method">
                            <ul class="ps-tab-list">
                                <li class="active"><a class="ps-btn ps-btn--sm" href="#visa">Visa / Master Card</a></li>
                                <li><a class="ps-btn ps-btn--sm" href="#paypal">Paypal</a></li>
                            </ul>
                            <div class="ps-tabs">
                                <div class="ps-tab active" id="visa">
                                    <form class="ps-form--visa" action="{{route('add.card')}}" method="post">
                                        <input type="hidden" value="{{$user->id}}" name="user_id">
                                        <div class="form-group">
                                            <label>Type de carte</label>
                                            <div class="form-group">
                                                <select class="ps-select" name="type">
                                                    <option value="Visa">Visa</option>
                                                    <option value="Master">Master</option>
                                                    <option value="AmEx">American Express</option>
                                                </select>
                                            </div>
                                        </div>
                                        <div class="form-group">
                                            <label>Numéro de carte</label>
                                            <input class="form-control" type="text" placeholder="" name="card_number">
                                        </div>
                                        <div class="form-group">
                                            <label>Nom de la carte</label>
                                            <input class="form-control" type="text" placeholder=""  name="card_name">
                                        </div>
                                        <div class="row">
                                            <div class="col-8">
                                                <div class="form-group">
                                                    <label>Date de l'expiration</label>
                                                    <div class="row">
                                                        <div class="col-6">
                                                            <div class="form-group">
                                                                <input class="form-control" type="text" placeholder="Mois" name="card_month">
                                                            </div>
                                                        </div>
                                                        <div class="col-6">
                                                            <div class="form-group">
                                                                <input class="form-control" type="text" placeholder="Année" name="card_year">
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="col-4">
                                                <div class="form-group">
                                                    <label>CVV</label>
                                                    <input class="form-control" type="text" placeholder="" name="card_name">
                                                </div>
                                            </div>
                                        </div>
                                    </form>
                                </div>
                                <div class="ps-tab" id="paypal"><a class="ps-btn" href="#">Procédez avec Paypal</a></div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button class="btn ps-btn btn-secondary" type="button" data-dismiss="modal" title="">Annuler</button>
                    <button class="btn ps-btn" type="submit" title="">Enregistrer</button>
                </div>

            </div>
        </div>
    </div>
@endsection
@section('js')
<script src="{{asset('js/custom.js?v='.time())}}"></script>
<script>
    $('#my_order').click(function(){
        $('.myOrder').removeClass('hidden');
        $('.mainDashboard').addClass('hidden');
    });
    $('#my_frequent_buy').click(function(){
        $('.myFrequentBuy').removeClass('hidden');
        $('.mainDashboard').addClass('hidden');
    });
    $('#my_favourite').click(function(){
        $('.myFavourite').removeClass('hidden');
        $('.mainDashboard').addClass('hidden');
    });
    $('.return_to_dashboard').click(function(){
        $('.myFrequentBuy').addClass('hidden');
        $('.myOrder').addClass('hidden');
        $('.myFavourite').addClass('hidden');
        $('.mainDashboard').removeClass('hidden');
    });
</script>
@endsection