@extends('dashboard.Boutique.Boutique_template.layouts.grocery.app')
@section('css')
    @include('dashboard.Boutique.Boutique_template.layouts.grocery.css_other_page')
    @include('dashboard.Boutique.Boutique_template.layouts.grocery.cart_css')
    <link rel="stylesheet" href="{{ asset('plugin/telephone_input/build/css/intlTelInput.css') }}">
    <style>
        @media(max-width: 768px) {
            .cart_info_col {}

            .cart_item_text {
                margin-top: 5px;
            }

            .cart_item_title {
                margin-top: 20px;
            }

            .cart_item_info {
                padding-top: 0;
            }

            .cart_item {
                padding-right: 15px;
            }

        }

        .cart_item_text span {
            width: unset;
            height: unset;
            border-radius: 10px;
            margin-right: 0;
        }
    </style>
@endsection
@section('content')


    @include('dashboard.Boutique.Boutique_template.layouts.grocery.banner', [
        'page_title' => 'Détails du Panier',
    ])

    <div id="contact-us-page" class="col-lg-12">
        <div class="row">
            @if ($articles != null && count($articles) > 0)
                <form class="cart_container col-lg-12" method="post" action="{{ route('products.commandes') }}"
                    data-command="{{ route('commande.user', \Illuminate\Support\Facades\Session::get('boutique')['nom_boutique']) }}"
                    data-home="{{ route('products.check_paiment', \Illuminate\Support\Facades\Session::get('boutique')['nom_boutique']) }}"
                    id="post_cart2">
                    <div class="row">
                        <div class="col-lg-8 col-xs-12 mb-4" style="padding: 0 25px">
                            @csrf
                            @php $total=0; @endphp
                            @php
                                $forwhatsapp = '';
                                $boutique = \Illuminate\Support\Facades\Session::get('boutique');
                                $maboutique = \Illuminate\Support\Facades\Session::get('boutique')['slug'];
                                $boutique_ = \Illuminate\Support\Facades\Session::get('boutique' . $maboutique);
                            @endphp

                            @if (isset($articles) && isset($boutique_))
                                @foreach ($articles as $key => $article)
                                    @php
                                        $helpers = new \App\Http\Controllers\HelperController();
                                        $prix = $helpers->get_article_price_by_boutique(
                                            $article['article']->slug,
                                            $maboutique,
                                        );
                                        $name = $helpers->get_meta_article(
                                            'name',
                                            $article['article']->slug,
                                            $maboutique,
                                        );
                                        if ($name['statut'] == false) {
                                            $name = $article['article']->name;
                                        } else {
                                            $name = $name['value'];
                                        }
                                        $forwhatsapp = $name = $name . ' | ';
                                        $stock = $helpers->get_meta_article(
                                            'stock',
                                            $article['article']->slug,
                                            $boutique_,
                                        );
                                        if ($stock['statut'] == false) {
                                            $stock = $article['article']->quantity;
                                        } else {
                                            $stock = $stock['value'];
                                        }
                                        $total += $article['prixTotal'];

                                        /* if($boutique->meta->currency_admin!==$boutique->meta->currency_client)
                    {
                    $price['value']=$helpers->convertCurrency($boutique->meta->currency_admin,$boutique->meta->currency_client,$price['value']);
                    $prix=$helpers->convertCurrency($boutique->meta->currency_admin,$boutique->meta->currency_client,$prix);
                    }*/
                                        $image = $helpers->get_simple_image($article['article']->slug, $boutique_);
                                    @endphp

                                    <div class="cart_items">
                                        <ul class="cart_list">
                                            <li class="cart_item clearfix">

                                                <div class="cart_item_image text-center">
                                                    @if (isset($image) && $image->filename != null)
                                                        <img class="lazy" data-src="{{ $image->filename }}"
                                                            alt="{{ $name }}" style="width: 100%">
                                                    @endif
                                                </div>
                                                <div
                                                    class="cart_item_info d-flex flex-md-row flex-column justify-content-between">
                                                    <div class="cart_item_name cart_info_col">
                                                        <input type="hidden" value="{{ $article['article']->slug }}"
                                                            name="article_slug[]">
                                                        <div class="cart_item_title text-center">Nom du produit</div>
                                                        <div class="cart_item_text text-center" style="font-size: 10pt">
                                                            {{ \Illuminate\Support\Str::limit($name, 17) }}</div>
                                                    </div>

                                                    <div class="cart_item_price cart_info_col">
                                                        <div class="cart_item_title text-center">Prix de vente</div>
                                                        <div class="cart_item_text text-center" style="font-size: 10pt">
                                                            <span class="badge badge-warning"> {{ $prix }}
                                                                {{ $boutique->meta->currency_client }} </span>
                                                        </div>
                                                    </div>
                                                    <div class="cart_item_quantity cart_info_col">
                                                        <div class="cart_item_title text-center">Quantité</div>
                                                        <div class="cart_item_text text-center">
                                                            <input data-price="{{ $prix }}"
                                                                data-slug="{{ $article['article']->slug }}" min="1"
                                                                max="{{ $stock }}" data-token="{{ csrf_token() }}"
                                                                type="number" name="quantity[]"
                                                                value="{{ $article['quantity'] }}"
                                                                class="form-control quantity_buy">
                                                        </div>
                                                    </div>

                                                    <div class="cart_item_total cart_info_col">
                                                        <div class="cart_item_title text-center">Total</div>
                                                        <div class="cart_item_text text-center">
                                                            <span class="badge badge-primary"
                                                                data-currency="{{ $boutique->meta->currency_client }}"
                                                                style="font-size: 10pt;color: #fff;"
                                                                id="cart-price{{ $article['article']->slug }}">
                                                                {{ $article['prixTotal'] }}
                                                                {{ $boutique->meta->currency_client }}
                                                            </span>
                                                        </div>
                                                        <input type="hidden" class="myprice"
                                                            id="myprice{{ $article['article']->slug }}"
                                                            value="{{ $prix }}">
                                                    </div>
                                                    <div class="text-center cart_info_col">
                                                        <div class="cart_item_title text-center"></div>
                                                        <div class="cart_item_text text-center">
                                                            <a href="{{ route('cart.delete.article', $article['article']->slug) }}"
                                                                class="btn btn-danger btn-sm mt-3"> <i
                                                                    class="fa fa-trash"></i> </a>
                                                        </div>
                                                    </div>
                                                </div>

                                            </li>
                                        </ul>
                                    </div>
                                    @if (isset($article['article']->caracteristique_) && count($article['article']->caracteristique_) > 0)
                                        <table
                                            class="col-sm-12 col-xs-12 pt-2 table table-bordered table-striped table-responsive-sm">
                                            @foreach ($article['article']->caracteristique_ as $carac)
                                                @if (isset($carac->article_metas) && $carac->article_metas != null && count($carac->article_metas) > 0)
                                                    <tr>
                                                        <td>{{ $carac->intitule }} :</td>
                                                        <td>
                                                            @foreach ($carac->article_metas as $metas)
                                                                @php
                                                                    $value = [];
                                                                    $value = explode(',', $metas->value);
                                                                @endphp
                                                                @if ($value != '' && is_array($value))
                                                                    @for ($i = 0; $i < count($value); $i++)
                                                                        <label class="container-checkbox"
                                                                            for="{{ $metas->id }}{{ $i }}">
                                                                            <input type="checkbox"
                                                                                id="{{ $metas->id }}{{ $i }}"
                                                                                name="{{ $carac->intitule }}[]"
                                                                                value=" {{ $value[$i] }}">
                                                                            {{ $value[$i] }}
                                                                            <span class="checkmark"></span>
                                                                        </label> &nbsp; &nbsp;
                                                                    @endfor
                                                                @endif
                                                            @endforeach
                                                        </td>
                                                    </tr>
                                                @endif
                                            @endforeach
                                        </table>
                                    @endif
                                    <div class="cart_item_quantity cart_info_col col-sm-12 p-0 pt-3">
                                        <label>Exigence</label>
                                        <textarea name="specificity[]" class="form-control" rows="5" style=""
                                            placeholder="Avez vous des exigences particulières sur ce produit ?"></textarea>

                                    </div>
                                @endforeach
                            @else
                                <div class="text-center" style="padding: 10%;color: #b40100;font-size: 14pt">
                                    <img data-src="{{ asset('images/emptycart.png') }}" alt="empty cart" width="150px">
                                    <br>
                                    Aucun produit dans le panier
                                </div>
                            @endif

                            <div class="col-sm-12 p-3"><span style="color: red;">NB :</span> Vous pouvez spécifiez des
                                détails
                                pour vos articles suivant les caractéristiques se trouvant au bas des détails de vos
                                articles
                            </div>
                            <div class="row">
                                <a href="{{ route('products.cart.delete') }}" class="btn btn-danger btn-sm"
                                    style="border-radius: 0px; margin-left: 20px;">Vider le panier</a>
                                <a href="{{ url('/' . $boutique->nom_boutique) }}" class="btn btn-secondary btn-sm"
                                    style="border-radius: 0px; margin-left: 20px;">Continuer mes achats</a>
                            </div>

                        </div>

                        {{-- Paid section --}}
                        <div class="col-lg-4 col-xs-12">
                            <div class="col-lg-12">
                                <div class="form-group">
                                    <label for="code_promo" style="margin-bottom: 2px!important;"> <strong> Code Promo
                                        </strong></label>
                                    <small>Inserez un code promo pour profiter des reductions offertes par
                                        {{ str_replace(
                                            '_',
                                            '
                                                                                                                                                        ',
                                            \Illuminate\Support\Facades\Session::get('boutique')['nom_boutique'],
                                        ) }}</small>

                                    <div class="input-group mb-3">
                                        <input type="text" class="form-control" name="code_promo" id="code_promo"
                                            placeholder="Recipient's username" aria-label="Recipient's username"
                                            aria-describedby="button-addon2">
                                        <button class="btn btn-outline-secondary"
                                            data-boutique="{{ \Illuminate\Support\Facades\Session::get('boutique')['slug'] }}"
                                            data-url="{{ route('check.code_promo') }}" id="verify_promo" type="button"
                                            id="button-addon2">activer</button>
                                    </div>
                                    <div class="form-group" id="code_promo_panel" style="display: none">
                                    </div>
                                    <span style="color: orange"><strong> NB:</strong> Vérifiez votre code promo pour
                                        confirmer
                                        la validité et les détails de réductions que vous obtenez sur le total votre
                                        commande.</span>
                                </div>

                            </div>
                            <div class="col-sm-12 text-center pt-0">
                                {{-- <button type="button" class="button cart_button_clear"
                            style="border-radius: 0px">vider</button> --}}
                                <img src="{{ asset('images/panier.png') }}" alt="" width="40px"
                                    style="margin-bottom: 20px">
                                <div
                                    style="padding: 4%;font-size: 15pt; background: {{ $metas->background_color != null ? $metas->background_color : 'indigo' }};color: {{ $metas->text_color != null ? $metas->text_color : 'white' }}">
                                    <span class="bold">Total </span>
                                    <strong class="price_total" style="padding: 0">
                                        @if ($boutique->meta->currency_admin !== $boutique->meta->currency_client)
                                            {{ $helpers->convertCurrency($boutique->meta->currency_admin, $boutique->meta->currency_client, $$total) }}
                                        @else
                                            {{ $total }}
                                        @endif
                                    </strong> <span>{{ $boutique->meta->currency_client }}</span>
                                </div>
                                <hr>
                                <div style="padding-top: 10px;padding-bottom: 10px;text-align: left;font-weight: bold;">
                                    Notez
                                    que ce montant n'est pas fixe. Des taxes pourront être ajoutées suivant le moyen de
                                    paiement
                                    choisi.</div>
                                <hr>
                                
                                @if (
                                    \Illuminate\Support\Facades\Session::get('boutique')['paiement_and_livraison'])
                                    <button type="button" class=" btn btn-primary" id="paid_now"
                                        style="text-transform: uppercase; border-radius: 0px;border: none;margin-top: 2%;width: 100%; cursor: pointer">Payer
                                        maintenant </button>
                                    <br>
                                    <button type="button" class=" btn btn-warning" id="paid_after"
                                        style="text-transform: uppercase;border-radius: 0px;border: none;margin-top: 2%;width: 100%;cursor: pointer">payer
                                        à la livraison </button>
                                    @if (isset($boutique->paiement_echelonner) &&
                                            new \DateTime($boutique->paiement_echelonner->expired_at) > new \DateTime(date('Y-m-d H:i:s')))
                                        <br>
                                        <button type="button" class=" btn btn-dark" id="paid_echellon"
                                            style="text-transform: uppercase;border-radius: 0px;border: none;margin-top: 2%;width: 100%;cursor: pointer">payer
                                            par tranche ({{ $boutique->paiement_echelonner->max }} X) </button>
                                    @endif
                                @endif
                            </div>
                            <div class="col-sm-12 mt-4 ">
                                <h6>Contacter le vendeur par :</h6>
                                <a href="https://api.whatsapp.com/send?phone={{ \Illuminate\Support\Facades\Session::get('boutique')['meta']['telephone_boutique'] }}&text=Je suis interesser par les produits {{ $forwhatsapp }} de votre catalogue."
                                    type="button" class=" btn btn-success btn-md"
                                    style="border: none;text-align: center;border-radius: 0px;border-bottom: 10px;width: 100%">
                                    <i class="fab fa-whatsapp"></i> Whatsapp</a>
                                <br>
                                <a href="tel:{{ \Illuminate\Support\Facades\Session::get('boutique')['meta']['telephone_boutique'] }}"
                                    type="button" class=" btn btn-md btn-dark"
                                    style="text-align: center;width: 100%; border-radius: 0;margin-top: 10px;"> <i
                                        class="fas fa-mobile"></i> Appel</a>
                            </div>
                        </div>
                    </div>

                    <div id="PersonnalDataModal" class="modal fade">
                        <div class="modal-lg modal-dialog">
                           @csrf

                            <div class="modal-content"
                                style="border-radius: 0px;background: #ffffff;border-right: 5px solid {{ $metas->background_color != null ? $metas->background_color : '#88b121' }};">
                                <div class="modal-header"
                                    style="background: {{ $metas->background_color != null ? $metas->background_color : '#88b121' }};color: {{ $metas->text_color != null ? $metas->text_color : 'white' }};border-radius: 0px">
                                    <h4 class="modal-title text-left" style="color: #f1f1f1;"><i
                                            class="fa fa-hand-lizard"></i> Fournir les informations suivantes pour valider
                                        la commande <span id="name_details_header"></span></h4>
                                </div>
                                <div class="modal-body">
                                    <div id="details_article_view">
                                        @if (isset($boutique->paiement_echelonner) &&
                                                new \DateTime($boutique->paiement_echelonner->expired_at) > new \DateTime(date('Y-m-d H:i:s')))
                                            <input type="hidden" value="{{ $boutique->paiement_echelonner->max }}"
                                                id="paiement_echelonner_id">
                                        @endif

                                        @php
                                        if($boutique->mibSubscribe) $date_mib =  \Carbon\Carbon::parse($boutique->mibSubscribe->expired_at);
                                        @endphp

                                        @if(isset($boutique->mibSubscribe) && $date_mib && !$date_mib->isPast())
                                        <div class="row">
                                            <div class="col-sm-12">
                                                <label for="for_panier_mib">Cocher cette case que si vous avez souscrit au programme Panier MIB {{date('Y')}} de {{$boutique->nom_boutique}} et que cette commande représente la constitution de votre offre panier</label>
                                                <br>
                                                <br>
                                                <label for="for_panier_mib">
                                                    <input type="checkbox" name="for_panier_mib" value="on"
                                                           id="for_panier_mib"> <span style="font-size: 12pt;"> &nbsp;&nbsp; Oui, Je constitue mon Panier MIB {{date('Y')}}
                                                        </span>
                                                </label>
                                            </div>
                                        </div>
                                        @endif

                                        <div class="row">
                                            <h6 class="col-sm-12"
                                                style="font-weight: bold;color: {{ $metas->background_color != null ? $metas->background_color : '#88b121' }};padding-bottom: 20px;">
                                                <i class="fa fa-user-circle"></i> Informations personnelles
                                            </h6>
                                            @php
                                                $firstname = '';
                                                $lastname = '';
                                                $telephone = '';
                                                $email = '';
                                                $sexe = '';
                                                if (\Illuminate\Support\Facades\Session::has('user')) {
                                                    $get_user_data = \Illuminate\Support\Facades\Session::get('user');
                                                    $firstname = $get_user_data['first_name'];
                                                    $lastname = $get_user_data['last_name'];
                                                    $telephone = $get_user_data['telephone'];
                                                    $email = $get_user_data['email'];
                                                    $sexe = $get_user_data['sexe'];
                                                }
                                            @endphp
                                            <div class="form-group col-md-6">
                                                <label><i class="fa fa-user"></i> Nom </label><br>
                                                <input type="text" id="last_name" name="last_name"
                                                    data-input_name="nom" onblur="check_error(['last_name']);"
                                                    required="required" value="{{ $lastname }}" placeholder="name"
                                                    class="form-control" style="width: 100%;">
                                            </div>
                                            <div class="form-group col-md-6">
                                                <label><i class="fa fa-user"></i> Prenom</label><br>
                                                <input type="text" id="first_name" name="first_name"
                                                    data-input_name="prénom" onblur="check_error(['first_name']);"
                                                    required="required" value="{{ $firstname }}" class="form-control"
                                                    placeholder="Prénom" style="width: 100%;">
                                            </div>
                                        </div>
                                        <div class="row">
                                            <div class="form-group col-md-6">
                                                <label for="pays"><i class="fa fa-map"></i> Pays</label>
                                                <select id="pays" class="form-control" required="required"
                                                    name="country" style="width: 100%;margin-left: 0px;">
                                                    <option value="BJ">Benin</option>
                                                    <option value="BF">Burkina Faso</option>
                                                    <option value="CI">Côte d'Ivoire</option>
                                                    <option value="GN">Guinea</option>
                                                    <option value="ML">Mali</option>
                                                    <option value="NE">Niger</option>
                                                    <option value="SN">Senegal</option>
                                                    <option value="TG">Togo</option>
                                                    <option value="DZ">Algeria</option>
                                                    <option value="AO">Angola</option>
                                                    <option value="BW">Botswana</option>
                                                    <option value="BI">Burundi</option>
                                                    <option value="CM">Cameroon</option>
                                                    <option value="CF">Central African Republic</option>
                                                    <option value="TD">Chad</option>
                                                    <option value="KM">Comoros</option>
                                                    <option value="CG">Congo</option>
                                                    <option value="CD">Congo, the Democratic Republic of the</option>
                                                    <option value="DJ">Djibouti</option>
                                                    <option value="EG">Egypt</option>
                                                    <option value="GQ">Equatorial Guinea</option>
                                                    <option value="ER">Eritrea</option>
                                                    <option value="ET">Ethiopia</option>>
                                                    <option value="GA">Gabon</option>
                                                    <option value="GM">Gambia</option>
                                                    <option value="GH">Ghana</option>
                                                    <option value="GW">Guinea-Bissau</option>
                                                    <option value="HT">Haiti</option>
                                                    <option value="KE">Kenya</option>
                                                    <option value="LS">Lesotho</option>
                                                    <option value="LR">Liberia</option>
                                                    <option value="LY">Libya</option>
                                                    <option value="MG">Madagascar</option>
                                                    <option value="MW">Malawi</option>
                                                    <option value="MY">Malaysia</option>
                                                    <option value="MV">Maldives</option>
                                                    <option value="MA">Morocco</option>
                                                    <option value="MZ">Mozambique</option>
                                                    <option value="NA">Namibia</option>
                                                    <option value="NG">Nigeria</option>
                                                    <option value="SL">Sierra Leone</option>
                                                    <option value="ZA">South Africa</option>
                                                    <option value="SS">South Sudan</option>
                                                    <option value="SD">Sudan</option>
                                                    <option value="UG">Uganda</option>
                                                    <option value="ZM">Zambia</option>
                                                    <option value="ZW">Zimbabwe</option>
                                                </select>
                                            </div>
                                            <div class="form-group col-md-6">
                                                <label><i class="fa fa-male"></i><i class="fa fa-female"></i>
                                                    Sexe</label><br>
                                                <select name="sex" class="form-control" style="margin-left: 0px;">
                                                    <option value="Homme"
                                                        @if (\Illuminate\Support\Str::upper($sexe) == \Illuminate\Support\Str::upper('Homme')) selected @endif>Homme</option>
                                                    <option value="Femme"
                                                        @if (\Illuminate\Support\Str::upper($sexe) == \Illuminate\Support\Str::upper('Femme')) selected @endif>Femme</option>
                                                </select>
                                            </div>
                                        </div>

                                        <div class="row">

                                            <div class="form-group col-md-6">
                                                <label><i class="fa fa-mobile-alt"></i> Numéro de téléphone</label><br>
                                                <input type="text" id="phone" name="customer_phone"
                                                    value="{{ $telephone }}" data-input_name="téléphone"
                                                    onblur="check_error(['phone']);" required="required"
                                                    placeholder="Votre numéro de téléphone"
                                                    oninput="this.value=this.value.replace(/(?![0-9])./gmi,'')"
                                                    class="form-control" style="width: 100%;">
                                                <span id="valid-msg" class="hide" style="display: none;color: green;">✓
                                                    Valid</span>
                                                <span id="error-msg" class="hide" style="color: red;"></span>
                                            </div>


                                            <div class="form-group col-md-6">
                                                <label><i class="fa fa-envelope-open"></i> Email</label><br>
                                                <input type="text" id="email" name="email"
                                                    value="{{ $email }}" data-input_name="email"
                                                    onblur="check_error(['email']);" required="required"
                                                    class="form-control" placeholder="Votre adresse email"
                                                    style="width: 100%;">
                                            </div>

                                            <div class="form-group col-md-12">
                                                <label><i class="fa fa-map-marker"></i> Adresse de résidence</label><br>
                                                <input type="text" id="customer_adress" name="customer_adress"
                                                    class="form-control" placeholder="votre adresse de résidence"
                                                    style="width: 100%;">
                                            </div>
                                        </div>

                                        <div class="row" id="caracteritique_display_details"></div>

                                        <div class="row">
                                            <div class="col-sm-12">
                                                <label for="livraison">
                                                    <input type="checkbox" value="0" name="livraison"
                                                        id="livraison"> <span style="font-size: 12pt;"><i
                                                            class="fa fa-car"></i> se faire livrer
                                                    </span>
                                                </label>
                                            </div>
                                        </div>

                                        <div class="row activation"
                                            style="background: #eeeeee;padding-bottom: 10px;display:none"
                                            id="livraison_panel">
                                            <h6 class="col-sm-12"
                                                style="font-weight: bold;color: {{ $metas->background_color != null ? $metas->background_color : '#88b121' }};padding-bottom: 20px">
                                                <i class="fa fa-car"></i> Informations de livraison
                                            </h6>
                                            <div class="col-sm-12">
                                                <small>
                                                    <span style="color: red;">NB: </span><span>Les frais de livraison ne
                                                        sont pas inclus dans le montant à payer. Vous ne paierai cette somme
                                                        qu'a la réception de votre commande.</span>
                                                </small>
                                            </div>

                                            @if ($shopshipping != null && count($shopshipping) > 0)
                                                <div class="col-12 pt-0">
                                                    <h5> Choisissez un service de livraison</h5>
                                                    <small>Vérifiez les tarifs qui vous conviennent suivant votre zone de
                                                        localisation</small>
                                                    <br>
                                                    <small>Consulter les grilles tarifaires des services de livraison pour
                                                        choisir celles qui vous convient </small>
                                                    <br>
                                                    <small>Notez que des frais supplémentaires pourraient être facturer
                                                        suivant
                                                        l'urgence de la demande, le poids et la quantité du produit.</small>
                                                </div>
                                                <div class="col-12">
                                                    <ul class="list-shipping">
                                                        @foreach ($shopshipping as $ship)
                                                            @if ($ship->service != null)
                                                                @php $serv=$ship->service; @endphp
                                                                <li>
                                                                    @if ($serv->plan_tarifaire != null && count($serv->plan_tarifaire) > 0)
                                                                        <label for="{{ $serv->name }}service"
                                                                            style="cursor: pointer">
                                                                            <input type="radio"
                                                                                id="{{ $serv->name }}service"
                                                                                name="shipping_service"
                                                                                value="{{ $serv->slug }}">
                                                                            {{ $serv->name }}
                                                                        </label>
                                                                        <a href="#" class="tarification_shipping"
                                                                            data-myid="doc{{ $serv->name }}service"
                                                                            data-adress="{{ $serv->adress }}"
                                                                            data-country="{{ $serv->country }}"
                                                                            data-logo="{{ $serv->logo }}"
                                                                            data-name="{{ $serv->name }}"
                                                                            data-email="{{ $serv->email }}"
                                                                            data-tel="{{ $serv->tel }}"
                                                                            style="font-size: 9pt;color: green;font-weight: 200;font-style: italic">
                                                                            <i class="fa fa-exclamation-circle"></i>
                                                                            details </a>
                                                                        <div id="doc{{ $serv->name }}service"
                                                                            style="display: none">
                                                                            @foreach ($serv->plan_tarifaire as $plan)
                                                                                @php $pl=json_decode($plan->countries); @endphp
                                                                                <a href="{{ $plan->filename }}"
                                                                                    class="btn btn-outline-primary btn-sm mt-2"><i
                                                                                        class="fa fa-file-pdf-o"></i>
                                                                                    grille-tarifaire-
                                                                                    @for ($i = 0; $i < count($pl); $i++)
                                                                                        {{ $pl[$i] }}
                                                                                    @endfor
                                                                                </a>
                                                                                &nbsp; &nbsp;
                                                                            @endforeach
                                                                        </div>
                                                                    @endif
                                                                </li>
                                                            @endif
                                                        @endforeach
                                                        <li style="cursor: pointer">
                                                            <label for="nothing">
                                                                <input type="radio" name="shipping_service"
                                                                    id="nothing" value="aucun" checked> Aucun
                                                            </label>
                                                        </li>
                                                    </ul>
                                                </div>
                                                <hr>
                                            @endif
                                            <br><br>
                                            <div class="form-group col-sm-12">
                                                <label><i class="fa fa-mobile-alt"> </i> <i class="fa fa-car"></i> Numéro
                                                    de
                                                    téléphone du recepteur de la livraison</label><br>
                                                <input type="text" id="phone2" name="shipping_phone"
                                                    value="{{ $telephone }}" class="form-control"
                                                    oninput="this.value=this.value.replace(/(?![0-9])./gmi,'')"
                                                    placeholder="Votre numéro de téléphone de livraison"
                                                    style="width: 100%;">
                                                <span id="valid-msg2" class="hide"
                                                    style="display: none;color: green;">✓
                                                    Valid</span>
                                                <span id="error-msg2" class="hide" style="color: red;"></span>
                                            </div>
                                            <div class="form-group col-sm-12">
                                                <label><i class="fa fa-map-marker"></i> <i class="fa fa-car"></i> Adresse
                                                    de
                                                    livraison</label><br>
                                                <textarea class="form-control" name="shipping_adress" rows="5" style="width: 100%"
                                                    placeholder="Departement - ville - quartier - addresse"></textarea>
                                            </div>
                                            <div id="type-transaction"></div>
                                        </div>
                                    </div>
                                    <div class="row">
                                        <div class="col-sm-12 text-right" style="margin-top: 20px;">
                                            <button type="submit" class="btn btn-primary" id="valid_command"
                                                style="border-radius: 0px;cursor: pointer;">Effectuer le paiement</button>
                                            <button type="button" class="btn btn-default" data-dismiss="modal"
                                                style="border-radius: 0px;cursor: pointer;">Fermer</button>
                                        </div>
                                    </div>
                                </div>
                            </div>

                        </div>
                    </div>


                </form>
            @else
                <div class="col-xs-12 col-lg-12 text-center" style="margin-top: 10%">Panier vide</div>
            @endif
        </div>
    </div>

    <div class="modal fade" data-backdrop="static" data-keyboard="false" id="shippingBoxDetails" tabindex="-1"
        role="dialog" style="background: rgba(0,0,0,0.9)">
        <div class="modal-dialog modal-md modal-dialog-centered " role="document">
            <div class="modal-content" style="background: #fff;border-radius: 0">
                <div class="modal-body">
                    <div class="col-lg-12 col-md-12">
                        <div class="row" style="color: #373737">
                            <div class="col-lg-12 col-md-12 pt-5">
                                <div class="col-12 form-group text-center">
                                    <img id="serviceLogo" src="" alt="" width="200px">
                                </div>
                                <h2 class="col-12 text-center form-group" id="serviceName"></h2>
                                <div class="row">
                                    <div class="col-6 form-group">
                                        <label for="serviceEmail">Email</label>
                                        <input type="text" class="form-control" disabled id="serviceEmail">
                                    </div>
                                    <div class="col-6 form-group">
                                        <label for="serviceTel">Téléphone</label>
                                        <input type="text" class="form-control" disabled id="serviceTel">
                                    </div>
                                    <div class="col-6 form-group">
                                        <label for="serviceCountry">Pays</label>
                                        <input type="text" class="form-control" disabled id="serviceCountry">
                                    </div>
                                    <div class="col-12 form-group">
                                        <label for="serviceAdress">Adresse</label>
                                        <input type="text" class="form-control" disabled id="serviceAdress">
                                    </div>
                                    <h5 class="col-12">Grille tarifaire</h5>
                                    <div class="col-12 form-group" id="grilleBox"></div>
                                    <div class="col-12 from-group text-center">
                                        <button type="button" value="fermer" style="cursor:pointer;"
                                            class="btn btn-md btn-default closeTarifiaction">Fermer</button>
                                    </div>
                                </div>

                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

