@extends('layouts.admin')

@section('content')
{{--    {{dd(base64_encode('eyJ1c2VyIjoiNjAzZTI0YTliMjEwMzAwMDEyOTRhYTk1IiwiaWF0IjoxNjE0Njg1Mzg1fQ:pRwTnhzurEnEbnSrYMoxfO0nOxiUcqpQKwQgBUG2ol4'))}}--}}
    <div id="main-content">

        <div class="row mt-5" id="manage-orders">
            <div class="col-lg-12 col-md-12">
                <div class="card">
                    <div class="header">
                        <h2>Prêt pour la livraison: {{$count_orders}}</h2>
                    </div>
                    <div class="body">

                        <div class="ml-auto row" style="width:100%;" id="startLive">
                            <div class="col-xl-6 col-lg-6 col-md-6 col-sm-12 col-xs-12" style="padding:5px 0;">
                                {{--                                <button class="btn btn-dark" :disabled="apiData.prev_page_url === null" v-on:click="prevPage()">--}}
                                {{--                                    Page précédente--}}
                                {{--                                </button>--}}
                                {{--                                <button class="btn btn-dark" :disabled="apiData.next_page_url === null" v-on:click="nextPage()">--}}
                                {{--                                    Page suivante--}}
                                {{--                                </button>--}}
{{--                                <input type="text" placeholder="Rechercher un utilisateur, identifiant de commande ..." class="form-control" v-model="search" v-on:keyUp="getOrdersSearch()" style="width: auto !important; display: initial !important;">--}}

