@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.styles.cart_styles')
    @include('dashboard.Boutique.Boutique_template.styles.cart_responsive')
    <link rel="stylesheet" href="{{asset('plugin/telephone_input/build/css/intlTelInput.css')}}">

    <style>

        .card-1:hover {
            box-shadow: 0px 1px 5px rgba(0, 0, 0, 0.5);
            background: #f1f1fa;
        }
        .nav-tabs{
            display: inline-block;
        }
        .nav-tabs a{
            padding: 15px 15px;
            background: #ddd;
        }.nav-tabs li{
            padding: 15px 0px;
            background: #ddd;
        }

        .nav-tabs a.active{
            background: green;
            color: #fff;
        }
        .nav-tabs{
            background: #f3f0f0;
            width: 100%;
        }
        .paginate{
            display: flex !important;
            float: unset !important;
            text-align: center;
        }
        .page-item.active .page-link{
            background-color: #086d08;
            border-color: #086d08;
        }
    </style>

@endsection
@section('content')
@php $total=0; @endphp
    @if(!isset($status) || $status=="SUCCESS")
        @php  $helpers=new \App\Http\Controllers\HelperController(); @endphp
        @if(isset($commandes))
            @if(count($commandes)>0)
                @foreach($commandes as $key => $cmd)
                    @if($cmd->commande_article!=null)
                        @if(count($cmd->commande_article)>0)
                            @php
                                $price=$cmd->total_price;
                                if($cmd->currency!==\Illuminate\Support\Facades\Session::get('boutique')['meta']['currency_client'])
                                $price=$helpers->convertCurrency($cmd->currency,\Illuminate\Support\Facades\Session::get('boutique')['meta']['currency_client'],$price);
                                $total+=$price;
                            @endphp
                            @endif
                    @endif
                @endforeach
            @endif
        @endif
    @endif
    @include("dashboard.Boutique.Boutique_template.layouts.grocery.banner",["page_title"=> "Détails des commandes effectuées","totalAchat"=> $total." ".\Illuminate\Support\Facades\Session::get('boutique')['meta']['currency_client'],])

    <div id="contact-us-page" class="page-content page-content--centered container">
        <div class="cart_section">
            <div class="col-lg-12 pl-0 ml-0">
                <a href="{{route('commande.user',\Illuminate\Support\Facades\Session::get('boutique')['nom_boutique'])}}" class="btn btn-sm btn-light">
                    <i class="mdi mdi-backspace-outline"></i>
                    Retour</a>
            </div>
            <h2>Liste des commandes en paiement echelonner</h2>
                        @php $total=0; $helpers=new \App\Http\Controllers\HelperController(); @endphp
                        @if(isset(\Illuminate\Support\Facades\Session::get('boutique')['paiement_echelonner']) && \Illuminate\Support\Facades\Session::get('boutique')['paiement_echelonner']!=null)
                                @if(!isset($status) || $status=="SUCCESS")
                                        @if(isset($commandes_datas))
                                            @if(count($commandes_datas)>0)
                                            <h3>Afficher : {{ count($commandes_datas) }} / {{ $commandes_datas->total()}}</h3>
                                                @foreach($commandes_datas as $key => $cmd)
                                                    @if($cmd->commande_article!=null)
                                                        @if(count($cmd->commande_article)>0)
                                                            @php
                                                                $price=$cmd->total_price;
                                                                if($cmd->currency!==\Illuminate\Support\Facades\Session::get('boutique')['meta']['currency_client'])
                                                                $price=$helpers->convertCurrency($cmd->currency,\Illuminate\Support\Facades\Session::get('boutique')['meta']['currency_client'],$price);
                                                                $total+=$price;
                                                            @endphp
                                                            <div class="col-sm-12 mt-5 command-list card-1"
                                                                 data-slug="{{$cmd->slug}}"
                                                                 style=" padding: 2%;border: solid 1px #e8e8e8;border-top: 5px solid #1d2124;">
                                                                <h5 class="mt-3 pt-0">Ref: {{$cmd->reference}}</h5>
                                                        <span style="cursor:pointer;" class="float-right"><i
                                                                    class="fa fa-arrow-alt-circle-down"></i> détails</span>
                                                                <span
                                                                        class="text-right">{{$cmd->created_at->format('d / m / y à H:i')}}</span>&nbsp;
                                                                @if($cmd->paiement_type=='paid_echellon')
                                                                    <span
                                                                            class="badge badge-success">paiement échelonné ({{\Illuminate\Support\Facades\Session::get('boutique')['paiement_echelonner']['max']}})
                                                            </span>
                                                                    @if($cmd->montant_payer>=$cmd->total_price)
                                                                        <span
                                                                                class="badge badge-success">paiement effectué
                                                                </span>
                                                                        &nbsp;&nbsp;
                                                                        @if($cmd->shipping==true)
                                                                            @if($cmd->statut_shipping==false)
                                                                                <span class="badge badge-warning">en attente de livraison</span>
                                                                            @else
                                                                                <span class="badge badge-success"> payer et livré : {{$cmd->updated_at->format('d / m / y à H:i')}}</span>
                                                                            @endif
                                                                        @else
                                                                            <a style="color: #fff;cursor: pointer;border-radius: 0px;"
                                                                               data-url="{{route('shipping_after_command_make')}}"
                                                                               data-home="{{route('products.check_paiment',\Illuminate\Support\Facades\Session::get('boutique')['nom_boutique'])}}"
                                                                               data-command="{{$cmd->slug}}"
                                                                               class="badge badge-primary shipping-initialize">Faire
                                                                                une demande de livraison</a>
                                                                        @endif
                                                                    @endif
                                                                @endif
                                                                <div class="mt-3">
                                                                    <span class="badge badge-dark">Total commande : <strong>{{$cmd->total_wr}} {{\Illuminate\Support\Facades\Session::get('boutique')['meta']['currency_client']}} </strong></span> &nbsp;&nbsp;&nbsp;
                                                                    @if(isset($cmd->code_promo_reduction) && $cmd->code_promo_reduction!=null)
                                                                        <span class="badge badge-dark">Code Réduction : <strong>{{$cmd->code_promo_reduction}}% </strong></span> &nbsp;&nbsp;&nbsp;
                                                                    @endif
                                                                    @if(isset($cmd->montant_global_code_promo) && $cmd->montant_global_code_promo>0)
                                                                        <span class="badge badge-dark">Code Réduction global : <strong>{{$cmd->montant_global_code_promo}}% </strong></span> &nbsp;&nbsp;&nbsp;
                                                                    @endif
                                                                    <span class="badge badge-dark">Total dû : <strong>{{$cmd->total_price > $cmd->montant_payer ? $cmd->total_price - $cmd->montant_payer : 0}} {{\Illuminate\Support\Facades\Session::get('boutique')['meta']['currency_client']}} </strong></span> &nbsp;&nbsp;&nbsp;
                                                                    <span class="badge badge-info">Total payer : <strong>{{$cmd->montant_payer}} {{\Illuminate\Support\Facades\Session::get('boutique')['meta']['currency_client']}}</strong></span>
                                                                </div>

                                                                @if($cmd->montant_payer<$cmd->total_price)
                                                                <div class="col-lg-12">
                                                                 <div class="mt-3 row">
                                                                     @php
                                                                        $total_paiement = \Illuminate\Support\Facades\Session::get('boutique')['paiement_echelonner']['max'];
                                                                        $unit =  $cmd->total_price / $total_paiement;
                                                                        $remain = $cmd->total_price - $cmd->montant_payer;
                                                                        $numbers = ceil($remain / $unit);
                                                                     @endphp
                                                                     @if($numbers > 0)
                                                                         <div class="col-lg-3 pl-0">

                                                                             <label for="nombre_payment pl-3"> <small> Choisir le nombre de paiement (Reste à payer X{{$numbers}})</small></label>
                                                                             <select name="echelonner_number" id="nombre_payment{{$cmd->slug}}" class="form-control ml-0">
                                                                                 @for($i=1;$i<=$numbers;$i++)
                                                                                    <option value="{{$i}}">{{$i}}</option>
                                                                                 @endfor
                                                                             </select>
                                                                         </div>
                                                                    <div class="col-lg-3 pt-4 pl-0">
                                                                        <button style="color: #fff;cursor: pointer;border-radius: 6px;border: none;height: 33px"
                                                                                data-price="{{($cmd->total_price/\Illuminate\Support\Facades\Session::get('boutique')['paiement_echelonner']['max'])+1}}"
                                                                                data-url="{{route('paid_after_check_fail')}}"
                                                                                data-home="{{route('products.check_paiment',\Illuminate\Support\Facades\Session::get('boutique')['nom_boutique'])}}"
                                                                                data-command="{{$cmd->slug}}"
                                                                                title="Continuer le paiement"
                                                                                data-slug="nombre_payment{{$cmd->slug}}"
                                                                                class="btn btn-primary btn-sm paiement-initalise mt-2"> Payer à nouveau</button>
                                                                    </div>
                                                                 </div>

                                                                     @endif
                                                                 </div>
                                                                @endif
                                                            </div>
                                                            @foreach($cmd->commande_article as $key => $art)
                                                                <div class="command{{$cmd->slug}}" style="display: none;">
                                                                    @if($art->article!=null)
                                                                        @foreach($art->article as $key => $article)
                                                                            <div class="cart_items">
                                                                                <ul class="cart_list">
                                                                                    <li class="cart_item clearfix">
                                                                                        <div
                                                                                                class="cart_item_image text-center">
                                                                                            @foreach($images as $image)
                                                                                                @if($image->key==$article->slug)
                                                                                                    <img
                                                                                                            src="{{$image->filename}}"
                                                                                                            alt="{{$article->name}}"
                                                                                                            style="width: 150px">
                                                                                                    @break
                                                                                                @endif
                                                                                            @endforeach
                                                                                        </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->slug}}"
                                                                                                       name="article_slug[]">
                                                                                                <div
                                                                                                        class="cart_item_title text-center">
                                                                                                    Name
                                                                                                </div>
                                                                                                <div class="cart_item_text"
                                                                                                     style="font-size: 10pt">{{\Illuminate\Support\Str::limit($article->name,17)}}</div>
                                                                                            </div>
                                                                                            <div
                                                                                                    class="cart_item_quantity cart_info_col">
                                                                                                <div
                                                                                                        class="cart_item_title text-center">
                                                                                                    Quantité
                                                                                                </div>
                                                                                                <div
                                                                                                        class="cart_item_text">{{$art->quantity}}</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 badge badge-warning"
                                                                                                        style="font-size: 10pt">{{$art->price}} {{$cmd->currency}}</div>
                                                                                            </div>
                                                                                            <div
                                                                                                    class="cart_item_total cart_info_col">
                                                                                                <div
                                                                                                        class="cart_item_title text-center">
                                                                                                    Total
                                                                                                </div>
                                                                                                <div
                                                                                                        class="cart_item_text badge badge-primary"
                                                                                                        style="font-size: 10pt;color: #fff;">{{$art->total_price}} {{$cmd->currency}}</div>
                                                                                            </div>
                                                                                        </div>
                                                                                    </li>
                                                                                </ul>
                                                                            </div>
                                                                            <div class="col-sm-12"
                                                                                 style="padding: 2%;border: solid 1px #e8e8e8;box-shadow: 0px 1px 5px rgba(0,0,0,0.1);border-bottom: 1px solid #086d08;">
                                                                                <div>
                                                                                    @if($art->choice!="[]")
                                                                                        <h6>Préférences </h6>
                                                                                        @php $choix=[]; $choix=json_decode($art->choice,true); @endphp
                                                                                        @if(isset($choix))
                                                                                            @foreach($choix as $key =>$value)
                                                                                                <span>{{$key}} :</span>
                                                                                                @if(array_key_exists($key,$choix) && is_array($choix[$key]))
                                                                                                    @for($i=0;$i<count($choix[$key]);$i++)
                                                                                                        <span class="badge badge-light"> {{$choix[$key][$i]}}</span>
                                                                                                        &nbsp;&nbsp;
                                                                                                    @endfor
                                                                                                @endif
                                                                                                &nbsp;&nbsp; <br>
                                                                                            @endforeach
                                                                                            <hr>
                                                                                        @endif
                                                                                    @endif
                                                                                </div>
                                                                                <span style="font-weight: bold;">Exigence</span><br>
                                                                                {{$art->specificity}}
                                                                            </div>
                                                                
                                                                        @endforeach
                                                                    @endif
                                                                </div>
                                                            @endforeach
                                                        @endif
                                                    @endif
                                                @endforeach

                                                <div class="col-lg-12 text-center pl-0 ml-0 mt-5 mb-5">
                                                    {{ $commandes_datas->links() }}
                                                </div>
                                            @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>
                                                    Aucune commande trouvée
                                                </div>
                                            @endif
                                        @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>
                                                Aucune commande trouvée
                                            </div>
                                        @endif
                                    <!-- Order Total -->
                                    @else
                                        <div class="col-sm-12 text-center" style="padding: 10%;color: #b40100;font-size: 14pt">
                                            <img data-src="{{asset('images/emptycart.png')}}" alt="empty cart" width="150px">
                                            <br>
                                            <span>Aucune commande disponible </span>
                                        </div>
                                    @endif
                           @endif
            </div>
            <div id="LivraisonDataModal" class="modal fade">
                <div class="modal-lg modal-dialog">
                    <form method="post" id="shipping_form" action="{{route('shipping_after_command_make')}}"
                          enctype="multipart/form-data">
                        @csrf
                        <div class="modal-content"
                             style="border-radius: 0px;background: #ffffff;border-right: 5px solid #0e8ce4;">
                            <div class="modal-header" style="background: #0e8ce4;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 demande <span id="name_details_header"></span></h4>

                            </div>
                            <div class="modal-body">
                                <div id="shipping_detail">
                                    <div class="row" style="padding-top: 30px;background: #eeeeee;padding-bottom: 10px;"
                                         id="livraison_panel">
                                        <h6 class="col-sm-12"
                                            style="font-weight: bold;color: #0e8ce4;padding-bottom: 20px"><i
                                                class="fa fa-car"></i> Informations de livraison</h6>
                                        <div>
                                            <small class="col-sm-12">
                                                <span style="color: red;">NB: </span><span>Vous ne devez payer le livreur qu'une fois votre commande reçue et valider.</span>
                                            </small>
                                        </div>
                                        <br><br>
                                        <div class="form-group col-sm-12">
                                            <label> Numéro de téléphone du recepteur de la livraison</label><br>
                                            <input type="text" id="phone" name="shipping_phone" value=""
                                                   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-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-sm-12">
                                            <label> Adresse de livraison</label><br>
                                            <textarea class="form-control" name="shipping_adress" id="shipping_adress"
                                                      rows="5" style="width: 100%"></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="demande_livraison"
                                                style="border-radius: 0px;cursor: pointer;">Faire la demande
                                        </button>
                                        <button type="button" class="btn btn-default" data-dismiss="modal"
                                                style="border-radius: 0px;cursor: pointer;">Fermer
                                        </button>
                                    </div>
                                </div>
                            </div>
                        </div>

                    </form>
                </div>
            </div>
    </div>
