@use('App\Services\Date')
@extends('companyuser::layouts.master')
@section('title',__('tenant::subscription.subscription'))
@section('extra-styles')
    <link rel="stylesheet" type="text/css" href="{{asset('/assets/css/table/table-custome-styles.css')}}">
    <link rel="stylesheet" type="text/css" href="{{asset('/assets/css/custom/radio-buttons-custom.css')}}">
    <style>
        .float-right{
            float: right;
        }
        .float-left{
            float: left;
        }
        .plan-radio{
            width: 150px;
        }
        .radio_plan>input:checked+div label {
            color: white !important;
        }
        .radio_plan>input:checked+div {
            color: white !important;
            background-color: #179b87;
            padding: 14px;
            font-size: 17px;
            border-radius: 7px;
            font-weight: bold;
        }
        .radio_plan>div label{
            cursor: pointer;
        }
        .radio_plan>div {
            cursor: pointer;
            border: 1px solid #d6d4d4;
            padding: 14px;
            font-size: 17px;
            border-radius: 7px;
            font-weight: bold;
        }
        .v-hide{
            visibility: hidden;
        }
        .link-disable{
            cursor: not-allowed;
            color: #7c827c;
        }
        .link-enable:hover{
            cursor: pointer;
            color: #7c827c;
        }
        .link-enable{
            cursor: pointer;
            color: #7c827c;
        }
        .link-active{
            cursor: pointer;
            color: #179b87;
        }
        .swal-footer {
            text-align: center;
        }
    </style>
@endsection
@section('breadcrumb')
    <div class="row breadcrumbs-top">
        <div class="breadcrumb-wrapper col-xs-12">
            <ol class="breadcrumb">
                <li class="breadcrumb-item"><a
                        href="#">@lang('tenant::subscription.subscription')</a>
                </li>
            </ol>
        </div>
    </div>