{{--                                <input type="date" placeholder="From Date" class="form-control" style="width: auto !important; display: initial !important;" v-model="fromDate" v-on:change="getOrders()">--}}
{{--                                <button type="button" class="btn btn-dark" @click="clearDate()">Date Claire</button>--}}
                                {{--                                - <input type="date" :disabled="!fromDate" min="fromDate" placeholder="From Date" class="form-control" style="width: auto !important; display: initial !important;"v-model="toDate">--}}


                                {{--                            <button class="btn btn-dark" :disabled="apiData.prev_page_url === null" v-on:click="prevPage()">--}}
                                {{--                                Previous Page--}}
                                {{--                            </button>--}}
                                {{--                            <button class="btn btn-dark" :disabled="apiData.next_page_url === null" v-on:click="nextPage()">--}}
                                {{--                                Next Page--}}
                                {{--                            </button>--}}
                                <div class="user-account" style="margin:0;margin-bottom:5px;">
                                    <div class="dropdown" class="float-btns ">
                                        <a href="javascript:void(0);" class="dropdown-toggle user-name" data-toggle="dropdown">Commandes par page: @{{ paginate }}</a>
                                        <ul class="dropdown-menu dropdown-menu-right account animated flipInY">
                                            <li><a href="javascript:void(0);" v-on:click="changePag(15)">15</a></li>
                                            <li class="divider"></li>
                                            <li><a href="javascript:void(0);" v-on:click="changePag(30)">30</a></li>
                                            <li class="divider"></li>
                                            <li><a href="javascript:void(0);" v-on:click="changePag(45)">45</a></li>
                                            <li class="divider"></li>
                                            <li><a href="javascript:void(0);" v-on:click="changePag(60)">60</a></li>
                                            <li class="divider"></li>
                                            <li><a href="javascript:void(0);" v-on:click="changePag(120)">120</a></li>
                                        </ul>
                                    </div>
                                    <div class="dropdown" class="float-btns " style="margin-right: 12px;">
                                        <a href="javascript:void(0);" class="dropdown-toggle user-name" data-toggle="dropdown">Type de commande: @{{ type }}</a>
                                        <ul class="dropdown-menu dropdown-menu-right account animated flipInY">
                                            <li><a href="javascript:void(0);" v-on:click="changeType('All')">Tous</a></li>
                                            <li class="divider"></li>
                                            <li><a href="javascript:void(0);" v-on:click="changeType('Pending')">En attente</a></li>
                                            <li class="divider"></li>
                                            <li><a href="javascript:void(0);" v-on:click="changeType('Completed')">Terminé</a></li>
                                            <li class="divider"></li>
                                            <li><a href="javascript:void(0);" v-on:click="changeType('Rejected')">Rejeté</a></li>
                                        </ul>
                                    </div>
                                </div>
                                <div class="spinner-border" role="status" v-if="changePage">
                                    <span class="sr-only">Chargement ...</span>
                                </div>
                            </div>
                            <div class="col-xl-6 col-lg-6 col-md-6 col-sm-12 col-xs-12" style="padding:5px 0 15px 0;">

                            </div>
                        </div>
                        <div v-if="orders.length > 0">
                            <div class="row" style="padding:5px;margin-bottom:5px;background: #091e28;color:#fff !important;">
                                <div class="col-1">
                                </div>
                                <div class="col-2">
                                    Id, Produits, Utilisateur
                                </div>
                                <div class="col-3">
                                    Addresse, Date, Numéro de téléphone
                                </div>
                                <div class="col-3">
                                    Surnom, Updated At, Statut, Total
                                </div>
                                <div class="col-3">
                                </div>
                            </div>
                            <div class="ml-auto row" v-for="(order, i) in orders" style="padding:5px;margin-bottom:5px;background: #efefef;">
                                <div class="col-12 col-sm-1">
                                    <span v-if="order.live_order.parent_id==0">@{{ order.live_order.id }}</span>
                                    <span v-if="order.live_order.image!=null  && order.live_order.image != 'null' && order.live_order.image != ''">
                                            <br />
                                            <img :src="order.live_order.image" style="width:100%;"/>
                                        </span>
                                </div>
                                <div class="col-12 col-sm-2">
                                    <strong class="badge badge-dark">@{{ order.live_order.fullname }}</strong>
                                    <br />
                                    <span>@{{ order.live_order.products }}</span>
                                </div>
                                <div class="col-12 col-sm-3">
                                    <span>@{{ order.live_order.city }}, @{{ order.live_order.address }} @{{ order.live_order.zip }}</span>
                                    <br /><span>@{{ order.live_order.phone }}</span>
                                    <br /><span class="badge badge-primary">@{{ dateStr(order.live_order.created_at) }}</span>
                                </div>
                                <div class="col-12 col-sm-3">
                                    <span>@{{ order.live_order.nickname }}</span>
                                    <br />
                                    <span class="btn btn-warning btn-sm" v-if="order.live_order.status === 0">@{{ dateStr(order.live_order.updated_at) }}</span>
                                    <span class="btn btn-success btn-sm" v-if="order.live_order.status === 1">@{{ dateStr(order.live_order.updated_at) }}</span>
                                    <span class="btn btn-danger btn-sm" v-if="order.live_order.status === 2">@{{ dateStr(order.live_order.updated_at) }}</span>

                                    <span class="btn btn-warning" v-if="order.live_order.status === 0">En attente</span>
                                    <span class="btn btn-success" v-if="order.live_order.status === 1">Paiement terminé</span>
                                    <span class="btn btn-danger" v-if="order.live_order.status === 2">Rejeté</span>
                                    <br />
                                    <h5>@{{ order.live_order.total }} &euro;</h5>
                                </div>
                                <div class="col-12 col-sm-3" style="white-space: nowrap;">
                                    <button class="btn btn-dark" type="button" :disabled="order.shipped != 0"  v-on:click="makeItReadyForShip(order, i)">
                                        Livraison
                                    </button>
                                    <a class="btn btn-success" type="button" :href="'/admin/ready-for-ship/download/'+order.id">
                                        PDF <i><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-download" viewBox="0 0 16 16">
                                                <path d="M.5 9.9a.5.5 0 0 1 .5.5v2.5a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1v-2.5a.5.5 0 0 1 1 0v2.5a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2v-2.5a.5.5 0 0 1 .5-.5z"/>
                                                <path d="M7.646 11.854a.5.5 0 0 0 .708 0l3-3a.5.5 0 0 0-.708-.708L8.5 10.293V1.5a.5.5 0 0 0-1 0v8.793L5.354 8.146a.5.5 0 1 0-.708.708l3 3z"/>
                                            </svg></i>
                                    </a>
                                    <button class="btn btn-dark" :disabled="order.shipped !== 0"  v-on:click="makeSelection(order, i)" data-toggle="modal" data-target="#orderInfo">
                                        Action
                                    </button>
{{--                                    <button class="btn btn-success" @click="copyLink(order)"  v-if="order.ship == 0">--}}
{{--                                        Copier le lien--}}
{{--                                    </button>--}}
                                </div>
                                <div class="col-12 p-0" v-if="typeof order.live_order.items != 'undefined'">
                                    <div class="ml-auto row" v-for="(item, itemIndex) of order.live_order.items" style="padding:5px;margin-bottom:5px;background: #efe1ee;">
                                        <div class="col-12 col-sm-1 p-0">
                                            <span>@{{ item.id }}</span>
                                            <span v-if="item.image!=null  && item.image != 'null' && item.image != ''">
                                                    <br />
                                                    <img :src="item.image" style="width:100%;"/>
                                                </span>
                                        </div>
                                        <div class="col-12 col-sm-2 p-0">
                                            <span>@{{ item.products }}</span>
                                        </div>
                                        <div class="col-12 col-sm-3 p-0">
                                            <br /><span>@{{ dateStr(item.created_at) }}</span>
                                        </div>
                                        <div class="col-12 col-sm-3 p-0">
                                            <span class="btn btn-warning btn-sm" v-if="item.status === 0">@{{ dateStr(item.updated_at) }}</span>
                                            <span class="btn btn-success btn-sm" v-if="item.status === 1">@{{ dateStr(item.updated_at) }}</span>
                                            <span class="btn btn-danger btn-sm" v-if="item.status === 2">@{{ dateStr(item.updated_at) }}</span>
                                            <br />
                                            <h5>@{{ item.total }} &euro;</h5>
                                        </div>
{{--                                        <div class="col-12 col-sm-3 p-0" style="white-space: nowrap;">--}}
{{--                                            <button class="btn btn-dark" :disabled="item.status !== 0"  v-on:click="makeSelection(item, itemIndex)" data-toggle="modal" data-target="#orderInfo">--}}
{{--                                                Action--}}
{{--                                            </button>--}}
{{--                                        </div>--}}
                                    </div>
                                </div>
                                <div class="col-12 p-0" v-if="typeof order.live_order.paid_items != 'undefined'">
                                    <div class="ml-auto row" v-for="(item, itemIndex) of order.live_order.paid_items" style="padding:5px;margin-bottom:5px;background: #efe1ee;">
                                        <div class="col-12 col-sm-1 p-0">
                                            <span>@{{ item.id }}</span>
                                            <span v-if="item.image!=null  && item.image != 'null' && item.image != ''">
                                                    <br />
                                                    <img :src="item.image" style="width:100%;"/>
                                                </span>
                                        </div>
                                        <div class="col-12 col-sm-2 p-0">
                                            <span>@{{ item.products }}</span>
                                        </div>
                                        <div class="col-12 col-sm-3 p-0">
                                            <br /><span>@{{ dateStr(item.created_at) }}</span>
                                        </div>
                                        <div class="col-12 col-sm-3 p-0">
                                            <span class="btn btn-warning btn-sm" v-if="item.status === 0">@{{ dateStr(item.updated_at) }}</span>
                                            <span class="btn btn-success btn-sm" v-if="item.status === 1">@{{ dateStr(item.updated_at) }}</span>
                                            <span class="btn btn-danger btn-sm" v-if="item.status === 2">@{{ dateStr(item.updated_at) }}</span>
                                            <br />
                                            <h5>@{{ item.total }} &euro;</h5>
                                        </div>
{{--                                        <div class="col-12 col-sm-3 p-0" style="white-space: nowrap;">--}}
{{--                                            <button class="btn btn-dark" :disabled="item.status !== 0"  v-on:click="makeSelection(item, itemIndex)" data-toggle="modal" data-target="#orderInfo">--}}
{{--                                                Action--}}
{{--                                            </button>--}}

