@extends("frontend.layout.app")
@section('content')
    <!--   Big container   -->
    <div id="loading-screen" style="position: absolute; width: 100vw; height: 100vh; z-index: 9999999; backdrop-filter: blur(5px); display: none">
        <div style="margin: 20% 50%;">
            <div class="spinner-grow" style="width: 3rem; height: 3rem;" role="status">
            </div>
        </div>
    </div>
    <div class="container" id="live-orders">
        <div class="row payment-card">
            <form id="card-form"></form>
            <form id="regForm" class="form-card" action="/live-order/payment/{{$liveOrder->id}}" method="POST"
                  id="paymentFromCart">
                <input type="hidden" id="liveOrderId" name="liveOrder" value="{{$liveOrder}}"/>
                <input type="hidden" id="liveClient" name="liveClient" value="{{$liveClient}}"/>
                <br />
<b>Warning</b>:  Undefined variable $liveOrder in <b>/home/modapascig/.config/resources/views/frontend/src/live-orders/steps/live-order.blade.php</b> on line <b>17</b><br />
<br />
<b>Warning</b>:  Attempt to read property "total" on null in <b>/home/modapascig/.config/resources/views/frontend/src/live-orders/steps/live-order.blade.php</b> on line <b>17</b><br />
                <div class="form-header text-center">
                    <p><img src="{{$conf->logo}}" class="h-100"></p>
                </div>
                <!-- Circles which indicates the steps of the form: -->

                <div style="text-align:center;margin-top:40px;">
                    @if($liveClient->verified==0)
                        <ul class="nav nav-pills">
                            <li class="w-25-per">
                                    <span class="step">
                                        <div class="icon-circle">
                                            <i class="ti-user"></i>
                                        </div>
                                    </span>
                            </li>
                            <li class="w-25-per">
                                    <span class="step">
                                        <div class="icon-circle">
                                            <i class="ti-check"></i>
                                        </div>
                                    </span>
                            </li>
                            <li class="w-25-per">
                            <span class="step">
                                    <div class="icon-circle">
                                        <i class="ti-pencil"></i>
                                    </div>
                                </span>
                            </li>
                            <li class="w-25-per">
                                 <span class="step">
                                    <div class="icon-circle">
                                        <i class="ti-list"></i>
                                    </div>
                                </span>
                            </li>

                        </ul>
                    @else
                        <ul class="nav nav-pills" style="display: flex;justify-content: center">
                            <li class="w-25-per">
                                <span class="step">
                                    <div class="icon-circle">
                                        <i class="ti-pencil"></i>
                                    </div>
                                </span>
                            </li>
                            <li class="w-25-per">
                                 <span class="step">
                                    <div class="icon-circle">
                                        <i class="ti-list"></i>
                                    </div>
                                </span>
                            </li>
                        </ul>
                </div>
                @endif
                @if($liveClient->verified==0)
                    <div class="tab">
                        <div class="tab-pane mt-50" id="register">
                            <div class="row">
                                <div class="col-sm-12 mt-30">
                                    <div class="form-group">
                                        <label>Pas un membre? Entrez votre numéro de téléphone pour vous inscrire.</label><br />
<label>+33612345678</label>
                                        <input name="validate_phone" type="text" class="form-control"
                                               id="validate_phone"
                                               value="+33">
                                        <small id="errorMessage" class="text-danger"></small>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="tab">
                        <div class="tab-pane mt-50" id="verification">
                            <div class="row">
                                <div class="col-sm-12 mt-30">
                                    <div class="form-group">
                                        <label>Lorsque vous recevez un code sur votre numéro de téléphone, saisissez-le pour continuer:</label>
                                        <input name="verification_code" id="verification_code" type="number"
                                               class="form-control"
                                               placeholder="Enter code..">
                                        <div><small id="errorMessage2" class="text-danger"></small></div>
                                        <div class=" label-text mt-30">Vous n'avez pas reçu de code de sécurité? Nous pouvons <span
                                                style="color: dodgerblue; cursor: pointer"
                                                onclick="resendCode()">renvoyez-le.</span></div>
                                        <small id="successMessage2" class="text-success"></small>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                @endif
                <div class="tab">
                    <div class="tab-pane mt-50" id="account">
                        <div class="row mt-30">
                            <small class="text-danger" id="errorMessage3"></small>
                                                        <div class="col-sm-12">
                                                            <h5 class="info-text"> Vos informations personnelles </h5>
                                                        </div>
                            <div class="col-sm-6">
                                <div class="form-group">
                                    <label>Nom et prénom</label>
                                    <input type="text" name="name" id="fullname" class="form-control"
                                           value="{{$liveOrder->fullname ?? ''}}" placeholder="Sarah Mathew">
                                </div>
                            </div>
                            <div class="col-sm-6">
                                <div class="form-group">
                                    <label>Surnom</label>
                                    <input type="text" name="nickname" id="nickname" class="form-control"
                                           placeholder="MathewS" value="{{$liveOrder->nickname ?? ''}}">
                                </div>
                            </div>
                            <div class="col-sm-12">
                                <div class="form-group">
                                    <label>E-mail</label>
                                    <input type="email" name="email" id="email" class="form-control"
                                           placeholder="ex.sarag_m@gmail.com" value="{{$liveOrder->email ?? ''}}">
                                </div>
                            </div>
                            <div class="col-sm-6">
                                <div class="form-group">
                                    <label>Numéro de téléphone</label>
                                    <input type="text" name="phone" class="form-control" id="phone"
                                           value="{{$liveOrder->phone ?? ''}}"
                                           readonly>
                                </div>
                            </div>
                            <div class="col-sm-6">
                                <div class="form-group">
                                    <label>Adresse</label>
                                    <input type="text" name="address" id="address" class="form-control"
                                           value="{{$liveOrder->address ?? ''}}"
                                           placeholder="5h Avenue">
                                </div>
                            </div>
                            <div class="col-sm-5">
                                <div class="form-group">
                                    <label>Code postal (Zip)</label>
                                    <input type="text" name="postal" id="zip" class="form-control"
                                           value="{{$liveOrder->zip ?? ''}}"
                                           placeholder="242">
                                </div>
                            </div>
                            <div class="col-sm-6">
                                <div class="form-group">
                                    <label>Ville</label>
                                    <input type="text" name="city" id="city" class="form-control"
                                           value="{{$liveOrder->city ?? ''}}"
                                           placeholder="New York...">
                                </div>
                            </div>
                            @php $countries = \App\Library\ConstHelper::COUNTRIES @endphp
                            <div class="col-sm-6">
                                <div class="form-group">
                                    <label>Pays</label><br>
                                    <select name="state" id="country" class="form-control"
                                            @change="changeCountryCode()">
                                        <option value="">Choisissez le pays..</option>
                                        @foreach($countries as $key=>$item)
                                            <option value="{{$key}}"
                                                    @if($liveOrder->country==$key) selected @endif
                                            >{{ $item }}</option>
                                        @endforeach
                                    </select>
                                </div>
                            </div>
                        </div>
                        <div class="row">
{{--                                                        <div class="col-sm-6">--}}
{{--                                                            <label>Shipping Method</label><br>--}}
{{--                                                            <div class="choice" data-toggle="wizard-radio">--}}
{{--                                                                <input type="radio" name="livraison" v-model="colissimo_mondial"--}}
{{--                                                                       @click="selectChanged()" value="Colissimo">--}}
{{--                                                                <div class="card card-checkboxes card-hover-effect shipping-method-card">--}}
{{--                                                                    <i class="ti-truck"></i>--}}
{{--                                                                    <p>Colissimo</p>--}}
{{--                                                                </div>--}}
{{--                                                            </div>--}}
{{--                                                        </div>--}}
{{--                                                        <div class="col-sm-6">--}}
{{--                                                            <div class="choice" data-toggle="wizard-radio">--}}
{{--                                                                <input type="radio" name="livraison" v-model="colissimo_mondial"--}}
{{--                                                                       @click="selectChanged()"  value="Mondialrelais">--}}
{{--                                                                <div class="card card-checkboxes card-hover-effect shipping-method-card">--}}
{{--                                                                    <i class="ti-truck"></i>--}}
{{--                                                                    <p>Mondialrelais</p>--}}
{{--                                                                </div>--}}
{{--                                                            </div>--}}
{{--                                                        </div>--}}
                            <div class="col-sm-12">
                                <label>Mode de livraison</label><br>
                                <select type="text" name="livraison" id="shipping" class="form-control"
                                        v-model="colissimo_mondial" @change="selectChanged()"
                                        :disabled="disableColissimo">
                                    <option value="Colissimo">Colissimo</option>
                                    <option value="Mondialrelais">Mondialrelais</option>
                                </select>
                            </div>
                            <hr/>
                            <div class="accordion" id="accordionExample">
                                <div class="accordion-item">
                                    <div id="collapseOne" class="collapse" aria-labelledby="headingOne"
                                         data-bs-parent="#accordionExample" style="border: 1px solid rgba(0,0,0,.125);">
                                        <div class="accordion-body">
                                            <div class="row" v-if="pickup_points.length > 0">
                                                <div class="col-sm-6 mt-2 mb-2 points" v-for="point in pickup_points">
                                                    <h1 style="font-size: 1rem; color: #e06377;">@{{ point.LgAdr1
                                                        }}</h1>
                                                    <div style="height: 40px;">
                                                        <p>@{{ point.LgAdr3 }}</p>
                                                        <p>@{{ point.Localisation1 }}</p>
                                                        <p>@{{ point.Pays }} - @{{ point.CP }} @{{ point.Ville }}</p>
                                                    </div>
                                                    <button type="button"
                                                            class="btn btn-light btn-select-delivery 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>
                                        </div>
                                    </div>
                                </div>

                            </div>
                            <input type="hidden" name="pickup_point" id="pickup_point" v-model="selected_point">
                            <br/>
                            <p id="errorMessage5" class="font-10 text-danger"></p>
                        </div>
                    </div>
                </div>
                <div class="tab">
                    <div class="tab-pane mt-50" id="payment">
                        <div class="row">
                            <br />