@endsection
@section('content')
    <section id="configuration">
        <div class="container-fluid">
            <div class="row my-1">
                <div class="col-xs-6 headTitle">
                    <h3 class="d-inline">@lang('tenant::subscription.subscription')</h3>
                </div>
            </div>
            <div class="row">
                <div class="col-xs-12">
                   @include('tenant::partials.payment_status')
                    <div class="card ">
                        @php
                        if(app()->getLocale() == 'en'){
                        $renewalDate = Date::format($data['subscription']->renewal_date);
                        }else{
                        $renewalDate = $data['subscription']->renewal_date;
                        }
                        @endphp
                        <div class="card-body collapse in">
                            <div class="row mb-1">

                                <div class="col-md-3">
                                    <h4 class="text-bold-600">{{__('tenant::subscription.Plan')}}</h4>
                                </div>
                                <div class="col-md-5">
                                    <h4 class="text-bold-600"> {{$data['subscription']->package->name}}</h4>
                                </div>
                            </div>
                            <div class="row mb-1">
                                <div class="col-md-3">
                                    <h5 class="text-bold-600">{{__('tenant::subscription.until')}}</h5>
                                </div>
                                <div class="col-md-5">
                                    <span>{{$renewalDate}}</span>
                                </div>
                            </div>
                            <div class="row mb-1">
                                <div class="col-xs-3">
                                    <h4 class="text-bold-600">
                                        @if($data['subscription']->price == 0)
                                            <span>{{__('tenant::subscription.Free')}}</span>
                                        @elseif($data['subscription']->plan == \Modules\Tenant\Enums\PackagePlansEnum::MONTHLY)
                                            <span>{{$data['subscription']->price}} {{__('tenant::subscription.SAR\mo')}}</span>
                                        @elseif($data['subscription']->plan == \Modules\Tenant\Enums\PackagePlansEnum::ANNUAL)
                                            <span>{{$data['subscription']->price}} {{__('tenant::subscription.SAR\year')}}</span>
                                        @endif
                                    </h4>
                                </div>
                                <div class="col-md-5">
                                    @if($data['subscription']->is_trial)
                                        <span class="warning text-bold-600">
                                            <span>{{__('tenant::subscription.tiral till')}}</span> <span>{{$renewalDate}}</span>
                                        </span>

                                    @elseif($data['subscription']->is_expired)
                                        <span class="danger text-bold-600">{{__('tenant::subscription.expired')}}</span>
                                    @elseif($data['subscription']->is_active)
                                        <span class="success text-bold-600">{{__('tenant::subscription.active')}}</span>
                                    @endif
                                </div>
                            </div>
                            @if(Auth::user()->hasRole('owner'))
                            <div>
                                <a href="" class="d-block mb-half" data-toggle="modal"
                                   data-target="#favoritesModal">{{__('tenant::subscription.Renew Your Subscription')}}</a>
                                {{--
                                <a href="" class="d-block mb-half">{{__('tenant::subscription.Confirm your plan')}}</a>
                                <a href="" class="d-block mb-half">{{__('tenant::subscription.Change Your Plan')}}</a>
                                <a href="" class="d-block mb-half">{{__('tenant::subscription.View Payment History')}}</a>
                                <a href="" class="d-block mb-half">{{__('tenant::subscription.Change to annual Plan')}}</a>
                                <a href="" class="d-block mb-half">{{__('tenant::subscription.Cancel Subscription')}}</a>
                                --}}
                                @if(isset($data['paymentRegistrationId'])&&!is_null($data['paymentRegistrationId'])&&$data['paymentRegistrationId'])
                                    <button data-url="{{route('company.payment-registrations.destroy', ['subdomain' => $subdomain, 'company' => $data['subscription']->company_id])}}"
                                            data-toggle="modal" data-target="#deletePaymentRegistrationModal"
                                            class="btn btn-sm btn-danger delete-item"
                                            data-toggle="tooltip" data-placement="bottom"
                                            title="@lang('tenant::payments.cancel_auto_payment')"
                                    >{{__('tenant::payments.cancel_auto_payment')}}</button>
                                @endif
                            </div>
                            @endif
                            <hr>
                            @if(isset($data['upcomingSubscriptions']) && count($data['upcomingSubscriptions']))
                                <div class="card ">
                                    <h3><b>{{__('tenant::subscription.upcoming subscriptions')}}</b></h3>
                                    <br><br>
                                    <table class="table table-striped table-column dataex-res-configuration prevent-init-sort
                                            @if(app()->getlocale() == 'ar') ar-language-file @endif" style="width:100%;display: inline-table;">
                                        <thead>
                                            <tr>
                                                <th>{{__('tenant::subscription.package')}}</th>
                                                <th>{{__('tenant::subscription.package_plan')}}</th>
                                                <th>{{__('tenant::subscription.price') . " (" . __('tenant::payments.SAR') . ")"}}</th>
                                                <th>{{__('tenant::subscription.from')}}</th>
                                                <th>{{__('tenant::subscription.to')}}</th>
                                                <th>{{__('tenant::subscription.status')}}</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                        @isset($data['upcomingSubscriptions'])
                                            @foreach($data['upcomingSubscriptions'] as $upcomingSubscription)
                                                @php
                                                    if(app()->getLocale() == 'en'){
                                                        $upcomingSubscriptionDate = Date::format($upcomingSubscription->subscription_date);
                                                        $upcomingRenewalDate = Date::format($upcomingSubscription->renewal_date);
                                                    }else{
                                                        $upcomingSubscriptionDate = $upcomingSubscription->subscription_date;
                                                        $upcomingRenewalDate = $upcomingSubscription->renewal_date;
                                                    }
                                                @endphp
                                                <tr>
                                                    <td>{{$upcomingSubscription->package->name}}</td>
                                                    <td>{{__('tenant::payments.' . $upcomingSubscription->plan)}}</td>
                                                    <td>{{$upcomingSubscription->price}}</td>
                                                    <td>{{Date::format($upcomingSubscription->subscription_date)}}</td>
                                                    <td>{{Date::format($upcomingSubscription->renewal_date)}}</td>
                                                    <td>
                                                        @if($upcomingSubscription->is_paid)
                                                            <span class="text-bold-600">{{__('tenant::subscription.paid')}}</span>
                                                        @else
                                                            <span class="text-bold-600">{{__('tenant::subscription.Free')}}</span>
                                                        @endif
                                                    </td>
                                                </tr>
                                            @endforeach
                                        @endisset
                                        </tbody>
                                    </table>
                                </div>
                            @endif
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    {{---------------- popup to deletePaymentRegistrationModal supplier -------------------------------}}
    <div class="modal fade" id="deletePaymentRegistrationModal" tabindex="-1" role="dialog"
         aria-labelledby="favoritesModalLabel">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title" id="favoritesModalLabel">@lang('tenant::payments.cancel_auto_payment')</h4>
                </div>
                <div class="modal-body">
                    <p>
                        @lang('tenant::payments.confirmation_delete_auto_payment')
                    </p>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default mx-1"
                            data-dismiss="modal">@lang('Cancel')</button>
                    <span class="pull-right">
                        <form  action="" method="post" class="form delete-form">
                            @method('delete')
                            @csrf
                            <button type="submit" class="btn btn-primary">@lang('Continue')</button>
                        </form>
                    </span>
                </div>
            </div>
        </div>
    </div>
    @isset($data['status'])
        @if($data['status'])
            {{---------------- START hyperpay payment -------------------------------}}
            <div class="modal" id="favoritesModal" tabindex="-1" role="dialog"
                 aria-labelledby="favoritesModalLabel"
                 style="top:0;padding-right:0!important;">
                <div class="modal-dialog modal-dialog-centered" role="document">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h4 class="modal-title"
                                id="favoritesModalLabel">{{__('tenant::subscription.Payment Confirmation')}}</h4>
                        </div>
                        <div class="modal-body text-center">
                            <form
                                action="{{ route('company.payment-status',['subdomain'=>$subdomain,'paymentMethodId'=>$data['data']['paymentMethodId']]) }}"
                                class="paymentWidgets"
                                data-brands="{{ $data['data']['paymentMethod'] }}">
                            </form>
                            <a class="btn btn-danger" href="{{ route('company.subscriptions.index',$subdomain) }}">@lang('Cancel')</a>
                        </div>
                    </div>
                </div>
            </div>
            {{---------------- END hyperpay payment -------------------------------}}

        @else
            @include('tenant::partials.manual_payment')
        @endif
    @else

        @if(config('payment.PaymentStatus'))
            {{---------------- START data for checkout code -------------------------------}}
            <div class="modal fade" id="favoritesModal" tabindex="-1" role="dialog"
                 aria-labelledby="favoritesModalLabel"
                 style="top:0;padding-right:0!important;">
                <div class="modal-dialog" role="document" style="max-width: 800px;">
                    <div class="modal-content">
                        <div class="modal-header">
                            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                <span aria-hidden="true">&times;</span></button>
                            <h4 class="modal-title"
                                id="favoritesModalLabel">{{__('tenant::subscription.Payment Confirmation')}}
                            </h4>
                        </div>
                        <form id="checkout_form" method="get"
                              action="{{ route('company.making.payment-transaction',$subdomain) }}">
                            <div class="modal-body">
                                <div class="card-block">
                                    <div class="form-body">
                                        <div class="form-group">
                                            <div class="row">
                                                <div class="col-md-3">
                                                    <label for="payment_plan" class="pt-3">@lang('tenant::payments.Payment plan')</label>
                                                </div>
                                                <div class="col-md-9">
                                                    <div class="row">
                                                        <div class="col-md-1 col-xs-2"></div>
                                                        @foreach($data['plans'] as $plan => $price)
                                                            <div class="col-md-4 col-xs-4 text-center radio_plan">
                                                                <input class="d-none" data-price="{{$price}}" id="{{$plan}}" type="radio" name="payment_plan"
                                                                       value="{{ $plan }}"
                                                                       @if ($plan == $data['latestSubscription']['plan'])
                                                                       checked
                                                                    @endif />
                                                                <div class="d-inline-block plan-radio @if(app()->getLocale() == 'ar') float-right @else float-left @endif @if ($plan == $data['latestSubscription']['plan']) radio-active @endif">
                                                                    @if($plan == \Modules\Tenant\Enums\PackagePlansEnum::ANNUAL)
                                                                        <label style="line-height: 1.5;" for="{{$plan}}">{{$price . " " .  __('tenant::payments.SAR')}}
                                                                        <br>
                                                                        {{__('tenant::payments.' . $plan)}}
                                                                        <br><lable style="font-weight: lighter;">({{__('tenant::payments.discount')}}) </lable> </label>
                                                                    @else
                                                                        <label style="line-height: 2.24;" for="{{$plan}}">{{$price . " " .  __('tenant::payments.SAR')}}
                                                                            <br>
                                                                            {{__('tenant::payments.' . $plan)}}
                                                                        </label>
                                                                    @endif
                                                                </div>
                                                            </div>
                                                            <div class="col-sm-1"></div>
                                                        @endforeach
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="form-group">
                                            <div class="row">
                                                <div class="col-md-3">
                                                    <label for="billing_street1">@lang('tenant::payments.billing_street1')</label>
                                                </div>
                                                <div class="col-md-9">
                                                    <input type="text" name="billing_street1" value="{{ $data['lastTransactionData']->billing_street1 ?? $data['lastTransactionData'] }}" id="billing_street1" class="w-100 form-control @if($errors->has('billing_street1')) is-invalid @endif">
                                                    <span class="invalid-feedback text text-danger"
                                                          role="alert"
                                                          id="feedback_billing_street1">
                                                        @error('billing_street1')
                                                        <p>{{ $message }}</p>
                                                        @enderror
                                                    </span>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="form-group">
                                            <div class="row">
                                                <div class="col-md-3">
                                                    <label for="billing_country">@lang('tenant::payments.billing_country')</label>
                                                </div>
                                                <div class="col-md-9">
                                                    <input type="text" name="billing_country" value="Saudi Arabia (‫المملكة العربية السعودية‬‎)" id="billing_country" readonly class="w-100 form-control @if($errors->has('billing_street1')) is-invalid @endif">
                                                    @error('billing_country')
                                                    <span class="invalid-feedback text text-danger" role="alert">
                                            <p>{{ $message }}</p>
                                        </span>
                                                    @enderror
                                                </div>
                                            </div>
                                        </div>
                                        <div class="form-group">
                                            <div class="row">
                                                <div class="col-md-3">
                                                    <label for="billing_city">@lang('tenant::payments.billing_city')</label>
                                                </div>
                                                <div class="col-md-9">
                                                    <input type="text" name="billing_city" value="{{ $data['lastTransactionData']->billing_city ?? $data['lastTransactionData'] }}" id="billing_city" class="w-100 form-control @if($errors->has('billing_city')) is-invalid @endif">
                                                    <span class="invalid-feedback text text-danger" role="alert"
                                                          id="feedback_billing_city">
                                                         @error('billing_city')
                                                            <p>{{ $message }}</p>
                                                         @enderror
                                                    </span>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="form-group">
                                            <div class="row">
                                                <div class="col-md-3">
                                                    <label for="billing_state">@lang('tenant::payments.billing_state')</label>
                                                </div>
                                                <div class="col-md-9">
                                                    <input type="text" name="billing_state" value="{{ $data['lastTransactionData']->billing_state ?? $data['lastTransactionData'] }}" id="billing_state" class="w-100 form-control @if($errors->has('billing_state')) is-invalid @endif">
                                                    <span class="invalid-feedback text text-danger" role="alert"
                                                          id="feedback_billing_state">
                                                      @error('billing_state')
                                                        <p>{{ $message }}</p>
                                                      @enderror
                                                     </span>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="form-group">
                                            <div class="row">
                                                <div class="col-md-3">
                                                    <label for="billing_postcode">@lang('tenant::payments.billing_postcode')</label>
                                                </div>
                                                <div class="col-md-9">
                                                    <input type="text" name="billing_postcode" value="{{ $data['lastTransactionData']->billing_postcode ?? $data['lastTransactionData'] }}" id="billing_postcode" class="w-100 form-control @if($errors->has('billing_postcode')) is-invalid @endif">
                                                    <span class="invalid-feedback text text-danger" role="alert"
                                                          id="feedback_billing_postcode">
                                                    @error('billing_postcode')
                                                     <p>{{ $message }}</p>
                                                    @enderror
                                                    </span>

                                                </div>
                                            </div>
                                        </div>
                                        <div class="form-group">
                                            <div class="row">
                                                <div class="col-md-3">
                                                    <label for="promo_code">@lang('tenant::payments.promo_code')</label>
                                                </div>
                                                <div class="col-md-9">
                                                    <div class="col-md-10 p-0">
                                                        <input type="text" name="promo_code" id="promo_code" class="w-100 form-control @if($errors->has('promo_code')) is-invalid @endif">
                                                    </div>
                                                    <div class="col-md-2">
                                                        <a href="javascript:void(0)" class="link-disable promo-code-icon" onclick="validatePromoCode()">
                                                            <i class="fa fa-check-circle link-disable promo-code-icon"
                                                               style="font-size: 33px;padding-top: 3px;"
                                                           aria-hidden="true"></i>
                                                        </a>
                                                    </div>
                                                    <span class="invalid-feedback text text-success promo-code-msg" role="alert"
                                                          id="success_promo_code">
                                                    </span>
                                                    <span class="invalid-feedback text text-danger promo-code-msg" role="alert"
                                                          id="feedback_promo_code">
                                                    @error('promo_code')
                                                     <p>{{ $message }}</p>
                                                    @enderror
                                                    </span>

                                                </div>
                                            </div>
                                        </div>
                                        <div class="form-group">
                                            <div class="row">
                                                <div class="col-md-3">
                                                    <label for="payment_method">@lang('tenant::payments.payment_method')</label>
                                                </div>
                                                <div class="col-md-9">
                                                    <div class="row">
                                                        @foreach(\Modules\Tenant\Enums\PaymentMethodEnum::METHODS as $method)
                                                            <div class="col-md-3 col-xs-6 text-center">
                                                                <label class="radio-img">
                                                                    <input type="radio" name="payment_method"
                                                                           value="{{ $method['id'] }}"
                                                                           @if ($loop->first&&!$data['lastTransactionData'])
                                                                           checked
                                                                           @elseif ($data['lastTransactionData']&&$data['lastTransactionData']->payment_method==$method['id'])
                                                                           checked
                                                                        @endif />
                                                                    <img src="{{ asset($method['image']) }}">
                                                                </label>
                                                            </div>
                                                        @endforeach
                                                    </div>
                                                </div>
                                            </div>
                                            @error('payment_method')
                                            <span class="invalid-feedback text text-danger" role="alert">
                                    <p>{{ $message }}</p>
                                </span>
                                            @enderror
                                        </div>
                                    </div>
                                </div>
                                <div class="modal-footer text-center">
                                    <button id="continue_button_checkout_code" type="button"
                                            class="btn btn-primary btnWidth">@lang('Continue')</button>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
            {{---------------- END data for checkout code -------------------------------}}
            <script>

                const messages = {
                    billingStreet: {
                        required: "@lang('validation.required',['attribute'=>__('tenant::payments.billing_street1')])",
                        min: "@lang('validation.min.string',['attribute'=>__('tenant::payments.billing_street1'),'min'=>2])",
                        max: "@lang('validation.max.string',['attribute'=>__('tenant::payments.billing_street1'),'max'=>100])",
                    },
                    billingCity: {
                        required: "@lang('validation.required',['attribute'=>__('tenant::payments.billing_city')])",
                        min: "@lang('validation.min.string',['attribute'=>__('tenant::payments.billing_city'),'min'=>2])",
                        max: "@lang('validation.max.string',['attribute'=>__('tenant::payments.billing_city'),'max'=>20])",
                    },
                    billingState: {
                        min: "@lang('validation.min.string',['attribute'=>__('tenant::payments.billing_state'),'min'=>2])",
                        required: "@lang('validation.required',['attribute'=>__('tenant::payments.billing_state')])",
                        max: "@lang('validation.max.string',['attribute'=>__('tenant::payments.billing_state'),'max'=>20])",
                    },
                    billingPostcode: {
                        pattern: "@lang('validation.regex',['attribute'=>__('tenant::payments.billing_postcode')])",
                        required: "@lang('validation.required',['attribute'=>__('tenant::payments.billing_postcode')])",
                        max: "@lang('validation.max.code',['attribute'=>__('tenant::payments.billing_postcode'),'max'=>5])",
                        min: "@lang('validation.min.code',['attribute'=>__('tenant::payments.billing_postcode'),'min'=>5])",
                    },
                }

                const checkoutCodeButtonContinue = document.querySelector('#continue_button_checkout_code');
                const checkoutCodeForm = document.querySelector('#checkout_form');
                // ================ inputs ================ //
                const billingStreetElement = document.querySelector("#billing_street1");
                const billingCityElement = document.querySelector('#billing_city');
                const billingStateElement = document.querySelector('#billing_state');
                const billingPostcodeElement = document.querySelector('#billing_postcode');
                // ================ feedback ================ //
                const billingStreetElementFeedback = document.querySelector('#feedback_billing_street1');
                const billingCityElementFeedback = document.querySelector('#feedback_billing_city');
                const billingStateElementFeedback = document.querySelector('#feedback_billing_state');
                const billingPostcodeElementFeedback = document.querySelector('#feedback_billing_postcode');

                function resetFeedback() {
                    document
                        .querySelectorAll("[id^=feedback_]")
                        .forEach(item => item.innerHTML = "");
                }

                function validateCheckOutFormInputs() {
                    resetFeedback();

                    const billingStreet = billingStreetElement.value;
                    const billingCity = billingCityElement.value;
                    const billingState = billingStateElement.value;
                    const billingPostcode = billingPostcodeElement.value;

                    if (!billingStreet) {
                        billingStreetElement.classList.add("is-invalid");
                        billingStreetElement.classList.add("frontend-validation-error");
                        let feedback = document.createElement("p");
                        feedback.innerText = messages.billingStreet.required;
                        billingStreetElementFeedback.appendChild(feedback);
                    }
                    if (billingStreet && billingStreet.length < 2) {
                        billingStreetElement.classList.add("is-invalid");
                        billingStreetElement.classList.add("frontend-validation-error");
                        let feedback = document.createElement("p");
                        feedback.innerText = messages.billingStreet.min;
                        billingStreetElementFeedback.appendChild(feedback);
                    }
                    if (billingStreet && billingStreet.length > 100) {
                        billingStreetElement.classList.add("is-invalid");
                        billingStreetElement.classList.add("frontend-validation-error");
                        let feedback = document.createElement("p");
                        feedback.innerText = messages.billingStreet.max;
                        billingStreetElementFeedback.appendChild(feedback);
                    }

                    if (!billingCity) {
                        billingCityElement.classList.add("is-invalid");
                        billingCityElement.classList.add("frontend-validation-error");
                        let feedback = document.createElement("p");
                        feedback.innerText = messages.billingCity.required;
                        billingCityElementFeedback.appendChild(feedback);
                    }
                    if (billingCity && billingCity.length < 2) {
                        billingCityElement.classList.add("is-invalid");
                        billingCityElement.classList.add("frontend-validation-error");
                        let feedback = document.createElement("p");
                        feedback.innerText = messages.billingCity.min;
                        billingCityElementFeedback.appendChild(feedback);
                    }
                    if (billingCity && billingCity.length > 20) {
                        billingCityElement.classList.add("is-invalid");
                        billingCityElement.classList.add("frontend-validation-error");
                        let feedback = document.createElement("p");
                        feedback.innerText = messages.billingCity.max;
                        billingCityElementFeedback.appendChild(feedback);
                    }

                    if (!billingState) {
                        billingStateElement.classList.add("is-invalid");
                        billingStateElement.classList.add("frontend-validation-error");
                        let feedback = document.createElement("p");
                        feedback.innerText = messages.billingState.required;
                        billingStateElementFeedback.appendChild(feedback);
                    }
                    if (billingState && billingCity.length < 2) {
                        billingStateElement.classList.add("is-invalid");
                        billingStateElement.classList.add("frontend-validation-error");
                        let feedback = document.createElement("p");
                        feedback.innerText = messages.billingState.min;
                        billingStateElementFeedback.appendChild(feedback);
                    }
                    if (billingState && billingCity.length > 20) {
                        billingStateElement.classList.add("is-invalid");
                        billingStateElement.classList.add("frontend-validation-error");
                        let feedback = document.createElement("p");
                        feedback.innerText = messages.billingState.max;
                        billingStateElementFeedback.appendChild(feedback);
                    }

                    if (!billingPostcode) {
                        billingPostcodeElement.classList.add("is-invalid");
                        billingPostcodeElement.classList.add("frontend-validation-error");
                        let feedback = document.createElement("p");
                        feedback.innerText = messages.billingPostcode.required;
                        billingPostcodeElementFeedback.appendChild(feedback);
                    }
                    if (billingPostcode && billingPostcode.length < 5) {
                        billingPostcodeElement.classList.add("is-invalid");
                        billingPostcodeElement.classList.add("frontend-validation-error");
                        let feedback = document.createElement("p");
                        feedback.innerText = messages.billingPostcode.min;
                        billingPostcodeElementFeedback.appendChild(feedback);
                    }
                    if (billingPostcode && billingPostcode.length > 5) {
                        billingPostcodeElement.classList.add("is-invalid");
                        billingPostcodeElement.classList.add("frontend-validation-error");
                        let feedback = document.createElement("p");
                        feedback.innerText = messages.billingPostcode.max;
                        billingPostcodeElementFeedback.appendChild(feedback);
                    }
                    let billingPostcodePattern = /\b\d{5}\b$/;
                    if (billingPostcode && !billingPostcodePattern.test(billingPostcode)) {
                        billingPostcodeElement.classList.add("is-invalid");
                        billingPostcodeElement.classList.add("frontend-validation-error");
                        let feedback = document.createElement("p");
                        feedback.innerText = messages.billingPostcode.pattern;
                        billingPostcodeElementFeedback.appendChild(feedback);
                    }

                    const allInvalidElements = checkoutCodeForm.querySelectorAll(".frontend-validation-error");
                    if (allInvalidElements.length) {
                        allInvalidElements.forEach((element) => {
                            element.addEventListener("input", function () {
                                document.querySelector('#feedback_' + this.getAttribute('id')).innerHTML = '';
                                this.classList.remove("is-invalid");
                                this.classList.remove("frontend-validation-error");
                                checkoutCodeButtonContinue.removeAttribute('disabled')
                            });
                        });

                        return false;
                    }

                    return true;

                }

                document.addEventListener("DOMContentLoaded", () => {

                    // prevent enter to submit the form
                    $(document).on("keydown", ":input:not(textarea)", function (event) {
                        return event.key !== "Enter";
                    });

                    checkoutCodeForm.addEventListener("keydown", (e) => {
                        if (e.key === "Enter") {
                            return false;
                        }
                        return true;
                    });
                    checkoutCodeButtonContinue.addEventListener('click', () => {
                        checkoutCodeButtonContinue.setAttribute('disabled', true);

                        if (!validateCheckOutFormInputs()) {
                            return false;
                        }
                        checkoutCodeForm.submit();
                    });


                });
            </script>
        @else
            @include('tenant::partials.manual_payment')
        @endif
    @endisset