{{--                                        </div>--}}
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div v-else>
                            <h1 class="text-center" style="font-style: italic;">Aucune commande disponible.</h1>
                        </div>
                    </div>

                    <div class="p-4" style="float:right" id="buttonsBot">
                        <button class="btn btn-dark" :disabled="apiData.prev_page_url === null" v-on:click="prevPage(true)">
                            Page précédente
                        </button>
                        <button class="btn btn-dark" :disabled="apiData.next_page_url === null" v-on:click="nextPage(true)">
                            Page suivante
                        </button>
                    </div>
                </div>
            </div>
        </div>
{{--        Livraison Modal--}}
        <div class="modal fade" id="livraisonModal" tabindex="-1" role="dialog">
            <div class="modal-dialog modal-xl" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <h4 class="title text-center text-primary" id="largeModalLabel">Details</h4>
                    </div>
                    <div class="modal-body">
                        <form>
                            @csrf
                            <div class="item row" style="width:100%;padding:0;margin:0;">
                                <div class="col-6" v-for="(item, index) in order_items" style="padding:5px;">
                                    <div class="row" style="width:100%;padding-bottom:10px;background:#efefef;margin:0;">
                                        <div class="col-12">
                                            @{{item.name}}
                                        </div>
                                        <div class="col-12 col-sm-9">
                                            <div class="input-group mb-0">
                                                <span class="input-group-text" id="decrease" @click="changeCount(index, false)" value="Decrease Value">-</span>
                                                <input type="number" class="form-control" id="number" min="1" v-model="item.qty">
                                                <span class="input-group-text" id="increase" @click="changeCount(index, true)" value="Increase Value">+</span>
                                            </div>
                                        </div>
                                        <div class="col-12 col-sm-3">
                                            <button class="btn btn-dark" type="button"  style="width: 25pt; padding: 0" @click="addText(index)">
                                                <i><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="white" class="bi bi-check" viewBox="0 0 16 16">
                                                        <path d="M10.97 4.97a.75.75 0 0 1 1.07 1.05l-3.99 4.99a.75.75 0 0 1-1.08.02L4.324 8.384a.75.75 0 1 1 1.06-1.06l2.094 2.093 3.473-4.425a.267.267 0 0 1 .02-.022z"/>
                                                    </svg></i>
                                            </button>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-6" style="padding:5px;">
                                    <div class="row" style="width:100%;padding-bottom:10px;background:#efefef;margin:0;">
                                        <div class="col-12" style="padding:5px;">
                                            <div class="input-group mb-0">
                                                <span class="input-group-text" id="basic-addon1" style="height:35px;">x</span>
                                                <input type="text" class="form-control" v-model="extra_text" aria-label="Username" aria-describedby="basic-addon1">
                                            </div>
                                        </div>
                                        <div class="col-12 col-sm-9">
                                            <div class="input-group mb-0">
                                                <span class="input-group-text" id="decrease" @click="order_counts_extra > 1 ? order_counts_extra--: null" value="Decrease Value">-</span>
                                                <input type="number" class="form-control" id="number" min="1" v-model="order_counts_extra">
                                                <span class="input-group-text" id="increase" @click="order_counts_extra++" value="Increase Value">+</span>
                                            </div>
                                        </div>
                                        <div class="col-12 col-sm-3">
                                            <button class="btn btn-dark" type="button"  style="width: 25pt; padding: 0" @click="addExtraText()">
                                                <i><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="white" class="bi bi-check" viewBox="0 0 16 16">
                                                        <path d="M10.97 4.97a.75.75 0 0 1 1.07 1.05l-3.99 4.99a.75.75 0 0 1-1.08.02L4.324 8.384a.75.75 0 1 1 1.06-1.06l2.094 2.093 3.473-4.425a.267.267 0 0 1 .02-.022z"/>
                                                    </svg></i>
                                            </button>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-2" v-if="items_text.length > 0" v-for="(txt,i) in items_text">
                                    <p>@{{ txt }}  <button type="button" class="close" aria-label="Close" style="float: none;" @click="removeTxt(i)"><span aria-hidden="true">&times;</span></button></p>
                                </div>
                                <div class="col-12">
                                    <div class="form-check form-check-inline">
                                        <input class="form-check-input" type="radio" name="livra" id="colissimo" value="0" v-model="colissimo_mondial" @change="selectChanged()">
                                        <label class="form-check-label" for="colissimo">Colissimo</label>
                                    </div>
                                    <div class="form-check form-check-inline">
                                        <input class="form-check-input" type="radio" name="livra" id="mondialrelay" value="1" v-model="colissimo_mondial" @change="selectChanged()">
                                        <label class="form-check-label" for="mondialrelay">MondialRelay</label>
                                    </div>
                                </div>
                            </div>
                            <div class="text-center" v-if="loadingPickups">
                                <div class="spinner-border" role="status">
                                </div>
                            </div>
                            <div class="row" v-if="pickup_points.length > 0" style="border: 1px solid rgba(0,0,0,.125); margin: 0">
                                <div class="col-6 mt-2 mb-2 points" v-for="point in pickup_points">
                                    <h1 style="font-size: 1rem; color: #e06377;">@{{ point.LgAdr1 }}</h1>
                                    <p>@{{ point.LgAdr3 }}</p>
                                    <p>@{{ point.Localisation1 }}</p>
                                    <p>@{{ point.Pays }} - @{{ point.CP }} @{{ point.Ville }}</p>
                                    <button type="button" class="btn btn-light mt-2 mb-2" :disabled="point.Num === selected_point" @click="selectPoint(point.Num)"><span v-if="point.Num !== selected_point">Sélectionner</span><span v-else>Choisi</span></button>
                                </div>
                            </div>
                        </form>
                    </div>
                    <div class="modal-footer">
                        <div class="form-group text-right">
                            <button class="btn btn-outline-success" :disabled="actionLoading || editingOrder" @click="createParcel()">
                                Livraison
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        {{--        Order Info Modal--}}
        <div class="modal fade" id="orderInfo" tabindex="-1" role="dialog">
            <div class="modal-dialog modal-lg" role="document">
                <div class="modal-content" v-if="selectedOrder">
                    <div class="modal-header">
                        <h4 class="title text-center text-primary" id="largeModalLabel">Actions de commande</h4>
                    </div>
                    <div class="modal-body">
                        <form>
                            @csrf
                            <div class="row">
                                <div class="col-12" style="margin-bottom:10px;text-align:left;">
                                    <label style="font-size:10pt;">Nom, prenom *</label>
                                    <input type="text" name="name" class="form-control" v-model="selectedOrder.live_order.fullname" required="" />
                                </div>
                                <div class="col-12 col-sm-6" style="margin-bottom:10px;text-align:left;">
                                    <label style="font-size:8pt;text-align:left;"> Adresse rue </label>
                                    <input type="text" name="address" class="form-control" v-model="selectedOrder.live_order.address" required="" />
                                </div>
                                <div class="col-12 col-sm-6" style="margin-bottom:10px;text-align:left;">
                                    <label style="font-size:8pt;"> Adresse rue (2ème ligne) </label>
                                    <input type="text" name="address_2" class="form-control" v-model="selectedOrder.live_order.address_2" />
                                </div>
                                <div class="col-4 col-sm-4" style="margin-bottom:10px;text-align:left;">
                                    <label style="font-size:8pt;">Code Postal</label>
                                    <input type="text" name="postal" class="form-control" required="" v-model="selectedOrder.live_order.zip"/>
                                </div>
                                <div class="col-4 col-sm-4" style="margin-bottom:10px;text-align:left;">
                                    <label style="font-size:8pt;">Ville</label>
                                    <input type="text" name="city" class="form-control" v-model="selectedOrder.live_order.city" required="" />
                                </div>
                                <div class="col-4 col-sm-4" style="margin-bottom:10px;text-align:left;">
                                    <label>Pays</label>
                                    <select class="form-control" id="country" v-model="selectedOrder.live_order.country">
                                        <option value="France">France</option>
                                        <option value="Guadeloupe">Guadeloupe</option>
                                        <option value="La Réunion">La Réunion</option>
                                        <option value="Nouvelle Calédonie">Nouvelle Calédonie</option>
                                        <option value="Martinique">Martinique</option>
                                        <option value="Belgique">Belgique</option>
                                        <option value="Germany">Suisse</option>
                                        <option value="Allemagne">Allemagne</option>
                                        <option value="Corse">Corse</option>
                                        <option value="Luxembourg">Luxembourg</option>
                                    </select>
                                </div>
                                <hr />
                                <hr />
                                <div class="col-12" style="margin-bottom:10px;text-align:left;">
                                    <label style="font-size:10pt;">E-Mail *</label>
                                    <input type="email" name="email" class="form-control" placeholder="example@example.com" v-model="selectedOrder.live_order.email" required="" />
                                </div>
                                <div class="col-12">
                                    <label>Numéro de téléphone</label>
                                    <input type="text" name="phone" id="phone" class="form-control"  v-model="selectedOrder.live_order.phone" placeholder="Numéro de téléphone"/>
                                </div>
                            </div>
                        </form>
                    </div>
                    <div class="modal-footer">
                        <div class="form-group text-right">
                            <button class="btn btn-outline-success" :disabled="actionLoading || editingOrder" @click="changeOrder()">
                                Sauver
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <input type="hidden" name="copyText" id="copyText" >
    </div>



