@extends('layouts.admin')

@section('content')
    <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>Commandes en direct</h2>
                    </div>
                    <div class="body">
                        @include('admin.live-order')

                        <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="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 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>
                        </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.parent_id==0">@{{ order.id }}</span>
                                        <span v-if="order.image!=null  && order.image != 'null' && order.image != ''">
                                            <br />
                                            <img :src="order.image" style="width:100%;"/>
                                        </span>
                                    </div>
                                    <div class="col-12 col-sm-2">
                                        <strong class="badge badge-dark">@{{ order.fullname }}</strong>
                                        <br />
                                        <span>@{{ order.products }}</span>
                                    </div>
                                    <div class="col-12 col-sm-3">
                                        <span>@{{ order.city }}, @{{ order.address }} @{{ order.zip }}</span>
                                        <br /><span>@{{ order.phone }}</span>
                                        <br /><span class="badge badge-primary">@{{ dateStr(order.created_at) }}</span>
                                    </div>
                                    <div class="col-12 col-sm-3">
                                        <span>@{{ order.nickname }}</span>
                                        <br />
                                        <span class="btn btn-warning btn-sm" v-if="order.status === 0">@{{ dateStr(order.updated_at) }}</span>
                                        <span class="btn btn-success btn-sm" v-if="order.status === 1">@{{ dateStr(order.updated_at) }}</span>
                                        <span class="btn btn-danger btn-sm" v-if="order.status === 2">@{{ dateStr(order.updated_at) }}</span>

                                        <span class="btn btn-warning" v-if="order.status === 0">En attente</span>
                                        <span class="btn btn-success" v-if="order.status === 1">Paiement terminé</span>
                                        <span class="btn btn-danger" v-if="order.status === 2">Rejeté</span>
                                        <br />
                                        <h5>@{{ order.total }} &euro;</h5>
                                    </div>
                                    <div class="col-12 col-sm-3" style="white-space: nowrap;">
                                        <div v-if="order.status==1">
                                            <p v-if="order.pickup_id==null || order.pickup_id=='null'">Colissimo</p>
                                            <p v-else>Mondialrelais: <strong>@{{ order.pickup_id }}</strong></p>
                                        </div>
                                        <button class="btn btn-dark" type="button" :disabled="order.status != 1 || order.ship != 0"  v-on:click="makeItReadyForShip(order, i)">
                                            Livraison
                                        </button>
                                        <button class="btn btn-dark" :disabled="order.status !== 0"  v-on:click="makeSelection(order, i)" data-toggle="modal" data-target="#orderInfo" v-if="order.ship == 0">
                                            Action
                                        </button>

                                        <a class="btn btn-danger" type="button" v-if="order.status==1" :href="'/admin/live-orders/download/'+order.id">
                                            Invoice 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-success" @click="copyLink(order)"  v-if="order.ship == 0">
                                            Copier le lien
                                        </button>
                                    </div>
                                    <div class="col-12 p-0" v-if="typeof order.items != 'undefined'">
                                        <div class="ml-auto row" v-for="(item, itemIndex) of 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="order.status != 0 || 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.paid_items != 'undefined'">
                                        <div class="ml-auto row" v-for="(item, itemIndex) of 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="order.status != 0 || 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 Mondial Relais--}}

        <div class="modal fade" id="mondialModal" 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="mondialModalLabel">Actions de commande</h4>
                    </div>
                    <div class="modal-body">
                        <form>
                            @csrf
                            <div class="item row">
                                <div class="col-md-12">
                                    <label>Numéro de suivi (Mondial Relais)</label>
                                    <input class="form-control" v-model="trackNr" placeholder="Numéro de suivi" />
                                </div>
                            </div>
                        </form>
                    </div>
                    <div class="modal-footer">
                        <div class="form-group text-right">
                            <button class="btn btn-outline-success" :disabled="trackNr === ''|| selectedOrder.id === orderLoading" @click="readyShCall(selectedOrder, {id: selectedOrder.id, track_nr: trackNr})">
                                Sauver
                            </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 v-if="selectedOrder.client" >
                            @csrf
                            <h5>Informations personnelles</h5>
                            <div class="item row">
                                <div class="col-md-6">
                                    <label>Votre nom légal complet (tel qu'inscrit)</label>
                                    <input type="text" v-model="selectedOrder.client.name" class="form-control" value="{{old('fullname')}}" placeholder="Nom complet"/>
                                </div>
                                <div class="col-md-6">
                                    <label>&nbsp;</label>
                                    <input type="text" v-model="selectedOrder.client.fb_pseudo" class="form-control" value="{{old('nickname')}}" placeholder="Surnom" required/>
                                </div>
                            </div>
                            <div class="item row">
                                <div class="col-md-6">
                                    <label>Addresse</label>
                                    <input type="text" v-model="selectedOrder.client.address" class="form-control" value="{{old('address')}}" placeholder="Adresse de rue"/>
                                    <br />
                                    <label>Code postal</label>
                                    <input type="text" v-model="selectedOrder.client.postal" class="form-control" value="{{old('zip')}}" placeholder="Code postal / Zip" />
                                </div>
                                <div class="col-md-6">
                                    <label>Ville</label>
                                    <input type="text" v-model="selectedOrder.client.city" class="form-control" value="{{old('city')}}" placeholder="Ville"/>
                                    <br />
                                    <label>Pays</label>
                                    <select class="form-control" v-model="selectedOrder.client.state">
                                        <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>
                                <div class="col-12" style="margin-bottom:10px;text-align:left;">
                                    <label style="font-size:10pt;">Choix livraison</label>
                                    <select type="text" v-model="selectedOrder.client.livraison" class="form-control" @change="selectChanged()">
                                        <option value="Colissimo">Colissimo</option>
                                        <option value="Mondialrelais">Mondialrelais</option>
                                    </select>
                                </div>
                            </div>
                            <div class="item row">
                                <div class="col-md-6">
                                    <label>Adresse e-mail<span>*</span></label>
                                    <input type="text" v-model="selectedOrder.client.email" class="form-control" value="{{old('email')}}" placeholder="Adresse e-mail"/>
                                </div>
                                <div class="col-md-6">
                                    <label>Numéro de téléphone</label>
                                    <input type="text" v-model="selectedOrder.client.telephone" class="form-control" value="{{old('phone')}}" placeholder="Numéro de téléphone"/>
                                </div>
                            </div>
                            <div class="btn-block text-right">
                                <hr />
                                <button class="btn btn-primary btn-lg" type="button" @click="editClient()" :disabled="savingClient">SAUVER</button>
                            </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>
                        <form>
                            @csrf
                            <div class="item row">
                                <div class="col-md-12">
                                    <label>Product</label>
                                    <textarea rows="5" class="form-control" v-model="selectedOrder.products" placeholder="Live Products"></textarea>
                                </div>
                            </div>
                            <div class="item row">
                                <div class="col-md-12">
                                    <label>Total</label>
                                    <input type="number" required v-model="selectedOrder.total" class="form-control" placeholder="Price" step=".01" min="0.00"/>
                                </div>
                            </div>
                            <div class="item row">
                                <div class="col-4">
                                    <label>Image</label>
                                    <input type="file" id="selectedOrder-image" class="form-control" placeholder="Select an image"/>
                                </div>
                                <div class="col-8">
                                    <img v-if="selectedOrder.image" src="@{{ selectedOrder.image }}" alt="">
                                </div>
                            </div>
                            <div class="item row">
                                <div class="col-12">
                                    <label>Payé à</label>
                                    <input type="date" placeholder="Payé à" class="form-control" style="width: auto !important; display: initial !important;" v-model="payedAt">
                                </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 class="form-group text-right">
                            <button class="btn btn-success" :disabled="actionLoading || editingOrder" @click="changeStatus(selectedOrder, '1')">
                                Paiement terminé
                            </button>
                        </div>
                        <div class="form-group text-right" v-if="selectedOrder.items && selectedOrder.items.length > 0">
                            <button class="btn btn-success" :disabled="actionLoading || editingOrder" @click="changeStatus(selectedOrder, '1', 'all')">
                                Paiement terminé tous
                            </button>
                        </div>
                        <div class="form-group text-left" >
                            <button class="btn btn-danger" :disabled="actionLoading || editingOrder" @click="changeStatus(selectedOrder, '2')">
                                Paiement rejeté
                            </button>
                        </div>
                        <div class="form-group text-left" v-if="selectedOrder.items && selectedOrder.items.length > 0">
                            <button class="btn btn-danger" :disabled="actionLoading || editingOrder" @click="changeStatus(selectedOrder, '2', 'all')">
                                Paiement rejeté tous
                            </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;
            }
        }
    </style>
    <script>
        const Vue_comp = new Vue({
            el:"#main-content",
            data: {
                orders: [],
                latestOrderId: '{{$lastOrder->id}}',
                apiData: {
                    prev_page_url:null,
                    next_page_url:null
                },
                changePage: false,
                link: 'admin/live-orders',
                type: 'All',
                paginate: 30,
                modProducts: [],
                search: '',
                fromDate: '',
                toDate: '',
                payedAt: '',
                orderLoading: 0,
                selectedOrder: null,
                currIndex: 0,
                actionLoading: false, editingOrder: false,
                trackNr: '', savingClient: false,
                pickup_points: [], selected_point: '',
                loadingPickups: false,
                hasShown: 0,
            },
            created() {
                this.getOrders();
            },
            watch:{
                orders:{
                    deep: true,

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

                }
            },
            methods: {
                selectChanged() {
                    let self = this;
                    console.log(this.selectedOrder)
                    if (this.selectedOrder.client.livraison === 'Mondialrelais') {
                        self.loadingPickups = true;
                        axios.post('/live-order/pickupId', {zip: this.selectedOrder.client.postal, id: this.selectedOrder.id}).then((res)=> {
                            if (res.data.status) {
                                self.selected_point = self.selectedOrder.client.post_2;
                                self.pickup_points = res.data.values;
                            } else {
                                showToast('warning', res.data.message);
                                self.selectedOrder.client.livraison = 'Colissimo';
                            }
                            self.loadingPickups = false;
                        }).catch(err=> {
                            self.selectedOrder.client.livraison = 'Colissimo';
                            alert("Une erreur s'est produite, contactez l'administrateur.");
                            self.loadingPickups = false;
                        });

                    } else {
                        self.pickup_points = [];
                    }
                },
                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.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;});
                },
                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.selectedOrder = order;
                    // let params = {id: order.id, track_nr: null};
                    // if (order.client.livraison === "Mondialrelais") {
                    //     this.trackNr = '';
                    //     $('#mondialModal').modal('show');
                    // } else {
                    // }
                    this.readyShCall(order, {id: order.id});

                },
                readyShCall(order, params) {
                    let self = this;
                    self.orderLoading = order.id;
                    axios.post('/admin/live-order/ship', params, {
                            headers: {
                                'Content-Type': 'application/json',
                                'X-CSRF-TOKEN': '{{csrf_token()}}'
                            },
                        }
                    ).then(function(response){
                        self.orderLoading = 0;
                        if (response.data.status) {
                            // self.orders[i].ship=1;
                            order.ship=1;
                            showToast('success', response.data.message);
                            //window.location.href = '//'/admin/ready-for-ship';
                            //location.reload();
                        } else {
                            showToast('warning', response.data.message);
                        }
                    }).catch(function(error){
                        self.orderLoading = 0;
                        showToast('warning', 'Something went wrong.');
                    });
                },
                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, rec = 'one') {
                    const self = this;
                    self.actionLoading = true;
                    axios.post('admin/live-order/change-type', {id: order.id, type, rec, payed_at: this.payedAt}, {
                            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) {
                    $('#saveButtonLO').prop('disabled',true);
                    $('#liveOrderFormCreate').submit();
                    let id = parseInt(this.latestOrderId) + 1;
                    if(order!=null) {
                        id = parseInt(order.id);
                    }
                    let textToCopy = $('#copyText');
                    textToCopy.val('{!! url('/live-order') !!}' +`/${id}`);
                    textToCopy.attr('type', 'text');
                    textToCopy.select();
                    let successful = document.execCommand('copy');
                    let msg = successful ? 'successful' : 'unsuccessful';
                    showToast('success', 'Url copied ' + msg);
                    textToCopy.attr('type', 'hidden');
                    window.getSelection().removeAllRanges();
                },
                changeType(val) {
                    this.type = val;
                    this.getOrders();
                },
                makeSelection(order, i) {
                    this.selectedOrder = order;
                    console.log(this.selectedOrder);
                    this.selectChanged();
                    this.currIndex = i;
                },
                changeOrder() {
                    let input = document.getElementById('selectedOrder-image');
                    let formData = new FormData();
                    formData.append('order', JSON.stringify(this.selectedOrder));
                    formData.append('image', input.files[0]);
                    let self = this;
                    self.editingOrder = true;
                    axios.post('admin/live-order/change-order', formData, {
                            headers: {
                                'Content-Type': 'application/json',
                                'X-CSRF-TOKEN': '{{csrf_token()}}'
                            },
                        }
                    ).then(function(response) {
                        self.orderLoading = 0;
                        if (response.data.status) {
                            document.getElementById('selectedOrder-image').value= '';
                            self.getOrders();
                            $('#orderInfo').modal('hide');
                            showToast('success', 'Order edited.');
                        } else {
                            showToast('warning', response.data.message);
                        }
                    }).finally(() => {
                        self.editingOrder = false;
                    });
                },
                editClient() {
                    this.savingClient = true;
                    self = this;
                    axios.post('admin/live-order/edit-client', {client: this.selectedOrder.client, id: this.selectedOrder.id}, {
                            headers: {
                                'Content-Type': 'application/json',
                                'X-CSRF-TOKEN': '{{csrf_token()}}'
                            },
                        }
                    ).then(function(response) {
                        if (response.data.status) {
                            self.getOrders();
                            showToast('success', response.data.message);
                        } else {
                            showToast('warning', response.data.message);
                        }
                    }).finally(() => {
                        self.savingClient = false;
                    });
                }
            }
        });
    </script>
@endsection