@endsection
@section('extra_scripts')
    @if ($errors->any())
        <script type="text/javascript">
            window.addEventListener('DOMContentLoaded', () => {
                $('#favoritesModal').modal('show');
            });
        </script>
    @endif
    @isset($data['status'])
        <script type="text/javascript">
            window.addEventListener('DOMContentLoaded', () => {
                $('#favoritesModal').modal({
                    backdrop: 'static',
                    keyboard: false
                })
            });
        </script>
        @if($data['status'])
            <script>
                var wpwlOptions = {
                    locale: `{{ app()->getLocale() }}`
                }
            </script>
            <script async
                    src="{{ config('payment.endpoint').'/v1/paymentWidgets.js?checkoutId='.$data['data']['checkoutCode'] }}"
                    defer></script>
        @endif
    @endisset

    <script>
        window.addEventListener('DOMContentLoaded', function() {
            $(document).ready(function () {
                // For A Delete Record Popup
                //handel desktop(click) and mobile(touchstart) browsers
                $(document).on('touchstart click', '.delete-item', function(){
                    var modal = $(this).attr('data-target');
                    var url = $(this).attr('data-url');
                    $(modal + ' .delete-form').attr("action", url);
                });
                $("#promo_code").on("change paste keyup", function() {
                    $('.promo-code-msg').addClass('hidden');
                    $('.promo-code-msg').text("");
                    if($(this).val()){
                        $('.promo-code-icon').removeClass('link-disable');
                        $('.promo-code-icon').addClass('link-enable');
                    }else{
                        $('.promo-code-icon').removeClass('link-enable');
                        $('.promo-code-icon').addClass('link-disable');
                    }
                });
            });
        });

        function validatePromoCode(){
            var promoCode = $('#promo_code').val();
            if(promoCode){
                $('#promo_code').removeClass('is-invalid');
                $('.promo-code-msg').addClass('hidden');
                $('.promo-code-msg').text("");
                $.ajax({
                    url: '{{route('validate.promo.code', request('subdomain'))}}',
                    type: 'get',
                    data: {
                        promo_code: promoCode,
                        token: $('#token').val()
                    },
                    dataType: "json",
                    success: function (data) {
                        var promoCode = data['data'];
                        var amount = $('input[name="payment_plan"]:checked').attr('data-price');
                        var discount = amount * promoCode['discount']/100;
                        var totalData = document.createElement('div');
                        totalData = getValidPromoCodeMsg(amount, discount, totalData)
                        $('.promo-code-icon').removeClass('link-disable');
                        $('.promo-code-icon').removeClass('link-enable');
                        $('.promo-code-icon').addClass('link-active');
                        swal({
                            title: '{{__('tenant::promo-codes.The entered promo code is valid')}}',
                            content: totalData,
                            icon: "success",
                            button: "Ok",
                        });
                    }, error: function (xhr, status, error) {
                        $('#feedback_promo_code').removeClass('hidden')
                        $('#feedback_promo_code').text(xhr.responseJSON.errors.promo_code)
                        $('.promo-code-icon').removeClass('link-active');
                    },
                });
            }else{
                $('#feedback_promo_code').removeClass('hidden')
                $('#feedback_promo_code').text('{{__('tenant::promo-codes.The promo code field is empty')}}')
                $('.promo-code-icon').removeClass('link-active');
            }

        }

        function getValidPromoCodeMsg(amount, discount, totalData){
            totalData.innerHTML = '<div class="d-inline-block col-sm-6"><label class="d-inline-block">' +
                '{{__('tenant::promo-codes.amount')}}' + ':</label> <p class="d-inline-block pl-1 pr-1">' +
                amount + ' ' + '{{__('superadmin::Dashboard.SAR')}}'+ '</p></div>';
            totalData.innerHTML += '<div class="d-inline-block col-sm-6"><label class="d-inline-block">' +
                '{{__('tenant::promo-codes.promo code discount')}}' + ': </label> <p class="d-inline-block pl-1 pr-1">' +
                discount + ' ' + '{{__('superadmin::Dashboard.SAR')}}'+ '</p></div><br>';

            totalData.innerHTML += '<div><label class="d-inline-block">' +
                '{{__('tenant::promo-codes.total including discount')}}' + ': </label> <p class="d-inline-block pl-1 pr-1">' +
                (amount - discount) + ' ' + '{{__('superadmin::Dashboard.SAR')}}'+ '</p></div>';
            return totalData;
        }


    </script>
@endsection