@php
    use Stevebauman\Location\Facades\Location;
    //dd($_COOKIE["country"]);
    if(!isset($_COOKIE["country"])) {
        $ip = request()->server("REMOTE_ADDR");
        //$cuinfo = Location::get('77.111.246.19');
        $cuinfo = Location::get($ip);
        if($ip == '127.0.0.1') {
            $cuinfo = Location::get('45.116.117.187');
        }
        if(request()->country) {
            $cuinfo->countryCode = request()->country;
        }
    } else {
        $cuinfo = new stdClass();
        $cuinfo->countryCode = $_COOKIE["country"];
        if($_COOKIE["country"] == 'IN')
            $cuinfo->countryName = 'India';
        elseif($_COOKIE["country"] == 'UK')
            $cuinfo->countryName = 'United Kingdom';
        elseif($_COOKIE["country"] == 'AE')
            $cuinfo->countryName = 'United Arab Emirates';
        elseif($_COOKIE["country"] == 'AU')
            $cuinfo->countryName = 'Australia';
        elseif($_COOKIE["country"] == 'SG')
            $cuinfo->countryName = 'Singapore';
        elseif($_COOKIE["country"] == 'CA')
            $cuinfo->countryName = 'Canada';
        elseif($_COOKIE["country"] == 'DE')
            $cuinfo->countryName = 'Germany';
        elseif($_COOKIE["country"] == 'FR')
            $cuinfo->countryName = 'France';     
        else
            $cuinfo->countryName = 'United States';
    }
@endphp
@php
    $metas = $metatags;
