@extends('layouts.frontend.appVendor')
@section('title', "Mon compte")
@section('css')
    <style>
        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;
        }
        .header .header__actions {
            margin-top: 18px;
        }
        .header--standard .header__content {
            padding: 2px 0;
        }
        .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,h1,h2{
            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-block--categories-box {
            margin-bottom: 0;
            padding: 9px 25px 10px 25px;
            background-color: #ffffff;
        }
        .top {
            min-height: 193px;
        }
        .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;
        }
        .shop-categories .ps-product-list {
            margin-bottom: 20px;
            padding: 20px 20px 50px;
            background-color: #f5f5f5;
        }
        .ps-block--menu-categories {
            display: block;
        }
        .shop-categories .ps-catalog-top {
            padding: 1px 25px;
        }
        .ps-shopping .ps-shopping__header {
            margin-bottom: 0;
            margin-top: 10px;
            width: 100%;
            display: flex;
            flex-flow: row nowrap;
            justify-content: space-between;
            align-items: center;
            padding: 8px 15px;
        }
        .widget_shop {
            padding: 25px 20px;
            background-color: #ffffff;
        }
        .ps-tabs{
            background: #f5f5f5;
        }
        .ps-list--categories li.active {
            background: green;
            color: #fff;
            border-radius: 25px;
        }
        .ps-list--categories .active a:hover {
            color: #fff;
        }
        .ps-list--categories li {
            position: relative;
            padding: 6px 20px 6px 33px;
            margin-bottom: 10px;
        }
        .ps-list--categories li a {
            line-height: 35px;
        }
        .ps-block--categories-box p {
            font-size: 33px;
            font-weight: 300;
            color: #068d18;
        }
        .ps-block--categories-box span:not(.rounded-circle){
            font-size: 24px;
            font-weight: 200;
            color: #068d18;
        }
        @media (min-width: 1200px){
            .container {
                min-width: auto;
            }
            .ps-block--categories-box {
                margin-bottom: 20px;
            }
        }
        @media (min-width: 768px){
            .modifyDropImage.MDI2{
                left:450px !important;
            }
            .modifyDropImageBtn.MDI1{
                right:456px !important;
            }
            .modifyDropImage{
                position: absolute;
                overflow: hidden;
                border: 1px solid #068d18;
                width: 100px;
                color: #068d18;
                height: 100px;
                background: #fb0;
                border-radius: 50%;
                font-size: 27px;
                /*padding: 20px;*/
                left: 401px;
                z-index: 99;
                cursor: inherit;
                top: 401px;
            }
            .modifyDropImageBtn{
                position: absolute;
                background: #fff;
                color: #047112;
                line-height: 28px;
                text-align: center;
                width: 30px;
                font-size: 14px;
                border-radius: 50%;
                height: 30px;
                box-shadow: 1px 2px 3px #ccc;
                top: 449px;
                z-index: 999;
                right: 365px;
                cursor: pointer;
            }
        }
        @media (max-width: 767px){
            .ps-block--categories-box {
                margin-bottom: 20px!important;
            }
            .ps-product--detail .ps-tab-list {
                position: relative;
                display: flex;
                margin: 0px;
                padding-left: 8px;
                border-bottom: none;
            }
            .ps-product--detail > .ps-product__content .ps-tab-list li a {
                display: flex;
                padding: 2px 9px;
                font-size: 17px;
            }
            .modifyDropImage {
                position: absolute;
                overflow: hidden;
                border: 1px solid #068d18;
                width: 100px;
                color: #068d18;
                height: 100px;
                background: #fb0;
                border-radius: 50%;
                font-size: 27px;
                /*padding: 20px;*/
                left: 90px;
                z-index: 99;
                cursor: inherit;
                top: 498px;
            }
            .modifyDropImageBtn {
                position: absolute;
                background: #fff;
                color: #047112;
                line-height: 28px;
                text-align: center;
                width: 30px;
                font-size: 14px;
                border-radius: 50%;
                height: 30px;
                box-shadow: 1px 2px 3px #ccc;
                top: 544px;
                z-index: 999;
                right: 87px;
                cursor: pointer;
            }
        }
        .disconection{
            margin-left: 73px !important;
            margin-top: 50px!important;
            font-size: 18px;
        }
        label {
            font-size: 20px;
            color: #444;
        }
        textarea.form-control {
            outline: none;
            height: auto;
            font-size: 18px;
            padding: 0 20px;
            border: 1px solid;
            color:#444;
            background-color: #fff;
            border-radius: 6px;
            transition: all .4s ease;
            box-shadow: none;
        }
        .form-control:focus {
            outline: none;
            box-shadow: 0 0 0 0.2rem #068d1840;
            border-color: #047112;
        }

        .form-control {
            outline: none;
            height: 50px;
            font-size: 18px;
            padding: 0 20px;
            border: none;
            color:#068d18;
            background-color: #fff;
            border-radius: 6px;
            transition: all .4s ease;
            box-shadow: 0px 0px 2px #444;
        }
        .ps-product--detail .ps-tab-list li a {
            position: relative;
            display: block;
            color: #068d18;
            font-size: 20px;
            padding: 15px 84px;
            line-height: 20px;
            font-weight: 400;
        }
        .ps-product--detail > .ps-product__content {
            padding-top: 0px;
            margin-bottom: -80px;
        }
        .ps-product--detail .ps-tab-list li.active a {
            color: #068d18;
            /* border-color: #000; */
            font-weight: 700;
        }
        .ps-product--detail .ps-tab-list {
            position: relative;
            display: block;
            margin: 0 ;
            padding-left: 0;
            border-bottom: none;
        }
        .ps-product--detail .ps-tab-list li a:before {
            display: none;
        }
        .ps-product--detail .ps-tab-list li a:hover {
            color: #fb0;
        }
        .ps-table thead > tr > th {
            font-family: "Work Sans", sans-serif;
            font-size: 18px;
            font-weight: 700;
            text-align: center;
            color: #068d18;
            text-transform: capitalize;
            border: 2px solid #e5e5e5;
        }
        .ps-btn, button.ps-btn {
            color: #fff;
        }
        button.back {
            display: inline-block;
            padding: 15px 45px;
            font-size: 16px;
            font-weight: 600;
            line-height: 20px;
            color: #047112;
            border: 1px solid #047112;
            border-radius: 25px;
            background-color: #fff;
            transition: all .4s ease;
            cursor: pointer;
        }
        .progress {
            display: -ms-flexbox;
            display: flex;
            height: 1rem;
            overflow: hidden;
            font-size: .75rem;
            background-color: #ffffff;
            border-top-left-radius: 5px;
            border-top-right-radius: 5px;
            border-bottom-left-radius: 0;
            border-bottom-right-radius: 0;
            margin-left: -15px;
            margin-right: -15px;
        }
        .progress-bar {
            display: -ms-flexbox;
            display: flex;
            -ms-flex-direction: column;
            flex-direction: column;
            -ms-flex-pack: center;
            justify-content: center;
            overflow: hidden;
            color: #068d18;
            text-align: center;
            white-space: nowrap;
            background-color: #068d18;
            transition: width .6s ease;
        }
        .ps-btn:hover, .ps-btn:active, button.ps-btn:hover, button.ps-btn:active {
            background-color: #fb0;
            border: 1px solid  #fb0;
            color: #fff;
        }
        .drop-zone {
            height: 350px;
            margin-bottom: 80px;
            padding: 0px;
            display: flex;
            align-items: center;
            justify-items: center;
            text-align: center;
            font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
            font-weight: 500;
            font-size: 20px;
            background: #f5f5f5;
            cursor: pointer! important;
            color: lightgrey;
            border: 2px dashed #ccc;
            border-radius: 10px;
        }
        .drop-zone--over {
            background: #fff;
            border: 3px dotted #068d18;
            color: #068d18;
        }
        .drop-zone__input {
            display: none;
        }
        .drop-zone__thumb {
            width: 100%;
            height: 100%;
            border-radius: 10px;
            overflow: hidden;
            background-color: #ccc;
            background-size: cover;
            position: relative;
        }
        .drop-zone__thumb::after {
            content: attr(data-label);
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%;
            padding: 5px 0;
            color: white;
            background: rgba(0, 0, 0, 0.55);
            text-align: center;
            font-size: 14px;
        }
        .modifyDropImageBtn:hover{
            color: #fff;
            background: #068d18;

        }
        .checkbox-alias {
            background-color: white;
            display: inline-block;
            width: 150px;
            line-height: 6;
            height: 100px;
            border-radius: 5px;
            border: 2px solid;
            z-index: 1;
            position: relative;
            transition: all 250ms ease-out;
            cursor: pointer;
        }

        .invisible-checkboxes input[type=radio]{
            display: none;

        }

        .invisible-checkboxes input[type=radio]:checked + .checkbox-alias{
            color: #047112;
            background-color: #00800047;
        }
        p.footer_icons >a:hover {
            color: #ffbc03;
        }
        .file-input {
            display: none;
        }
        .imageWrapper {
            position: absolute;
            top: 0px;
        }
        .form-control.af_time {
            font-size: 14px;
            padding: 0 3px;
        }
        /* .weekDays-selector input {
             display: none!important;
         }*/
        .hidden {
            display: none!important;
        }

        .weekDays-selector input[type=checkbox] + label {
            display: inline-block;
            border-radius: 6px;
            background: #dddddd;
            height: 55px;
            width: 114px;
            margin-right: 3px;
            line-height: 55px;
            text-align: center;
            cursor: pointer;
        }

        .weekDays-selector input[type=checkbox]:checked + label {
            background: #047112;
            color: #ffffff;
        }
        .ps-table--whishlist tbody tr td {
            padding: 10px 20px;
            vertical-align: middle;
            text-align: left;
        }
        .ps-product__content p {
            font-size: 17px;
            font-weight: 300;
            color: #068d18;
        }
        .ps-product--cart .ps-product__content a {
            font-size: 22px;
            font-weight:bold;
            color: #444;
        }
        .ps-table--whishlist tbody tr td:last-child {
            text-align: left;
        }
        .ps-shopping .select2 .select2-selection__rendered {
            min-width:175px;
        }
        .select2-container--default .select2-selection--single .select2-selection__rendered {
            font-size: 15px;
            font-weight: 700;
            color: #047112;
            line-height: 24px;
        }
        .select2-container--default .select2-results__option--highlighted[aria-selected] {
            background-color: #047112;
            color: white;
        }
        .select2-results__option {
            font-size: 15px;
        }
        .select2-container--default .select2-selection--single {
            background-color: #fff;
            border: 1px solid #f5f5f5;
            border-radius: 0.6rem!important;
            box-shadow: 1px 1px 2px #ccc;
            height: 38px !important;
        }
        .header--standard .header__content-left {
            margin-left: -165px;
        }
        .ps-dropdown ul li a {
             display: block;
             font-size: 1.5rem;
             color: #444;
             padding: 3px 4px;
         }
        li a > .btn > i {
            font-size: 1.5rem;
        }
        li > .btn > i {
            font-size: 1.5rem;
        }
        .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;
        }
    </style>