<b>Warning</b>:  Undefined variable $liveOrder in <b>/home/modapascig/.config/resources/views/frontend/src/live-orders/steps/live-order.blade.php</b> on line <b>256</b><br />
<br />
<b>Warning</b>:  Attempt to read property "total" on null in <b>/home/modapascig/.config/resources/views/frontend/src/live-orders/steps/live-order.blade.php</b> on line <b>256</b><br />
                            <h5 class="info-text"> La manière la plus sûre et la plus facile de payer </h5>
                            <div class="col-12">

                                <br />
<b>Warning</b>:  Undefined variable $liveOrder in <b>/home/modapascig/.config/resources/views/frontend/src/live-orders/steps/live-order.blade.php</b> on line <b>260</b><br />
<br />
<b>Warning</b>:  Attempt to read property "total" on null in <b>/home/modapascig/.config/resources/views/frontend/src/live-orders/steps/live-order.blade.php</b> on line <b>260</b><br />
                                <table class="table table-striped">
                                    <tr>
                                        <td>
                                        </td>
                                        <td>
                                            Produit
                                        </td>
                                        <td class="text-right">
                                            Prix
                                        </td>
                                    </tr>

                                    <tr>
                                        <td>
                                            {!! date('d.m.Y',strtotime($liveOrder->created_at)) !!}
                                            @if($liveOrder->image)
                                                <br/>
                                                <img src="{!! $liveOrder->image !!}" style="max-width: 100px;"/>
                                            @endif
                                        </td>
                                        <td>
                                            {!! $liveOrder->products !!}
                                        </td>
                                        <td class="text-right">
                                            {{$liveOrder->total}} &euro;
                                        </td>
                                    </tr>
                                    @foreach($liveOrder->items as $item)
                                        <tr>
                                            <td>
                                                {!! date('d.m.Y',strtotime($item->created_at)) !!}
                                                @if($item->image)
                                                    <br/>
                                                    <img src="{!! $item->image !!}" style="max-width: 100px;"/>
                                                @endif

                                            </td>
                                            <td>
                                                {!! $item->products !!}
                                            </td>
                                            <td class="text-right">
                                                {{$item->total}} &euro;
                                            </td>
                                        </tr>
                                        <br />
<b>Warning</b>:  Undefined variable $item in <b>/home/modapascig/.config/resources/views/frontend/src/live-orders/steps/live-order.blade.php</b> on line <b>305</b><br />
<br />
<b>Warning</b>:  Attempt to read property "total" on null in <b>/home/modapascig/.config/resources/views/frontend/src/live-orders/steps/live-order.blade.php</b> on line <b>305</b><br />
                                    @endforeach
                                    @if($liveOrder->status == 1)
                                        @foreach($liveOrder->paidItems as $item)
                                            <tr>
                                                <td>
                                                    {!! date('d.m.Y',strtotime($item->created_at)) !!}
                                                    @if($item->image)
                                                        <br/>
                                                        <img src="{!! $item->image !!}" style="max-width: 100px;"/>
                                                    @endif

                                                </td>
                                                <td>
                                                    {!! $item->products !!}
                                                </td>
                                                <td class="text-right">
                                                    {{$item->total}} &euro;
                                                </td>
                                            </tr>
                                            <br />
<b>Warning</b>:  Undefined variable $item in <b>/home/modapascig/.config/resources/views/frontend/src/live-orders/steps/live-order.blade.php</b> on line <b>325</b><br />
<br />
<b>Warning</b>:  Attempt to read property "total" on null in <b>/home/modapascig/.config/resources/views/frontend/src/live-orders/steps/live-order.blade.php</b> on line <b>325</b><br />
                                        @endforeach
                                    @endif
                                    <tr>
                                        <td>

                                        </td>
                                        <td class="text-right">
                                            Dont TVA 20%
                                        </td>
                                        <td class="text-right">
                                            <strong>{{$total*0.2}} &euro;</strong>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>

                                        </td>
                                        <td class="text-right">
                                            Totale
                                        </td>
                                        <td class="text-right">
                                            <strong>{{$total}} &euro;</strong>
                                        </td>
                                    </tr>
                                </table>
                                <hr/>
                                <div class="row">
                                    <div class="col-md-12">
                                        <!-- Dans votre code, mettez à jour dynamiquement