@endphp
@extends('master')
@section('main_content')
    <style>
        .payment-method {
            cursor: pointer;
        }
        .pm-check {
            position: absolute;
            width: 100%;
            top: 0;
            left: 0;
            height: 100%;
            border: 3px solid #cc1db9;
            border-radius: 2px;
        }
        .pm-check img {
            position: absolute;
            width: 25px;
            top: -13px;
            right: -14px;
        }
        .btn-primary {
            background-color: #cc1db9;
            border-color: #cc1db9;
        }
        .btn-primary:hover {
            background-color: #fff;
            border-color: #cc1db9;
            color: #cc1db9;
        }
    </style>
    <section id="select-method">
        <div class="container">
            <div class="row justify-content-center">
                <div class="col-md-12">
                    <h1 class="text-center">
                        Payment
                    </h1>
                    <p class="text-center">Choose your Payment Method</p>
                </div>
                <div class="col-md-12 mt-4">
                    <div class="row justify-content-center">
                        <div class="col-md-2">
                            <div class="card payment-method" onclick="selectMethod('paypal')">
                                <div class="card-body d-flex justify-content-center">
                                    <img src="{{ asset('images/pm-paypal.png') }}" alt="Pay with Paypal" class="width-100">
                                </div>
                                <div class="pm-check d-none" id="paypal-check">
                                    <img src="{{ asset('images/check.png') }}" alt="selected">
                                </div>
                            </div>
                        </div>
                        <div class="col-md-2">
                            <div class="card payment-method" onclick="selectMethod('stripe')">
                                <div class="card-body d-flex justify-content-center">
                                    <img src="{{ asset('images/pm-stripe.png') }}" alt="Pay with Stripe" class="width-100">
                                </div>
                                <div class="pm-check d-none" id="stripe-check">
                                    <img src="{{ asset('images/check.png') }}" alt="selected">
                                </div>
                            </div>
                        </div>
                        <div class="col-md-2">
                            <div class="card payment-method" onclick="selectMethod('razorpay')">
                                <div class="card-body d-flex justify-content-center">
                                    <img src="{{ asset('images/pm-razorpay.png') }}" alt="Pay with Razorpay" class="width-100">
                                </div>
                                <div class="pm-check d-none" id="razorpay-check">
                                    <img src="{{ asset('images/check.png') }}" alt="selected">
                                </div>
                            </div>
                        </div>
                        <div class="col-md-2">
                            <div class="card payment-method" onclick="selectMethod('splitit')">
                                <div class="card-body d-flex justify-content-center">
                                    <img src="{{ asset('images/pm-splitit.png') }}" alt="Pay with SplitIt" class="width-100">
                                </div>
                                <div class="pm-check d-none" id="splitit-check">
                                    <img src="{{ asset('images/check.png') }}" alt="selected">
                                </div>
                            </div>
                        </div>
                        <div class="col-md-2">
                            <div class="card payment-method" onclick="selectMethod('affirm')">
                                <div class="card-body d-flex justify-content-center">
                                    <img src="{{ asset('images/pm-affirm.png') }}" alt="Pay with Affirm" class="width-100" style="height: 72px;">
                                </div>
                                <div class="pm-check d-none" id="affirm-check">
                                    <img src="{{ asset('images/check.png') }}" alt="selected">
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-md-6 mt-4">
                    <h5 class="text-center">
                        Select Currency
                    </h5>
                    <select id="my_select" class="form-control" onchange="selectCurrency(this.value)">
                        <option class="pm-cur" value="" selected disabled>Select an option</option>
                        <option class="razorpay paypal stripe splitit affirm currency" value="USD">United States Dollars</option>
                        <option class="razorpay splitit  currency" value="INR">Indian Rupee</option>
                        <option class="razorpay paypal splitit  stripe currency" value="EUR">Euro</option>
                        <option class="razorpay paypal splitit stripe   currency" value="GBP">United Kingdom Pounds</option>
                        <option class="razorpay paypal splitit stripe affirm currency" value="CAD">Canada Dollars</option>
                        <option class="razorpay paypal splitit stripe  currency" value="SGD">Singapore Dollars</option>
                        <option class="razorpay stripe splitit  currency" value="AED">Emrati Dhiram</option>
                        <option class="razorpay stripe splitit  currency" value="AUD">Australian Dollar</option>
                    </select>
                </div>
                <div class="col-md-12 mt-4">
                    <div class="row justify-content-center">
                        <div class="col-md-4 d-none razorpay">
                            <div class="d-flex justify-content-center">
                                <!-- INR -->
                                <form class="razorpay-inr rzp-currency d-none"><script src="https://checkout.razorpay.com/v1/payment-button.js" data-payment_button_id="pl_KpJ3riv61a3fVM" async> </script> </form>
                                <!-- USD -->
                                    <form class="razorpay-usd rzp-currency d-none" ><script src="https://checkout.razorpay.com/v1/payment-button.js" data-payment_button_id="pl_KpJ6ONjGRpbYdA" async> </script> </form>
                                <!-- GBP -->
                                    <form class="razorpay-gbp rzp-currency d-none" ><script src="https://checkout.razorpay.com/v1/payment-button.js" data-payment_button_id="pl_KpJ7mHk14fh38B" async> </script> </form>
                                <!-- EUR -->
                                    <form class="razorpay-eur rzp-currency d-none" ><script src="https://checkout.razorpay.com/v1/payment-button.js" data-payment_button_id="pl_KpJ8bl1Mu0R9z2" async> </script> </form>
                                <!-- SGD -->
                                <form class="razorpay-sgd rzp-currency d-none"><script src="https://checkout.razorpay.com/v1/payment-button.js" data-payment_button_id="pl_KpJ9OvqHF4F6XY" async> </script></form>
                                <!-- AED -->
                                <form class="razorpay-aed rzp-currency d-none"><script src="https://checkout.razorpay.com/v1/payment-button.js" data-payment_button_id="pl_KpJAD4EiHYgWp2" async> </script> </form>
                                <!-- CAD -->
                                <form class="razorpay-cad rzp-currency d-none"><script src="https://checkout.razorpay.com/v1/payment-button.js" data-payment_button_id="pl_KpJB053Ruiqy8x" async> </script></form>
                                <!-- AUD -->
                                <form class="razorpay-aud rzp-currency d-none"><script src="https://checkout.razorpay.com/v1/payment-button.js" data-payment_button_id="pl_KpJC8UAzVyhqhE" async> </script></form>
                            </div>
                        </div>
                        <div class="col-md-4 d-none paypal">
                            <buttom class="btn btn-primary btn-block" onclick="initiatePaypal()">Proceed to Pay</buttom>
                        </div>
                        <div class="col-md-4 d-none stripe">
                            <buttom class="btn btn-primary btn-block" onclick="initiateStripe()">Proceed to Pay</buttom>
                        </div>
                        <div class="col-md-4 d-none splitit">
                            <buttom class="btn btn-primary btn-block" onclick="initiateSplitit()">Proceed to Pay</buttom>
                        </div>
                        <div class="col-md-4 d-none affirm">
                            <buttom class="btn btn-primary btn-block" onclick="initiateAffirm()">Proceed to Pay</buttom>
                        </div>
                    </div>
                </div>
                <div class="col-md-12">
                    <p id="methodError" class="d-none mt-4" style="color:red; text-align: center;">Selecting both payment method and currency is mandatory.</p>
                </div>
            </div>
        </div>
    </section>
    <script>
        method = null
        currency = null
        function selectMethod(method) {
            $('#my_select option').prop('selected', function() {
                return this.defaultSelected;
            });
            $('.paypal').addClass('d-none')
            $('.razorpay').addClass('d-none')
            $('.stripe').addClass('d-none')
            $('.rzp-currency').addClass('d-none')
            $('.affirm').addClass('d-none')
            this.method = null
            this.currency = null
            if(method == 'paypal') {
                this.method = method
                $('.pm-check').addClass('d-none')
                $('#paypal-check').removeClass('d-none')
                $('.currency').addClass('d-none')
                $('.paypal').removeClass('d-none')
            } else if(method == 'stripe') {
                this.method = method
                $('.pm-check').addClass('d-none')
                $('#stripe-check').removeClass('d-none')
                $('.currency').addClass('d-none')
                $('.stripe').removeClass('d-none')
            } else if(method == 'razorpay') {
                this.method = method
                $('.pm-check').addClass('d-none')
                $('#razorpay-check').removeClass('d-none')
                $('.currency').addClass('d-none')
                $('.razorpay').removeClass('d-none')
            } else if(method == 'splitit') {
                this.method = method
                $('.pm-check').addClass('d-none')
                $('#splitit-check').removeClass('d-none')
                $('.currency').addClass('d-none')
                $('.splitit').removeClass('d-none')
            } else if(method == 'affirm') {
                this.method = method
                $('.pm-check').addClass('d-none')
                $('#affirm-check').removeClass('d-none')
                $('.currency').addClass('d-none')
                $('.affirm').removeClass('d-none')
            }
        }
        function selectCurrency(currency) {
            this.currency = currency
            $('.rzp-currency').addClass('d-none')
            if(this.method == 'razorpay') {
                if(this.currency == 'INR') {
                    $('.razorpay-inr').removeClass('d-none')
                } else if(this.currency == 'USD') {
                    $('.razorpay-usd').removeClass('d-none')
                } else if(this.currency == 'GBP') {
                    $('.razorpay-gbp').removeClass('d-none')
                } else if(this.currency == 'EUR') {
                    $('.razorpay-eur').removeClass('d-none')
                } else if(this.currency == 'SGD') {
                    $('.razorpay-sgd').removeClass('d-none')
                } else if(this.currency == 'AED') {
                    $('.razorpay-aed').removeClass('d-none')
                } else if(this.currency == 'CAD') {
                    $('.razorpay-cad').removeClass('d-none')
                } else if(this.currency == 'AUD') {
                    $('.razorpay-aud').removeClass('d-none')
                }
            }
        }
        function initiatePaypal() {
            if(method == 'paypal' && currency) {
                window.location.href = "{{ url('payments-step-paypal') }}/"+currency;
            } else {
                $('#methodError').removeClass('d-none')
            }
        }
        function initiateStripe() {
            if(method == 'stripe' && currency) {
                window.location.href = "{{ url('payments-step-stripe') }}/"+currency;
            } else {
                $('#methodError').removeClass('d-none')
            }
        }
        function initiateSplitit() {
            if(method == 'splitit' && currency) {
                window.location.href = "{{ url('payments-step-splitit') }}/"+currency;
            } else {
                $('#methodError').removeClass('d-none')
            }
        }
        function initiateAffirm() {
            if(method == 'affirm' && currency) {
                window.location.href = "{{ url('payments-step-affirm') }}/"+currency;
            } else {
                $('#methodError').removeClass('d-none')
            }
        }
    </script>
@endsection


@section('npf_widget') 
    @include('common.npf_form_modal')
@endsection