@extends('layouts.default')

@section('title', 'Checkout')

@section('content')
    <style>
        .form-check:not(.form-switch):not(.form-check-circle) .form-check-input:checked {
            background-size: 88% 88% !important;
            height: 20px;
            width: 20px;
        }
    </style>
    <div class="fh5co-loader" id="reloader" style="display: none">
        <div class="loader"></div>
    </div>
    <div class="custom-hero-img-ch">
        <div class="container">
            <div class="row justify-content-center my-4">
                <div class="mt-6">
                    <div class="col-12">
                        <h1 class="fw-700 text-center">Subscription checkout</h1>
                    </div>
                    <div class="col-12 col-xl-8 col-lg-8 mx-auto">
                        <div class="mt-4 text-center">
                            <p class="text-center">Enjoy all the amazing benefits of becoming a community member
                            </p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="bg-white">
        <div class="container">
            <div class="row">
                <div class="col-12">
                    <div class="card w-100 shadow-xss rounded-xxl border-0 -mt-20">
                        <div class="row">
                            <div class="col-12 col-lg-6 col-xl-6 p-6">
                                <h3 class="mb-4">Subscription Plan</h3>
                                <div class="card w-100 rounded-xxl mb-4 p-4 border-0 ch-bg">
                                    <div class="form-group">
                                        <div class="form-check mt-1">
                                            <input class="form-check-input" name="checked_package" type="radio" checked
                                                value="option1" aria-label="" data-toggle="collapse" href="#package"
                                                role="button" aria-expanded="true" aria-controls="package">
                                            <label class="text-grey-500 font-xss ml-3" for="blankCheckbox1">
                                                <h5>{{ $package->name }}</h5>
                                                <small>
                                                    @if ($package->feature_category == 'senior')
                                                        Senior Lawyers
                                                    @elseif($package->feature_category == 'junior')
                                                        Junior Lawyers
                                                    @endif
                                                </small>
                                                <small>- {{ $package->description }}</small>
                                            </label>
                                        </div>
                                        <div class="p-4" id="package">
                                            <ul class="top-content list-unstyled">
                                                <ul class="top-content list-unstyled">
                                                    @php
                                                        $features = '';
                                                        if (isset($package->features) && !empty($package->features)) {
                                                            $features = json_decode($package->features);
                                                        }
                                                    @endphp
                                                    @forelse ($features as $feature)
                                                        <li>
                                                            <a class="btn menu-btn d-flex custom-text-muted">
                                                                <i class="feather-check-circle text-color mr-3"></i>
                                                                <span class="-mt-4">{{ $feature }}</span>
                                                            </a>
                                                        </li>
                                                    @empty
                                                        <li>
                                                            <a class="btn menu-btn d-flex custom-text-muted text-color">
                                                                <span class="-mt-4 text-color">No features available</span>
                                                            </a>
                                                        </li>
                                                    @endforelse
                                                </ul>
                                            </ul>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-12 col-lg-6 col-xl-6 p-6">
                                <h3 class="mb-4" style="opacity: 0">Subscription Plan</h3>
                                <div class="mt-2">
                                    <h4>{{ $package->name }} Payment amount</h4>
                                    <form id="pay">
                                        <div class="row mb-4 justify-content-center">
                                            <div class="col">
                                                <div class="mt-4 mb-3">
                                                    <p>Total price</p>
                                                </div>
                                            </div>
                                            <div class="col-auto">
                                                <div class="mt-4 mb-3">
                                                    <div class="form-group priceamount">
                                                        <div class="d-flex">
                                                            <select name="currency" id="currency"
                                                                class="form-select mr-4 custom-h-h"
                                                                data-choices='{"searchEnabled": true}'>
                                                                <option value="NGN">NGN</option>
                                                                {{-- <option value="USD">USD</option> --}}
                                                            </select>
                                                            <h4 class="ml-2">₦{{ number_format($package->price) }}</h4>
                                                            <input type="hidden" id="price"
                                                                value="{{ $package->price }}">
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="pt-2 mb-3">
                                            @if (Auth::user()->isTenant())
                                                <button type="submit"
                                                    class="custom-btn button_load rounded-1 w-100 pay-with-paystack"
                                                    id="payPaystack" onclick="payWithPaystack_to_us(event)">
                                                    <span class="button__text"> Proceed to payment</span>
                                                </button>
                                            @else
                                                @if (isset($tenant_payment_setting))
                                                    @if ($tenant_payment_setting->payment_method == 'tribearc')
                                                        <button type="submit"
                                                            class="custom-btn btn rounded-1 button_load button_load w-100 pay-with-tribearc"
                                                            id="payTribearc" onclick="payWithTribearc(event)">
                                                            <span class="button__text"> Proceed to payment</span>
                                                        </button>
                                                    @elseif($tenant_payment_setting->payment_method == 'flutterwave')
                                                        <button type="submit"
                                                            class="custom-btn rounded-1 button_load w-100 pay-with-flutterwave"
                                                            id="payFlutterwave" onclick="payWithRave(event)">
                                                            <span class="button__text"> Proceed to payment</span>
                                                        </button>
                                                    @elseif($tenant_payment_setting->payment_method == 'paystack')
                                                        @if (parentIsOnAPaidPackage(Auth::user()->creatorId()))
                                                            <button type="submit"
                                                                class="custom-btn button_load rounded-1 w-100 pay-with-paystack"
                                                                id="payPaystack" onclick="payWithPaystack(event)">
                                                                <span class="button__text"> Proceed to payment</span>
                                                            </button>
                                                        @else
                                                            <button type="submit"
                                                                class="custom-btn button_load rounded-1 w-100 pay-with-paystack"
                                                                id="payPaystack"
                                                                onclick="payWithPaystack_to_us(event)">
                                                                <span class="button__text"> Proceed to payment</span>
                                                            </button>
                                                        @endif
                                                    @else
                                                        <h5>No Payment method has been set, please contact admin support
                                                        </h5>
                                                    @endif
                                                @else
                                                    <h5>No Payment method has been set, please contact admin support</h5>
                                                @endif
                                            @endif
                                        </div>
                                    </form>
                                </div>
                            </div>
                        </div>

                    </div>
                </div>
            </div>
        </div>
    </div>
    <script src="https://checkout.flutterwave.com/v3.js"></script>
    <script src="https://js.paystack.co/v1/inline.js"></script>
    <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
    <script src="https://unpkg.com/sweetalert/dist/sweetalert.min.js"></script>

    {{-- Pay with Flutterwave --}}
    <script>
        var paymentForm = document.getElementById('pay');
        paymentForm.addEventListener('submit', payWithRave, false);

        function payWithRave(e) {
            e.preventDefault();

            document.getElementById("payFlutterwave").disabled = true;

            $("#payFlutterwave").addClass("button--loading")

            var name = "{{ Auth::user()->first_name }} {{ Auth::user()->last_name }}";
            var userId = "{{ Auth::user()->id }}";
            var packageId = "{{ $package->id }}";
            var paymentType = "subscription";
            var email = "{{ Auth::user()->email }}";
            var phone = "{{ Auth::user()->phone_number }}";
            var amount = $("#price").val();
            var currency = $("#currency").val();
            var reference = "{{ @$paymentString }}";

            FlutterwaveCheckout({
                public_key: "{{ env('FLUTTERWAVE_PUBLIC_KEY') }}",
                tx_ref: "{{ @$paymentString }}",
                amount: amount,
                currency: currency,
                payment_options: "card, banktransfer, ussd",
                customer: {
                    email,
                    phone,
                    name,
                },
                callback: function(data) {
                    console.log(data);

                    $.ajax({
                        type: 'POST',
                        url: "/subscription/pay/" + data.transaction_id,
                        data: {
                            "_token": "{{ csrf_token() }}",
                            payment_reference_id: packageId,
                            reference: data.tx_ref,
                            flutter_transaction_id: data.transaction_id,
                            user_id: userId,
                            amount: amount,
                            name: name,
                            email: email,
                            payment_type: paymentType,
                            currency: data.currency,
                            status: 'pending'
                        },
                        success: function(response) {
                            console.log(response);
                            if (response.status == 'successful') {
                                swal({
                                    title: "Success!",
                                    text: 'Payment Verified, redirecting you back to your dashboard',
                                    icon: "success",
                                });
                                window.location.href = "{{ url('/feeds/home') }}";
                                toastr.success("Your package has been activated", "",
                                    defaultSetting)
                            } else {
                                swal({
                                    title: "Error!",
                                    text: 'Failed to verify payment, please try again',
                                    icon: "error",
                                });
                            }
                        }

                    });

                    $.ajax({
                        type: 'GET',
                        url: "/subscription/verify/" + data.transaction_id,
                        success: function(response) {
                            console.log(response);
                            if (response.status == 'success') {
                                document.getElementById('reloader').style.display = 'block';
                                window.location.href = "{{ url('/feeds/home') }}";
                                toastr.success("Your package has been activated", "",
                                    defaultSetting)
                            } else {
                                swal({
                                    title: "Error!",
                                    text: 'Failed to verify payment, please try again',
                                    icon: "error",
                                });
                            }
                        }
                    });
                },
                // redirect_url: "/donation/verify/" + reference,

                customizations: {
                    title: "{{ $package->name }}",
                    description: "{{ $package->description }}",
                    logo: "{{ asset('assets/images/logo_s.png') }}",
                },

                onClose: function() {
                    swal({
                        title: "Oops!",
                        text: "Seems you are not ready to pay now... You can always come back and pay later!",
                        icon: "error",
                    });
                }

            });
        }
    </script>

    {{-- Pay with Tribearc --}}
    <script>
        var paymentTribearc = document.getElementById('pay');
        paymentTribearc.addEventListener('submit', payWithTribearc, false);

        function payWithTribearc(e) {
            e.preventDefault();

            document.getElementById("payTribearc").disabled = true;

            $("#payTribearc").addClass("button--loading")

            var name = "{{ Auth::user()->first_name }} {{ Auth::user()->last_name }}";
            var userId = "{{ Auth::user()->id }}";
            var packageId = "{{ $package->id }}";
            var paymentType = "subscription";
            var email = "{{ Auth::user()->email }}";
            var phone = "{{ Auth::user()->phone_number }}";
            var amount = $("#price").val();
            var currency = $("#currency").val();
            var reference = "{{ @$paymentString }}";

            var paymentUrl = "{{ env('TRIBEARC_PAYMENT_API') }}"
            var p_k = "{{ $tenant_payment_setting->tribearc_private_key ?? env('TRIBEARC_MERCHANT_PRIVATE_KEY') }}"
            var is_fallback = true;
            var is_test = 0; // to use test keys on tribearc payment use 0 else use 1 for live payment
            var purpose = paymentType;
            let fallback_url = "{{ url('/subscription/verify-payment') }}/" + reference;



            $.ajax({
                type: 'POST',
                url: "/subscription/pay-with-tribearc",
                data: {
                    "_token": "{{ csrf_token() }}",
                    payment_reference_id: packageId,
                    reference: reference,
                    flutter_transaction_id: reference,
                    user_id: userId,
                    amount: amount,
                    name: name,
                    email: email,
                    payment_type: paymentType,
                    currency: currency,
                    status: 'pending'
                },
                success: function(response) {
                    console.log(response);

                    var newData = { // if payment initialization is successful, initialize tribearc payment
                        "private_key": p_k,
                        "is_fallback": is_fallback,
                        "fallback_url": fallback_url,
                        "is_test": is_test,
                        "currency": currency,
                        "amount": amount,
                        "purpose": purpose,
                    }
                    payNowWithTribearc(paymentUrl, newData)

                }

            });

        }


        function payNowWithTribearc(paymentUrl, newData) {
            $.ajax({
                url: paymentUrl,
                method: 'POST',
                data: JSON.stringify(newData),
                processData: false,
                cache: false,
                headers: {
                    'Accept': "application/json",
                    "Content-Type": "application/json"
                },
                success: function(d) {
                    if (d.checkout_url) {
                        document.getElementById('reloader').style.display = 'block';

                        $("#pay-with-tribearc").prop('disabled', false);
                        // const generateLink = `<div class="text-white my-3 p-2 alert shadow-sm" style="background: #1F3B64"> If you are not redirected, Follow this link to <a href="${d.checkout_url}" class="btn btn-primary"> procced<a></div>`
                        // // $("#frm_report").html(generateLink);
                        // $("#frm_report").fadeIn(200);
                        window.location.assign(d.checkout_url)
                    } else {
                        swal({
                            title: "Error!",
                            text: 'Failed to verify payment, please try again',
                            icon: "error",
                        });
                        // $("#invalid-feedback").text("Critical error occur. Please try again... You alternate payment gateway if the error persist")
                    }
                    $("#pay-with-tribearc").prop('disabled', false);
                },
                error: function(XMLHttpRequest, textStatus, errorThrown) {
                    const errors = XMLHttpRequest.responseJSON.errors
                    console.log(errors)
                    for (err in errors) {
                        console.log(errors[err][0])
                    }
                    swal({
                        title: "Error!",
                        text: 'Failed to verify payment, please try again',
                        icon: "error",
                    });

                    $("#pay-with-tribearc").prop('disabled', false);

                }
            });
        }
    </script>

    {{-- Pay with Paystack --}}
    <script>
        var paymentPaystack = document.getElementById('pay');
        paymentPaystack.addEventListener('submit', payWithPaystack, false);

        function payWithPaystack(e) {
            e.preventDefault();

            document.getElementById("payPaystack").disabled = true;

            $("#payPaystack").addClass("button--loading")

            var name = "{{ Auth::user()->first_name }} {{ Auth::user()->last_name }}";
            var userId = "{{ Auth::user()->id }}";
            var packageId = "{{ $package->id }}";
            var payment_type = "subscription";
            var email = "{{ Auth::user()->email }}";
            var phone = "{{ Auth::user()->phone_number }}";
            var amount = $("#price").val();
            var currency = $("#currency").val();
            var reference = "{{ @$paymentString }}";

            var paystackCharges = (amount * 0.015) + 100
            // initialize paystack popup
            var handler = PaystackPop.setup({
                key: "{{ $tenant_payment_setting->paystack_live_public_key ?? env('PAYSTACK_PUBLIC_KEY') }}",
                email: email,
                amount: amount * 100 + (paystackCharges * 100),
                currency: currency,
                subaccount: "{{ $tenant_payment_setting->sub_account ?? '' }}",
                ref: reference,

                callback: function(response) {

                    // initialize the transaction and set to pending
                    $.ajax({
                        type: 'POST',
                        url: "/subscription/pay-with-paystack",
                        data: {
                            "_token": "{{ csrf_token() }}",
                            reference: reference,
                            user_id: userId,
                            amount: amount,
                            name: name,
                            email: email,
                            payment_reference_id: packageId,
                            currency: currency,
                            payment_type: payment_type,
                            status: 'pending'
                        },
                        success: function(response) {

                            // console.log(response);
                        }

                    });

                    /// verify the payment then update transaction status to paid
                    document.getElementById('reloader').style.display = 'block';

                    $.ajax({
                        type: 'GET',
                        url: "/savings/payment/callback/" + response.reference + '/' + packageId,
                        success: function(response) {

                            if (response.status == true) {
                                swal({
                                    title: "Success!",
                                    text: 'Payment Verified, redirecting you back to your dashboard',
                                    icon: "success",
                                });
                                window.location.href = "{{ route('saving.index') }}";
                            }

                            if (response.status == false) {
                                swal({
                                    title: "Error!",
                                    text: 'Failed to verify payment, please try again',
                                    icon: "error",
                                });
                            }
                        }
                    });

                },
                onClose: function() {
                    document.getElementById("payPaystack").disabled = true;

                    $("#payPaystack").removeClass("button--loading")
                    swal({
                        title: "Oops!",
                        text: "Seems you are not ready to pay now... You can always come back and pay later!",
                        icon: "error",
                    });
                    setTimeout(() => {
                        window.location.reload();
                    }, 1000);
                }
            });
            handler.openIframe();
        }
    </script>
    <script>
        var paymentPaystack = document.getElementById('pay');
        paymentPaystack.addEventListener('submit', payWithPaystack, false);

        function payWithPaystack_to_us(e) {
            e.preventDefault();

            // alert("with commission!")

            document.getElementById("payPaystack").disabled = true;

            $("#payPaystack").addClass("button--loading")

            var name = "{{ Auth::user()->first_name }} {{ Auth::user()->last_name }}";
            var userId = "{{ Auth::user()->id }}";
            var packageId = "{{ $package->id }}";
            var payment_type = "subscription";
            var email = "{{ Auth::user()->email }}";
            var phone = "{{ Auth::user()->phone_number }}";
            var amount = $("#price").val();
            var currency = $("#currency").val();
            var reference = "{{ @$paymentString }}";

            var paystackCharges = (amount * 0.015) + 100
            // initialize paystack popup
            var handler = PaystackPop.setup({
                key: "pk_live_e04cdfe905fc549d77e5d2012835383ab4cb439c",
                email: email,
                amount: amount * 100 + (paystackCharges * 100),
                currency: currency,
                subaccount: "{{ $tenant_payment_setting->sub_account ?? '' }}",
                ref: reference,

                callback: function(response) {

                    // initialize the transaction and set to pending
                    $.ajax({
                        type: 'POST',
                        url: "/subscription/pay-with-paystack",
                        data: {
                            "_token": "{{ csrf_token() }}",
                            reference: reference,
                            user_id: userId,
                            amount: amount,
                            name: name,
                            email: email,
                            payment_reference_id: packageId,
                            currency: currency,
                            payment_type: payment_type,
                            status: 'pending'
                        },
                        success: function(response) {

                            // console.log(response);
                        }

                    });

                    /// verify the payment then update transaction status to paid
                    document.getElementById('reloader').style.display = 'block';

                    $.ajax({
                        type: 'GET',
                        url: "/savings/payment/callback/" + response.reference + '/' + packageId,
                        success: function(response) {

                            if (response.status == true) {
                                swal({
                                    title: "Success!",
                                    text: 'Payment Verified, redirecting you back to your dashboard',
                                    icon: "success",
                                });
                                window.location.href = "{{ route('saving.index') }}";
                            }

                            if (response.status == false) {
                                swal({
                                    title: "Error!",
                                    text: 'Failed to verify payment, please try again',
                                    icon: "error",
                                });
                            }
                        }
                    });

                },
                onClose: function() {
                    document.getElementById("payPaystack").disabled = true;

                    $("#payPaystack").removeClass("button--loading")
                    swal({
                        title: "Oops!",
                        text: "Seems you are not ready to pay now... You can always come back and pay later!",
                        icon: "error",
                    });
                    setTimeout(() => {
                        window.location.reload();
                    }, 1000);
                }
            });
            handler.openIframe();
        }
    </script>
@endsection