@endsection
@section('content')
    <div class="ps-page--shop" id="shop-sidebar">
        <div class="row">
            @if($shop->state != "0")
                <div class="col-md-3">
                    <div class="ps-layout__left">
                        <aside class="widget widget_shop">
                            <ul class="ps-list--categories ps-tab-list">
                                <li class="active"><a href="#Dtab-1">Tableau de bord</a></li>
                                <li><a href="#Dtab-2">Mes produits</a></li>
                                <li><a href="#Dtab-3">Commandes</a></li>
                                <li><a href="#Dtab-4">Promotion</a></li>
                                <li><a href="#Dtab-5">Gestion personnel</a></li>
                                <li><a href="#Dtab-6">Mode de paiment</a></li>
                                <li><a href="#Dtab-7">Avis</a></li>
                                <li><a href="#Dtab-8">Reporting</a></li>
                                <li><a href="#Dtab-9">Mes paramètres</a></li>
                                <li><a href="#Dtab-10">Sécurité</a></li>
                            </ul>
                            <ul class="disconection">
                                <li style="color: #e53f3f;font-weight: bold"><a href="#" onclick=" event.preventDefault(); document.getElementById('logout-form').submit();">Déconnexion</a>
                                </li>
                            </ul>
                        </aside>
                    </div>
                </div>
            @endif
            <div class=" {{$shop->state == "0"?'col-md-12':'col-md-9'}} col-xs-12" style="background: #f5f5f5;">
                <div class="ps-layout__right">
                    <div class="ps-shopping ps-tab-root">
                        <div class="ps-tabs">
                            <div class="ps-shopping__header container">
                                <h3>Tableau de bord</h3>
                            </div>
                            <div class="row">
                                <div class="col-md-12">
                                    <x-alert/>
                                    @if($shop->state == "0")
                                        <div class="alert alert-info alert-block" style="text-align: center;">
                                            <button type="button" class="close" data-dismiss="alert">x</button>
                                            <strong>{{__('')}}</strong>
                                        </div>
                                    @endif
                                </div>
                            </div>
                            <div class="ps-tab {{$shop->state == "0"?'':'active'}} " id="Dtab-1">
                                <div class="shop-categories ps-page--shop" >
                                    <div class="container">

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

                                        <div class="ps-product-list ps-product-list--2">
                                            <div class="ps-section__content">
                                                <div class="row" style="margin-bottom: 40px">
                                                    <div class="col-md-6">
                                                        <div class="ps-block--categories-box top">
                                                            <p>Bienvenue</p>
                                                            <h3>{{auth()->user()->lastName}}!</h3>
                                                            <span>Vous avez réalise un bénéfice de <strong>905,435$</strong> ce mois</span>
                                                        </div>
                                                    </div>
                                                    <div class="col-md-3">
                                                        <div class="ps-block--categories-box top">
                                                            <h1 style="text-align: center">789</h1><br>
                                                            <span>Visiteurs ce mois</span>
                                                        </div>
                                                    </div>
                                                    <div class="col-md-3">
                                                        <div class="ps-block--categories-box top">
                                                            <h1 style="text-align: center">465</h1><br>
                                                            <span>Commandes ce mois</span>
                                                        </div>
                                                    </div>
                                                </div>
                                                <h4>Ventes jounalières</h4>
                                                <div class="row" style="margin-bottom: 40px">
                                                    <div class="col-md-6">
                                                        <div class="ps-block--categories-box top">
                                                            <br><br><br><br><br>
                                                            <span>Vente du jour</span>
                                                            <div class="row">
                                                                <div class="col-md-5"><h3>789 $</h3></div>
                                                                <div class="col-md-7" style="text-align: right"><span><a href="#">Plus de détails <i class="bi bi-chevron-right"></i></a></span></div>
                                                            </div>

                                                        </div>
                                                    </div>
                                                    <div class="col-md-6">
                                                        <div class="ps-block--categories-box top">
                                                            <br><br><br><br><br>
                                                            <span>Produits livrés</span>
                                                            <div class="row">
                                                                <div class="col-md-5"><h3>789 $</h3></div>
                                                                <div class="col-md-7" style="text-align: right"><span><a href="#">Plus de détails <i class="bi bi-chevron-right"></i></a></span></div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                                <h4>Commendes jounalières</h4>
                                                <div class="row" style="margin-bottom: 20px">
                                                    <div class="col-md-12">
                                                        <div class="ps-block--categories-box">
                                                            <span>Commendes d'aujourd'hui</span>
                                                            <div class="row">
                                                                <div class="col-md-5"><h3>125</h3></div>
                                                                <div class="col-md-7" style="text-align: right"><span><a href="#">Plus de détails <i class="bi bi-chevron-right"></i></a></span></div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="row">
                                                    <div class="col-md-12">
                                                        <div class="ps-block--categories-box">
                                                            <span>Commandes livrés d'aujourd'hui</span>
                                                            <div class="row">
                                                                <div class="col-md-5"><h3>94</h3></div>
                                                                <div class="col-md-7" style="text-align: right"><span><a href="#">Plus de détails <i class="bi bi-chevron-right"></i></a></span></div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="row ps-tab " id="Dtab-2">
                                <div class="col-md-12 pr-30 mt-20">
                                    <h3 class="mb-20">
                                        Mes produits
                                        <span class="pull-right" >
                                            <button class="btn btn-success" style="font-size: 17px" type="button" data-toggle="modal" data-original-title="test" data-target="#newProductModal">
                                                Ajouter <i class="bi bi-plus"></i>
                                            </button>
                                            <button class="btn btn-info" style="font-size: 17px" type="button" data-toggle="modal" data-original-title="test" data-target="#askProduct">
                                                Produit manquant?
                                            </button>
                                        </span>
                                    </h3>
                                    <div class="ps-block--categories-box top mt-3">
                                        <div class="table-responsive">
                                            <table class="table ps-table ps-table--invoices">
                                                <thead>
                                                <tr>
                                                    <th>N°</th>
                                                    <th>Nom</th>
                                                    <th>Catégorie</th>
                                                    <th>Qté</th>
                                                    <th>Cout</th>
                                                    <th>Statut</th>
                                                    <th>Action</th>
                                                </tr>
                                                </thead>
                                                <tbody id="products-table">
                                                @forelse($shopProducts as $key => $shopProduct)
                                                        <tr>
                                                            <td>{{++$key}}</td>
                                                            <td><a href="#">{{$shopProduct->product->name}}</a></td>
                                                            <td>{{$shopProduct->product->category->name}}</td>
                                                            <td>{{$shopProduct->quantity}}</td>
                                                            <td>{{$shopProduct->price}} €</td>
                                                            <td class="text-center"><h5 class="badge badge-pill {{$shopProduct->is_published?'badge-success':'badge-danger'}}">{{$shopProduct->is_published?'Publié':'Non publié'}}</h5></td>
                                                            <td>
                                                                <div class="ps-dropdown"><i class="bi bi-three-dots" style="cursor: pointer;" style="cursor: pointer;" style="cursor: pointer;"></i>
                                                                    <ul class="ps-dropdown-menu">
                                                                        <li>
                                                                            <button class="btn btn-mc" id="edit-product-button"  title="Modifier" style="font-size: 1.2rem;padding: 5px 4px;">
                                                                                <i class="bi bi-pencil"></i> Modifier
                                                                            </button>
                                                                        </li>
                                                                        <li>
                                                                            <button title="Supprimer" class="btn btn-mc" style="color: #ff0000;font-size: 1.2rem;padding: 5px 4px;" onclick="deleteForm(`{{route('shop-product.destroy', $shopProduct->id)}}`, `Attention!`, `Voulez-vous vraiment supprimer le produit {{$shopProduct->product->name}}?`, `products-table`)">
                                                                                <i class="bi bi-trash"></i> Supprimer
                                                                            </button>
                                                                        </li>
                                                                    </ul>

                                                                </div>
                                                            </td>
                                                        </tr>
                                                @empty
                                                    {{_("Il n'a aucun produit pour l'instant")}}
                                                @endforelse
                                                </tbody>
                                            </table>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="ps-tab" id="Dtab-3">
                                <div class="shop-categories ps-page--shop">
                                    <div class="container">

                                        <div class="ps-catalog-top" >
                                            <form class="ps-form--account-setting" action="#" method="#">
                                                <div class="row" style="margin-top: 15px">
                                                    <div class="col-md-4"><h4 style="margin-top: 15px">Toutes les Commandes</h4></div>
                                                    <div class="col-md-4">
                                                        <div class="form-group">
                                                            <input class="form-control" type="text">
                                                        </div>
                                                    </div>
                                                    <div class="col-md-4">
                                                        <div class="form-group">
                                                            <input class="form-control" type="text"  value="20/11/2021-27/11/2021">
                                                        </div>
                                                    </div>
                                                </div>
                                            </form>
                                        </div>
                                        <div class="ps-product--detail ps-product--fullwidth">
                                            <div class="ps-product__content ps-tab-root">
                                                <ul class="ps-tab-list">
                                                    <li class="active"><a href="#tab-1">Tout</a></li>
                                                    <li><a href="#tab-2">Livré</a></li>
                                                    <li><a href="#tab-3">Non livré</a></li>
                                                    <li><a href="#tab-4">En cours</a></li>
                                                </ul>
                                            </div>
                                        </div>
                                        <div class="ps-product-list ps-product-list--2">
                                            <div class="ps-section__content">
                                                <div class="row" style="margin-bottom: 40px">
                                                    <div class="col-md-12">
                                                        <div class="ps-tabs">
                                                            <div class="ps-tab active" id="tab-1">
                                                                <div class="ps-block--categories-box top">
                                                                    <div class="table-responsive">
                                                                        <table class="table ps-table ps-table--invoices">
                                                                            <thead>
                                                                            <tr>
                                                                                <th>Nom client</th>
                                                                                <th>Qté</th>
                                                                                <th>Id</th>
                                                                                <th>Date</th>
                                                                                <th>Cout</th>
                                                                                <th>Statut</th>
                                                                                <th>Action</th>
                                                                            </tr>
                                                                            </thead>
                                                                            <tbody>
                                                                            <tr>
                                                                                <td><a href="#">Toncho Rene</a></td>
                                                                                <td>15</td>
                                                                                <td>A-7890</td>
                                                                                <td>20-1-2020</td>
                                                                                <td>42.99 $</td>
                                                                                <td><span style="color: #068d18;font-size:15px;">Livré</span></td>
                                                                                <td>
                                                                                    <div class="ps-dropdown"><i class="bi bi-three-dots" style="cursor: pointer;" style="cursor: pointer;" style="cursor: pointer;"></i>
                                                                                        <ul class="ps-dropdown-menu">
                                                                                            <li>
                                                                                                <a href="#">
                                                                                                    <button class="btn" title="Détails" style="font-size: 1.2rem;padding: 0;">
                                                                                                        <i class="bi bi-eye"></i> Voir les détails
                                                                                                    </button>
                                                                                                </a>
                                                                                            </li>
                                                                                            <li>
                                                                                                <a href="#">
                                                                                                    <button class="btn " title="Modifier" style="font-size: 1.2rem;padding: 0;">
                                                                                                        <i class="bi bi-pencil"></i> Modifier
                                                                                                    </button>
                                                                                                </a>
                                                                                            </li>
                                                                                            <li>
                                                                                                <a href="#">
                                                                                                    <button title="Supprimer" class="btn" style="color: #ff0000;font-size: 1.2rem;padding: 0;" onclick="return confirm('Voulez-vous réellement supprimer ce produit?')">
                                                                                                        <i class="bi bi-trash"></i> Supprimer
                                                                                                    </button>
                                                                                                </a>
                                                                                            </li>
                                                                                        </ul>

                                                                                    </div>
                                                                                </td>
                                                                            </tr>
                                                                            <tr>
                                                                                <td><a href="#">Toncho Rene</a></td>
                                                                                <td>15</td>
                                                                                <td>A-7890</td>
                                                                                <td>20-1-2020</td>
                                                                                <td>42.99 $</td>
                                                                                <td><span style="color: #17a2b8;font-size:15px;">En cour</span></td>
                                                                                <td>
                                                                                    <div class="ps-dropdown"><i class="bi bi-three-dots" style="cursor: pointer;" style="cursor: pointer;" style="cursor: pointer;"></i>
                                                                                        <ul class="ps-dropdown-menu">
                                                                                            <li>
                                                                                                <a href="#">
                                                                                                    <button class="btn" title="Détails" style="font-size: 1.2rem;padding: 0;">
                                                                                                        <i class="bi bi-eye"></i> Voir les détails
                                                                                                    </button>
                                                                                                </a>
                                                                                            </li>
                                                                                            <li>
                                                                                                <a href="#">
                                                                                                    <button class="btn " title="Modifier" style="font-size: 1.2rem;padding: 0;">
                                                                                                        <i class="bi bi-pencil"></i> Modifier
                                                                                                    </button>
                                                                                                </a>
                                                                                            </li>
                                                                                            <li>
                                                                                                <a href="#">
                                                                                                    <button title="Supprimer" class="btn" style="color: #ff0000;font-size: 1.2rem;padding: 0;" onclick="return confirm('Voulez-vous réellement supprimer ce produit?')">
                                                                                                        <i class="bi bi-trash"></i> Supprimer
                                                                                                    </button>
                                                                                                </a>
                                                                                            </li>
                                                                                        </ul>

                                                                                    </div>
                                                                                </td>
                                                                            </tr>
                                                                            <tr>
                                                                                <td><a href="#">Toncho Rene</a></td>
                                                                                <td>15</td>
                                                                                <td>A-7890</td>
                                                                                <td>20-1-2020</td>
                                                                                <td>42.99 $</td>
                                                                                <td><span style="color: #fb0;font-size:15px;">Non livré</span></td>
                                                                                <td>
                                                                                    <div class="ps-dropdown"><i class="bi bi-three-dots" style="cursor: pointer;" style="cursor: pointer;" style="cursor: pointer;"></i>
                                                                                        <ul class="ps-dropdown-menu">
                                                                                            <li>
                                                                                                <a href="#">
                                                                                                    <button class="btn" title="Détails" style="font-size: 1.2rem;padding: 0;">
                                                                                                        <i class="bi bi-eye"></i> Voir les détails
                                                                                                    </button>
                                                                                                </a>
                                                                                            </li>
                                                                                            <li>
                                                                                                <a href="#">
                                                                                                    <button class="btn " title="Modifier" style="font-size: 1.2rem;padding: 0;">
                                                                                                        <i class="bi bi-pencil"></i> Modifier
                                                                                                    </button>
                                                                                                </a>
                                                                                            </li>
                                                                                            <li>
                                                                                                <a href="#">
                                                                                                    <button title="Supprimer" class="btn" style="color: #ff0000;font-size: 1.2rem;padding: 0;" onclick="return confirm('Voulez-vous réellement supprimer ce produit?')">
                                                                                                        <i class="bi bi-trash"></i> Supprimer
                                                                                                    </button>
                                                                                                </a>
                                                                                            </li>
                                                                                        </ul>

                                                                                    </div>
                                                                                </td>
                                                                            </tr>
                                                                            <tr>
                                                                                <td><a href="#">Toncho Rene</a></td>
                                                                                <td>15</td>
                                                                                <td>A-7890</td>
                                                                                <td>20-1-2020</td>
                                                                                <td>42.99 $</td>
                                                                                <td><span style="color: #068d18;font-size:15px;">Livré</span></td>
                                                                                <td>
                                                                                    <div class="ps-dropdown"><i class="bi bi-three-dots" style="cursor: pointer;" style="cursor: pointer;" style="cursor: pointer;"></i>
                                                                                        <ul class="ps-dropdown-menu">
                                                                                            <li>
                                                                                                <a href="#">
                                                                                                    <button class="btn" title="Détails" style="font-size: 1.2rem;padding: 0;">
                                                                                                        <i class="bi bi-eye"></i> Voir les détails
                                                                                                    </button>
                                                                                                </a>
                                                                                            </li>
                                                                                            <li>
                                                                                                <a href="#">
                                                                                                    <button class="btn " title="Modifier" style="font-size: 1.2rem;padding: 0;">
                                                                                                        <i class="bi bi-pencil"></i> Modifier
                                                                                                    </button>
                                                                                                </a>
                                                                                            </li>
                                                                                            <li>
                                                                                                <a href="#">
                                                                                                    <button title="Supprimer" class="btn" style="color: #ff0000;font-size: 1.2rem;padding: 0;" onclick="return confirm('Voulez-vous réellement supprimer ce produit?')">
                                                                                                        <i class="bi bi-trash"></i> Supprimer
                                                                                                    </button>
                                                                                                </a>
                                                                                            </li>
                                                                                        </ul>

                                                                                    </div>
                                                                                </td>
                                                                            </tr>
                                                                            <tr>
                                                                                <td><a href="#">Toncho Rene</a></td>
                                                                                <td>15</td>
                                                                                <td>A-7890</td>
                                                                                <td>20-1-2020</td>
                                                                                <td>42.99 $</td>
                                                                                <td><span style="color: #fb0;font-size:15px;">Non livré</span></td>
                                                                                <td>
                                                                                    <div class="ps-dropdown"><i class="bi bi-three-dots" style="cursor: pointer;" style="cursor: pointer;" style="cursor: pointer;"></i>
                                                                                        <ul class="ps-dropdown-menu">
                                                                                            <li>
                                                                                                <a href="#">
                                                                                                    <button class="btn" title="Détails" style="font-size: 1.2rem;padding: 0;">
                                                                                                        <i class="bi bi-eye"></i> Voir les détails
                                                                                                    </button>
                                                                                                </a>
                                                                                            </li>
                                                                                            <li>
                                                                                                <a href="#">
                                                                                                    <button class="btn " title="Modifier" style="font-size: 1.2rem;padding: 0;">
                                                                                                        <i class="bi bi-pencil"></i> Modifier
                                                                                                    </button>
                                                                                                </a>
                                                                                            </li>
                                                                                            <li>
                                                                                                <a href="#">
                                                                                                    <button title="Supprimer" class="btn" style="color: #ff0000;font-size: 1.2rem;padding: 0;" onclick="return confirm('Voulez-vous réellement supprimer ce produit?')">
                                                                                                        <i class="bi bi-trash"></i> Supprimer
                                                                                                    </button>
                                                                                                </a>
                                                                                            </li>
                                                                                        </ul>

                                                                                    </div>
                                                                                </td>                                                                            </tr>
                                                                            <tr>
                                                                                <td><a href="#">Toncho Rene</a></td>
                                                                                <td>15</td>
                                                                                <td>A-7890</td>
                                                                                <td>20-1-2020</td>
                                                                                <td>42.99 $</td>
                                                                                <td><span style="color: #17a2b8;font-size:15px;">En cour</span></td>
                                                                                <td>
                                                                                    <div class="ps-dropdown"><i class="bi bi-three-dots" style="cursor: pointer;" style="cursor: pointer;" style="cursor: pointer;"></i>
                                                                                        <ul class="ps-dropdown-menu">
                                                                                            <li>
                                                                                                <a href="#">
                                                                                                    <button class="btn" title="Détails" style="font-size: 1.2rem;padding: 0;">
                                                                                                        <i class="bi bi-eye"></i> Voir les détails
                                                                                                    </button>
                                                                                                </a>
                                                                                            </li>
                                                                                            <li>
                                                                                                <a href="#">
                                                                                                    <button class="btn " title="Modifier" style="font-size: 1.2rem;padding: 0;">
                                                                                                        <i class="bi bi-pencil"></i> Modifier
                                                                                                    </button>
                                                                                                </a>
                                                                                            </li>
                                                                                            <li>
                                                                                                <a href="#">
                                                                                                    <button title="Supprimer" class="btn" style="color: #ff0000;font-size: 1.2rem;padding: 0;" onclick="return confirm('Voulez-vous réellement supprimer ce produit?')">
                                                                                                        <i class="bi bi-trash"></i> Supprimer
                                                                                                    </button>
                                                                                                </a>
                                                                                            </li>
                                                                                        </ul>

                                                                                    </div>
                                                                                </td>                                                                            </tr>
                                                                            <tr>
                                                                                <td><a href="#">Toncho Rene</a></td>
                                                                                <td>15</td>
                                                                                <td>A-7890</td>
                                                                                <td>20-1-2020</td>
                                                                                <td>42.99 $</td>
                                                                                <td><span style="color: #17a2b8;font-size:15px;">En cour</span></td>
                                                                                <td>
                                                                                    <div class="ps-dropdown"><i class="bi bi-three-dots" style="cursor: pointer;" style="cursor: pointer;" style="cursor: pointer;"></i>
                                                                                        <ul class="ps-dropdown-menu">
                                                                                            <li>
                                                                                                <a href="#">
                                                                                                    <button class="btn" title="Détails" style="font-size: 1.2rem;padding: 0;">
                                                                                                        <i class="bi bi-eye"></i> Voir les détails
                                                                                                    </button>
                                                                                                </a>
                                                                                            </li>
                                                                                            <li>
                                                                                                <a href="#">
                                                                                                    <button class="btn " title="Modifier" style="font-size: 1.2rem;padding: 0;">
                                                                                                        <i class="bi bi-pencil"></i> Modifier
                                                                                                    </button>
                                                                                                </a>
                                                                                            </li>
                                                                                            <li>
                                                                                                <a href="#">
                                                                                                    <button title="Supprimer" class="btn" style="color: #ff0000;font-size: 1.2rem;padding: 0;" onclick="return confirm('Voulez-vous réellement supprimer ce produit?')">
                                                                                                        <i class="bi bi-trash"></i> Supprimer
                                                                                                    </button>
                                                                                                </a>
                                                                                            </li>
                                                                                        </ul>

                                                                                    </div>
                                                                                </td>                                                                            </tr>
                                                                            <tr>
                                                                                <td><a href="#">Toncho Rene</a></td>
                                                                                <td>15</td>
                                                                                <td>A-7890</td>
                                                                                <td>20-1-2020</td>
                                                                                <td>42.99 $</td>
                                                                                <td><span style="color: #068d18;font-size:15px;">Livré</span></td>
                                                                                <td>
                                                                                    <div class="ps-dropdown"><i class="bi bi-three-dots" style="cursor: pointer;" style="cursor: pointer;" style="cursor: pointer;"></i>
                                                                                        <ul class="ps-dropdown-menu">
                                                                                            <li>
                                                                                                <a href="#">
                                                                                                    <button class="btn" title="Détails" style="font-size: 1.2rem;padding: 0;">
                                                                                                        <i class="bi bi-eye"></i> Voir les détails
                                                                                                    </button>
                                                                                                </a>
                                                                                            </li>
                                                                                            <li>
                                                                                                <a href="#">
                                                                                                    <button class="btn " title="Modifier" style="font-size: 1.2rem;padding: 0;">
                                                                                                        <i class="bi bi-pencil"></i> Modifier
                                                                                                    </button>
                                                                                                </a>
                                                                                            </li>
                                                                                            <li>
                                                                                                <a href="#">
                                                                                                    <button title="Supprimer" class="btn" style="color: #ff0000;font-size: 1.2rem;padding: 0;" onclick="return confirm('Voulez-vous réellement supprimer ce produit?')">
                                                                                                        <i class="bi bi-trash"></i> Supprimer
                                                                                                    </button>
                                                                                                </a>
                                                                                            </li>
                                                                                        </ul>

                                                                                    </div>
                                                                                </td>                                                                            </tr>
                                                                            <tr>
                                                                                <td><a href="#">Toncho Rene</a></td>
                                                                                <td>15</td>
                                                                                <td>A-7890</td>
                                                                                <td>20-1-2020</td>
                                                                                <td>42.99 $</td>
                                                                                <td><span style="color: #fb0;font-size:15px;">Non livré</span></td>
                                                                                <td>
                                                                                    <div class="ps-dropdown"><i class="bi bi-three-dots" style="cursor: pointer;" style="cursor: pointer;" style="cursor: pointer;"></i>
                                                                                        <ul class="ps-dropdown-menu">
                                                                                            <li>
                                                                                                <a href="#">
                                                                                                    <button class="btn" title="Détails" style="font-size: 1.2rem;padding: 0;">
                                                                                                        <i class="bi bi-eye"></i> Voir les détails
                                                                                                    </button>
                                                                                                </a>
                                                                                            </li>
                                                                                            <li>
                                                                                                <a href="#">
                                                                                                    <button class="btn " title="Modifier" style="font-size: 1.2rem;padding: 0;">
                                                                                                        <i class="bi bi-pencil"></i> Modifier
                                                                                                    </button>
                                                                                                </a>
                                                                                            </li>
                                                                                            <li>
                                                                                                <a href="#">
                                                                                                    <button title="Supprimer" class="btn" style="color: #ff0000;font-size: 1.2rem;padding: 0;" onclick="return confirm('Voulez-vous réellement supprimer ce produit?')">
                                                                                                        <i class="bi bi-trash"></i> Supprimer
                                                                                                    </button>
                                                                                                </a>
                                                                                            </li>
                                                                                        </ul>

                                                                                    </div>
                                                                                </td>                                                                            </tr>
                                                                            </tbody>
                                                                        </table>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                            <div class="ps-tab" id="tab-2">
                                                                <div class="ps-block--categories-box top">
                                                                    <div class="table-responsive">
                                                                        <table class="table ps-table ps-table--invoices">
                                                                            <thead>
                                                                            <tr>
                                                                                <th>Nom client</th>
                                                                                <th>Qté</th>
                                                                                <th>Id</th>
                                                                                <th>Date</th>
                                                                                <th>Cout</th>
                                                                                <th>Statut</th>
                                                                                <th>Action</th>
                                                                            </tr>
                                                                            </thead>
                                                                            <tbody>
                                                                            <tr>
                                                                                <td><a href="#">Toncho Rene</a></td>
                                                                                <td>15</td>
                                                                                <td>A-7890</td>
                                                                                <td>20-1-2020</td>
                                                                                <td>42.99 $</td>
                                                                                <td><span style="color: #068d18;font-size:15px;">Livré</span></td>
                                                                                <td>
                                                                                    <div class="ps-dropdown"><i class="bi bi-three-dots" style="cursor: pointer;" style="cursor: pointer;" style="cursor: pointer;"></i>
                                                                                        <ul class="ps-dropdown-menu">
                                                                                            <li>
                                                                                                <a href="#">
                                                                                                    <button class="btn" title="Détails" style="font-size: 1.2rem;padding: 0;">
                                                                                                        <i class="bi bi-eye"></i> Voir les détails
                                                                                                    </button>
                                                                                                </a>
                                                                                            </li>
                                                                                            <li>
                                                                                                <a href="#">
                                                                                                    <button class="btn " title="Modifier" style="font-size: 1.2rem;padding: 0;">
                                                                                                        <i class="bi bi-pencil"></i> Modifier
                                                                                                    </button>
                                                                                                </a>
                                                                                            </li>
                                                                                            <li>
                                                                                                <a href="#">
                                                                                                    <button title="Supprimer" class="btn" style="color: #ff0000;font-size: 1.2rem;padding: 0;" onclick="return confirm('Voulez-vous réellement supprimer ce produit?')">
                                                                                                        <i class="bi bi-trash"></i> Supprimer
                                                                                                    </button>
                                                                                                </a>
                                                                                            </li>
                                                                                        </ul>

                                                                                    </div>
                                                                                </td>                                                                            </tr>
                                                                            <tr>
                                                                                <td><a href="#">Toncho Rene</a></td>
                                                                                <td>15</td>
                                                                                <td>A-7890</td>
                                                                                <td>20-1-2020</td>
                                                                                <td>42.99 $</td>
                                                                                <td><span style="color: #068d18;font-size:15px;">Livré</span></td>
                                                                                <td>
                                                                                    <div class="ps-dropdown"><i class="bi bi-three-dots" style="cursor: pointer;" style="cursor: pointer;" style="cursor: pointer;"></i>
                                                                                        <ul class="ps-dropdown-menu">
                                                                                            <li>
                                                                                                <a href="#">
                                                                                                    <button class="btn" title="Détails" style="font-size: 1.2rem;padding: 0;">
                                                                                                        <i class="bi bi-eye"></i> Voir les détails
                                                                                                    </button>
                                                                                                </a>
                                                                                            </li>
                                                                                            <li>
                                                                                                <a href="#">
                                                                                                    <button class="btn " title="Modifier" style="font-size: 1.2rem;padding: 0;">
                                                                                                        <i class="bi bi-pencil"></i> Modifier
                                                                                                    </button>
                                                                                                </a>
                                                                                            </li>
                                                                                            <li>
                                                                                                <a href="#">
                                                                                                    <button title="Supprimer" class="btn" style="color: #ff0000;font-size: 1.2rem;padding: 0;" onclick="return confirm('Voulez-vous réellement supprimer ce produit?')">
                                                                                                        <i class="bi bi-trash"></i> Supprimer
                                                                                                    </button>
                                                                                                </a>
                                                                                            </li>
                                                                                        </ul>

                                                                                    </div>
                                                                                </td>                                                                            </tr>
                                                                            <tr>
                                                                                <td><a href="#">Toncho Rene</a></td>
                                                                                <td>15</td>
                                                                                <td>A-7890</td>
                                                                                <td>20-1-2020</td>
                                                                                <td>42.99 $</td>
                                                                                <td><span style="color: #068d18;font-size:15px;">Livré</span></td>
                                                                                <td>
                                                                                    <div class="ps-dropdown"><i class="bi bi-three-dots" style="cursor: pointer;" style="cursor: pointer;" style="cursor: pointer;"></i>
                                                                                        <ul class="ps-dropdown-menu">
                                                                                            <li>
                                                                                                <a href="#">
                                                                                                    <button class="btn" title="Détails" style="font-size: 1.2rem;padding: 0;">
                                                                                                        <i class="bi bi-eye"></i> Voir les détails
                                                                                                    </button>
                                                                                                </a>
                                                                                            </li>
                                                                                            <li>
                                                                                                <a href="#">
                                                                                                    <button class="btn " title="Modifier" style="font-size: 1.2rem;padding: 0;">
                                                                                                        <i class="bi bi-pencil"></i> Modifier
                                                                                                    </button>
                                                                                                </a>
                                                                                            </li>
                                                                                            <li>
                                                                                                <a href="#">
                                                                                                    <button title="Supprimer" class="btn" style="color: #ff0000;font-size: 1.2rem;padding: 0;" onclick="return confirm('Voulez-vous réellement supprimer ce produit?')">
                                                                                                        <i class="bi bi-trash"></i> Supprimer
                                                                                                    </button>
                                                                                                </a>
                                                                                            </li>
                                                                                        </ul>

                                                                                    </div>
                                                                                </td>                                                                            </tr>
                                                                            </tbody>
                                                                        </table>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                            <div class="ps-tab" id="tab-3">
                                                                <div class="ps-block--categories-box top">
                                                                    <div class="table-responsive">
                                                                        <table class="table ps-table ps-table--invoices">
                                                                            <thead>
                                                                            <tr>
                                                                                <th>Nom client</th>
                                                                                <th>Qté</th>
                                                                                <th>Id</th>
                                                                                <th>Date</th>
                                                                                <th>Cout</th>
                                                                                <th>Statut</th>
                                                                                <th>Action</th>
                                                                            </tr>
                                                                            </thead>
                                                                            <tbody>
                                                                            <tr>
                                                                                <td><a href="#">Toncho Rene</a></td>
                                                                                <td>15</td>
                                                                                <td>A-7890</td>
                                                                                <td>20-1-2020</td>
                                                                                <td>42.99 $</td>
                                                                                <td><span style="color: #fb0;font-size:15px;">Non livré</span></td>
                                                                                <td>
                                                                                    <div class="ps-dropdown"><i class="bi bi-three-dots" style="cursor: pointer;" style="cursor: pointer;" style="cursor: pointer;"></i>
                                                                                        <ul class="ps-dropdown-menu">
                                                                                            <li>
                                                                                                <a href="#">
                                                                                                    <button class="btn" title="Détails" style="font-size: 1.2rem;padding: 0;">
                                                                                                        <i class="bi bi-eye"></i> Voir les détails
                                                                                                    </button>
                                                                                                </a>
                                                                                            </li>
                                                                                            <li>
                                                                                                <a href="#">
                                                                                                    <button class="btn " title="Modifier" style="font-size: 1.2rem;padding: 0;">
                                                                                                        <i class="bi bi-pencil"></i> Modifier
                                                                                                    </button>
                                                                                                </a>
                                                                                            </li>
                                                                                            <li>
                                                                                                <a href="#">
                                                                                                    <button title="Supprimer" class="btn" style="color: #ff0000;font-size: 1.2rem;padding: 0;" onclick="return confirm('Voulez-vous réellement supprimer ce produit?')">
                                                                                                        <i class="bi bi-trash"></i> Supprimer
                                                                                                    </button>
                                                                                                </a>
                                                                                            </li>
                                                                                        </ul>

                                                                                    </div>
                                                                                </td>                                                                            </tr>
                                                                            <tr>
                                                                                <td><a href="#">Toncho Rene</a></td>
                                                                                <td>15</td>
                                                                                <td>A-7890</td>
                                                                                <td>20-1-2020</td>
                                                                                <td>42.99 $</td>
                                                                                <td><span style="color: #fb0;font-size:15px;">Non livré</span></td>
                                                                                <td>
                                                                                    <div class="ps-dropdown"><i class="bi bi-three-dots" style="cursor: pointer;" style="cursor: pointer;" style="cursor: pointer;"></i>
                                                                                        <ul class="ps-dropdown-menu">
                                                                                            <li>
                                                                                                <a href="#">
                                                                                                    <button class="btn" title="Détails" style="font-size: 1.2rem;padding: 0;">
                                                                                                        <i class="bi bi-eye"></i> Voir les détails
                                                                                                    </button>
                                                                                                </a>
                                                                                            </li>
                                                                                            <li>
                                                                                                <a href="#">
                                                                                                    <button class="btn " title="Modifier" style="font-size: 1.2rem;padding: 0;">
                                                                                                        <i class="bi bi-pencil"></i> Modifier
                                                                                                    </button>
                                                                                                </a>
                                                                                            </li>
                                                                                            <li>
                                                                                                <a href="#">
                                                                                                    <button title="Supprimer" class="btn" style="color: #ff0000;font-size: 1.2rem;padding: 0;" onclick="return confirm('Voulez-vous réellement supprimer ce produit?')">
                                                                                                        <i class="bi bi-trash"></i> Supprimer
                                                                                                    </button>
                                                                                                </a>
                                                                                            </li>
                                                                                        </ul>

                                                                                    </div>
                                                                                </td>                                                                            </tr>
                                                                            <tr>
                                                                                <td><a href="#">Toncho Rene</a></td>
                                                                                <td>15</td>
                                                                                <td>A-7890</td>
                                                                                <td>20-1-2020</td>
                                                                                <td>42.99 $</td>
                                                                                <td><span style="color: #fb0;font-size:15px;">Non livré</span></td>
                                                                                <td>
                                                                                    <div class="ps-dropdown"><i class="bi bi-three-dots" style="cursor: pointer;" style="cursor: pointer;" style="cursor: pointer;"></i>
                                                                                        <ul class="ps-dropdown-menu">
                                                                                            <li>
                                                                                                <a href="#">
                                                                                                    <button class="btn" title="Détails" style="font-size: 1.2rem;padding: 0;">
                                                                                                        <i class="bi bi-eye"></i> Voir les détails
                                                                                                    </button>
                                                                                                </a>
                                                                                            </li>
                                                                                            <li>
                                                                                                <a href="#">
                                                                                                    <button class="btn " title="Modifier" style="font-size: 1.2rem;padding: 0;">
                                                                                                        <i class="bi bi-pencil"></i> Modifier
                                                                                                    </button>
                                                                                                </a>
                                                                                            </li>
                                                                                            <li>
                                                                                                <a href="#">
                                                                                                    <button title="Supprimer" class="btn" style="color: #ff0000;font-size: 1.2rem;padding: 0;" onclick="return confirm('Voulez-vous réellement supprimer ce produit?')">
                                                                                                        <i class="bi bi-trash"></i> Supprimer
                                                                                                    </button>
                                                                                                </a>
                                                                                            </li>
                                                                                        </ul>

                                                                                    </div>
                                                                                </td>                                                                            </tr>
                                                                            </tbody>
                                                                        </table>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                            <div class="ps-tab" id="tab-4">
                                                                <div class="ps-block--categories-box top">
                                                                    <div class="table-responsive">
                                                                        <table class="table ps-table ps-table--invoices">
                                                                            <thead>
                                                                            <tr>
                                                                                <th>Nom client</th>
                                                                                <th>Qté</th>
                                                                                <th>Id</th>
                                                                                <th>Date</th>
                                                                                <th>Cout</th>
                                                                                <th>Statut</th>
                                                                                <th>Action</th>
                                                                            </tr>
                                                                            </thead>
                                                                            <tbody>
                                                                            <tr>
                                                                                <td><a href="#">Toncho Rene</a></td>
                                                                                <td>15</td>
                                                                                <td>A-7890</td>
                                                                                <td>20-1-2020</td>
                                                                                <td>42.99 $</td>
                                                                                <td><span style="color: #17a2b8;font-size:15px;">En cour</span></td>
                                                                                <td>
                                                                                    <div class="ps-dropdown"><i class="bi bi-three-dots" style="cursor: pointer;" style="cursor: pointer;" style="cursor: pointer;"></i>
                                                                                        <ul class="ps-dropdown-menu">
                                                                                            <li>
                                                                                                <a href="#">
                                                                                                    <button class="btn" title="Détails" style="font-size: 1.2rem;padding: 0;">
                                                                                                        <i class="bi bi-eye"></i> Voir les détails
                                                                                                    </button>
                                                                                                </a>
                                                                                            </li>
                                                                                            <li>
                                                                                                <a href="#">
                                                                                                    <button class="btn " title="Modifier" style="font-size: 1.2rem;padding: 0;">
                                                                                                        <i class="bi bi-pencil"></i> Modifier
                                                                                                    </button>
                                                                                                </a>
                                                                                            </li>
                                                                                            <li>
                                                                                                <a href="#">
                                                                                                    <button title="Supprimer" class="btn" style="color: #ff0000;font-size: 1.2rem;padding: 0;" onclick="return confirm('Voulez-vous réellement supprimer ce produit?')">
                                                                                                        <i class="bi bi-trash"></i> Supprimer
                                                                                                    </button>
                                                                                                </a>
                                                                                            </li>
                                                                                        </ul>

                                                                                    </div>
                                                                                </td>                                                                            </tr>
                                                                            <tr>
                                                                                <td><a href="#">Toncho Rene</a></td>
                                                                                <td>15</td>
                                                                                <td>A-7890</td>
                                                                                <td>20-1-2020</td>
                                                                                <td>42.99 $</td>
                                                                                <td><span style="color: #17a2b8;font-size:15px;">En cour</span></td>
                                                                                <td>
                                                                                    <div class="ps-dropdown"><i class="bi bi-three-dots" style="cursor: pointer;" style="cursor: pointer;" style="cursor: pointer;"></i>
                                                                                        <ul class="ps-dropdown-menu">
                                                                                            <li>
                                                                                                <a href="#">
                                                                                                    <button class="btn" title="Détails" style="font-size: 1.2rem;padding: 0;">
                                                                                                        <i class="bi bi-eye"></i> Voir les détails
                                                                                                    </button>
                                                                                                </a>
                                                                                            </li>
                                                                                            <li>
                                                                                                <a href="#">
                                                                                                    <button class="btn " title="Modifier" style="font-size: 1.2rem;padding: 0;">
                                                                                                        <i class="bi bi-pencil"></i> Modifier
                                                                                                    </button>
                                                                                                </a>
                                                                                            </li>
                                                                                            <li>
                                                                                                <a href="#">
                                                                                                    <button title="Supprimer" class="btn" style="color: #ff0000;font-size: 1.2rem;padding: 0;" onclick="return confirm('Voulez-vous réellement supprimer ce produit?')">
                                                                                                        <i class="bi bi-trash"></i> Supprimer
                                                                                                    </button>
                                                                                                </a>
                                                                                            </li>
                                                                                        </ul>

                                                                                    </div>
                                                                                </td>                                                                            </tr>
                                                                            <tr>
                                                                                <td><a href="#">Toncho Rene</a></td>
                                                                                <td>15</td>
                                                                                <td>A-7890</td>
                                                                                <td>20-1-2020</td>
                                                                                <td>42.99 $</td>
                                                                                <td><span style="color: #17a2b8;font-size:15px;">En cour</span></td>
                                                                                <td>
                                                                                    <div class="ps-dropdown"><i class="bi bi-three-dots" style="cursor: pointer;" style="cursor: pointer;" style="cursor: pointer;"></i>
                                                                                        <ul class="ps-dropdown-menu">
                                                                                            <li>
                                                                                                <a href="#">
                                                                                                    <button class="btn" title="Détails" style="font-size: 1.2rem;padding: 0;">
                                                                                                        <i class="bi bi-eye"></i> Voir les détails
                                                                                                    </button>
                                                                                                </a>
                                                                                            </li>
                                                                                            <li>
                                                                                                <a href="#">
                                                                                                    <button class="btn " title="Modifier" style="font-size: 1.2rem;padding: 0;">
                                                                                                        <i class="bi bi-pencil"></i> Modifier
                                                                                                    </button>
                                                                                                </a>
                                                                                            </li>
                                                                                            <li>
                                                                                                <a href="#">
                                                                                                    <button title="Supprimer" class="btn" style="color: #ff0000;font-size: 1.2rem;padding: 0;" onclick="return confirm('Voulez-vous réellement supprimer ce produit?')">
                                                                                                        <i class="bi bi-trash"></i> Supprimer
                                                                                                    </button>
                                                                                                </a>
                                                                                            </li>
                                                                                        </ul>

                                                                                    </div>
                                                                                </td>                                                                            </tr>
                                                                            </tbody>
                                                                        </table>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="row ps-tab " id="Dtab-4">
                                <div class="col-md-12 pr-30 mt-20">
                                    <h3 class="mb-20">
                                        Promotion
                                        <span class="pull-right" >
                                        <button class="btn btn-success" style="font-size: 17px" type="button" data-toggle="modal" data-original-title="test" data-target="#newPromoModal">
                                                Ajouter <i class="bi bi-plus"></i>
                                            </button>
                                    </span>
                                    </h3>
                                    <div class="ps-block--categories-box top mt-3">
                                        <div class="table-responsive">
                                            <table class="table ps-table ps-table--invoices">
                                                <thead>
                                                <tr>
                                                    <th>N°</th>
                                                    <th>Nom</th>
                                                    <th>Début</th>
                                                    <th>Fin</th>
                                                    <th>Taux de réduction</th>
                                                    <th>Catégorie</th>
                                                    <th>Aricles</th>
                                                    <th>Statut</th>
                                                    <th>Action</th>
                                                </tr>
                                                </thead>
                                                <tbody>
                                                {{--@forelse($products as $key => $product)--}}
                                                <tr>
                                                    <td>1 {{--{{++$key}}--}}</td>
                                                    <td><a href="#">Festi noël</a></td>
                                                    <td>15/12/2021 12:00</td>
                                                    <td>09/12/2022 12:00</td>
                                                    <td>13,5 %</td>
                                                    <td>Fruits</td>
                                                    <td>Orange</td>
                                                    <td><span class="badge rounded-pill bg-danger-light"></span></td>
                                                    <td>
                                                        <div class="ps-dropdown"><i class="bi bi-three-dots" style="cursor: pointer;" style="cursor: pointer;" style="cursor: pointer;"></i>
                                                            <ul class="ps-dropdown-menu">
                                                                <li>
                                                                    <button class="btn btn-mc" id="edit-product-button" data-id="1{{--{{$produit->id}}--}}" data-url="{{route('produit.edit', 1)}}" title="Modifier" style="font-size: 1.2rem;padding: 5px 4px;">
                                                                        <i class="bi bi-pencil"></i> Modifier
                                                                    </button>
                                                                </li>
                                                                <li>
                                                                    <button  href="javascript:$('#myformd').submit();" type="submit" title="Supprimer" class="btn btn-mc" style="color: #ff0000;font-size: 1.2rem;padding: 5px 4px;" onclick="return confirm('Voulez-vous réellement supprimer ce produit?')">
                                                                        <i class="bi bi-trash"></i> Supprimer
                                                                    </button>
                                                                </li>
                                                            </ul>

                                                        </div>
                                                    </td>
                                                </tr>
                                                {{--@empty
                                                    {{_("Il n'a aucun produit pour l'instant")}}
                                                @endforelse--}}
                                                </tbody>
                                            </table>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="ps-tab " id="Dtab-5">
                                <h3>Gestion personnel</h3>
                                <div class="ps-block--categories-box" style="padding: 20px">
                                    <form action="#" method="post">
                                        <div class="row">
                                            <div class="col-md-6">
                                                <label for="prenom">Prénom*</label>
                                                <input name="lastName" type="text" class="form-control required-input" value="{{$user->lastName}}" id="prenom" placeholder="Ex: Thomas" required>
                                                <span class="error-text" style="display: none">Renseigner ce champ</span> <br><br>
                                            </div>
                                            <div class="col-md-6">
                                                <label for="nom">Nom*</label>
                                                <input name="firstName" type="text" class="form-control required-input" value="{{$user->firstName}}" id="nom" placeholder="Ex: Melenchon" required>
                                                <span class="error-text" style="display: none">Renseigner ce champ</span><br><br>
                                            </div>
                                            <div class="col-md-6">
                                                <label for="naissance">Date de naissance*</label>
                                                <input name="birthday" type="date" class="form-control required-input" id="naissance" placeholder="Ex: 06-06-1983" value="{{date('Y-m-d',strtotime($user->birthday))}}" required>
                                                <span class="error-text" style="display: none">Renseigner ce champ</span><br><br>
                                            </div>
                                            <div class="col-md-6">
                                                <label for="email">Adresse électronique*</label>
                                                <input name="email" type="email" class="form-control required-input" value="{{$user->email}}" id="email" placeholder="Ex: exemple@domain.fr" required>
                                                <span class="error-text" style="display: none">Renseigner ce champ</span>
                                                <span class="email_not_unique" style="display: none;" >Cette adresse email existe déjà</span><br><br>
                                            </div>
                                            <div class="col-md-6">
                                                <label for="boutique">Nom de la boutique*</label>
                                                <input name="shopName" type="text" class="form-control required-input" value="{{$user->shop->name}}" id="boutique" placeholder="Ex: Afro Shop" required>
                                                <span class="error-text" style="display: none">Renseigner ce champ</span>
                                                <span class="shop_not_unique" style="display: none;" >Ce nom de boutique existe déjà</span><br><br>
                                            </div>
                                            <div class="col-md-6">
                                                <label for="siret">Numéro de SIREN*</label>
                                                <input name="siret" type="text" class="form-control required-input" value="{{$user->shop->siret}}" data-token="{{csrf_token()}}" data-url="{{route('check.unique')}}" id="siret" placeholder="Ex: 776205829" required>
                                                <span class="error-text" style="display: none">Renseigner ce champ</span>
                                                <span class="error-text" id="siret_message" style="display: none;color: red;" >Numéro SIREN déjà existant</span>
                                                <span class="siret_not_unique" style="display: none;" >Ce numéro existe déjà</span><br><br>
                                            </div>
                                            <div class="col-md-6">
                                                @include('extensions.select-city', ['label'=>'Code postal/Commune*', 'input_name'=>'address', 'required'=>true,'default'=>$user->shop->postal_code.','.$user->shop->city])
                                                <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 required-input" id="phone" value="{{$user->phone}}" data-inputmask="'mask': '09 99 99 99 99'" required>
                                                <span class="error-text" style="display: none">Renseigner ce champ</span>
                                                <span class="phone_not_unique" style="display: none;" >Ce numéro de téléphone existe déjà</span><br><br>
                                            </div>
                                            <div class="col-md-6">
                                                <label for="tel">RIB*</label>
                                                <input name="rib" type="text" value="{{$user->shop->rib}}" class="form-control required-input" required>
                                                <span class="error-text" style="display: none">Renseigner ce champ</span><br><br>
                                            </div>
                                            {{--<div class="col-md-6">
                                                <label for="tel">Pièce d'identité (recto et verso)*</label>
                                                <input name="identity[]" type="file" multiple class="form-control required-input" accept="image/*,.pdf, .doc, .docx" required>
                                                <span class="error-text" style="display: none">Renseigner ce champ</span><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="Dtab-6">
                                <h3>Mode de paiment</h3>
                                <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>
                                                    <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>
                                                    <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>
                                                    <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>
                                                <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="Dtab-7">
                                <h3>Avis</h3>

                            </div>
                            <div class="ps-tab " id="Dtab-8">
                                <h3>Reporting</h3>

                            </div>
                            <div class="ps-tab {{$shop->state == "0"?'active':''}} " id="Dtab-9">
                                <form action="{{ route('shop-setting') }}" method="post" id="settingsForm" enctype="multipart/form-data">
                                    @csrf
                                    <div class="shop-categories ps-page--shop">
                                        <div class="container">
                                            <div class="ps-catalog-top" ></div>
                                            <div class="ps-product-list ps-product-list--2">
                                                <div class="ps-section__content">
                                                    <div class="row" style="margin-bottom: 40px">
                                                        <div class="col-md-12">
                                                            <div class="ps-block--categories-box top">
                                                                {{--<div class="step1" style="text-align: center">
                                                                    <h1 style="text-align: center">Salut Matin !</h1>
                                                                    <span style="text-align: center;">Créer votre boutique en quelques étapes</span><br><br>
                                                                </div>--}}
                                                                @if($shop->state == 0)
                                                                    <div class="" style="text-align: center">
                                                                        <h1 style="text-align: center">Bravo {{\Auth::user()->firstName}} !</h1>
                                                                        <span style="text-align: center;">Vous avez pratiquement terminé la configuration de votre boutique</span><br><br>
                                                                    </div>
                                                                @endif
                                                                <div class="container">
                                                                    <div class="row">
                                                                        <div class="col-md-12" style="padding-right:0; padding-right: 0;margin-bottom: 10px;">
                                                                            <button type="button" style="font-size: 17px" class="btn btn-success pull-right" data-toggle="modal" data-original-title="test" data-target="#closeShop">Fermer la boutique</button>
                                                                        </div>
                                                                    </div>
                                                                    <div class="row">
                                                                        <div class="col-md-12" style="box-shadow: 1px 1px 3px #999;border-radius: 5px;margin-bottom: 50px;min-height: 500px;">
                                                                            <div class="progress">
                                                                                <div class="progress-bar active" role="progressbar" aria-valuemin="0" aria-valuemax="100"></div>
                                                                            </div>
                                                                            <div class="step well">
                                                                                <h2 style="text-align: center;margin:20px">Configuration de l'Afroshop</h2>
                                                                                <div class="drop-zone" style="background-image: url('images/shop/{{$shop->bannerUrl}}');background-size: contain;">
                                                                                    <div class="drop-zone__prompt" style="margin-left: auto;margin-right: auto;background: #0000008f;">
                                                                                        <i class="bi bi-cloud-upload" style="font-size: 100px"></i><br>
                                                                                        Cliquez ici ou glisser-déposer pour importer la bannière (1650px X 350px)
                                                                                    </div>
                                                                                    <input type="file" name="banner" id="banner" accept="image/*"   class="drop-zone__input" />
                                                                                </div>
                                                                                <div class="row">
                                                                                    <div class="modifyDropImage {{$shop->state == "0"?'MDI2':''}}">
                                                                                        <span style="position: absolute;padding: 20px; top: 10px;font-weight: 500;">Logo</span>
                                                                                        <div class="imageWrapper">
                                                                                            <img class="image" src="{{asset('images/shop/'.$shop->logoUrl)}}">
                                                                                        </div>
                                                                                        <input type="file" name="logo" accept="image/*" id="logo"  class="file-input">
                                                                                    </div>
                                                                                    <label class="modifyDropImageBtn {{$shop->state == "0"?'MDI1':''}}" for="logo">
                                                                                        <i class="bi bi-pencil file-upload" title="Importer votre logo"></i>
                                                                                    </label>
                                                                                </div>
                                                                                <div class="col-xl-12 col-lg-12 col-md-12 col-sm-12 col-12 ">
                                                                                    <div class="form-group">
                                                                                        <label for="">Description de la boutique</label>
                                                                                        <textarea class="form-control Sdescription" name="description" rows="5" placeholder="Renseignez en quelques mots la description de votre boutique" data-value="{{$shop->description?$shop->description:''}}">{{$shop->description?$shop->description:''}}</textarea>
                                                                                    </div>
                                                                                </div>
                                                                            </div>
                                                                            <div class="step well">
                                                                                <h3 style="text-align: center">Horaire d'ouverture de votre boutique.</h3>
                                                                                <div class="row">
                                                                                    <div class="col-md-12">
                                                                                        <div class="form-group openDays">
                                                                                            <input type="radio" id="fullweek" name="openDays" value="0" @if($shop->state==1 && count($difference)==0) checked @else {{$shop->state==0? 'checked':''}} @endif style="outline: none;margin-right: 20px">
                                                                                            <label for="fullweek" class="openDaysVal">Du lundi a Vendredi</label>
                                                                                        </div>
                                                                                    </div>
                                                                                    <div class="col-sm-8 col-md-8 col-xs-12 text-center" style="border-right: 2px solid #ccc">
                                                                                        <div class="row"  style="margin-bottom: 35px;">
                                                                                            <div class="col-md-4 col-xs-6"><label style="color:#000;">Matin</label></div>
                                                                                            <div class="col-md-4 col-xs-6">
                                                                                                <div class="form-inline">
                                                                                                    <div class="form-group">
                                                                                                        <label for="" style="margin-right: 10px">De</label>
                                                                                                        <input type="time" id="allWeekMS" name="morning_start" @if($shop->state==1 && count($difference)==0) value="{{date('H:i', strtotime($shop->workingHours[0]->morning_start))}}" @endif class="form-control af_time" style="height: 39px;width: 100px;margin-left: 18px;">
                                                                                                    </div>
                                                                                                </div>
                                                                                            </div>
                                                                                            <div class="col-md-4 col-xs-6">
                                                                                                <div class="form-inline">
                                                                                                    <div class="form-group">
                                                                                                        <label style="margin-right: 10px">à</label>
                                                                                                        <input type="time" id="allWeekME" name="morning_end" @if($shop->state==1 && count($difference)==0) value="{{date('H:i', strtotime($shop->workingHours[0]->morning_end))}}" @endif  class="form-control af_time" style="height: 39px;width: 100px;margin-left: 18px;">
                                                                                                    </div>

                                                                                                </div>
                                                                                            </div>
                                                                                        </div>
                                                                                        <div class="row" style="margin-bottom: 35px;">
                                                                                            <div class="col-md-4"><label style="color:#000;">Après-midi</label></div>
                                                                                            <div class="col-md-4">
                                                                                                <div class="form-inline">
                                                                                                    <div class="form-group">
                                                                                                        <label for="" style="margin-right: 10px">De</label>
                                                                                                        <input type="time" id="allWeekAS" name="afternoon_start" @if($shop->state==1 && count($difference)==0) value="{{date('H:i', strtotime($shop->workingHours[0]->afternoon_start))}}" @endif  class="form-control af_time" style="height: 39px;width: 100px;margin-left: 18px;">
                                                                                                    </div>
                                                                                                </div>
                                                                                            </div>
                                                                                            <div class="col-md-4">
                                                                                                <div class="form-inline">
                                                                                                    <div class="form-group">
                                                                                                        <label style="margin-right: 10px">à</label>
                                                                                                        <input type="time" id="allWeekAE" name="afternoon_end" @if($shop->state==1 && count($difference)==0) value="{{date('H:i', strtotime($shop->workingHours[0]->afternoon_end))}}" @endif  class="form-control af_time" style="height: 39px;width: 100px;margin-left: 18px;">
                                                                                                    </div>

                                                                                                </div>
                                                                                            </div>
                                                                                        </div>
                                                                                        <div class="row" style="margin-bottom: 35px">
                                                                                            <div class="col-md-4"><label style="color:#000;">Soirée</label></div>
                                                                                            <div class="col-md-4">
                                                                                                <div class="form-inline">
                                                                                                    <div class="form-group">
                                                                                                        <label for="" style="margin-right: 10px">De</label>
                                                                                                        <input type="time" id="allWeekES" name="evening_start" @if($shop->state==1 && count($difference)==0) value="{{date('H:i', strtotime($shop->workingHours[0]->evening_start))}}" @endif  class="form-control af_time" style="height: 39px;width: 100px;margin-left: 18px;">
                                                                                                    </div>
                                                                                                </div>
                                                                                            </div>
                                                                                            <div class="col-md-4">
                                                                                                <div class="form-inline">
                                                                                                    <div class="form-group">
                                                                                                        <label style="margin-right: 10px">à</label>
                                                                                                        <input type="time" id="allWeekEE" name="evening_end" @if($shop->state==1 && count($difference)==0) value="{{date('H:i', strtotime($shop->workingHours[0]->evening_end))}}" @endif  class="form-control af_time" style="height: 39px;width: 100px;margin-left: 18px;">
                                                                                                    </div>

                                                                                                </div>
                                                                                            </div>
                                                                                        </div>
                                                                                    </div>
                                                                                    <div class="col-sm-4 col-md-4 col-xs-12">
                                                                                        <div class="row" style="margin-bottom: 35px; padding: 20px">
                                                                                            <h5 style="text-align: left">A quoi correspond ces horaire</h5>
                                                                                            <div>Les horaires de jour correspondent aux horaires "matin" et "après-midi" que vous définissez. Votre boutique sera marquée "ouverte" pendant ces horaires et "fermée" en dehors de ces créneaux.</div>
                                                                                        </div>
                                                                                    </div>
                                                                                    <div class="col-md-12" style="margin-bottom: 50px">
                                                                                        <div class="form-group openDays">
                                                                                            <input type="radio" id="selectedDays" name="openDays" @if($shop->state==0 || count($difference)!=0) checked @endif value="1" style="outline: none;margin-right: 20px">
                                                                                            <label for="selectedDays">Choisir le jour de la semaine</label>
                                                                                        </div>
                                                                                        <div class="weekDays-selector  hidden">
                                                                                            <div class="table-responsive">
                                                                                                <table class="table ps-table--whishlist ps-table--responsive">
                                                                                                    <thead>
                                                                                                    <tr>
                                                                                                        <th>Jour de la semaine</th>
                                                                                                        <th>Matin</th>
                                                                                                        <th>Après-midi</th>
                                                                                                        <th>Soirée</th>
                                                                                                        <th>Action</th>
                                                                                                    </tr>
                                                                                                    </thead>
                                                                                                    <tbody id="weekDaysBody">
                                                                                                    @if($shop->state==0 || count($difference)!=0)
                                                                                                        @foreach($shop->workingHours as $workingHour)
                                                                                                            <tr>
                                                                                                                <td>
                                                                                                                    <div class="form-group">
                                                                                                                        <select class="ps-select" name="work_hours[day][]">
                                                                                                                            <option value="Lundi" {{$workingHour->day=='Lundi'?'selected':''}}>Lundi</option>
                                                                                                                            <option value="Mardi"  {{$workingHour->day=='Mardi'?'selected':''}}>Mardi</option>
                                                                                                                            <option value="Mercredi"  {{$workingHour->day=='Mercredi'?'selected':''}}>Mercredi</option>
                                                                                                                            <option value="Jeudi"  {{$workingHour->day=='Jeudi'?'selected':''}}>Jeudi</option>
                                                                                                                            <option value="Vendredi"  {{$workingHour->day=='Vendredi'?'selected':''}}>Vendredi</option>
                                                                                                                            <option value="Samedi"  {{$workingHour->day=='Samedi'?'selected':''}}>Samedi</option>
                                                                                                                            <option value="Dimanche"  {{$workingHour->day=='Dimanche'?'selected':''}}>Dimanche</option>
                                                                                                                        </select>
                                                                                                                    </div>
                                                                                                                </td>
                                                                                                                <td>
                                                                                                                    <div class="form-inline">
                                                                                                                        <div class="form-group">
                                                                                                                            <label for="" style="margin-right: 10px;font-size:18px">De</label>
                                                                                                                            <input  name="work_hours[morning_start][]" value="{{date('H:i', strtotime($workingHour->morning_start))}}" type="time" class="form-control af_time" style="height: 30px;">
                                                                                                                        </div>
                                                                                                                    </div>
                                                                                                                    <div class="form-inline">
                                                                                                                        <div class="form-group">
                                                                                                                            <label style="margin-right: 10px;font-size:18px">à</label>
                                                                                                                            <input name="work_hours[morning_end][]" value="{{date('H:i', strtotime($workingHour->morning_end))}}" type="time" class="form-control af_time" style="height: 30px;margin-left: 13px;">
                                                                                                                        </div>
                                                                                                                    </div>
                                                                                                                </td>
                                                                                                                <td>
                                                                                                                    <div class="form-inline">
                                                                                                                        <div class="form-group">
                                                                                                                            <label for="" style="margin-right: 10px;font-size:18px">De</label>
                                                                                                                            <input name="work_hours[afternoon_start][]" value="{{date('H:i', strtotime($workingHour->afternoon_start))}}" type="time" class="form-control af_time" style="height: 30px;">
                                                                                                                        </div>
                                                                                                                    </div>
                                                                                                                    <div class="form-inline">
                                                                                                                        <div class="form-group">
                                                                                                                            <label style="margin-right: 10px;font-size:18px">à</label>
                                                                                                                            <input name="work_hours[afternoon_end][]" value="{{date('H:i', strtotime($workingHour->afternoon_end))}}" type="time" class="form-control af_time" style="height: 30px;margin-left: 13px;">
                                                                                                                        </div>
                                                                                                                    </div>
                                                                                                                </td>
                                                                                                                <td>
                                                                                                                    <div class="form-inline">
                                                                                                                        <div class="form-group">
                                                                                                                            <label for="" style="margin-right: 10px;font-size:18px">De</label>
                                                                                                                            <input name="work_hours[evening_start][]" value="{{date('H:i', strtotime($workingHour->evening_start))}}" type="time" class="form-control af_time" style="height: 30px;">
                                                                                                                        </div>
                                                                                                                    </div>
                                                                                                                    <div class="form-inline">
                                                                                                                        <div class="form-group">
                                                                                                                            <label style="margin-right: 10px;font-size:18px">à</label>
                                                                                                                            <input name="work_hours[evening_end][]" value="{{date('H:i', strtotime($workingHour->evening_end))}}" type="time" class="form-control af_time" style="height: 30px;margin-left: 13px;">
                                                                                                                        </div>
                                                                                                                    </div>
                                                                                                                </td>
                                                                                                                <td data-label="action"><button title="Supprimer le jour" class="ps-btn deleteLine"><i class="bi bi-trash"></i></button></td>
                                                                                                            </tr>
                                                                                                        @endforeach
                                                                                                    @else
                                                                                                        <tr>
                                                                                                            <td>
                                                                                                                <div class="form-group">
                                                                                                                    <select class="ps-select" id="daysD"  name="work_hours[day][]">
                                                                                                                        <option value="Lundi">Lundi</option>
                                                                                                                        <option value="Mardi">Mardi</option>
                                                                                                                        <option value="Mercredi">Mercredi</option>
                                                                                                                        <option value="Jeudi">Jeudi</option>
                                                                                                                        <option value="Vendredi">Vendredi</option>
                                                                                                                        <option value="Samedi">Samedi</option>
                                                                                                                        <option value="Dimanche">Dimanche</option>
                                                                                                                    </select>
                                                                                                                </div>
                                                                                                            </td>
                                                                                                            <td>
                                                                                                                <div class="form-inline">
                                                                                                                    <div class="form-group">
                                                                                                                        <label for="" style="margin-right: 10px;font-size:18px">De</label>
                                                                                                                        <input name="work_hours[morning_start][]" id="daysMS" type="time" class="form-control af_time" style="height: 30px;">
                                                                                                                    </div>
                                                                                                                </div>
                                                                                                                <div class="form-inline">
                                                                                                                    <div class="form-group">
                                                                                                                        <label style="margin-right: 10px;font-size:18px">à</label>
                                                                                                                        <input name="work_hours[morning_end][]" id="daysME" type="time" class="form-control af_time" style="height: 30px;margin-left: 13px;">
                                                                                                                    </div>
                                                                                                                </div>
                                                                                                            </td>
                                                                                                            <td>
                                                                                                                <div class="form-inline">
                                                                                                                    <div class="form-group">
                                                                                                                        <label for="" style="margin-right: 10px;font-size:18px">De</label>
                                                                                                                        <input name="work_hours[afternoon_start][]" id="daysAS" type="time" class="form-control af_time" style="height: 30px;">
                                                                                                                    </div>
                                                                                                                </div>
                                                                                                                <div class="form-inline">
                                                                                                                    <div class="form-group">
                                                                                                                        <label style="margin-right: 10px;font-size:18px">à</label>
                                                                                                                        <input name="work_hours[afternoon_end][]" id="daysAE" type="time" class="form-control af_time" style="height: 30px;margin-left: 13px;">
                                                                                                                    </div>
                                                                                                                </div>
                                                                                                            </td>
                                                                                                            <td>
                                                                                                                <div class="form-inline">
                                                                                                                    <div class="form-group">
                                                                                                                        <label for="" style="margin-right: 10px;font-size:18px">De</label>
                                                                                                                        <input name="work_hours[evening_start][]" id="daysES" type="time" class="form-control af_time" style="height: 30px;">
                                                                                                                    </div>
                                                                                                                </div>
                                                                                                                <div class="form-inline">
                                                                                                                    <div class="form-group">
                                                                                                                        <label style="margin-right: 10px;font-size:18px">à</label>
                                                                                                                        <input name="work_hours[evening_end][]" id="daysEE" type="time" class="form-control af_time" style="height: 30px;margin-left: 13px;">
                                                                                                                    </div>
                                                                                                                </div>
                                                                                                            </td>
                                                                                                            <td data-label="action"><button title="Supprimer le jour" class="ps-btn deleteLine"><i class="bi bi-trash"></i></button></td>
                                                                                                        </tr>
                                                                                                    @endif
                                                                                                    </tbody>
                                                                                                </table>
                                                                                                <button class="ps-btn add_day" style="text-align: left"> Ajouter une journée <i class="bi bi-plus"></i></button>
                                                                                            </div>
                                                                                        </div>

                                                                                    </div>
                                                                                </div>
                                                                            </div>
                                                                            <div class="step well">
                                                                                <div class="row" style="padding: 20px">
                                                                                    <div class="col-md-12">
                                                                                        <h3 style="text-align: center">Configuration politique de livraison</h3>
                                                                                        <h4 style="text-align: center; font-weight: 500">Quel type de livraison souhaitez-vous effectuer ?</h4>
                                                                                    </div>
                                                                                </div>
                                                                                <div class="row" style="text-align: center">
                                                                                    <div class="invisible-checkboxes" style="margin-right: auto;margin-left: auto">
                                                                                        <input type="radio" name="deliveryMode" value="0" {{$shop->deliveryMode==0?'checked':''}} id="r1"/>
                                                                                        <label class="checkbox-alias r1" for="r1">Drive</label>
                                                                                        <input type="radio" name="deliveryMode" value="1" {{$shop->deliveryMode==1?'checked':''}}  id="r2"/>
                                                                                        <label class="checkbox-alias r2" for="r2">Livraison</label>
                                                                                    </div>
                                                                                </div><br><br>
                                                                                <div class="livraison hidden" style="text-align: left;padding-left:180px">
                                                                                    <div class="form-group delivery">
                                                                                        <input type="radio" id="free_delivery" name="delivery" value="0" style="outline: none;margin-right: 20px">
                                                                                        <label class="free_delivery" for="free_delivery">Livraison gratuit</label>
                                                                                    </div><br>
                                                                                    <div class="form-group delivery">
                                                                                        <input type="radio" id="free_delivery_from" name="delivery" value="1" style="outline: none;margin-right: 20px">
                                                                                        <label class="free_delivery_from" for="free_delivery_from">Livraison gratuite à partir de</label>
                                                                                        <div class="row hidden freeShippingFrom" style="margin-bottom: 35px;margin-top:25px">
                                                                                            <div class="col-md-4">
                                                                                                <div class="form-inline">
                                                                                                    <div class="form-group">
                                                                                                        <input type="text" name="free_delivery_amt_from" id="free_delivery_amt_from" class="form-control" style="height: 39px;width: 100px;margin-left: 18px;">
                                                                                                    </div>
                                                                                                </div>
                                                                                            </div>
                                                                                            <div class="col-md-4">
                                                                                                <div class="form-inline">
                                                                                                    <div class="form-group">
                                                                                                        <input type="text" name="free_delivery_amt_to"  id="free_delivery_amt_to" class="form-control" style="height: 39px;width: 100px;margin-left: 18px;">
                                                                                                    </div>

                                                                                                </div>
                                                                                            </div>
                                                                                        </div>
                                                                                    </div><br>
                                                                                    <div class="form-group delivery">
                                                                                        <input type="radio" id="paid_delivery" name="delivery" value="2" style="outline: none;margin-right: 20px">
                                                                                        <label class="paid_delivery" for="paid_delivery">Livraison payante </label>
                                                                                        <div class="row hidden paidShippingAmt" style="margin-bottom: 35px;margin-top:25px">
                                                                                            <div class="col-md-6">
                                                                                                <div class="form-inline">
                                                                                                    <div class="form-group">
                                                                                                        <input type="text" name="paid_delivery_amt" id="paid_delivery_amt" class="form-control" style="height: 39px;width: 100px;margin-left: 18px;">
                                                                                                    </div>
                                                                                                </div>
                                                                                            </div>
                                                                                        </div>
                                                                                    </div>
                                                                                </div>

                                                                            </div>
                                                                            <div class="step well" style="min-height: 400px;"><h3 style="text-align: center;margin:20px">Assurez-vous que toutes vos informations sont correctes</h3>
                                                                                <table class="table ps-table--whishlist ps-table--responsive">
                                                                                    <tbody>
                                                                                    <tr>
                                                                                        <td data-label="Product">
                                                                                            <div class="ps-product--cart">
                                                                                                <div class="ps-product__content"><a href="#">Description de la boutique</a>
                                                                                                    <p><strong class="shop_description"></strong></p>
                                                                                                </div>
                                                                                            </div>
                                                                                        </td>
                                                                                    </tr>
                                                                                    <tr>
                                                                                        <td data-label="Product">
                                                                                            <div class="ps-product--cart">
                                                                                                <div class="ps-product__content"><a href="#">Horaire d'ouverture de votre boutique.</a>
                                                                                                    <div class="row hidden" id="weeklyMain">
                                                                                                        <p><strong class="shop_open_time"></strong></p>
                                                                                                        <div id="weeklyBody" class="col-xs-12" style="margin-top:40px;">
                                                                                                        </div>
                                                                                                    </div>
                                                                                                    <div class="row hidden" id="dailyMain">
                                                                                                        <table class="table ps-table--whishlist ps-table--responsive">
                                                                                                            <thead>
                                                                                                            <tr>
                                                                                                                <th>Jour de la semaine</th>
                                                                                                                <th>Matin</th>
                                                                                                                <th>Après-midi</th>
                                                                                                                <th>Soirée</th>
                                                                                                            </tr>
                                                                                                            </thead>
                                                                                                            <tbody id="weekDaysBody2">

                                                                                                            </tbody>
                                                                                                        </table>
                                                                                                    </div>
                                                                                                </div>
                                                                                            </div>
                                                                                        </td>
                                                                                    </tr>
                                                                                    <tr>
                                                                                        <td data-label="Product">
                                                                                            <div class="ps-product--cart">
                                                                                                <div class="ps-product__content"><a href="#">Type de livraison</a>
                                                                                                    <p><strong class="shop_shipping_type"></strong></p>
                                                                                                    <p><strong class="completeFree"></strong></p>
                                                                                                    <div class="row hidden freeShippingFromTo">
                                                                                                        <p><strong class="free_delivery_fromAmt"></strong></p><br>
                                                                                                        <p style="margin-left:15px;"><span class="free_delivery_amt_from"></span> - <span class="free_delivery_amt_to"></span></p>
                                                                                                    </div>
                                                                                                    <div class="row hidden paidShippingAmt2">
                                                                                                        <p><strong class="paid_delivery_fromAmt"></strong></p>
                                                                                                        <p style="margin-left:15px;"><span class="paid_delivery_amt_from"></span></p>
                                                                                                    </div>
                                                                                                </div>
                                                                                            </div>
                                                                                        </td>
                                                                                    </tr>
                                                                                    </tbody>
                                                                                </table>
                                                                            </div>
                                                                            <div class="row" style="margin-bottom: 40px;padding: 20px;">
                                                                                <div class="col-md-6">
                                                                                    <button  type="button" class="ps-btn action back" style="text-align: left"><i class="bi bi-arrow-left"></i> Précédent</button>
                                                                                </div>
                                                                                <div class="col-md-6" style="text-align: right">
                                                                                    <button type="button" class="ps-btn action next">Suivant <i class="bi bi-arrow-right"></i></button>
                                                                                    <button type="submit" class="action submit ps-btn action">Valider <i class="bi bi-arrow-right"></i></button>
                                                                                </div>
                                                                            </div>
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </form>
                            </div>
                            <div class="ps-tab " id="Dtab-10">
                                <h3>Réinitialiser votre mot de passe</h3>
                                <div class="ps-block--categories-box" style="padding: 60px;min-height:500px">
                                    @include('extensions.reset_password_component')
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="modal fade" id="newProductModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-lg modal-dialog-centered" role="document">
            <div class="modal-content">
                <form action="{{route('shop-product.store')}}" method="post" id="sellerAddProductForm">
                    @csrf
                    <div class="modal-header">
                        <h5 class="modal-title">Ajout d'un produit</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="row">
                            <div class="form-group col-md-6">
                                <label class="col-form-label col-md-12">Catégorie *</label>
                                <div class="col-md-12">
                                    <select id="category_id" class="form-control" required>
                                        <option value="">{{__('Choisir la catégorie')}}</option>
                                        @forelse($categories as $category)
                                            <option value="{{route('load.products',$category->id)}}">{{$category->name}}</option>
                                        @empty
                                            <option value="">{{__('Pas de catégorie disponible')}}</option>
                                        @endforelse
                                    </select>
                                </div>
                            </div>
                            <div class="form-group col-md-6">
                                <label class="col-form-label col-md-12">Nom du produit *</label>
                                <div class="col-md-12">
                                    <select name="product_id" id="product_id" class="form-control" required>
                                        <option value="">{{__('Choisir le produit')}}</option>
                                        @forelse($configuredProducts as $product)
                                            <option value="{{$product->id}}">{{$product->name}}</option>
                                        @empty
                                            <option value="">{{__('Aucun produit pour cette catégorie')}}</option>
                                        @endforelse
                                    </select>
                                </div>
                            </div>
                            <div class="form-group col-md-6">
                                <label class="col-form-label col-md-12">Unité *</label>
                                <div class="col-md-12">
                                    <input type="text" name="unit" class="form-control" required>
                                </div>
                            </div>
                            <div class="form-group col-md-6">
                                <label class="col-form-label col-md-12">Prix unitaire *</label>
                                <div class="col-md-12">
                                    <input type="number" name="price" class="form-control" required>
                                </div>
                            </div>
                            <div class="form-group col-md-6">
                                <label class="col-form-label col-md-12">Quantité *</label>
                                <div class="col-md-12">
                                    <input type="number" name="quantity" class="form-control" required>
                                </div>
                            </div>
                            <div class="form-group col-md-6">
                                <label class="col-form-label col-md-12">Seuil d'alerte *</label>
                                <div class="col-md-12">
                                    <input type="number" name="stock_limit" class="form-control" required>
                                </div>
                            </div>
                            <div class="form-group col-md-6">
                                <label class="col-form-label col-md-12">Statut *</label>
                                <div class="col-md-12 row">
                                    <label for="published" class="col-md-6">
                                        <input type="radio" name="is_published" id="published" value="1" checked> Publié
                                    </label>
                                    <label for="unpublished"  class="col-md-6">
                                        <input type="radio" name="is_published" value="0" id="unpublished" > Non Publié
                                    </label>
                                </div>
                            </div>
                            <div class="form-group col-md-6">
                                <label class="col-form-label col-md-12">Mode *</label>
                                <div class="col-md-12 row">
                                    <label for="published" class="col-md-6">
                                        <input type="radio" name="deliveryMode" id="published" value="1" checked> Drive
                                    </label>
                                    <label for="unpublished"  class="col-md-6">
                                        <input type="radio" name="deliveryMode" value="0" id="unpublished" > Livraison
                                    </label>
                                </div>
                            </div>
                        </div>
                        <div class="form-group row">
                            <label class="col-form-label col-md-12">Description</label>
                            <div class="col-md-12">
                                <textarea rows="5" cols="5" name="description" class="form-control" placeholder="Entrer la description" required></textarea>
                            </div>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button class="btn btn-secondary" type="button" data-dismiss="modal" title="">Annuler</button>
                        <button class="btn btn-primary" type="submit" title="">Enregistrer</button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <div class="modal fade" id="editProductModal" tabindex="-1" role="dialog" aria-labelledby="editModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-lg modal-dialog-centered" role="document">
            <div class="modal-content" id="edit-product-content">
                @include('seller.edit-product-content')
            </div>
        </div>
    </div>

    <div class="modal fade" id="askProduct" tabindex="-1" role="dialog" aria-labelledby="editModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-lg modal-dialog-centered" role="document">
            <div class="modal-content">
                <form action="{{route('ask-product')}}" method="post" id="ask-product">
                    @csrf
                    <div class="modal-header">
                        <h5 class="modal-title">Signaler un produit</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="row">
                            <div class="form-group col-md-6">
                                <label class="col-form-label col-md-12">Catégorie *</label>
                                <div class="col-md-12">
                                    <select name="category_id" id="" class="form-control" required>
                                        <option value="">{{__('Choisir la catégorie')}}</option>
                                        @foreach($categories as $category)
                                            <option value="{{$category->name}}">{{$category->name}}</option>
                                        @endforeach
                                        <option value="Autre">{{__('Autre')}}</option>
                                    </select>
                                </div>
                            </div>
                            <div class="form-group col-md-6">
                                <label class="col-form-label col-md-12">Nom du produit</label>
                                <div class="col-md-12">
                                    <input type="text" name="name" class="form-control" required>
                                </div>
                            </div>
                        </div>
                        <div class="form-group row">
                    <label class="col-form-label col-md-12">Description</label>
                    <div class="col-md-12">
                        <textarea rows="5" cols="5" name="description" class="form-control" placeholder="Entrer la description" required></textarea>
                    </div>
                </div>
                    </div>
                    <div class="modal-footer">
                        <button class="btn btn-secondary" type="button" data-dismiss="modal" title="">Annuler</button>
                        <button class="btn btn-primary" type="submit" title="">Enregistrer</button>
                    </div>
                </form>
            </div>
        </div>
    </div>


    <div class="modal fade" id="closeShop" tabindex="-1" role="dialog" aria-labelledby="editModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-lg modal-dialog-centered" role="document">
            <div class="modal-content">
                <form action="{{route('ask-product')}}" method="post" id="ask-product">
                    @csrf
                    <div class="modal-header">
                        <h5 class="modal-title">Fermer la boutique</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="row">
                            <div class="form-group col-md-6">
                                <label class="col-form-label col-md-12">Date de fermeture*</label>
                                <div class="col-md-12">
                                    <input type="datetime-local" name="close_date" class="form-control" required>
                                </div>
                            </div>
                            <div class="form-group col-md-6">
                                <label class="col-form-label col-md-12">Date de re-ouverture*</label>
                                <div class="col-md-12">
                                    <input type="datetime-local" name="open_date" class="form-control" required>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button class="btn btn-secondary" type="button" data-dismiss="modal" title="">Annuler</button>
                        <button class="btn btn-primary" type="submit" title="">Enregistrer</button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <div class="modal fade" id="newPromoModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-lg modal-dialog-centered" role="document">
            <div class="modal-content">
                <form action="{{route('produit.store')}}" method="post">
                    @csrf
                    <div class="modal-header">
                        <h5 class="modal-title">Ajout d'une promotion</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="row">
                            <div class="form-group col-md-6">
                                <label class="col-form-label col-md-12">Nom *</label>
                                <div class="col-md-12">
                                    <input type="text" name="name" class="form-control" required>
                                </div>
                            </div>
                            <div class="form-group col-md-6">
                                <label class="col-form-label col-md-12">Début *</label>
                                <div class="col-md-12">
                                    <input type="date" name="startDate" class="form-control" required>
                                </div>
                            </div>
                            <div class="form-group col-md-6">
                                <label class="col-form-label col-md-12">Fin *</label>
                                <div class="col-md-12">
                                    <input type="date" name="endDate" class="form-control" required>
                                </div>
                            </div>
                            <div class="form-group col-md-6">
                                <label class="col-form-label col-md-12">Taux de reduction *</label>
                                <div class="col-md-12">
                                    <input type="number" step="0.01" name="discount" class="form-control" required>
                                </div>
                            </div>
                            <div class="form-group col-md-6">
                                <label class="col-form-label col-md-12">Catégorie *</label>
                                <div class="col-md-12">
                                    <select name="category_id" id="" class="form-control" multiple required>
                                        <option value="">{{__('Choisir la catégorie')}}</option>
                                        @forelse($categories as $category)
                                            <option value="{{$category->id}}">{{$category->name}}</option>
                                        @empty
                                            <option value="">{{__('Pas de catégorie disponible')}}</option>
                                        @endforelse
                                    </select>
                                </div>
                            </div>
                            <div class="form-group col-md-6">
                                <label class="col-form-label col-md-12">Nom du produit *</label>
                                <div class="col-md-12">
                                    <select name="product_id" id="" class="form-control" multiple required>
                                        <option value="">{{__('Choisir le produit')}}</option>
                                        @forelse($products as $product)
                                            <option value="{{$product->id}}">{{$product->name}}</option>
                                        @empty
                                            <option value="">{{__('Aucun produit pour cette catégorie')}}</option>
                                        @endforelse
                                    </select>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button class="btn btn-secondary" type="button" data-dismiss="modal" title="">Annuler</button>
                        <button class="btn btn-primary" type="submit" title="">Enregistrer</button>
                    </div>
                </form>
            </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="" 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>
        $(document).ready(function() {
            $('#ask-product').submit(function(e){
                e.preventDefault();
                $('#main-loading').show();
                $.ajax({
                    type: 'post',
                    url: e.currentTarget.action,
                    data: $("#ask-product").serialize(),
                    dataType: 'json',
                    success: function (data) {
                        console.log(data);
                        if(data.success){
                            $('#main-loading').hide();
                            $('#askProduct').hide();
                            $('#ask-product')[0].reset();
                            $.confirm({
                                title: 'Succes!',
                                content: data.message,
                                theme: 'supervan', // 'material', 'bootstrap'
                                buttons: {
                                    Ok:  {
                                        text: 'Ok',
                                        btnClass: 'btn-success',
                                        action: function(){
                                            $('.modal-backdrop').hide();
                                        }
                                    }
                                }
                            });
                        }
                    },
                    error: function (xhr, textStatus, errorThrown, err, status) {
                        //alert("Error: " + errorThrown);
                    }
                });
            });
            let j=1;
            $(document).on('click','button.add_day', function(e){
                e.preventDefault();
                j++;
                $('#weekDaysBody').append(`<tr>
                                            <td>
                                                <div class="form-group">
                                                    <select class="ps-select" name="work_hours[day][]">
                                                        <option value="Lundi">Lundi</option>
                                                        <option value="Mardi">Mardi</option>
                                                        <option value="Mercredi">Mercredi</option>
                                                        <option value="Jeudi">Jeudi</option>
                                                        <option value="Vendredi">Vendredi</option>
                                                        <option value="Samedi">Samedi</option>
                                                        <option value="Dimanche">Dimanche</option>
                                                    </select>
                                                </div>
                                            </td>
                                            <td>
                                                <div class="form-inline">
                                                    <div class="form-group">
                                                        <label for="" style="margin-right: 10px;font-size:18px">De</label>
                                                        <input name="work_hours[morning_start][]" type="time" required class="form-control af_time" style="height: 30px;"> </div>
                                                    </div>
                                                    <div class="form-inline">
                                                        <div class="form-group">
                                                        <label style="margin-right: 10px;font-size:18px">à</label>
                                                        <input name="work_hours[morning_end][]" type="time" required class="form-control af_time" style="height: 30px;margin-left: 13px;">
                                                    </div>
                                                </div>
                                            </td>
                                            <td>
                                                <div class="form-inline">
                                                    <div class="form-group">
                                                        <label for="" style="margin-right: 10px;font-size:18px">De</label>
                                                        <input name="work_hours[afternoon_start][]" type="time" required class="form-control af_time" style="height: 30px;"> </div>
                                                    </div>
                                                    <div class="form-inline">
                                                        <div class="form-group">
                                                            <label style="margin-right: 10px;font-size:18px">à</label>
                                                            <input name="work_hours[afternoon_end][]" type="time" required class="form-control af_time" style="height: 30px;margin-left: 13px;">
                                                        </div>
                                                </div>
                                            </td>
                                            <td>
                                                <div class="form-inline">
                                                    <div class="form-group">
                                                        <label for="" style="margin-right: 10px;font-size:18px">De</label>
                                                        <input name="work_hours[evening_start][]" type="time" required class="form-control af_time" style="height: 30px;">
                                                    </div>
                                                </div>
                                                <div class="form-inline">
                                                        <div class="form-group">
                                                            <label style="margin-right: 10px;font-size:18px">à</label>
                                                            <input name="work_hours[evening_end][]" type="time" required class="form-control af_time" style="height: 30px;margin-left: 13px;">
                                                        </div>
                                                </div>
                                            </td>
                                            <td data-label="action">
                                            <button title="Supprimer le jour" class="ps-btn deleteLine"><i class="bi bi-trash"></i></button>
                                            </td>
                                            </tr>`);
                $(".ps-select").select2({
                });
            });
            $(".container").on("click",".deleteLine", function(e){
                e.preventDefault();
                $(this).parent('td').parent('tr').remove();
            });
        });
        $(document).ready(function(){
            $('textarea.Sdescription').on('blur', function(e){
                var content=$(this).val();
                $(".shop_description").html(content);
            });
        });
        $(document).ready(function(){
            var rr = $('.invisible-checkboxes input[type="radio"]:checked').val();
            if(rr === "0"){
                var content= $("label.r1").html();
                $(".shop_shipping_type").html(content);
                $(".completeFree").addClass('hidden');
                $(".livraison").addClass('hidden');
            }
            if(rr === "1"){
                var content= $("label.r2").html();
                $(".shop_shipping_type").html(content);
                $(".livraison").removeClass('hidden');
                $(".completeFree").removeClass('hidden');
            }

            $('.invisible-checkboxes input[type="radio"]').click(function(){
                if($(this).attr("value")=="0"){
                    var content= $("label.r1").html();
                    $(".shop_shipping_type").html(content);
                    $(".completeFree").html('');
                    $(".livraison").addClass('hidden');
                }
                if($(this).attr("value")=="1"){
                    var content= $("label.r2").html();
                    $(".shop_shipping_type").html(content);
                    $(".livraison").removeClass('hidden');
                }
            });
        });
        $(document).ready(function(){
            if($('#selectedDays input[type="radio"]:checked')){
                $(".weekDays-selector").removeClass('hidden');
            }
            if($('#fullweek input[type="radio"]:checked')){
                $(".weekDays-selector").addClass('hidden');
                var content= $("label.openDaysVal").html();
                $(".shop_open_time").html(content);
            }

            $('.openDays input[type="radio"]').click(function(){
                if($(this).attr("value")=="0"){
                    $(".weekDays-selector").addClass('hidden');
                    var content= $("label.openDaysVal").html();
                    $(".shop_open_time").html(content);
                }

                if($(this).attr("value")=="1"){
                    $("#weeklyMain").addClass('hidden');
                    $(".weekDays-selector").removeClass('hidden');

                }
            });
        });
        $(document).ready(function(){
            var dry = $('.delivery input[type="radio"]:checked').val();
            if(dry === "0"){
                $(".freeShippingFrom").addClass('hidden');
                $(".paidShippingAmt").addClass('hidden');
            }
            if(dry === "1"){
                $(".freeShippingFrom").removeClass('hidden');
                $(".paidShippingAmt").addClass('hidden');
            }
            if(dry === "2"){
                $(".freeShippingFrom").addClass('hidden');
                $(".paidShippingAmt").removeClass('hidden');
            }
            $('.delivery input[type="radio"]').click(function(){
                if($(this).attr("value")=="0"){
                    $(".freeShippingFrom").addClass('hidden');
                    $(".paidShippingAmt").addClass('hidden');
                }
                if($(this).attr("value")=="1"){
                    $(".freeShippingFrom").removeClass('hidden');
                    $(".paidShippingAmt").addClass('hidden');
                }
                if($(this).attr("value")=="2"){
                    $(".freeShippingFrom").addClass('hidden');
                    $(".paidShippingAmt").removeClass('hidden');
                }
            });
        });
        $('.file-input').change(function(){
            var curElement = $('.image');
            console.log(curElement);
            var reader = new FileReader();

            reader.onload = function (e) {
                // get loaded data and render thumbnail.
                curElement.attr('src', e.target.result);
            };

            // read the image file as a data URL.
            reader.readAsDataURL(this.files[0]);
        });
        $(document).ready(function(){
            $("#edit-product-button").on('click', function (e) {
                //$('#main-loading').show();
                $('#editProductModal').modal('show');
                let data = {id: $(this).data('id')},
                    url = $(this).data('url');
                /*$.ajax({
                    type: 'get',
                    url: url,
                    data: data,
                    dataType: 'json',
                    cache: false,
                    processData: false,
                    contentType: false,
                    success: function (data) {
                        if(data.success){
                            $('#edit-product-content').html(data.html);
                            $('#editProductModal').modal('show');
                            $('#main-loading').hide();
                        }
                        else{
                            $('#main-loading').hide();
                            alert(data.message);
                        }
                    },
                    error: function (xhr, textStatus, errorThrown, err, status) {
                        //alert("Error: " + errorThrown);
                    }
                });*/
            });
            var current = 1;

            widget      = $(".step");
            widget1      = $(".step1");
            widget2      = $(".step2");
            btnnext     = $(".next");
            btnback     = $(".back");
            btnsubmit   = $(".submit");

            // Init buttons and UI
            widget.not(':eq(0)').hide();
            widget2.hide();
            hideButtons(current);
            setProgress(current);

            // Next button click action
            btnnext.click(function(){
                var success = true;
                @if($shop->state == 0)
                if(!$('#banner').val()){
                    $('.drop-zone').css("border","2px solid red");
                    return success;
                }else {$('.drop-zone').css("border","2px dashed #ccc")}
                if(!$('#logo').val()){
                    $('.modifyDropImage').css("border","2px solid red");
                    return success;
                }else {$('.modifyDropImage').css("border","1px solid #068d18")}
                @endif
                if( $('#settingsForm textarea[name="description"]').val().length === 0){
                    $('.Sdescription').css("border","1px solid red");
                    $('.Sdescription').focus();
                    return success;
                }else {$('.Sdescription').css("border","1px solid #ccc")}
                if($('#selectedDays input[type="radio"]:checked')){
                    $(".weekDays-selector").removeClass('hidden');
                }
                if(current === 2) {
                    var v1 = $('.openDays input[type="radio"]:checked').val();
                    if (v1 === "0") {
                        $(".weekDays-selector").addClass('hidden');
                        if ($('#allWeekMS').val() === '') {
                            $('#allWeekMS').css("border", "1px solid red");
                            $('#allWeekMS').focus();
                            return success;
                        }else{$('#allWeekMS').css("border", "none");}
                        if ($('#allWeekME').val() === '') {
                            $('#allWeekME').css("border", "1px solid red");
                            $('#allWeekME').focus();
                            return success;
                        }else{$('#allWeekME').css("border", "none");}
                        if ($('#allWeekAS').val() === '') {
                            $('#allWeekAS').css("border", "1px solid red");
                            $('#allWeekAS').focus();
                            return success;
                        }else{$('#allWeekAS').css("border", "none");}
                        if ($('#allWeekAE').val() === '') {
                            $('#allWeekAE').css("border", "1px solid red");
                            $('#allWeekAE').focus();
                            return success;
                        }else{$('#allWeekAE').css("border", "none");}
                        if ($('#allWeekES').val() === '') {
                            $('#allWeekES').css("border", "1px solid red");
                            $('#allWeekES').focus();
                            return success;
                        }else{$('#allWeekEE').css("border", "none");}
                        if ($('#allWeekEE').val() === '') {
                            $('#allWeekEE').css("border", "1px solid red");
                            $('#allWeekEE').focus();
                            return success;
                        }else{$('#allWeekEE').css("border", "none");}
                    }else{
                        $(".weekDays-selector").removeClass('hidden');
                        var daysD = $("#daysD option:selected").val();
                        if (daysD === '') {
                            $('#daysD').css("border", "1px solid red");
                            $('#daysD').focus();
                            return success;
                        }else{$('#daysD').css("border", "none");}
                        if ($('#daysMS').val() === '') {
                            $('#daysMS').css("border", "1px solid red");
                            $('#daysMS').focus();
                            return success;
                        }else{$('#daysMS').css("border", "none");}
                        if ($('#daysME').val() === '') {
                            $('#daysME').css("border", "1px solid red");
                            $('#daysME').focus();
                            return success;
                        }else{$('#daysME').css("border", "none");}
                        if ($('#daysAS').val() === '') {
                            $('#daysAS').css("border", "1px solid red");
                            $('#daysAS').focus();
                            return success;
                        }else{$('#daysAS').css("border", "none");}
                        if ($('#daysAE').val() === '') {
                            $('#daysAE').css("border", "1px solid red");
                            $('#daysAE').focus();
                            return success;
                        }else{$('#daysAE').css("border", "none");}
                        if ($('#daysES').val() === '') {
                            $('#daysES').css("border", "1px solid red");
                            $('#daysES').focus();
                            return success;
                        }else{$('#daysEE').css("border", "none");}
                        if ($('#daysEE').val() === '') {
                            $('#daysEE').css("border", "1px solid red");
                            $('#daysEE').focus();
                            return success;
                        }else{$('#daysEE').css("border", "none");}
                    }
                }
                if(current < widget.length) {
                    widget.show();
                    widget.not(':eq('+(current++)+')').hide();
                    setProgress(current);
                    //alert("I was called from btnNext");
                }
                if(current === 3){
                    var v = $('.openDays input[type="radio"]:checked').val();
                    //alert(v);
                    if(v === "1"){
                        $("#weeklyMain").addClass('hidden');
                        $("#dailyMain").removeClass('hidden');
                        /*$('#main-loading').show();*/
                        $.ajax({
                            type: 'POST',
                            url: '{{ route('settings.shopOpenTime.byDays') }}',
                            data: $("#settingsForm").serialize(),
                            dataType: 'JSON',
                            cache: false,
                            _token : '{{csrf_token()}}',
                            success: function (data) {
                                if(data.success){
                                    /*$('#main-loading').hide();*/
                                    $("#weekDaysBody2").html(data.html);
                                    $(".ps-select").select2();
                                }
                            }
                        });
                    }

                    if(v === "0"){
                        if($('#allWeekMS').val()===''){
                            $('#allWeekMS').css("border","1px solid red");
                            $('#allWeekMS').focus();
                         alert('fill-time');
                            return success;
                        }
                        $("#dailyMain").addClass('hidden');
                        $("#weeklyMain").removeClass('hidden');
                        /*$('#main-loading').show();*/
                        $.ajax({
                            type: 'POST',
                            url: '{{ route('settings.shopOpenTime.fullweek') }}',
                            data: $("#settingsForm").serialize(),
                            dataType: 'JSON',
                            cache: false,
                            _token : '{{csrf_token()}}',
                            success: function (data) {
                                if(data.success){
                                    /*$('#main-loading').hide();*/
                                    $("#weeklyBody").html(data.html);
                                }
                            }
                        });
                    }
                }
                if(current === 4){
                    var dry = $('.delivery input[type="radio"]:checked').val();
                    if(dry === "0"){
                        var content = $("label.free_delivery").html();
                        $(".completeFree").html(content);
                        $(".freeShippingFromTo").addClass('hidden');
                        $(".paidShippingAmt2").addClass('hidden');
                    }
                    if(dry === "1"){
                        $(".freeShippingFromTo").removeClass('hidden');
                        $(".paidShippingAmt2").addClass('hidden');
                        var content3 = $("label.free_delivery_from").html();
                        var content1 = $("#free_delivery_amt_from").val();
                        var content2 = $("#free_delivery_amt_to").val();
                        $(".completeFree").html('');
                        $(".free_delivery_fromAmt").html(content3);
                        $(".free_delivery_amt_from").html(content1);
                        $(".free_delivery_amt_to").html(content2);
                    }
                    if(dry === "2"){
                        var content4 = $("label.paid_delivery").html();
                        var content5 = $("#paid_delivery_amt").val();
                        $(".completeFree").html('');
                        $(".paid_delivery_fromAmt").html(content4);
                        $(".paid_delivery_amt_from").html(content5);
                        $(".freeShippingFromTo").addClass('hidden');
                        $(".paidShippingAmt2").removeClass('hidden');
                    }
                }
                hideButtons(current);
            });

            // Back button click action
            btnback.click(function(){
                if(current > 1){
                    current = current - 2;
                    btnnext.trigger('click');
                }
                hideButtons(current);
                widget1.show();widget2.hide();
            });
        });

        // Change progress bar action
        setProgress = function(currstep){
            var percent = parseFloat(100 / widget.length) * currstep;
            percent = percent.toFixed();
            $(".progress-bar")
                .css("width",percent+"%")
                .html(percent+"%");
        }

        // Hide buttons according to the current step
        hideButtons = function(current){
            var limit = parseInt(widget.length);

            $(".action").hide();

            if(current < limit) btnnext.show();
            if(current > 1) btnback.show();
            if(current == limit) { btnnext.hide(); btnsubmit.show(); widget1.hide();widget2.show(); }
        }
    </script>
    <script>
        document.querySelectorAll(".drop-zone__input").forEach((inputElement) => {
            const dropZoneElement = inputElement.closest(".drop-zone");

            dropZoneElement.addEventListener("click", (event) => {
                inputElement.click(); /*clicking on input element whenever the dropzone is clicked so file browser is opened*/
            });

            inputElement.addEventListener("change", (event) => {
                if (inputElement.files.length) {
                    updateThumbnail(dropZoneElement, inputElement.files[0]);
                }
            });

            dropZoneElement.addEventListener("dragover", (event) => {
                event.preventDefault(); /*this along with prevDef in drop event prevent browser from opening file in a new tab*/
                dropZoneElement.classList.add("drop-zone--over");
            });
            ["dragleave", "dragend"].forEach((type) => {
                dropZoneElement.addEventListener(type, (event) => {
                    dropZoneElement.classList.remove("drop-zone--over");
                });
            });
            dropZoneElement.addEventListener("drop", (event) => {
                event.preventDefault();
                console.log(
                    event.dataTransfer.files
                ); /*if you console.log only event and check the same data location, you won't see the file due to a chrome bug!*/
                if (event.dataTransfer.files.length) {
                    inputElement.files =
                        event.dataTransfer.files; /*asigns dragged file to inputElement*/

                    updateThumbnail(
                        dropZoneElement,
                        event.dataTransfer.files[0]
                    ); /*thumbnail will only show first file if multiple files are selected*/
                }
                dropZoneElement.classList.remove("drop-zone--over");
            });
        });
        function updateThumbnail(dropZoneElement, file) {
            let thumbnailElement = dropZoneElement.querySelector(
                ".drop-zone__thumb"
            );
            /*remove text prompt*/
            if (dropZoneElement.querySelector(".drop-zone__prompt")) {
                dropZoneElement.querySelector(".drop-zone__prompt").remove();
            }

            /*first time there won't be a thumbnailElement so it has to be created*/
            if (!thumbnailElement) {
                thumbnailElement = document.createElement("div");
                thumbnailElement.classList.add("drop-zone__thumb");
                dropZoneElement.appendChild(thumbnailElement);
            }
            thumbnailElement.dataset.label =
                file.name; /*takes file name and sets it as dataset label so css can display it*/

            /*show thumbnail for images*/
            if (file.type.startsWith("image/")) {
                const reader = new FileReader(); /*lets us read files to data URL*/
                reader.readAsDataURL(file); /*base 64 format*/
                reader.onload = () => {
                    thumbnailElement.style.backgroundImage = `url('${reader.result}')`; /*asynchronous call. This function runs once reader is done reading file. reader.result is the base 64 format*/
                    thumbnailElement.style.backgroundPosition = "center";
                };
            } else {
                thumbnailElement.style.backgroundImage = null; /*plain background for non image type files*/
            }
        }
    </script>
@endsection