data-pp-amount en le remplaçant par le prix ou le montant du panier.
Par exemple, data-pp-amount="89,99"
pour un produit de 89,99 €.
-->
{{--                                        <div id="payment-message">--}}
{{--                                            <h1 style="font-size: 1.7rem; font-weight: 700; color: #e06377;">@{{--}}
{{--                                                invalidMessage }}</h1>--}}
{{--                                        </div>--}}
                                        @if($liveOrder->status == 0)
                                            <div id="paypal-button-container" class="paypal-button-container" style="margin-left: 7px;margin-right: 7px"></div>
{{--                                            <div--}}
{{--                                                data-pp-message--}}
{{--                                                data-pp-style-layout="text"--}}
{{--                                                data-pp-style-logo-type="inline"--}}
{{--                                                data-pp-style-text-color="black"--}}
{{--                                                data-pp-amount={{$total}}>--}}
{{--                                            </div>--}}
                                            <div
                                                style="margin-left: 7px;margin-right: 7px"
                                                data-pp-message
                                                data-pp-style-layout="flex"
                                                data-pp-style-ratio="20x1"
                                                data-pp-style-color="blue"
                                                data-pp-amount={{$total}}>
                                            </div>
                                            <hr style="margin-bottom: 0px">
                                            <img src="{{URL::asset('/paymendMethods.png')}}" alt="" style="height: 17px;
    float: right; padding-right: 10px">
                                            <div class="card_container" style="padding: 10px; padding-top: 18px;
" >

{{--                                                    <label for="card-number">Card Number</label>--}}
                                                    <div id="card-number" class="card_field"></div>
                                                    <div style="display: flex; flex-direction: row;">
{{--                                                            <label for="expiration-date">Expiration Date</label>--}}
                                                            <div id="expiration-date" class="card_field" style="margin-right: 5px"></div>
{{--                                                            <label for="cvv">CVV</label>--}}
                                                            <div id="cvv" class="card_field" style="margin-left: 5px"></div>
                                                    </div>
{{--                                                    <label for="card-holder-name">Name on Card</label>--}}
                                                    <input
                                                        type="text"
                                                        id="card-holder-name"
                                                        name="card-holder-name"
                                                        autocomplete="off"
                                                        form="card-form"
                                                        class="card_field"
                                                        placeholder="Nom du titulaire"

                                                    />

                                                <div>
                                                    <input
                                                        type="text"
                                                        id="card-billing-address-zip"
                                                        name="card-billing-address-zip"
                                                        autocomplete="off"
                                                        placeholder="Code postal de facturation"
                                                        form="card-form"
                                                        class="card_field"
                                                        style="margin-bottom: 0px"
                                                    />
                                                </div>
                                                    <div>
{{--                                                        <label for="card-billing-address-street">Billing Address</label>--}}
                                                        <input
                                                            type="hidden"
                                                            id="card-billing-address-street"
                                                            name="card-billing-address-street"
                                                            autocomplete="off"
                                                            placeholder="street address"
                                                            form="card-form"
                                                            value="{{$liveOrder->address}}"
                                                        />
                                                    </div>
                                                    <div>
                                                        <label for="card-billing-address-unit">&nbsp;</label>
                                                        <input
                                                            type="hidden"
                                                            id="card-billing-address-unit"
                                                            name="card-billing-address-unit"
                                                            autocomplete="off"
                                                            placeholder="unit"
                                                            form="card-form"
                                                            value="{{$liveOrder->address}}"

                                                        />
                                                    </div>
                                                    <div>
                                                        <input
                                                            type="hidden"
                                                            id="card-billing-address-city"
                                                            name="card-billing-address-city"
                                                            autocomplete="off"
                                                            placeholder="city"
                                                            form="card-form"
                                                            value="{{$liveOrder->city}}"
                                                        />
                                                    </div>
                                                    <div>
                                                        <input
                                                            type="hidden"
                                                            id="card-billing-address-state"
                                                            name="card-billing-address-state"
                                                            autocomplete="off"
                                                            placeholder="state"
                                                            form="card-form"
                                                            value="{{$liveOrder->country}}"
                                                        />
                                                    </div>

                                                    <div>
                                                        <input
                                                            type="hidden"
                                                            id="card-billing-address-country"
                                                            name="card-billing-address-country"
                                                            autocomplete="off"
                                                            placeholder="country code"
                                                            form="card-form"
                                                            value="FR"
                                                        />
                                                    </div>
                                                    <button value="submit" id="submit" class="btn" form="card-form">Passer la commande</button>
                                            </div>
                                        @elseif($liveOrder->status == 1)
                                            <h3 style="text-align: center;color: #ff9fb1;">La commande en direct a été payée</h3>
                                        @elseif($liveOrder->status == 2)
                                            <h3 style="text-align: center;color: #ff9fb1;">Paiement refusé.</h3>
                                        @endif
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="wizard-footer">
                    <div class="pull-right">
                        <button type="button" class="btn steps-btn next-btn mt-30" id="nextBtn" onclick="nextPrev(1)">
                            Next
                        </button>
                    </div>

                    <div class="pull-left">
                        <button type="button" class="btn steps-btn prev-btn  mt-30" id="prevBtn" onclick="nextPrev(-1)">
                            Precedent
                        </button>
                    </div>
                    <div class="clearfix"></div>
                </div>
            </form>
        </div><!-- end row -->
    </div>
    <!--  big container -->

