@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"=> "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="col-lg-12">
            <!-- 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-check-circle"></i>
                Commandes Livrées
            </h2>

            @php $total=0; $helpers=new \App\Http\Controllers\HelperController(); @endphp
            @if(!isset($status) || $status=="SUCCESS")
                @if(isset($commandes_datas))
                    @if(count($commandes_datas)>0)
                        <!-- Order Count -->
                        <div class="order-count">
                            <i class="fa fa-box"></i>
                            <span>Afficher : {{ count($commandes_datas) }} / {{ $commandes_datas->total()}}</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->statut_paiement==true)
                                                <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>
                                                            Payé et livré : {{$cmd->updated_at->format('d/m/Y à H:i')}}
                                                        </span>
                                                    @endif
                                                @else
                                                    <span class="status-badge success">
                                                        <i class="fa fa-check-double"></i>
                                                        Payé et livré : {{$cmd->updated_at->format('d/m/Y à H:i')}}
                                                    </span>
                                                @endif
                                            @else
                                                @if($cmd->statut_shipping==false)
                                                    <span class="status-badge warning">
                                                        <i class="fa fa-truck"></i>
                                                        En attente livraison pour paiement
                                                    </span>
                                                @else
                                                    <span class="status-badge success">
                                                        <i class="fa fa-check-double"></i>
                                                        Payé et livré : {{$cmd->updated_at->format('d/m/Y à H:i')}}
                                                    </span>
                                                @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-calculator"></i>
                                                    Total dû
                                                </span>
                                                <span class="price-value">{{$cmd->total_price}} {{\Illuminate\Support\Facades\Session::get('boutique')['meta']['currency_client']}}</span>
                                            </div>
                                            <div class="price-item">
                                                <span class="price-label">
                                                    <i class="fa fa-money-bill-wave"></i>
                                                    Total payé
                                                </span>
                                                <span class="price-value">{{$cmd->montant_payer}} {{\Illuminate\Support\Facades\Session::get('boutique')['meta']['currency_client']}}</span>
                                            </div>
                                        </div>

                                        <!-- 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>
                                                            </div>
                                                        </div>

                                                        <!-- Preferences Section -->
                                                        @if($art->choice!="[]")
                                                            <div class="preferences-section">
                                                                <div class="preferences-title">
                                                                    <i class="fa fa-sliders-h"></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 Section -->
                                                        @if($art->specificity)
                                                            <div class="preferences-section">
                                                                <div class="requirement-label">
                                                                    <i class="fa fa-exclamation-circle"></i>
                                                                    Exigence
                                                                </div>
                                                                <div class="requirement-text">{{$art->specificity}}</div>
                                                            </div>
                                                        @endif
                                                    @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 src="{{asset('images/emptycart.png')}}" alt="empty cart">
                            <div class="empty-state-title">Aucune commande livrée</div>
                            <div class="empty-state-text">Vous n'avez pas de commandes livrées pour le moment</div>
                        </div>
                    @endif
                @else
                    <!-- Empty State -->
                    <div class="empty-state">
                        <img src="{{asset('images/emptycart.png')}}" alt="empty cart">
                        <div class="empty-state-title">Aucune commande livrée</div>
                        <div class="empty-state-text">Vous n'avez pas de commandes livrées pour le moment</div>
                    </div>
                @endif
            @else
                <!-- Empty State -->
                <div class="empty-state">
                    <img src="{{asset('images/emptycart.png')}}" alt="empty cart">
                    <div class="empty-state-title">Aucune commande disponible</div>
                    <div class="empty-state-text">Aucune commande n'est disponible actuellement</div>
                </div>
            @endif
        </div>

        <!-- Shipping Modal -->
        <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">
                        <div class="modal-header">
                            <h4 class="modal-title">
                                <i class="fa fa-truck"></i>
                                Informations de Livraison
                            </h4>
                        </div>
                        <div class="modal-body">
                            <div id="shipping_detail">
                                <div class="alert alert-info" role="alert">
                                    <i class="fa fa-info-circle"></i>
                                    <strong>Note:</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" value="" class="form-control"
                                           oninput="this.value=this.value.replace(/(?![0-9])./gmi,'')"
                                           placeholder="Votre numéro de téléphone de livraison">
                                    <span id="valid-msg" class="hide" style="display: none;color: green;">✓ Valide</span>
                                    <span id="error-msg" class="hide" style="color: red;"></span>
                                </div>

                                <div class="form-group">
                                    <label>
                                        <i class="fa fa-map-marker-alt"></i>
                                        Adresse de livraison
                                    </label>
                                    <textarea class="form-control" name="shipping_adress" id="shipping_adress"
                                              rows="5" placeholder="Entrez l'adresse complète de livraison"></textarea>
                                </div>
                                <div id="type-transaction"></div>
                            </div>
                            <div class="row">
                                <div class="col-sm-12 text-right" style="margin-top: 20px;">
                                    <button type="submit" class="btn-primary" id="demande_livraison">
                                        <i class="fa fa-check"></i>
                                        Valider la demande
                                    </button>
                                    <button type="button" class="btn btn-secondary" data-dismiss="modal">
                                        <i class="fa fa-times"></i>
                                        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').html('<input type="hidden" value="' + command + '" name="slug">');
            $('#LivraisonDataModal').modal('show');
        });

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

        var errorMap = ["Numéro invalide", "Code du pays invalide", "Trop court", "Trop long", "Numero 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);

        $(document).on('change', '#phone', function () {
            var countryData = iti.getSelectedCountryData();
            var number = '+' + countryData.dialCode + $('#phone').val();
            $('#telInput').val(number);
        });

        // Toggle order details
        $(document).on('click', '.order-card', function (e) {
            if (!$(e.target).closest('button, a, select').length) {
                let $slug = $(this).data('slug');
                let $details = $('.command' + $slug);
                let $toggle = $(this).find('.details-toggle i');

                if ($details.hasClass('active')) {
                    $details.slideUp().removeClass('active');
                    $(this).removeClass('expanded');
                } else {
                    $details.slideDown().addClass('active');
                    $(this).addClass('expanded');
                }
            }
        });
    </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