@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%;
        }
        .card_button{
            position:absolute; 
            background: #f8f8f8; 
            padding: 70px 50px;
            color: #000;
            width: 100%;
            font-size: 10pt;
            font-weight: bold
        }

        .card_button:hover{
            background: #dff3d1;
            color: #000
        }
        .commande_number{
            color: green;
            font-size: 13pt;
        }
    </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="row">

            <!-- 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-12 mb-5">
                        <div class="row">
                            <div class="col-lg-4" style="height: 200px">
                                <div class="col-lg-12">
                                    <a 
                                    href="{{route('commande.user',\Illuminate\Support\Facades\Session::get('boutique')['nom_boutique'])}}/echelonner"
                                     class="text-center card_button">
                                       Mes Commandes en paiement echelonné <br>
                                       <span class="commande_number">({{ $commande_echeloner }})</span>
                                    </a>
                                </div>
                            </div>

                            <div class="col-lg-4" style="height: 200px">
                                <div class="col-lg-12">
                                    <a 
                                    href="{{route('commande.user',\Illuminate\Support\Facades\Session::get('boutique')['nom_boutique'])}}/en_cours"
                                    class="text-center card_button">
                                       Mes Commandes en cours <br>
                                       <span class="commande_number"> ({{ $commande_en_cours }})</span>
                                    </a>
                                </div>
                            </div>

                            <div class="col-lg-4" style="height: 200px">
                                <div class="col-lg-12">
                                    <a 
                                    href="{{route('commande.user',\Illuminate\Support\Facades\Session::get('boutique')['nom_boutique'])}}/livrer"
                                    class="text-center card_button">
                                       Mes Commandes terminées et livrées <br>
                                      <span class="commande_number"> ({{ $commande_valides }})</span>
                                    </a>
                                </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).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