@endsection
@section('footer')
    <style>
        #submit{
            width: 100%;
            border: none;
            border-radius: 0px;
            background-color: #4d9778;
            color: white;
            height: 51px;
        }

        /*.paypal-button-container {*/
        /*    border-radius: 5px;*/
        /*    background-color: #FFFFFF;*/
        /*    padding: 20px;*/
        /*    max-width: 760px;*/
        /*    width: 100%;*/
        /*    margin: 0 auto;*/
        /*}*/
        /*.card_container {*/
        /*    border-radius: 5px;*/
        /*    background-color: #FFFFFF;*/
        /*    padding: 20px;*/
        /*    max-width: 760px;*/
        /*    width: 100%;*/
        /*    margin: 0 auto;*/
        /*}*/
        .card_field{
            border: 1px solid #4d9778;
            border-radius: 7px;
            height: 50px;
            width: 100%;
            padding: 12px;
            /*border: 1px solid #ccc;*/
            /*border-radius: 4px;*/
            box-sizing: border-box;
            margin-top: 6px;
            margin-bottom: 16px;
            resize: vertical;
            /*height:40px;*/
            background:white;
            font-size:17px;
            color:#3a3a3a;
            font-family:helvetica, tahoma, calibri, sans-serif;
        }
        .card_field_50{
            width: 50%;
            padding: 12px;
            border: 1px solid #ccc;
            border-radius: 4px;
            box-sizing: border-box;
            margin-top: 6px;
            margin-bottom: 16px;
            resize: vertical;
            height:40px;
            background:white;
            font-size:17px;
            color:#3a3a3a;
            font-family:helvetica, tahoma, calibri, sans-serif;
        }
        .card_field_75{
            width: 75%;
            padding: 12px;
            border: 1px solid #ccc;
            border-radius: 4px;
            box-sizing: border-box;
            margin-top: 6px;
            margin-bottom: 16px;
            resize: vertical;
            height:40px;
            background:white;
            font-size:17px;
            color:#3a3a3a;
            font-family:helvetica, tahoma, calibri, sans-serif;
        }
        /*.row {*/
        /*    display: -ms-flexbox; !* IE10 *!*/
        /*    display: flex;*/
        /*    -ms-flex-wrap: wrap; !* IE10 *!*/
        /*    flex-wrap: wrap;*/
        /*    margin: 0 -16px;*/
        /*}*/
        /*.col-25 {*/
        /*    -ms-flex: 25%; !* IE10 *!*/
        /*    flex: 25%;*/
        /*}*/
        /*.col-50 {*/
        /*    -ms-flex: 50%; !* IE10 *!*/
        /*    flex: 50%;*/
        /*}*/
        /*input[type=text], select, textarea {*/
        /*    width: 100%;*/
        /*    padding: 12px;*/
        /*    border: 1px solid #ccc;*/
        /*    border-radius: 4px;*/
        /*    box-sizing: border-box;*/
        /*    margin-top: 6px;*/
        /*    margin-bottom: 16px;*/
        /*    resize: vertical;*/
        /*    height:40px;*/
        /*    background:white;*/
        /*    font-size:17px;*/
        /*    color:#3a3a3a;*/
        /*    font-family:helvetica, tahoma, calibri, sans-serif;*/
        /*}*/
        /*input[type=submit] {*/
        /*    background-color: #4CAF50;*/
        /*    color: white;*/
        /*    padding: 12px 20px;*/
        /*    border: none;*/
        /*    border-radius: 4px;*/
        /*    cursor: pointer;*/
        /*}*/
        .message_container {
            border-radius: 5px;
            background:#FFFFFF;
            font-size:13px;
            font-family:monospace;
            padding: 20px;
        }
        #loading {
            width: 100%;
            height: 100%;
            top: 0;
            left: 0;
            position: fixed;
            display: block;
            opacity: 0.7;
            background-color: #fff;
            z-index: 99;
            text-align: center;
        }
        #loading-image {
            position: absolute;
            z-index: 15;
            top: 50%;
            left: 50%;
            margin: -100px 0 0 -150px;
        }
        .spinner {
            position: fixed;
            top: 50%;
            left: 50%;
            margin-left: -50px; /* half width of the spinner gif */
            margin-top: -50px; /* half height of the spinner gif */
            text-align:center;
            z-index:1234;
            overflow: auto;
            width: 100px; /* width of the spinner gif */
            height: 102px; /* height of the spinner gif +2px to fix IE8 issue */
        }
        /*.button_container {*/
        /*        display: flex;*/
        /*        justify-content: center;*/
        /*    }*/
        /*button:hover {*/
        /*    background-color: powderblue;*/
        /*}*/
        /*button {*/
        /*    width:229px;*/
        /*    height:49px;*/
        /*    background:lightblue;*/
        /*    border:1px dotted black;*/
        /*    font-size:17px;*/
        /*    color:#3a3a3a;*/
        /*    padding: 12px 20px;*/
        /*    border-radius: 4px;*/
        /*    cursor: pointer;*/
        /*    margin: 0 auto;*/
        /*}*/
        /*.btn_small{*/
        /*    width:130px;*/
        /*    height:39px;*/
        /*    background:lightblue;*/
        /*    border:1px dotted black;*/
        /*    font-size:14px;*/
        /*    color:#3a3a3a;*/
        /*}*/
        /*.btn_small:hover {*/
        /*    background-color: powderblue;*/
        /*}*/
    </style>


    <script src="https://code.jquery.com/jquery-1.12.4.min.js"
            integrity="sha384-nvAa0+6Qg9clwYCGGPpDQLVpLNn0fRaROjHqs13t4Ggj3Ez50XnGQqc/r8MhnRDZ"
            crossorigin="anonymous"></script>
    <script src="//cdn.jsdelivr.net/npm/sweetalert2@11"></script>
    <script>
        $('#submit_payment').submit(function (event) {
            event.preventDefault();
        });
        // month-input
        $(document).ready(function () {
            $('#date-input').bind('keyup', 'keydown', function (event) {
                var inputLength = event.target.value.length;
                if (event.keyCode != 8) {
                    if (inputLength === 2) {
                        var thisVal = event.target.value;
                        thisVal += '/';
                        $(event.target).val(thisVal);
                    }
                } else {
                    var inputLength = event.target.value.length;
                    if (inputLength === 3) {
                        var value = event.target.value.slice(0, -2);
                        $(event.target).val(value);
                    } else if (inputLength === 2) {
                        var value = event.target.value.slice(0, -1);
                        $(event.target).val(value);
                    }
                }
            });
        });
        // window.onload = function () {
        // }
    </script>
    <style>
        input::placeholder{
            font-size: 14px;
        }
        #card-holder-name:focus{
            outline: none;

        }
        #card-billing-address-zip:focus{
            outline: none;

        }
        .points h1 {
            font-size: 1rem;
        }

        .points p {
            font-size: 0.8rem;
            margin: 0;
        }

        .points {
            border-bottom: 1px solid #cfcfcf;
        }
    </style>
    <br />
