@extends('dashboard.Boutique.Boutique_template.layouts.defaultLayout')

@section('css')
    @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{

        }
        .card-1:hover {
            box-shadow: 0px 1px 5px rgba(0,0,0,0.5);
            background: #f1f1fa;
        }
    </style>
    @endsection


@section('content')
    <div  style="background: url('{{asset('images/shop_background.jpg')}}') center no-repeat;background-size: cover;">
        <div class="col-lg-12 text-center" style="padding: 100px 10px ;font-weight: bold;font-size: 15pt;background:rgba(0,0,0,0.5);color: #fff">
            Détails des commandes effectuées
        </div>
    </div>

    <!-- Cart -->
    <div class="cart_section">

            @if(!\Illuminate\Support\Facades\Session::has('user') && isset($status))
                <div class="col-sm-12 text-center">
                   <p> Inscrivez vous maintenant pour sauvegarder vos commandes ou connectez vous pour visualiser toutes vos commandes.
                   </p>
                       <a href="{{route('register')}}" class="btn btn-warning"  style="margin-top: 2%;">s'inscrire</a>
                    <a href="{{route('login')}}" class="btn btn-primary" style="margin-top: 2%;">J'ai déjà un compte</a>
                </div>
                @endif

            <div class="row">
                <div class="col-lg-8">
                    <div class="cart_container">
                       @if(!isset($status) || $status=="SUCCESS")
                            @php $total=0; $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
                                        <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;"> <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;
                                            &nbsp;@if($cmd->paiement_type=='paid_now')
                                                @if($cmd->statut_paiement==true)
                                                    <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
                                                    @else
                                                    <a style="color: #fff;cursor: pointer;border-radius: 0px;" data-price="{{$cmd->total_price}}" 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="Effectuer le paiement maintenant" class="badge badge-primary paiement-initalise"> payer maintenant</a>
                                                @endif
                                            @else
                                                @if($cmd->statut_shipping==false)
                                                    <span class="badge badge-warning">en attente livraison pour paiement</span>
                                                @else
                                                    <span class="badge badge-success">payer et livré : {{$cmd->updated_at->format('d / m / y à H:i')}}</span>
                                                @endif
                                                @if(isset(\Illuminate\Support\Facades\Session::get('boutique')['paiement_and_livraison']) && \Illuminate\Support\Facades\Session::get('boutique')['paiement_and_livraison']==true)
                                                    <a style="color: #fff;cursor: pointer;border-radius: 0px;"  data-price="{{$cmd->total_price}}" 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="Effectuer le paiement maintenant" class="badge badge-primary paiement-initalise"> payer maintenant</a>
                                                @endif
                                            @endif<h6>Ref: {{$cmd->reference}}</h6> </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>
                                    </div>
                                @endforeach
                                            @endif
                                @endforeach
                                    @endif
                                    @endif
                                @endforeach
                                    @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 effectué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
                    </div>
                </div>
                <div class="order_total col-lg-4 col-xs-12" style="background: #0b2e13;color:#fff;margin-top: 50px;">
                    <div class="order_total_content text-center">
                        <div class="order_total_title" style="color:#fff">Total Achat effectués:</div>
                        <div class="order_total_amount price_total">{{$total}} {{\Illuminate\Support\Facades\Session::get('boutique')['meta']['currency_client']}}</div>
                    </div>
                </div>
            </div>
        </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>



@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).ready(function(){
        })


        $(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