@extends('layouts.glory-theme.guest')

@section('content')
    <div class="pageTop">
        <div class="container">
            <div class="pageTopText">
                Purchase Service
            </div>
        </div>
    </div>

    <div class="container my-4">
        <div class="row">
            <div class="col-md-6">
                <h2 class="my-2 pb-2">{{ $package->name }}</h2>
                <div class="">
                    @foreach ($package->features as $feature)
                        <h5 class="my-2">{{ $feature->name }}</h5>
                    @endforeach
                </div>
                <h5 class="my-2 pt-3"><strong>Price: </strong>{{ $package->formatted_price }}</h5>
            </div>
            @if ($order and $order->isPaymentPending() || $order->isPaid())
                <div class="col-md-6">
                    <h4 class="my-2 text-success text-center mt-5"><strong>Your Order ID</strong> : {{ $order->id }}</h4>
                    <h5 class="my-2 text-success text-center"><strong>Payment Status</strong> : {{ $order->payment_status->name() }}</h5>
                    <h5 class="my-2 text-success text-center pt-2">We received your order. We will contact you back soon. Thank You!</h5>
                </div>
            @else
                <div class="col-md-6">
                    <h4 class="my-2">Billing Information</h4>
                    <div class="form">
                        <div class="form-group">
                            <input type="text" name="name" class="form-control my-input" id="name" placeholder="Name *" required>
                        </div>
                        <div class="form-group">
                            <input type="email" name="email" class="form-control my-input" id="email" placeholder="Email *" required>
                        </div>
                        <div class="form-group">
                            <textarea name="description" id="description" rows="5" class="form-control my-input" placeholder="Enter your order details"></textarea>
                        </div>
                        <div>
                            <button id="paddle-button" onclick="openCheckout()" data-override="" type="button" class=" btn btn-primary rounded">Confirm And Make Payment</button>
                        </div>
                    </div>
                </div>
            @endif
        </div>
    </div>
@endsection

@push('head-scripts')
    <script src="https://cdn.paddle.com/paddle/paddle.js"></script>
@endpush

@push('scripts')
    <script type="text/javascript">
        function openCheckout() {
            let name_selector = document.querySelector('#name');
            let email_selector = document.querySelector('#email');
            let description_selector = document.querySelector('#description');

            if (name_selector.value == '') {
                if (!name_selector.classList.contains('is-invalid')) {
                    name_selector.classList.add('is-invalid');
                }
                name_selector.focus()
                return;
            }

            if (email_selector.value == '') {
                if (!email_selector.classList.contains('is-invalid')) {
                    email_selector.classList.add('is-invalid');
                }
                email_selector.focus()
                return;
            }

            const requestBody = {
                "package_id": "{{ $package->id }}",
                "email": email_selector.value,
                "name": name_selector.value,
                "description": description_selector.value,
                "billing_type": '{{ $service->slug == 'link-insert' ? \App\Enums\BillingType::LINK_INSERT->value : \App\Enums\BillingType::GUEST_POST->value }}'
            }

            const response = fetch("{{ config('app.url') }}/api/v1/package-orders", {
                method: 'POST',
                body: JSON.stringify(requestBody), // string or object
                headers: {
                    'Content-Type': 'application/json',
                    'Accept': 'application/json'
                }
            }).then((response) => response.json())
                .then((response) => {

                    @if (config('settings.payment_methods.paddle.is_test_mode'))
                    Paddle.Environment.set('sandbox');
                    @endif
                    Paddle.Setup({
                        vendor: {{ config('settings.payment_methods.paddle.vendor_id') }}
                    });
                    Paddle.Checkout.open({
                        override: response.data.payment_link,
                        email: email_selector.value,
                        country: 'BD'
                    });

                });
        }
    </script>
@endpush