@endsection
@section('footer')
    <style>
        .float-btns {
            float: right !important;
        }
        @media(min-width: 1000px) {
            .float-btns {
                float: left !important;
            }
        }
        .inc-dec {
            width: 300px;
            margin: 0 auto;
            text-align: center;
            padding-top: 50px;
        }

        .value-button {
            display: inline-block;
            border: 1px solid #ddd;
            margin: 0px;
            width: 40px;
            height: 40px;
            text-align: center;
            line-height: initial;
            /*vertical-align: middle;*/
            padding: 11px 0;
            background: #eee;
            -webkit-touch-callout: none;
            -webkit-user-select: none;
            -khtml-user-select: none;
            -moz-user-select: none;
            -ms-user-select: none;
            user-select: none;
        }

        .value-button:hover {
            cursor: pointer;
        }

        form #decrease {
            margin-right: -4px;
            border-radius: 8px 0 0 8px;
        }

        form #increase {
            margin-left: -2px;
            border-radius: 0 8px 8px 0;
        }

        form #input-wrap {
            margin: 0px;
            padding: 0px;
        }

        input#number {
            text-align: center;
            border: none;
            border-top: 1px solid #ddd;
            border-bottom: 1px solid #ddd;
            margin: 0px;
            width: 40px;
            height: 40px;
        }

        input[type=number]::-webkit-inner-spin-button,
        input[type=number]::-webkit-outer-spin-button {
            -webkit-appearance: none;
            margin: 0;
        }
    </style>
    <script>
        const Vue_comp = new Vue({
            el:"#main-content",
            data: {
                orders: [],
                apiData: {
                    prev_page_url:null,
                    next_page_url:null
                },
                changePage: false,
                link: 'admin/ready-for-ship',
                type: 'All',
                paginate: 30,
                modProducts: [],
                search: '',
                fromDate: '',
                toDate: '',
                orderLoading: 0,
                selectedOrder: null,
                currIndex: 0,
                order_counts_extra: 1, extra_text: '',
                colissimo_mondial: 0,
                loadingPickups: false,
                hasShown: 0, pickup_points: [], selected_point: '',
                actionLoading: false, editingOrder: false,
                items_text: [],
                order_items: [
                    {name: 'COSMÉTIQUE', qty: 1}, {name:'PANTALON', qty: 1}, {name:'SHORT', qty: 1}, {name:'HAUT', qty: 1},
                    {name: 'JUPE', qty: 1}, {name: 'ROBE', qty: 1},
                    {name: 'VESTE', qty: 1}, {name:'MANTEAU', qty: 1},
                    {name: 'CHAUSURES', qty: 1}, {name: 'ACCESORIES DE MODE', qty: 1},
                    {name: 'ACCESORIES DE CHEVEUX', qty: 1},
                    {name: 'MAQUILLAGE-TEINT', qty: 1},
                    {name: 'MAQUILLAGE-LEVRES', qty: 1},
                    {name: 'MAQUILLAGE-YEUX', qty: 1},
                    {name: 'MAQUILLAGE-ACCESORIES', qty: 1},
                    {name: 'ONGLES', qty: 1},
                    {name: 'COLLIER', qty: 1},
                    {name: 'BRACELET', qty: 1},
                    {name: 'BAGUE', qty: 1},
                    {name: 'MONTRE', qty: 1},
                    {name: 'BIJOU FANTAISIE', qty: 1},
                    {name: 'MAISON-GALET PARFUME', qty: 1},
                    {name: 'MAISON-TABLETTE PARFUME', qty: 1},
                    {name: 'MAISON-SUSPENSION PENDERIE', qty: 1},
                    {name: 'MAISON-SAVON NATUREL PARFUME', qty: 1},
                    {name: 'MAISON-MIKADO', qty: 1},
                    {name: 'PARFUME', qty: 1},
                    {name: 'GEL DOUCHE', qty: 1},
                    {name: 'SHAMPOOING', qty: 1},
                    {name: 'DEODORANT', qty: 1},
                    {name: 'PORTE MONNAIE', qty: 1},
                    {name: 'SAC A MAIN', qty: 1}
                ],
                order_counts: []
            },
            created() {
                this.getOrders();
                this.setCounts();

            },
            watch:{
                orders:{
                    deep: true,

                    // We have to move our method to a handler field
                    handler(oldVal, newVal){
                        console.log(oldVal,newVal);
                    }

                }
            },
            methods: {
                setCounts() {
                    this.order_items.forEach((item, index)=> {
                        this.order_counts[index] = {count: 1};
                    });
                },
                mondialShow(type) {
                    let acc = $('#modal-mondial');
                    if (type === 'show') {
                        acc.collapse('show');
                    } else {
                        acc.collapse('hide');
                    }
                },
                selectChanged() {
                    let self = this;
                    if (this.colissimo_mondial == 1) {
                        self.loadingPickups = true;
                        axios.post('/live-order/pickupId', {zip: this.selectedOrder.live_order.client.postal, id: this.selectedOrder.id}).then((res)=> {
                            if (res.data.status) {
                                self.selected_point = self.selectedOrder.live_order.pickup_id;
                                self.pickup_points = res.data.values;
                                self.mondialShow('show');
                            } else {
                                showToast('warning', res.data.message);
                                self.colissimo_mondial = 0;
                            }
                            self.loadingPickups = false;
                        }).catch(err=> {
                            self.colissimo_mondial = 0;
                            alert("Une erreur s'est produite, contactez l'administrateur.");
                            self.loadingPickups = false;
                        });

                    } else {
                        self.pickup_points = [];

                        if (this.hasShown !== 0){
                            this.mondialShow('hide');
                        }
                    }
                },
                selectPoint(point) {
                    let self = this;
                    let tmp = this.selected_point;
                    this.selected_point = point;
                    this.editingOrder = true;
                    axios.post('/admin/live-order/setPoint', {point, id: this.selectedOrder.live_order.id}).then((res)=> {
                        if (res.data.status) {
                            self.getOrders();
                            showToast('success', res.data.message);
                        }
                    }).catch(err=> {
                        this.selected_point = tmp;
                        alert("Une erreur s'est produite, contactez l'administrateur.");
                    }).finally(()=> {self.editingOrder = false;});
                },
                changeCount(index, increment) {
                    if (increment) {
                        this.order_items[index].qty++;
                    } else {
                        if (this.order_items[index].qty > 1) {
                            this.order_items[index].qty--;
                        }
                    }
                },
                addText(index) {
                  this.items_text.push(this.order_items[index].qty + ' x ' + this.order_items[index].name);
                },
                addExtraText() {
                    if (this.extra_text !== '') {
                        this.items_text.push(this.order_counts_extra + ' x ' + this.extra_text);
                    }
                },
                removeTxt(i) {
                  this.items_text.splice(i, 1);
                },
                capitalizeFirstLetter(string) {
                    return string.charAt(0).toUpperCase() + string.slice(1);
                },
                dateStr(d) {
                    // return new Date(d).toDateString();
                    return moment(d.split('T')[0]).format('DD MMM, YYYY');
                },
                clearDate() {
                    this.fromDate = '';
                    this.getOrders();
                },
                getOrdersSearch() {
                    if(this.search.length>2) {
                        const self = this;
                        let params = {
                            search: this.search, type: this.type
                        };
                        axios.post(this.link, params, {
                                headers: {
                                    'Content-Type': 'application/json',
                                    'X-CSRF-TOKEN': '{{csrf_token()}}'
                                },
                            }
                        ).then(function (response) {
                            if (response.data.status) {
                                self.apiData = response.data.values;
                                self.orders = self.apiData.data;
                            }
                            this.changePage = false;
                        }).catch(function (error) {
                            this.changePage = false;
                        });
                    }
                    if(this.search.length<=0){
                        this.getOrders();
                    }
                },
                getOrders() {
                    const self = this;
                    let params = {
                        number: this.paginate, search: this.search, type: this.type, from: this.fromDate, to: this.toDate
                    };

                    axios.post(this.link, params, {
                            headers: {
                                'Content-Type': 'application/json',
                                'X-CSRF-TOKEN': '{{csrf_token()}}'
                            },
                        }
                    ).then(function(response){
                        console.log('live orders', response)
                        if (response.data.status) {
                            self.apiData = response.data.values;
                            self.orders = self.apiData.data;
                        }
                        this.changePage = false;
                    }).catch(function(error){
                        this.changePage = false;
                    });
                },
                prevPage(scroll = false) {
                    if (this.apiData && this.apiData.prev_page_url) {
                        // this.changePage = true;
                        this.link = this.apiData.prev_page_url;
                        this.getOrders();
                        if (scroll) {
                            $('html, body').animate({
                                scrollTop: $("#startLive").offset().top
                            }, 'slow');
                        }
                    }
                },
                nextPage(scroll = false) {
                    if (this.apiData && this.apiData.next_page_url) {
                        // this.changePage = true;
                        this.link = this.apiData.next_page_url;
                        this.getOrders();
                        if (scroll) {
                            $('html, body').animate({
                                scrollTop: $("#startLive").offset().top
                            }, 'slow');
                        }
                    }
                },
                changePag(val) {
                    this.paginate = val;
                    this.getOrders();
                },
                makeItReadyForShip(order, i ) {
                    this.makeSelection(order, i);
                    this.setCounts();
                    this.items_text = [];
                    $('#livraisonModal').modal('show');
                },
                createParcel() {
                    let self = this;
                    let params = {id: this.selectedOrder.id, colissimo_mondial: this.colissimo_mondial, items: this.items_text}
                    axios.post('admin/createParcel', params, {
                            headers: {
                                'Content-Type': 'application/json',
                                'X-CSRF-TOKEN': '{{csrf_token()}}'
                            },
                        }
                    ).then(function(response) {
                        self.orderLoading = 0;
                        if (response.data.status) {
                            // self.orders[self.currIndex] = response.data.values;
                            $('#livraisonModal').modal('toggle');
                            self.getOrders();
                            showToast('success', 'Order edited successfully.');
                        } else {
                            showToast('warning', response.data.message);

                        }
                    });
                },
                modalProds(order) {
                    this.modProducts = order.items;
                },
                orderReady(order, link, msg = null, i = 0) {
                    const self = this;
                    this.orderLoading = order.id;
                    if (i != 0) {
                        this.currIndex = i;
                    }
                    axios.post(link, {id: order.id, info}, {
                            headers: {
                                'Content-Type': 'application/json',
                                'X-CSRF-TOKEN': '{{csrf_token()}}'
                            },
                        }
                    ).then(function(response){
                        self.orderLoading = 0;
                        if (response.data.status) {
                            let m = '';
                            if (msg !== null) {
                                m = 'Order ' + msg;
                            } else {
                                m = response.data.message;
                            }
                            self.orders[self.currIndex] = response.data.values;
                            showToast('success', m);
                        } else {
                            showToast('warning', response.data.message);

                        }
                    }).catch(function(error){
                        self.orderLoading = 0;
                        showToast('warning', 'Something went wrong.');
                    });
                },
                editInfo(order) {
                    const self = this;
                    this.orderLoading = order.id;
                    const info = this.orderInfo;
                    axios.post('admin/editOrderInfo', {id: order.id, info}, {
                            headers: {
                                'Content-Type': 'application/json',
                                'X-CSRF-TOKEN': '{{csrf_token()}}'
                            },
                        }
                    ).then(function(response) {
                        self.orderLoading = 0;
                        if (response.data.status) {
                            self.orders[self.currIndex] = response.data.values;
                            showToast('success', 'Order edited successfully.');
                        } else {
                            showToast('warning', response.data.message);

                        }
                    });
                },
                changeStatus(order, type) {
                    const self = this;
                    self.actionLoading = true;
                    axios.post('admin/live-order/change-type', {id: order.id, type}, {
                            headers: {
                                'Content-Type': 'application/json',
                                'X-CSRF-TOKEN': '{{csrf_token()}}'
                            },
                        }
                    ).then(function(response) {
                        self.orderLoading = 0;
                        if (response.data.status) {
                            self.getOrders();
                            $('#orderInfo').modal('hide');
                            showToast('success', 'Action completed.');
                        } else {
                            showToast('warning', response.data.message);
                        }
                    }).finally(() => {
                        self.actionLoading = false;
                    });
                },
                copyLink(order=null) {

                },
                changeType(val) {
                    this.type = val;
                    this.getOrders();
                },
                makeSelection(order, i) {
                    this.selectedOrder = order;
                    this.selected_point = order.live_order.pickup_id;
                    if(this.selected_point!=null && this.selected_point!=''){
                        this.colissimo_mondial = 1;
                    }
                    //this.colissimo_mondial = order.live_order.client.livraison === 'Mondialrelais' ? '1' : '0';
                    this.selectChanged();
                    this.currIndex = i;
                },
                changeOrder() {
                    let input = document.getElementById('selectedOrder-image');
                    let self = this;
                    self.editingOrder = true;
                    axios.post('admin/live-order/change-user-data', {details: this.selectedOrder.live_order, id:self.selectedOrder.live_order_id}, {
                            headers: {
                                'Content-Type': 'application/json',
                                'X-CSRF-TOKEN': '{{csrf_token()}}'
                            },
                        }
                    ).then(function(response) {
                        self.orderLoading = 0;
                        if (response.data.status) {
                            self.getOrders();
                            showToast('success', response.data.message);
                            $('#orderInfo').modal('hide');
                        } else {
                            showToast('warning', response.data.message);
                        }
                    }).finally(() => {
                        self.editingOrder = false;
                    });
                }
            }
        });
    </script>
@endsection