@endsection

@section('script')
    <script src="{{asset('js/cart_custom.js')}}"></script>

    <script src="{{asset('plugin/telephone_input/build/js/intlTelInput.js')}}"></script>
    <script>
        $(document).ready(function(){
            $(".nav-tabs a").click(function(){
                $(this).tab('show');
            });
        });

        $(document).on('click', '.shipping-initialize', function () {
            let btn = $(this);
            let command = btn.data('command');
            $('#type-transaction').append('<input type="hidden" value="' + command + '" name="slug">');
            $('#LivraisonDataModal').modal('show');
        })

        var input = document.querySelector("#phone");
        errorMsg = document.querySelector("#error-msg"),
            validMsg = document.querySelector("#valid-msg");

        // 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);

        });

        $(document).on('click', '.command-list', function () {
            let $slug = $(this).data('slug');
            let btn = $('.command' + $slug);
            if (btn.hasClass('active')) {
                btn.slideUp().removeClass('active');
            } else {
                btn.slideDown().addClass('active');
            }
        });
    </script>

    @if(session("paiement"))
        <script>
            $.notify('{{session('paiement')}}', 'paiement')
            $.Zebra_Dialog('{{session('paiement')}}.', {
                'type': 'question',
                'title': 'Commande',
                'buttons': ['Annuler', 'Mes commandes', 'Continuer achats'],
                'onClose': function (caption) {
                    if (caption == 'Mes commandes') {
                        location.href = location.origin + '/{{\Illuminate\Support\Facades\Session::get('boutique')['nom_boutique']}}/liste/commande';
                    } else if (caption == 'Continuer achats') {
                        location.href = location.origin + '/{{\Illuminate\Support\Facades\Session::get('boutique')['nom_boutique']}}';
                    }
                }
            });
        </script>
    @elseif(session("success"))
        <script>
            $.notify('{{session('success')}}', 'success')
        </script>
    @elseif(session('error'))
        <script>
            $.notify('{{session('error')}}', 'error')
        </script>
    @endif
@endsection