@endsection
@section('script')
    <script src="https://cdn.kkiapay.me/k.js"></script>
    <script src="{{ asset('js/cart_custom.js') }}"></script>
    <script src="{{ asset('plugin/telephone_input/build/js/intlTelInput.js') }}"></script>
    <script>
        $(document).on('click', '.closeTarifiaction', function() {
            $('#shippingBoxDetails').modal('hide');
            setTimeout(function() {
                $('#PersonnalDataModal').modal('show');
            }, 500)
        })
        $(document).on('click', '.tarification_shipping', function() {
            let btn = $(this),
                email = btn.data('email'),
                name = btn.data('name'),
                tel = btn.data('tel'),
                adress = btn.data('adress'),
                country = btn.data('country'),
                logo = btn.data('logo'),
                grille = btn.data('myid'),
                content = $('#' + grille).html();
            $('#serviceName').text(name);
            $('#serviceEmail').val(email);
            $('#serviceAdress').val(adress);
            $('#serviceTel').val(tel);
            $('#serviceCountry').val(country);
            $('#serviceLogo').attr('src', logo);
            $('#grilleBox').html(content);
            $('#PersonnalDataModal').modal('hide');
            setTimeout(function() {
                $('#shippingBoxDetails').modal('show');
            }, 500)
        })
        $(document).on('click', '#livraison', function() {
            $('#livraison_panel').toggle('activation');
        })
        $(document).on('click', '#paid_now', function() {
            $('#valid_command').attr('data-paid', 1);
            $('#type-transaction').append('<input type="hidden" value="1" name="command_type">')
            $('#echellonset').remove()
            $('#PersonnalDataModal').modal('show');
            $('#valid_command').html('PAYER MAINTENANT').css('background', '#10e589').css('color', '#fff').css(
                'border', 'none');
        })

        @if (\Illuminate\Support\Facades\Auth::check())
            $(document).on('click', '#paid_echellon', function() {
                $('#valid_command').attr('data-paid', 1);
                $('#type-transaction').append('<input type="hidden" value="1" name="command_type">')
                $('#type-transaction').append(
                    '<input id="echellonset" type="hidden" value="1" name="echellonPaiement">')
                $('#PersonnalDataModal').modal('show');
                $('#valid_command').html('PAYER LA PREMIERE PARTIE').css('background', '#10a2e5').css('color',
                    '#fff').css('border', 'none');
            })
        @else
            $(document).on('click', '#paid_echellon', function() {
                $('#BoutiqueAuthModal').modal('show');
            })
        @endif
        $(document).on('click', '#paid_after', function() {
            $('#valid_command').attr('data-paid', 0);
            $('#type-transaction').append('<input type="hidden" value="0" name="command_type">');
            $('#valid_command').html('VALIDER LA COMMANDE').css('background', '#ffc107').css('color', '#000000')
                .css('border', 'none');
            $('#echellonset').remove()
            $('#PersonnalDataModal').modal('show');
        })

        var input = document.querySelector("#phone");
        var input2 = document.querySelector("#phone2");
        errorMsg = document.querySelector("#error-msg"),
            validMsg = document.querySelector("#valid-msg");
        errorMsg2 = document.querySelector("#error-msg2"),
            validMsg2 = document.querySelector("#valid-msg2");

        // here, the index maps to the error code returned from getValidationError - see readme
        var errorMap = ["Numéro invalide", "Code du pays invalide", "Trop court", "Trop long", "Numero Invalide"];

        var iti = window.intlTelInput(input, {
            // allowDropdown: false,
            // autoHideDialCode: false,
            autoPlaceholder: "polite",
            // dropdownContainer: document.body,
            // excludeCountries: ["us"],
            // formatOnDisplay: false,
            geoIpLookup: function(callback) {
                $.get("http://ipinfo.io", function() {}, "jsonp").always(function(resp) {
                    var countryCode = (resp && resp.country) ? resp.country : "";
                    callback(countryCode);
                });
            },
            hiddenInput: "full_number",
            //initialCountry: "auto",
            // localizedCountries: { 'de': 'Deutschland' },
            nationalMode: true,
            // onlyCountries: ['us', 'gb', 'ch', 'ca', 'do'],
            // placeholderNumberType: "MOBILE",
            preferredCountries: ['BJ', 'BF', 'CI', 'GN', 'ML', 'NE', 'SN', 'TG'],
            separateDialCode: true,
            utilsScript: "{{ asset('plugin/telephone_input/build/js/utils.js') }}",
        });

        var reset = function() {
            input.classList.remove("error");
            errorMsg.innerHTML = "";
            errorMsg.classList.add("hide");
            validMsg.classList.add("hide");
        };

        // on blur: validate
        input.addEventListener('blur', function() {
            reset();
            if (input.value.trim()) {
                if (iti.isValidNumber()) {
                    validMsg.classList.remove("hide");
                    var countryData = iti.getSelectedCountryData();
                    var number = '+' + countryData.dialCode + $('#phone').val();
                    $('#phone').val(number);

                } else {
                    input.classList.add("error");
                    var errorCode = iti.getValidationError();
                    errorMsg.innerHTML = errorMap[errorCode];
                    errorMsg.classList.remove("hide");
                }
            }
        });

        // on keyup / change flag: reset
        input.addEventListener('change', reset);
        input.addEventListener('keyup', reset);
        $(document).on('change', '#phone', function() {

            var countryData = iti.getSelectedCountryData();
            var number = '+' + countryData.dialCode + $('#phone').val();
            $('#telInput').val(number);

        });
        // phone 2
        // here, the index maps to the error code returned from getValidationError - see readme
        var errorMap2 = ["Numéro invalide", "Code du pays invalide", "Trop court", "Trop long", "Numero Invalide"];

        var iti2 = window.intlTelInput(input2, {
            // allowDropdown: false,
            // autoHideDialCode: false,
            autoPlaceholder: "polite",
            // dropdownContainer: document.body,
            // excludeCountries: ["us"],
            // formatOnDisplay: false,
            geoIpLookup: function(callback) {
                $.get("http://ipinfo.io", function() {}, "jsonp").always(function(resp) {
                    var countryCode = (resp && resp.country) ? resp.country : "";
                    callback(countryCode);
                });
            },
            hiddenInput: "full_number2",
            //initialCountry: "auto",
            // localizedCountries: { 'de': 'Deutschland' },
            nationalMode: true,
            // onlyCountries: ['us', 'gb', 'ch', 'ca', 'do'],
            // placeholderNumberType: "MOBILE",
            preferredCountries: ['BJ', 'BF', 'CI', 'GN', 'ML', 'NE', 'SN', 'TG'],
            separateDialCode: true,
            utilsScript: "{{ asset('plugin/telephone_input/build/js/utils.js') }}",
        });

        var reset = function() {
            input2.classList.remove("error");
            errorMsg2.innerHTML = "";
            errorMsg2.classList.add("hide");
            validMsg2.classList.add("hide");
        };

        // on blur: validate
        input2.addEventListener('blur', function() {
            reset();
            if (input2.value.trim()) {
                if (iti2.isValidNumber()) {
                    validMsg2.classList.remove("hide");
                    var countryData = iti2.getSelectedCountryData();
                    var number = '+' + countryData.dialCode + $('#phone2').val();
                    $('#phone2').val(number);
                } else {
                    input2.classList.add("error");
                    var errorCode = iti2.getValidationError();
                    errorMsg2.innerHTML = errorMap[errorCode];
                    errorMsg2.classList.remove("hide");
                }
            }
        });

        // on keyup / change flag: reset
        input2.addEventListener('change', reset);
        input2.addEventListener('keyup', reset);
        $(document).on('change', '#phone2', function() {
            var countryData = iti2.getSelectedCountryData();
            var number = '+' + countryData.dialCode + $('#phone2').val();
            $('#telInput2').val(number);

        });
    </script>
@endsection