@extends('layouts.master_user')

@section('title')
    Buy Package
@endsection

@section('package')
    active
@endsection

@section('css')

<style>
    .font-size-h2 {
        font-size: 25px !important;
    }
</style>
@endsection

@section('content')

    <div class="row">

        <div class="col-xl-8 order-xl-0">
            <!-- Product -->
            <div class="block">
                <div class="block-content">
                    <!-- Vitals -->
                    <div class="row items-push">
                        <div class="col-md-12">
                            <!-- Info -->
                            <div class="d-flex justify-content-between align-items-center">
                                <div>
                                    <div class="font-size-h2 font-w600 text-success" style="font-family: 'EB Garamond'">{{ $package['name'] }}</div>
                                </div>
                                <div class="font-size-h2 font-w700">
                                    {{ config('innoplore.currency') }} {{ $package['amount'] }}
                                </div>
                            </div>
                            <p>{!! $package['description'] !!}</p>
                            <!-- END Info -->
                        </div>
                    </div>
                    <!-- END Vitals -->
                </div>
            </div>
            <!-- END Product -->
        </div>
        <div class="col-xl-4 order-xl-1">

            <!-- Shopping Cart -->
            <div class="block js-ecom-div-cart d-xl-block">
                <div class="block-content">
                    <table class="table table-borderless table-hover table-vcenter">
                        <tbody>
                        <tr>
                            <td colspan="2">
                                <a class="h5" href="#">{{ $package['name'] }}</a>
                            </td>
                            <td class="text-right">
                                <div class="font-w600 text-success">{{ config('innoplore.currency') }} {{ $package['amount'] }}</div>
                            </td>
                        </tr>
                        @if($discount == 0)
                            <form method="POST" id="coupon-form" action="{{ route('user.coupon.validate', $package_key) }}">
                                @csrf
                                @method('PUT')
                                <tr>
                                    <td colspan="2">
                                        <input type="text" id="coupon" name="coupon" placeholder="Enter coupon Code" required>
                                    </td>
                                    <td>
                                        <button type="submit" class="btn btn-primary">Apply</button>
                                    </td>
                                </tr>
                            </form>
                        
                        <tr class="bg-success-light">
                            <td colspan="2">
                                <span class="h4 font-w600">Total</span>
                            </td>
                            <td class="text-right">
                                <span class="h4 font-w600 text-success">{{ config('innoplore.currency') }} {{ $package['amount'] - $discount}}</span>
                                
                            </td>
                        </tr>
                        @endif
                        @if($discount != 0)
                            <tr class="bg-success-light">
                                <td colspan="2">
                                    <span class="h4 font-w600">Coupon Discount</span>
                                </td>
                                <td class="text-right">
                                    <span class="h4 font-w600 text-success">{{ config('innoplore.currency') }} {{ $discount}}</span>
                                    
                                </td>
                            </tr>
                            <tr class="bg-success-light">
                                <td colspan="2">
                                    <span class="h4 font-w600">Total After Discount</span>
                                </td>
                                <td class="text-right">
                                    <span class="h4 font-w600 text-success">{{ config('innoplore.currency') }} {{ $package['amount'] - $discount}}</span>
                                    
                                </td>
                            </tr>
                        
                        @endif
                        </tbody>
                    </table>
                </div>

                {{-- @if(Auth::user()->email != 'demo@innoplore.com') --}}
                <div class="block-content block-content-full bg-body-light text-right">
                    @if($error)
                        <button class="btn btn-sm btn-danger">
                            Not Eligible
                        </button>
                    @else
                        <form method="post" id="payment-form" action="{{ route('user.subscription.update', $subscription) }}">
                            {{ csrf_field() }}
                            @method('PUT')
                        @if($package['amount'] - $discount == 0)
                                <input type="hidden" name="status" value="Approved">
                                <button type="submit"  class="btn btn-sm btn-primary">
                                    <i class="fa fa-gift mr-1"></i> Free Trial
                                </button>
                        @else
                            <input type="hidden" name="status" id="status" value="Approved">
                                <div id="paypal-button-container">
                            </div>
                        @endif
                            </form>
                    @endif
                </div>
                <span style="font-style: italic;">&nbsp * Please ignore the Sofort payment option</span>
                {{-- @endif --}}
            </div>
            <!-- END Shopping Cart -->

            <div class="block js-ecom-div-cart d-xl-block">
                <div class="block-content">
                    <p class="text-justify">The clients from those countries where PayPal service is not available may <a target="_blank" href="/#contact-form">Contact Us</a>
                    for an alternative method of payment such as through <a target="_blank" href="https://www.westernunion.com/">Western Union</a> or bank
                    transaction.</p>
                </div>
            </div>

        </div>
    </div>

    {{-- <div id="paypal-button-container-2">
    </div> --}}

@endsection
@if($package['amount'] - $discount > 0)
    @section('js')
        <script src="https://www.paypal.com/sdk/js?client-id=AdrW5wBM-54Y-cPpHOLQh5bFZ21zxX8GLdwN2ajoYkYjY42XL3u-O6Hht4FQDIy8z9a3COteUi8_dMT7&currency=GBP"  data-order-id="{{ $subscription->id }}"></script>
        <script>
            paypal.Buttons({
                createOrder: function(data, actions) {
                    // This function sets up the details of the transaction, including the amount and line item details.
                    return actions.order.create({
                        intent: "CAPTURE",
                        purchase_units: [{
                            amount: {
                                value: {{ $package['amount'] - $discount }}
                            }
                        }],
                        application_context: {        
                            shipping_preference: 'NO_SHIPPING'
                        }
                    });
                },
                onApprove: function(data, actions) {
                    console.log("data", data, "actions", actions);
                    // This function captures the funds from the transaction.
                    return actions.order.capture().then(function(details) {
                        console.log("DETAILS", details);
                        $('#status').val('Approved');
                        $('#payment-form').submit();
                    });
                }
            }).render('#paypal-button-container');

            // paypal.Buttons({
            //     createOrder: function(data, actions) {
            //         // This function sets up the details of the transaction, including the amount and line item details.
            //         return actions.order.create({
            //             intent: "CAPTURE",
            //             purchase_units: [{
            //                 amount: {
            //                     value: 5
            //                 }
            //             }]
            //         });
            //     },
            //     onApprove: function(data, actions) {
            //         console.log("data", data, "actions", actions);
            //         // This function captures the funds from the transaction.
            //         return actions.order.capture().then(function(details) {
            //             console.log("DETAILS", details);
            //             alert('Payment Successful');
            //             // $('#status').val('Approved');
            //             // $('#payment-form').submit();
            //         });
            //     }
            // }).render('#paypal-button-container-2');
        </script>
    @endsection
@endif