@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')
    @include('dashboard.Boutique.Boutique_template.styles.modern_order_styles')
    <link rel="stylesheet" href="{{asset('plugin/telephone_input/build/css/intlTelInput.css')}}">
@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"=> "Commandes en paiement échelonné","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">
            <!-- Back Button -->
            <a href="{{route('commande.user',\Illuminate\Support\Facades\Session::get('boutique')['nom_boutique'])}}" class="back-btn">
                <i class="mdi mdi-arrow-left"></i>
                Retour à mes commandes
            </a>

            <!-- Page Title -->
            <h2 class="page-title">
                <i class="fa fa-calendar-check"></i>
                Paiement Échelonné
            </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)
                            <!-- Order Count -->
                            <div class="order-count">
                                <i class="fa fa-list"></i>
                                <span>Affichage : {{ count($commandes_datas) }} / {{ $commandes_datas->total()}} commandes</span>
                            </div>

                            @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

                                        <!-- Order Card -->
                                        <div class="order-card command-list" data-slug="{{$cmd->slug}}">
                                            <!-- Order Header -->
                                            <div class="order-header">
                                                <div>
                                                    <h5 class="order-reference">
                                                        <i class="fa fa-receipt"></i>
                                                        Ref: {{$cmd->reference}}
                                                    </h5>
                                                    <div class="order-date">
                                                        <i class="fa fa-calendar"></i>
                                                        {{$cmd->created_at->format('d/m/Y à H:i')}}
                                                    </div>
                                                </div>
                                                <span class="details-toggle">
                                                    <i class="fa fa-chevron-down"></i>
                                                    Voir détails
                                                </span>
                                            </div>

                                            <!-- Status Badges -->
                                            <div class="status-badges">
                                                @if($cmd->paiement_type=='paid_echellon')
                                                    <span class="status-badge warning">
                                                        <i class="fa fa-calendar-check"></i>
                                                        Paiement échelonné ({{\Illuminate\Support\Facades\Session::get('boutique')['paiement_echelonner']['max']}})
                                                    </span>
                                                    @if($cmd->montant_payer>=$cmd->total_price)
                                                        <span class="status-badge success">
                                                            <i class="fa fa-check-circle"></i>
                                                            Paiement effectué
                                                        </span>
                                                        @if($cmd->shipping==true)
                                                            @if($cmd->statut_shipping==false)
                                                                <span class="status-badge warning">
                                                                    <i class="fa fa-truck"></i>
                                                                    En attente de livraison
                                                                </span>
                                                            @else
                                                                <span class="status-badge success">
                                                                    <i class="fa fa-check-double"></i>
                                                                    Livré le {{$cmd->updated_at->format('d/m/Y à H:i')}}
                                                                </span>
                                                            @endif
                                                        @endif
                                                    @endif
                                                @endif
                                            </div>

                                            <!-- Price Summary -->
                                            <div class="price-summary">
                                                <div class="price-item">
                                                    <span class="price-label">
                                                        <i class="fa fa-shopping-cart"></i>
                                                        Total commande
                                                    </span>
                                                    <span class="price-value">{{$cmd->total_wr}} {{\Illuminate\Support\Facades\Session::get('boutique')['meta']['currency_client']}}</span>
                                                </div>
                                                @if(isset($cmd->code_promo_reduction) && $cmd->code_promo_reduction!=null)
                                                    <div class="price-item">
                                                        <span class="price-label">
                                                            <i class="fa fa-tag"></i>
                                                            Code réduction
                                                        </span>
                                                        <span class="price-value">{{$cmd->code_promo_reduction}}%</span>
                                                    </div>
                                                @endif
                                                @if(isset($cmd->montant_global_code_promo) && $cmd->montant_global_code_promo>0)
                                                    <div class="price-item">
                                                        <span class="price-label">
                                                            <i class="fa fa-tags"></i>
                                                            Code réduction global
                                                        </span>
                                                        <span class="price-value">{{$cmd->montant_global_code_promo}}%</span>
                                                    </div>
                                                @endif
                                                <div class="price-item">
                                                    <span class="price-label">
                                                        <i class="fa fa-minus-circle"></i>
                                                        Total dû
                                                    </span>
                                                    <span class="price-value">{{$cmd->total_price > $cmd->montant_payer ? $cmd->total_price - $cmd->montant_payer : 0}} {{\Illuminate\Support\Facades\Session::get('boutique')['meta']['currency_client']}}</span>
                                                </div>
                                                <div class="price-item">
                                                    <span class="price-label">
                                                        <i class="fa fa-check-circle"></i>
                                                        Total payé
                                                    </span>
                                                    <span class="price-value">{{$cmd->montant_payer}} {{\Illuminate\Support\Facades\Session::get('boutique')['meta']['currency_client']}}</span>
                                                </div>
                                            </div>

                                            <!-- Payment Action -->
                                            @if($cmd->montant_payer<$cmd->total_price)
                                                <div class="payment-action">
                                                    @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="payment-selector">
                                                            <label for="nombre_payment{{$cmd->slug}}">
                                                                <i class="fa fa-calculator"></i>
                                                                Nombre de paiements (Reste: {{$numbers}})
                                                            </label>
                                                            <select name="echelonner_number" id="nombre_payment{{$cmd->slug}}">
                                                                @for($i=1;$i<=$numbers;$i++)
                                                                    <option value="{{$i}}">{{$i}} paiement(s)</option>
                                                                @endfor
                                                            </select>
                                                        </div>
                                                        <button class="btn-pay paiement-initalise"
                                                                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}}"
                                                                data-slug="nombre_payment{{$cmd->slug}}">
                                                            <i class="fa fa-credit-card"></i>
                                                            Payer maintenant
                                                        </button>
                                                    @endif
                                                </div>
                                            @else
                                                @if($cmd->shipping==false)
                                                    <div class="payment-action">
                                                        <button class="btn-delivery shipping-initialize"
                                                                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}}">
                                                            <i class="fa fa-truck"></i>
                                                            Demander une livraison
                                                        </button>
                                                    </div>
                                                @endif
                                            @endif

                                            <!-- Order Details (Collapsible) -->
                                            <div class="order-details command{{$cmd->slug}}">
                                                @foreach($cmd->commande_article as $key => $art)
                                                    @if($art->article!=null)
                                                        @foreach($art->article as $key => $article)
                                                            <!-- Product Item -->
                                                            <div class="product-item">
                                                                <div class="product-image">
                                                                    @foreach($images as $image)
                                                                        @if($image->key==$article->slug)
                                                                            <img src="{{$image->filename}}" alt="{{$article->name}}">
                                                                            @break
                                                                        @endif
                                                                    @endforeach
                                                                </div>
                                                                <div class="product-info">
                                                                    <div class="product-name">{{$article->name}}</div>
                                                                    <div class="product-meta">
                                                                        <div class="meta-item">
                                                                            <span class="meta-label">Quantité</span>
                                                                            <span class="meta-value">{{$art->quantity}}</span>
                                                                        </div>
                                                                        <div class="meta-item">
                                                                            <span class="meta-label">Prix unitaire</span>
                                                                            <span class="meta-value">{{$art->price}} {{$cmd->currency}}</span>
                                                                        </div>
                                                                        <div class="meta-item">
                                                                            <span class="meta-label">Total</span>
                                                                            <span class="meta-value">{{$art->total_price}} {{$cmd->currency}}</span>
                                                                        </div>
                                                                    </div>

                                                                    <!-- Preferences -->
                                                                    @if($art->choice!="[]")
                                                                        <div class="preferences-section">
                                                                            <div class="preferences-title">
                                                                                <i class="fa fa-sliders"></i>
                                                                                Préférences
                                                                            </div>
                                                                            @php $choix=[]; $choix=json_decode($art->choice,true); @endphp
                                                                            @if(isset($choix))
                                                                                @foreach($choix as $key =>$value)
                                                                                    <div class="preference-item">
                                                                                        <span class="preference-key">{{$key}}:</span>
                                                                                        @if(array_key_exists($key,$choix) && is_array($choix[$key]))
                                                                                            @for($i=0;$i<count($choix[$key]);$i++)
                                                                                                <span class="preference-value">{{$choix[$key][$i]}}</span>
                                                                                            @endfor
                                                                                        @endif
                                                                                    </div>
                                                                                @endforeach
                                                                            @endif
                                                                        </div>
                                                                    @endif

                                                                    <!-- Requirements -->
                                                                    @if($art->specificity)
                                                                        <div class="requirement-label">
                                                                            <i class="fa fa-exclamation-circle"></i>
                                                                            Exigences particulières
                                                                        </div>
                                                                        <div class="requirement-text">{{$art->specificity}}</div>
                                                                    @endif
                                                                </div>
                                                            </div>
                                                        @endforeach
                                                    @endif
                                                @endforeach
                                            </div>
                                        </div>
                                    @endif
                                @endif
                            @endforeach

                            <!-- Pagination -->
                            <div class="col-lg-12 text-center pl-0 ml-0 mt-5 mb-5">
                                {{ $commandes_datas->links() }}
                            </div>
                        @else
                            <!-- Empty State -->
                            <div class="empty-state">
                                <img data-src="{{asset('images/emptycart.png')}}" class="lazy" alt="Aucune commande">
                                <div class="empty-state-title">Aucune commande trouvée</div>
                                <div class="empty-state-text">Vous n'avez pas encore de commande en paiement échelonné</div>
                            </div>
                        @endif
                    @else
                        <div class="empty-state">
                            <img data-src="{{asset('images/emptycart.png')}}" class="lazy" alt="Aucune commande">
                            <div class="empty-state-title">Aucune commande trouvée</div>
                            <div class="empty-state-text">Vous n'avez pas encore de commande en paiement échelonné</div>
                        </div>
                    @endif
                @else
                    <div class="empty-state">
                        <img data-src="{{asset('images/emptycart.png')}}" class="lazy" alt="Aucune commande">
                        <div class="empty-state-title">Aucune commande disponible</div>
                        <div class="empty-state-text">Une erreur s'est produite lors du chargement de vos commandes</div>
                    </div>
                @endif
            @endif
        </div>

        <!-- Shipping Modal -->
        <div id="LivraisonDataModal" class="modal fade">
            <div class="modal-lg modal-dialog modal-dialog-centered">
                <form method="post" id="shipping_form" action="{{route('shipping_after_command_make')}}" enctype="multipart/form-data">
                    @csrf
                    <div class="modal-content">
                        <div class="modal-header">
                            <h4 class="modal-title">
                                <i class="fa fa-truck"></i>
                                Informations de livraison
                            </h4>
                            <button type="button" class="close" data-dismiss="modal">&times;</button>
                        </div>
                        <div class="modal-body">
                            <div class="alert alert-info">
                                <i class="fa fa-info-circle"></i>
                                <strong>Note importante :</strong> Vous ne devez payer le livreur qu'une fois votre commande reçue et validée.
                            </div>

                            <div class="form-group">
                                <label><i class="fa fa-phone"></i> Numéro de téléphone du récepteur</label>
                                <input type="text" id="phone" name="shipping_phone" class="form-control"
                                       oninput="this.value=this.value.replace(/(?![0-9])./gmi,'')"
                                       placeholder="Entrez le numéro de téléphone">
                                <span id="valid-msg" class="hide" style="display: none;color: green;">✓ Numéro valide</span>
                                <span id="error-msg" class="hide" style="color: red;"></span>
                            </div>

                            <div class="form-group">
                                <label><i class="fa fa-map-marker"></i> Adresse de livraison</label>
                                <textarea class="form-control" name="shipping_adress" id="shipping_adress"
                                          rows="4" placeholder="Entrez l'adresse complète de livraison"></textarea>
                            </div>
                            <div id="type-transaction"></div>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-secondary" data-dismiss="modal">
                                <i class="fa fa-times"></i> Annuler
                            </button>
                            <button type="submit" class="btn btn-primary" id="demande_livraison">
                                <i class="fa fa-check"></i> Confirmer la demande
                            </button>
                        </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(){
            // Toggle order details
            $(document).on('click', '.command-list', function () {
                let $slug = $(this).data('slug');
                let btn = $('.command' + $slug);
                let card = $(this);

                if (btn.hasClass('active')) {
                    btn.slideUp(300).removeClass('active');
                    card.removeClass('expanded');
                } else {
                    btn.slideDown(300).addClass('active');
                    card.addClass('expanded');
                }
            });

            // Shipping modal
            $(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');
            });

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

            var errorMap = ["Numéro invalide", "Code du pays invalide", "Trop court", "Trop long", "Numéro invalide"];

            var iti = window.intlTelInput(input, {
                autoPlaceholder: "polite",
                geoIpLookup: function (callback) {
                    $.get("https://ipinfo.io", function () {}, "jsonp").always(function (resp) {
                        var countryCode = (resp && resp.country) ? resp.country : "";
                        callback(countryCode);
                    });
                },
                hiddenInput: "full_number",
                nationalMode: true,
                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");
            };

            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");
                    }
                }
            });

            input.addEventListener('change', reset);
            input.addEventListener('keyup', reset);
        });
    </script>

    @if(session("paiement"))
        <script>
            $.notify('{{session('paiement')}}', 'success');
            $.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