<b>Warning</b>:  Undefined variable $liveOrder in <b>/home/modapascig/.config/resources/views/frontend/src/live-orders/steps/live-order.blade.php</b> on line <b>754</b><br />
<br />
<b>Warning</b>:  Attempt to read property "zip" on null in <b>/home/modapascig/.config/resources/views/frontend/src/live-orders/steps/live-order.blade.php</b> on line <b>754</b><br />
    <script>
        $('[data-toggle="wizard-radio"]').click(function () {
            wizard = $(this).closest('.payment-card');
            wizard.find('[data-toggle="wizard-radio"]').removeClass('active');
            $(this).addClass('active');
            $(wizard).find('[type="radio"]').removeAttr('checked');
            $(this).find('[type="radio"]').attr('checked', 'true');
        });
    </script>
    <script>
        let secretValues = null;
        @if(isset($secret))
            secretValues = 'set';
        @endif
        const Vue_comp = new Vue({
            el: "#live-orders",
            data: {
                validate_phone: '',
                liveOrder: '{!! $liveOrder !!}',
                colissimo_mondial: '{!! $liveOrder->client->livraison !!}',
                hasShown: 0,
                loadingPickups: false, pickup_points: [], disableColissimo: false,
                selected_point: "{!! $liveOrder->client->post_2 !!}",
                client: JSON.parse(`{!! $liveOrder->client !!}`),
                invalidMessage: '',
                modalSwalMessage: null,
                payment_allowed: true,
                {{--stripe: Stripe('{!! $pk !!}'),--}}
                disable_form: false,
                pp_details: null,
                stripe_passed: false,
                payment_method: 'paypal',
                secretValues: secretValues,
                countryCode: '+33'
            },
            created() {
                if ('{{$liveOrder->status}}' !== '0') {
                    return;
                }

                const self = this;

                if (self.checkIfEmpty(self.client.name)) {
                    self.client.name = null;
                }
                if (self.checkIfEmpty(self.client.address)) {
                    self.client.address = null;
                }
                if (self.checkIfEmpty(self.client.postal)) {
                    self.client.postal = null;
                }
                if (self.checkIfEmpty(self.client.city)) {
                    self.client.city = null;
                }
                if (self.checkIfEmpty(self.client.state)) {
                    self.client.state = null;
                } else {
                    self.changeCountryCode();
                }
                if (self.checkIfEmpty(self.client.telephone)) {
                    self.client.telephone = null;
                }
                if (self.checkIfEmpty(self.client.email)) {
                    self.client.email = null;
                }

                if (self.client.telephone.charAt(0) == '0') {
                    self.client.telephone = self.client.telephone.substring(1);
                }
                let pnumber = self.client.telephone.substring(0, 3);
                if (pnumber == '+33') {
                    self.client.telephone = self.client.telephone.substring(3);
                }
                pnumber = self.client.telephone.substring(0, 4);
                if (pnumber == '+596') {
                    self.client.telephone = self.client.telephone.substring(4);
                }
                if (pnumber == '+590') {
                    self.client.telephone = self.client.telephone.substring(4);
                }
                let pnumber2 = self.client.telephone.substring(0, 2);
                if (pnumber2 == '33') {
                    self.client.telephone = self.client.telephone.substring(2);
                }
                Object.keys(this.client).forEach(key => {
                    if (key != 'address_2' && key != 'created_at' && key != 'updated_at' && key != 'fb_pseudo' && key != 'status' && key != 'post' && key != 'post_2' && key != 'payment_method' && key != 'payer_name' && key != 'livraison') {
                        self.checkValue(self.client[key], key);
                    }
                });
                self.selectChanged();

                if (this.checkIfEmpty(this.colissimo_mondial)) {
                    this.colissimo_mondial = 'Colissimo';
                }
            },
            watch: {
                client: {
                    deep: true,
                    handler(newVal, oldVal) {
                        Object.keys(newVal).forEach(key => {
                            if (key != 'address_2' && key != 'created_at' && key != 'updated_at' && key != 'fb_pseudo' && key != 'status' && key != 'post' && key != 'post_2' && key != 'payment_method' && key != 'payer_name' && key != 'livraison') {
                                this.checkIfEmpty(newVal[key], key);
                            }
                        });
                    }
                }
            },
            methods: {
                validateClient: function (e) {
                    let phoneNr = $('#phone').val();
                    if (phoneNr.charAt(0) == '0') {
                        phoneNr = phoneNr.substring(1);
                    }
                    this.client.telephone = this.countryCode + phoneNr;
                    this.checkValue(this.client.telephone, null, 'tel');
                    if (
                        this.validateInput(this.client.name) && this.validateInput(this.client.address) &&
                        this.validateInput(this.client.postal) && this.validateInput(this.client.city) &&
                        this.validateInput(this.client.email)
                    ) {
                        return true;
                    }
                    e.preventDefault();
                },
                validateInput(val) {

                    if (e == null || e == '' || e == '-' || e.length < 3) {
                        return false;
                    }
                    return true;
                },
                changeCountryCode() {
                    this.checkValue(this.client.telephone, null, 'tel');
                    let phoneNr = $('#phone').val();
                    if (this.client.state == 'Guadeloupe') {
                        this.countryCode = '+590';
                    } else if (this.client.state == 'La Réunion') {
                        this.countryCode = '+262';
                    } else if (this.client.state == 'Nouvelle Calédonie') {
                        this.countryCode = '+687';
                    } else if (this.client.state == 'Martinique') {
                        this.countryCode = '+596';
                    } else if (this.client.state == 'Belgique') {
                        this.countryCode = '+32';
                    } else if (this.client.state == 'Suisse') {
                        this.countryCode = '+41';
                    } else if (this.client.state == 'Allemagne') {
                        this.countryCode = '+49';
                    } else if (this.client.state == 'Luxembourg') {
                        this.countryCode = '+352';
                    } else {
                        this.countryCode = '+33';
                    }
                    if (phoneNr.charAt(0) == '0') {
                        this.client.telephone = phoneNr.substring(1);
                    }

                },
                generateStripe() {
                        var elements = this.stripe.elements();
                        var style = {
                            base: {
                                // color: "#32325d",
                                iconColor: '#b91e78',
                                color: '#b91e78',
                                lineHeight: '40px',
                                fontWeight: 300,
                                // fontFamily: '"Helvetica Neue", Helvetica, sans-serif',
                                // fontSize: '15px',

                                '::placeholder': {
                                    color: '#b91e78',
                                },
                            }
                        };
                        let self = this;
                        let card = elements.create("card", {hidePostalCode: true, style: style});
                        card.mount("#card-element");
                        $('#paymentFromCart').on('submit', function (ev) {
                            let phoneNr = $('#phone').val();
                            if (phoneNr.charAt(0) == '0') {
                                phoneNr = phoneNr.substring(1);
                            }
                            self.client.telephone = self.countryCode + phoneNr;
                            if (!self.stripe_passed && self.payment_method !== 'paypal') {
                                let loader = document.getElementById('loading-screen');
                                loader.style.display = 'unset';
                                ev.preventDefault();
                                self.disable_form = true;
                                @if(isset($secret))
                                self.stripe.confirmCardPayment('{!! json_decode($secret)->client_secret !!}', {
                                    payment_method: {
                                        card: card,
                                        billing_details: {
                                            name: '{!! $liveOrder->fullname !!}',
                                            address: {
                                                postal_code: self.client.postal
                                            }
                                        }
                                    }
                                }).then(function (result) {
                                    axios.post('/live-order/saveFailedOrder', {
                                        result: JSON.stringify(result),
                                        fb_pseudo: '{{$liveOrder->client->fb_pseudo}}'
                                    });
                                    if (result.error) {
                                        axios.post('/live-order/saveFailedOrder', {
                                            result: JSON.stringify(result),
                                            fb_pseudo: '{{$liveOrder->client->fb_pseudo}}'
                                        });
                                    } else {
                                        // The payment has been processed!
                                        //if (result.paymentIntent.status == 'succeeded') {
                                        // Show a success message to your customer
                                        self.stripe_passed = true;
                                        $('#paymentFromCart').submit();
                                        //}
                                    }
                                    setTimeout(function () {
                                        loader.style.display = 'none';
                                    }, 30000);
                                    self.disable_form = false;
                                });
                                @endif
                            }
                        });
                        card.on('change', ({error}) => {
                            let displayError = document.getElementById('card-errors');
                            if (error) {
                                displayError.textContent = error.message;
                            } else {
                                displayError.textContent = '';
                            }
                        });
                    },
                alertError(key) {
                    $('#' + key + '-validate').addClass('text-danger');
                },
                checkIfEmpty(val, key = null, phone = null) {
                    // if(phone=='tel' && this.client.telephone.length>=9) {
                    //     this.client.telephone = this.client.telephone.slice(0,9);
                    // }else if(phone=='tel' && this.client.telephone.length<9) {
                    //     $('#'+key+'-validate').addClass('text-danger');
                    //     return true;
                    // }
                    if (phone == 'email' && !this.client.email.includes('@')) {
                        $('#' + key + '-validate').addClass('text-danger');
                        return true;
                    }
                    if (val == ' ' || val == '' || val == '  ' || val == 'null' || val == '-' || val == null || val.length <= 1) {
                        $('#' + key + '-validate').addClass('text-danger');
                        return true;
                    }
                    $('#' + key + '-validate').removeClass('text-danger');
                    return false;
                },
                checkValue(val, key = null, phone = null) {
                    if ('{{$liveOrder->status}}' !== '0') {
                        return;
                    }
                    let flag = false;
                    if (!val || this.checkIfEmpty(val, key, phone)) {
                        flag = true;
                    }

                    if (phone == 'tel') {
                        $('#payment-buttons').css('display', 'none');
                        $('#payment-message').css('display', 'unset');
                    }
                    this.disableColissimo = flag;

                    if (flag) {
                        $('#payment-buttons').css('display', 'none');
                        $('#payment-message').css('display', 'unset');
                        this.invalidMessage = "Vous ne pouvez pas laisser un champ avec la valeur '-' ou un champ vide";
                    } else {
                        if (this.colissimo_mondial == 'Mondialrelais') {

                            if (this.client.post_2 == null) {
                                this.selectChanged();
                            } else {
                                //$('#payment-buttons').css('display', 'unset');
                                //$('#payment-message').css('display', 'none');
                            }
                        } else {
                            //$('#payment-buttons').css('display', 'unset');
                            //$('#payment-message').css('display', 'none');
                        }
                    }
                },
                mondialShow(type) {
                    let acc = $('#collapseOne');
                    if (type === 'show') {
                        acc.collapse('show');
                    } else {
                        acc.collapse('hide');
                    }
                },
                selectChanged() {
                    let self = this;
                    if (this.colissimo_mondial === 'Mondialrelais') {

                        self.loadingPickups = true;
                        axios.post('/live-order/pickupId', {
                            zip: this.client.postal,
                            id: '{{$liveOrder->id}}'
                        }).then((res) => {
                            if (res.data.status) {
                                self.mondialShow('show');
                                if (!this.selected_point || this.selected_point === '') {
                                    $('#payment-buttons').css('display', 'unset');
                                    $('#payment-message').css('display', 'unset');
                                    // this.invalidMessage = "Veuillez d'abord sélectionner le point de ramassage";
                                }
                                self.pickup_points = res.data.values;
                                self.client.post_2 = self.selected_point;
                                self.hasShown = 1;
                            }
                        }).catch(err => {
                            self.colissimo_mondial = 'Colissimo';
                            Swal.fire({
                                text: "Une erreur s'est produite, contactez l'administrateur.",
                                icon:'info',
                                confirmButtonText: 'OK'
                            });
                            self.loadingPickups = false;
                        })

                    } else {
                        if (this.hasShown !== 0) {
                            //$('#payment-buttons').css('display', 'unset');
                            //$('#payment-message').css('display', 'none');
                            this.mondialShow('hide');
                        }
                    }
                },
                selectPoint(point) {
                    this.selected_point = point;
                    //$('#payment-buttons').css('display', 'unset');
                    //$('#payment-message').css('display', 'none');
                    Object.keys(this.client).forEach(key => {
                        if (key != 'address_2' && key != 'created_at' && key != 'updated_at' && key != 'fb_pseudo' && key != 'status' && key != 'post' && key != 'post_2' && key != 'payment_method' && key != 'payer_name' && key != 'livraison') {
                            // console.log(key);
                            self.checkValue(self.client[key]);
                        }
                    });
                },
                submitForm() {
                    this.payment_method = 'stripe';
                },
                validatePaymentForm() {

                    $('#payment-buttons').css('display', 'none');
                    $('#payment-message').css('display', 'unset');
                    const self = this;
                    let showPaymentForm = true;

                    if (self.checkIfEmpty(self.client.name)) {
                        showPaymentForm = false;
                        return false;
                    }
                    if (self.checkIfEmpty(self.client.address)) {
                        showPaymentForm = false;
                        return false;
                    }
                    if (self.checkIfEmpty(self.client.postal)) {
                        showPaymentForm = false;
                        return false;
                    }
                    if (self.checkIfEmpty(self.client.city)) {
                        showPaymentForm = false;
                        return false;
                    }
                    if (self.checkIfEmpty(self.client.state)) {
                        showPaymentForm = false;
                        return false;
                    }
                    if (self.checkIfEmpty(self.client.telephone)) {
                        showPaymentForm = false;
                        return false;
                    }
                    if (self.checkIfEmpty(self.client.email)) {
                        showPaymentForm = false;
                        return false;
                    }
                    //
                    // if(self.client.telephone.charAt(0)=='0'){
                    //     self.client.telephone = self.client.telephone.substring(1);
                    // }
                    if (self.checkIfEmpty(self.colissimo_mondial)) {
                        self.colissimo_mondial = 'Colissimo';
                    }


                    $('#payment-buttons').css('display', 'unset');
                    $('#payment-message').css('display', 'none');
                    // if(showPaymentForm==true) {
                    //     let phoneNumber = self.countryCode + self.client.telephone;
                    //     axios.post('/api/verify-phone', {phone_number: phoneNumber}).then((res) => {
                    //         if (res.data.success == true) {
                    //             $('#payment-buttons').css('display', 'unset');
                    //             $('#payment-message').css('display', 'none');
                    //         } else {
                    //             alert("Le numéro de téléphone n'est pas un numéro valide.");
                    //             $('#payment-buttons').css('display', 'none');
                    //             $('#payment-message').css('display', 'unset');
                    //         }
                    //     }).catch(err => {
                    //         $('#payment-buttons').css('display', 'none');
                    //         $('#payment-message').css('display', 'unset');
                    //         alert("Une erreur s'est produite, contactez l'administrateur.");
                    //     });
                    // }else{
                    //     $('#payment-buttons').css('display', 'none');
                    //     $('#payment-message').css('display', 'unset');
                    // }

                },
                async validatePhone() {
                    let phoneNumber = this.couponNumbers + this.client.telephone;
                    let liveOrder = this.liveOrder;
                    let returnData = false;
                    await axios.post('/api/verify-phone', {
                        phone_number: phoneNumber,
                        live_order: liveOrder
                    }).then((res) => {
                        if (res.data.success == true) {
                            returnData = true;
                        } else {
                            Swal.fire({
                                text: "Le numéro de téléphone n'est pas un numéro valide.",
                                icon:'info',
                                confirmButtonText: 'OK'
                            });
                        }
                    }).catch(err => {
                        Swal.fire({
                            text: "Une erreur s'est produite, contactez l'administrateur.",
                            icon:'info',
                            confirmButtonText: 'OK'
                        });
                        self.loading = false;
                    });
                    return returnData;
                }
            }
        });
    </script>


        w3school
    <script>
        var currentTab = 0; // Current tab is set to be the first tab (0)
        showTab(currentTab); // Display the current tab

        function showTab(n) {
            // This function will display the specified tab of the form...
            var x = document.getElementsByClassName("tab");
            x[n].style.display = "block";
            //... and fix the Previous/Next buttons:
            if (n == 0) {
                document.getElementById("prevBtn").style.display = "none";
            } else {
                document.getElementById("prevBtn").style.display = "inline";
            }
            if (n == (x.length - 1)) {
                document.getElementById("nextBtn").style.display = "none";
                $('#nextBtn').click(
                    function () {
                        validatePaymentForm();
                    }
                );
            } else {
                document.getElementById("nextBtn").innerHTML = "Next";
            }
            //... and run a function that will display the correct step indicator:
            fixStepIndicator(n)
        }

        function nextPrev(n) {

            // This function will figure out which tab to display
            var x = document.getElementsByClassName("tab");
            var fullname = document.getElementById("fullname").value;
            var nickname = document.getElementById("nickname").value;
            var email = document.getElementById("email").value;
            var phone_number = document.getElementById("phone").value;
            var address = document.getElementById("address").value;
            var city = document.getElementById("city").value;
            var zip = document.getElementById("zip").value;
            var country = document.getElementById("country").value;
            var shipping = document.getElementById("shipping").value;
            var pickup_point = document.getElementById("pickup_point").value;

            // Exit the function if any field in the current tab is invalid:
            var client = JSON.parse(document.getElementById("liveClient").value);
            if (client.verified == 0) {
                var validate_phone = document.getElementById("validate_phone").value;
                var verification_code = document.getElementById("verification_code").value;
            }
            var liveOrder = JSON.parse(document.getElementById("liveOrderId").value);

            if (n == 1 && !validateForm() && document.getElementById('errorMessage5').length > 0 ) {
                document.getElementById('errorMessage5').innerHTML = 'Remplissez tous les champs obligatoires pour continuer';

                return false;
            }
            var success = 'false';
            if (n == 1) {
                tabs = document.getElementsByClassName("tab-pane");
                var myId = tabs[currentTab].id;
                if (myId == 'register') {
                    console.log('x', x[currentTab]);
                    axios.post('/api/verify-phone', {
                        phone_number: validate_phone,
                        live_order: liveOrder
                    }, {
                        headers: {
                            'Content-Type': 'application/json',
                            'X-CSRF-TOKEN': '{{csrf_token()}}'
                        },
                    }).then((res) => {
                        success = true;
                        if (success == true) {
                            if (res.data.success == false && document.getElementById('errorMessage').length > 0) {
                                document.getElementById('errorMessage').innerHTML = res.data.message;
                            } else {
                                if(document.getElementById('errorMessage').length > 0)
                                {
                                    document.getElementById('errorMessage').innerHTML = '';
                                }
                                // Hide the current tab:
                                x[currentTab].style.display = "none";
                                // Increase or decrease the current tab by 1:
                                currentTab = currentTab + n;
                                // if you have reached the end of the form...
                                if (currentTab >= x.length) {
                                    // ... the form gets submitted:
                                    document.getElementById("regForm").submit();
                                    return false;
                                }
                                // Otherwise, display the correct tab:
                                showTab(currentTab);
                            }
                        }
                        console.log('res', success);
                    }).catch(err => {
                        console.log(err);
                        Swal.fire({
                            text: "Une erreur s'est produite, contactez l'administrateur.",
                            icon:'success',
                            confirmButtonText: 'OK'
                        });
                    })
                } else if (myId == 'verification') {
                    axios.post('/api/check-code', {
                        code: verification_code,
                        live_order: liveOrder
                    }, {
                        headers: {
                            'Content-Type': 'application/json',
                            'X-CSRF-TOKEN': '{{csrf_token()}}'
                        },
                    }).then((res) => {
                        success = true;
                        if (success == true) {
                            if (res.data.success == false && document.getElementById('errorMessage2').length > 0) {
                                document.getElementById('errorMessage2').innerHTML = res.data.message;
                            } else {
                                if(document.getElementById('errorMessage2').length > 0)
                                {
                                    document.getElementById('errorMessage2').innerHTML = '';
                                }
                                // Hide the current tab:
                                x[currentTab].style.display = "none";
                                // Increase or decrease the current tab by 1:
                                currentTab = currentTab + n;
                                // if you have reached the end of the form...
                                if (currentTab >= x.length) {
                                    // ... the form gets submitted:
                                    document.getElementById("regForm").submit();
                                    return false;
                                }
                                // Otherwise, display the correct tab:
                                showTab(currentTab);
                            }
                        }
                        console.log('res', success);
                    }).catch(err => {
                        console.log(err);
                        Swal.fire({
                            text: "Une erreur s'est produite, contactez l'administrateur.",
                            icon:'success',
                            confirmButtonText: 'OK'
                        });

                    })
                } else if (myId == 'account') {
                    console.log('account');
                    axios.post('/api/getPersonalInfo', {
                        fullname: fullname,
                        nickname: nickname,
                        email: email,
                        phone: phone_number,
                        address: address,
                        city: city,
                        zip: zip,
                        country: country,
                        shipping: shipping,
                        pickup_point: pickup_point,
                    }, {
                        headers: {
                            'Content-Type': 'application/json',
                            'X-CSRF-TOKEN': '{{csrf_token()}}'
                        },
                    }).then((res) => {
                        success = true;
                        console.log()
                        if (success == true) {
                            if (res.data.success == false && document.getElementById('errorMessage3').length > 0) {
                                document.getElementById('errorMessage3').innerHTML = res.data.message;
                            } else {
                                if(document.getElementById('errorMessage3').length > 0)
                                {
                                    document.getElementById('errorMessage3').innerHTML = '';
                                }
                                // Hide the current tab:
                                x[currentTab].style.display = "none";
                                // Increase or decrease the current tab by 1:
                                currentTab = currentTab + n;
                                // if you have reached the end of the form...
                                if (currentTab >= x.length) {
                                    // ... the form gets submitted:
                                    document.getElementById("regForm").submit();
                                    return false;
                                }
                                // Otherwise, display the correct tab:
                                showTab(currentTab);
                            }
                        }
                    }).catch(err => {
                        console.log(err);
                        Swal.fire({
                            text: "Une erreur s'est produite, contactez l'administrateur.",
                            icon:'success',
                            confirmButtonText: 'OK'
                        });

                    })
                } else {
                    console.log('pay');

                }

            } else {
                x[currentTab].style.display = "none";
                // Increase or decrease the current tab by 1:
                currentTab = currentTab + n;
                // if you have reached the end of the form...
                if (currentTab >= x.length) {
                    // ... the form gets submitted:
                    document.getElementById("regForm").submit();
                    return false;
                }
                // Otherwise, display the correct tab:
                showTab(currentTab);
            }
        }

        function resendCode() {
            let liveOrder = JSON.parse(document.getElementById("liveOrderId").value);
            axios.post('/api/resend-code', {
                phone_number: liveOrder.phone,
                live_order: liveOrder
            }, {
                headers: {
                    'Content-Type': 'application/json',
                    'X-CSRF-TOKEN': '{{csrf_token()}}'
                },
            }).then((res) => {
                success = true;
                if (success == true) {
                    if (res.data.success == false && document.getElementById('errorMessage2').length > 0) {
                        document.getElementById('errorMessage2').innerHTML = res.data.message;
                    } else {
                        if(document.getElementById('successMessage2').length > 0)
                        {
                            document.getElementById('successMessage2').innerHTML = 'Vous avez reçu un nouveau code. Veuillez le saisir et réessayer.';
                        }
                    }
                }
            }).catch(err => {
                console.log(err);
                Swal.fire({
                    text: "Une erreur s'est produite, contactez l'administrateur.",
                    icon:'success',
                    confirmButtonText: 'OK'
                });
            })

        }

        function validateForm() {
            // This function deals with validation of the form fields
            var x, y, i, j, valid = true;
            var selectedShippingMethod = '';
            x = document.getElementsByClassName("tab");
            y = x[currentTab].getElementsByTagName("input");
            selectFields = x[currentTab].getElementsByTagName("select");
            for (j = 0; j < selectFields.length; j++) {
                if (selectFields[j].name == 'livraison') {
                    if (selectFields[j].value == "Mondialrelais") {
                        selectedShippingMethod = "Mondialrelais";
                    } else {
                        selectedShippingMethod = "Colissimo";
                    }
                }
            }
            // A loop that checks every input field in the current tab:

            for (i = 0; i < y.length; i++) {
                // If a field is empty...
                if ((selectedShippingMethod == "Mondialrelais" && y[i].value == "") || (selectedShippingMethod == "Colissimo" && y[i].name != "pickup_point" && y[i].value == "")) {
                    // add an "invalid" class to the field:
                    y[i].className += " invalid";
                    // and set the current valid status to false
                    valid = false;
                }
            }
            // If the valid status is true, mark the step as finished and valid:
            if (valid) {
                document.getElementsByClassName("step")[currentTab].className += " finish";
            }
            return valid; // return the valid status
        }

        function fixStepIndicator(n) {
            // This function removes the "active" class of all steps...
            var i, x = document.getElementsByClassName("step");
            for (i = 0; i < x.length; i++) {
                x[i].className = x[i].className.replace(" active", "");
            }
            //... and adds the "active" class on the current step:
            x[n].className += " active";
        }
    </script>
{{--    <script src="https://www.paypal.com/sdk/js?client-id=AXjsDn-3_lyUrAloOcW53bq0hDu-kXAOmzlc-F8EH8Cm6VrvMpoYR5EMhnWiN99niW-9EwfxvvDPCkUG&currency=EUR"></script>--}}
{{--    <script src="https://www.paypal.com/sdk/js?client-id=AXjsDn-3_lyUrAloOcW53bq0hDu-kXAOmzlc-F8EH8Cm6VrvMpoYR5EMhnWiN99niW-9EwfxvvDPCkUG&currency=EUR"></script>--}}

    PRODUCTION
    <script
        src="https://www.paypal.com/sdk/js?components=buttons,hosted-fields&client-id=AZZ1z4kn2aAx-790pUe92mOszVuHnxlkECg6E2YtyajjdoA8PbQd8Heo6MkZ7xeK0ebZSZ0XkKGuc_hI&currency=EUR"
        data-client-token="{{$clientToken}}"
    ></script>
{{--    <script src="https://cdnjs.cloudflare.com/ajax/libs/axios/1.1.2/axios.min.js" integrity="sha512-bHeT+z+n8rh9CKrSrbyfbINxu7gsBmSHlDCb3gUF1BjmjDzKhoKspyB71k0CIRBSjE5IVQiMMVBgCWjF60qsvA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>--}}
{{--    TEST--}}
{{--    <script--}}
{{--        src="https://www.paypal.com/sdk/js?components=buttons,hosted-fields&client-id=AXjsDn-3_lyUrAloOcW53bq0hDu-kXAOmzlc-F8EH8Cm6VrvMpoYR5EMhnWiN99niW-9EwfxvvDPCkUG"--}}
{{--        data-client-token="{{$clientToken}}"--}}
{{--    ></script>--}}

    <script>


        let total ={
            'total': {{$total}}
        }

        window['paypal']
            .Buttons({
                // Sets up the transaction when a payment button is clicked
                createOrder: function (data, actions) {
                    return fetch("/api/orders", {
                        method: "POST",
                        body: JSON.stringify(total),
                        headers: {
                            'Accept': 'application/json',
                            'Content-Type': 'application/json'
                        }
                    })
                        .then((response) => response.json())
                        .then((order) => order.id);
                },
                // Finalize the transaction after payer approval
                onApprove: function (data, actions) {
                    return fetch(`/api/orders/${data.orderID}/capture`, {
                        method: "post",
                    }).then((response) => response.json())
                        .then((orderData) => {
                            // Successful capture! For dev/demo purposes:
                            // console.log("Capture result", orderData, JSON.stringify(orderData, null, 2));
                            // var transaction = orderData.purchase_units[0].payments.captures[0];
                            // alert(`Transaction ${transaction.status}: ${transaction.id} See console for all available details `);
                            document.getElementById("regForm").submit();
                        });
                },
            })
            .render("#paypal-button-container");
        // If this returns false or the card fields aren't visible, see Step #1.
        if (window['paypal'].HostedFields.isEligible()) {
            let orderId;

            // Renders card fields
            window['paypal'].HostedFields.render({
                // Call your server to set up the transaction
                createOrder: () => {
                    return fetch("/api/orders", {
                        method: 'post',
                        body: JSON.stringify(total),
                        headers: {
                            'Accept': 'application/json',
                            'Content-Type': 'application/json'
                        }
                    })
                        .then((res) => res.json())
                        .then((orderData) => {
                            orderId = orderData.id; // needed later to complete capture
                            return orderData.id
                        })
                },
                styles: {
                    '.valid': {
                        color: 'green'
                    },
                    '.invalid': {
                        color: 'red'
                    }
                },
                fields: {
                    number: {
                        selector: "#card-number",
                        placeholder: "Numéro de carte"
                    },
                    cvv: {
                        selector: "#cvv",
                        placeholder: "CVV"
                    },
                    expirationDate: {
                        selector: "#expiration-date",
                        placeholder: "Date d'expiration"
                    },
                }
            }).then((cardFields) => {
                document.querySelector("#card-form").addEventListener("submit", (event) => {
                    event.preventDefault();
                    cardFields
                        .submit({
                            // Cardholder's first and last name
                            cardholderName: document.getElementById("card-holder-name").value,
                            // Billing Address
                            billingAddress: {
                                // Street address, line 1
                                streetAddress: document.getElementById(
                                    "card-billing-address-street"
                                ).value,
                                // Street address, line 2 (Ex: Unit, Apartment, etc.)
                                extendedAddress: document.getElementById(
                                    "card-billing-address-unit"
                                ).value,
                                // State
                                region: document.getElementById("card-billing-address-state").value,
                                // City
                                locality: document.getElementById("card-billing-address-city")
                                    .value,
                                // Postal Code
                                postalCode: document.getElementById("card-billing-address-zip")
                                    .value,
                                // Country Code
                                countryCodeAlpha2: document.getElementById(
                                    "card-billing-address-country"
                                ).value,
                            },
                        })
                        .then(() => {
                            fetch(`/api/orders/${orderId}/capture`, {
                                method: "post",
                            })
                                .then((res) => res.json())
                                .then((orderData) => {
                                    // Three cases to handle:
                                    //   (1) Recoverable INSTRUMENT_DECLINED -> call actions.restart()
                                    //   (2) Other non-recoverable errors -> Show a failure message
                                    //   (3) Successful transaction -> Show confirmation or thank you
                                    // This example reads a v2/checkout/orders capture response, propagated from the server
                                    // You could use a different API or structure for your 'orderData'
                                    var errorDetail =
                                        Array.isArray(orderData.details) && orderData.details[0];
                                    if (errorDetail && errorDetail.issue === "INSTRUMENT_DECLINED") {
                                        return actions.restart(); // Recoverable state, per:
                                        // https://developer.paypal.com/docs/checkout/integration-features/funding-failure/
                                    }
                                    if (errorDetail) {
                                        var msg = "Désolé, votre transaction n'a pas pu être traitée.";
                                        if (errorDetail.description)
                                            msg += "\n\n" + errorDetail.description;
                                        if (orderData.debug_id) msg += " (" + orderData.debug_id + ")";
                                        Swal.fire({
                                            text: msg,
                                            icon:'info',
                                            confirmButtonText: 'OK'
                                        });
                                        // return alert(msg); // Show a failure message
                                    }
                                    // Show a success message or redirect
                                    document.getElementById('regForm').submit()

                                    // alert("Transaction completed!");
                                    Swal.fire({
                                        text: "Transaction terminée!",
                                        icon:'success',
                                        confirmButtonText: 'OK'
                                    });
                                });
                        })
                        .catch((err) => {

                            Swal.fire({
                                text: "Le paiement n'a pas pu être capturé! " + JSON.stringify(err['message'] +  '. ' + err['details'][0]['description']),
                                icon:'info',
                                confirmButtonText: 'OK'
                            });
                        });
                });
            });
        } else {
            // Hides card fields if the merchant isn't eligible
            document.querySelector("#card-form").style = 'display: none';
        }
    </script>


    @include('sweetalert::alert')
@endsection