@extends('layout')
@section('title')
    <title>{{ __('translate.Promotion payment') }}</title>
@endsection

@section('body-content')
<main>
    


    <section class="dashboard footer-top-pad listing-promotion-payment">
        <div class="container">
            <div class="row">
                @include('profile.sidebar')

                <div class="col-xxl-9 col-xl-8 col-lg-8">
                    <a href="{{ route('user.listing-promotion.manage', $listing->id) }}" class="listing-promotion-manage__back mb-4">
                        <i class="fas fa-arrow-left" aria-hidden="true"></i>
                        {{ __('translate.Back') }}
                    </a>

                    <div class="row g-4 listing-promotion-payment__layout">
                        <div class="col-lg-5">
                            <div class="listing-promotion-payment__summary pricing-box pricing-box-two">
                                <span class="listing-promotion-payment__order-id">{{ __('translate.Order ID') }}: {{ $order->order_id }}</span>
                                <h3 class="pricing-box-taitel">{{ __('translate.Promotion payment') }}</h3>

                                @if ($listing->thumb_image)
                                    <div class="listing-promotion-payment__thumb">
                                        <img src="{{ custom_asset($listing->thumb_image, '315x230') }}" alt="{{ $listing->title }}">
                                    </div>
                                @endif

                                <p class="listing-promotion-payment__listing-title">{{ $listing->title }}</p>

                                <ul class="pricing-list listing-promotion-payment__details">
                                    @foreach ($promotion_type_labels as $promotion_type_label)
                                    <li>
                                        <span>
                                            <svg width="15" height="15" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg">
                                                <circle cx="7.5" cy="7.5" r="7.5" fill="#1DBF73" />
                                                <path fill-rule="evenodd" clip-rule="evenodd" d="M5.84549 10.8315C5.64265 10.6063 5.64265 10.238 5.84549 10.0128L11.111 4.16888C11.3139 3.94371 11.6458 3.94371 11.8487 4.16888C12.0516 4.39404 12.0508 4.76323 11.8487 4.98754L6.58313 10.8315C6.38102 11.0558 6.04837 11.0566 5.84549 10.8315Z" fill="white" />
                                                <path fill-rule="evenodd" clip-rule="evenodd" d="M6.57547 10.8228C6.37263 11.0479 6.04071 11.0479 5.83783 10.8228L3.15213 7.84205C2.94929 7.61689 2.94929 7.24851 3.15213 7.02339C3.35501 6.79822 3.68805 6.79946 3.88977 7.02339L6.57547 10.0041C6.77723 10.228 6.77835 10.5976 6.57547 10.8228Z" fill="white" />
                                            </svg>
                                        </span>
                                        {{ $promotion_type_label }}
                                    </li>
                                    @endforeach
                                    @if ($listing->sub_category)
                                        <li>
                                            <span>
                                                <svg width="15" height="15" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg">
                                                    <circle cx="7.5" cy="7.5" r="7.5" fill="#1DBF73" />
                                                    <path fill-rule="evenodd" clip-rule="evenodd" d="M5.84549 10.8315C5.64265 10.6063 5.64265 10.238 5.84549 10.0128L11.111 4.16888C11.3139 3.94371 11.6458 3.94371 11.8487 4.16888C12.0516 4.39404 12.0508 4.76323 11.8487 4.98754L6.58313 10.8315C6.38102 11.0558 6.04837 11.0566 5.84549 10.8315Z" fill="white" />
                                                    <path fill-rule="evenodd" clip-rule="evenodd" d="M6.57547 10.8228C6.37263 11.0479 6.04071 11.0479 5.83783 10.8228L3.15213 7.84205C2.94929 7.61689 2.94929 7.24851 3.15213 7.02339C3.35501 6.79822 3.68805 6.79946 3.88977 7.02339L6.57547 10.0041C6.77723 10.228 6.77835 10.5976 6.57547 10.8228Z" fill="white" />
                                                </svg>
                                            </span>
                                            {{ $listing->sub_category->name }}
                                        </li>
                                    @endif
                                </ul>

                                <div class="listing-promotion-payment__amount">
                                    <span>{{ __('translate.Amount') }}</span>
                                    <strong>{{ currency($order->amount) }}</strong>
                                </div>
                            </div>
                        </div>

                        <div class="col-lg-7">
                            <div class="listing-promotion-payment__methods">
                                <h4 class="listing-promotion-payment__methods-title">{{ __('translate.Payment') }}</h4>
                                <p class="listing-promotion-payment__methods-intro">{{ __('translate.Promotion payment methods help') }}</p>

                                <div class="payment-box">
                                    @if ($stripe && $stripe->status == 1)
                                        <div class="payment-box-item" data-bs-toggle="modal" data-bs-target="#promotionStripeModal" role="button" tabindex="0">
                                            <input type="button" class="form-control" value="{{ __('translate.Pay via Stripe') }}" readonly>
                                            <div class="input-img">
                                                <img src="{{ custom_asset($stripe->image, '100x25') }}" alt="Stripe">
                                            </div>
                                        </div>
                                    @endif

                                    @if ($paypal && $paypal->status == 1)
                                        <div class="payment-box-item" id="promotion_paypal_btn" role="button" tabindex="0">
                                            <input type="button" class="form-control" value="{{ __('translate.Paypal') }}" readonly>
                                            <div class="input-img">
                                                <img src="{{ custom_asset($paypal->image, '100x25') }}" alt="PayPal">
                                            </div>
                                        </div>
                                    @endif

                                    @if ($razorpay && $razorpay->status == 1)
                                        <div class="payment-box-item" id="promotion_razorpay_btn" role="button" tabindex="0">
                                            <input type="button" class="form-control" value="{{ __('translate.Razorpay') }}" readonly>
                                            <div class="input-img">
                                                <img src="{{ custom_asset($razorpay->image, '100x25') }}" alt="Razorpay">
                                            </div>
                                        </div>

                                        @php
                                            $promotion_razorpay_amount = round($order->amount * $razorpay->currency->currency_rate, 2);
                                        @endphp
                                        <form action="{{ route('user.listing-promotion.pay-razorpay', $order->id) }}" method="POST" class="d-none">
                                            @csrf
                                            <script src="https://checkout.razorpay.com/v1/checkout.js"
                                                    data-key="{{ $razorpay->key }}"
                                                    data-currency="{{ $razorpay->currency->currency_code }}"
                                                    data-amount="{{ $promotion_razorpay_amount * 100 }}"
                                                    data-buttontext="{{ __('translate.Pay') }} {{ $promotion_razorpay_amount }} {{ $razorpay->currency->currency_code }}"
                                                    data-name="{{ $razorpay->name }}"
                                                    data-description="{{ $razorpay->description }}"
                                                    data-image="{{ custom_asset($razorpay->image) }}"
                                                    data-prefill.name=""
                                                    data-prefill.email=""
                                                    data-theme.color="{{ $razorpay->color }}">
                                            </script>
                                        </form>
                                    @endif

                                    @if ($flutterwave && $flutterwave->status == 1)
                                        <div class="payment-box-item" id="promotion_flutterwave_btn" role="button" tabindex="0">
                                            <input type="button" class="form-control" value="{{ __('translate.Flutterwave') }}" readonly>
                                            <div class="input-img">
                                                <img src="{{ custom_asset($flutterwave->logo, '100x25') }}" alt="Flutterwave">
                                            </div>
                                        </div>
                                    @endif

                                    @if ($paystack && $paystack->paystack_status == 1)
                                        <div class="payment-box-item" id="promotion_paystack_btn" role="button" tabindex="0">
                                            <input type="button" class="form-control" value="{{ __('translate.Pay via Paystack') }}" readonly>
                                            <div class="input-img">
                                                <img src="{{ custom_asset($paystack->paystack_image, '100x25') }}" alt="Paystack">
                                            </div>
                                        </div>
                                    @endif

                                    @if ($mollie && $mollie->mollie_status == 1)
                                        <div class="payment-box-item" id="promotion_mollie_btn" role="button" tabindex="0">
                                            <input type="button" class="form-control" value="{{ __('translate.Mollie') }}" readonly>
                                            <div class="input-img">
                                                <img src="{{ custom_asset($mollie->mollie_image, '100x25') }}" alt="Mollie">
                                            </div>
                                        </div>
                                    @endif

                                    @if ($instamojo && $instamojo->status == 1)
                                        <div class="payment-box-item" id="promotion_instamojo_btn" role="button" tabindex="0">
                                            <input type="button" class="form-control" value="{{ __('translate.Instamojo') }}" readonly>
                                            <div class="input-img">
                                                <img src="{{ custom_asset($instamojo->image, '100x25') }}" alt="Instamojo">
                                            </div>
                                        </div>
                                    @endif

                                    @if ($bank && $bank->status == 1)
                                        <div class="payment-box-item" data-bs-toggle="modal" data-bs-target="#promotionBankModal" role="button" tabindex="0">
                                            <input type="button" class="form-control" value="{{ __('translate.Bank Payment') }}" readonly>
                                            <div class="input-img">
                                                @if ($bank->image)
                                                    <img src="{{ custom_asset($bank->image, '100x25') }}" alt="{{ __('translate.Bank Payment') }}">
                                                @else
                                                    <span class="listing-promotion-payment__bank-label">{{ __('translate.Bank Payment') }}</span>
                                                @endif
                                            </div>
                                        </div>
                                    @endif

                                    @php
                                        $hasPromotionPaymentMethod = ($stripe && $stripe->status == 1)
                                            || ($paypal && $paypal->status == 1)
                                            || ($razorpay && $razorpay->status == 1)
                                            || ($flutterwave && $flutterwave->status == 1)
                                            || ($paystack && $paystack->paystack_status == 1)
                                            || ($mollie && $mollie->mollie_status == 1)
                                            || ($instamojo && $instamojo->status == 1)
                                            || ($bank && $bank->status == 1);
                                    @endphp

                                    @if (! $hasPromotionPaymentMethod)
                                        <div class="alert alert-warning mb-0">{{ __('translate.No payment method available') }}</div>
                                    @endif
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    @if ($stripe && $stripe->status == 1)
        <div class="modal stripe-modal fade" id="promotionStripeModal" tabindex="-1" aria-hidden="true">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title">{{ __('translate.Pay via Stripe') }}</h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="{{ __('translate.Close') }}"></button>
                    </div>
                    <div class="modal-body">
                        <div class="payment-modal-item">
                            <h4>{{ __('translate.Amount') }}<span>{{ currency($order->amount) }}</span></h4>
                        </div>
                        <form class="stripe-modal-form require-validation" action="{{ route('user.listing-promotion.pay-stripe', $order->id) }}" method="POST" data-cc-on-file="false" data-stripe-publishable-key="{{ $stripe->stripe_key }}" id="promotion-payment-form">
                            @csrf
                            @include('partials.stripe-card-fields', ['stripeFieldIdPrefix' => 'promotion_stripe'])
                            <div class="stripe-modal-form-item stripe_error d-none">
                                <div class="stripe-modal-form-inner">
                                    <div class="alert-danger alert">{{ __('translate.Please provide your valid card information') }}</div>
                                </div>
                            </div>
                            <div class="stripe-modal-form-item">
                                <div class="stripe-modal-form-inner">
                                    <a class="main-btn" href="javascript:;" id="promotion_stripe_form_btn">
                                        <div class="btn_m">
                                            <div class="btn_c">
                                                <div class="btn_t1">{{ __('translate.Payment Now') }}</div>
                                                <div class="btn_t2">{{ __('translate.Payment Now') }}</div>
                                            </div>
                                        </div>
                                    </a>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    @endif

    @if ($bank && $bank->status == 1)
        <div class="modal banck-modal stripe-modal fade" id="promotionBankModal" tabindex="-1" aria-hidden="true">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title">{{ __('translate.Bank Payment') }}</h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="{{ __('translate.Close') }}"></button>
                    </div>
                    <div class="modal-body">
                        <div class="payment-modal-item">
                            <h4>{{ __('translate.Amount') }}<span>{{ currency($order->amount) }}</span></h4>
                        </div>
                        <div class="bank-payment-modal-txt">
                            {!! clean(nl2br(e($bank->account_info))) !!}
                        </div>
                        <form class="payment-modal-from" action="{{ route('user.listing-promotion.pay-bank', $order->id) }}" method="POST" id="promotion_bank_payment_form">
                            @csrf
                            <div class="bank-payment-form-item">
                                <div class="bank-payment-form-inner">
                                    <textarea class="form-control" rows="3" placeholder="{{ __('translate.Transaction information') }}" name="tnx_info" required></textarea>
                                </div>
                            </div>
                            <div class="bank-payment-form-item">
                                <div class="bank-payment-form-inner">
                                    <button type="submit" class="main-btn border-0 w-100">
                                        <div class="btn_m">
                                            <div class="btn_c">
                                                <div class="btn_t1">{{ __('translate.Payment Now') }}</div>
                                                <div class="btn_t2">{{ __('translate.Payment Now') }}</div>
                                            </div>
                                        </div>
                                    </button>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    @endif
</main>
@include('profile.logout')
@endsection

@push('js_section')
<script src="https://js.stripe.com/v2/"></script>
@include('partials.stripe-card-validation')
<script>
"use strict";
$(function () {
    $("#promotion_stripe_form_btn").on("click", function (event) {
        event.preventDefault();

        var $btn = $(this);
        if ($btn.data("submitLock")) {
            return;
        }

        $("#promotion-payment-form").trigger("submit");
    });

    var $form = $("#promotion-payment-form");
    if ($form.length) {
        initStripeCardForm($form, function (cardData) {
            var $btn = window.resolveStripePayButton ? window.resolveStripePayButton($form) : $("#promotion_stripe_form_btn");

            Stripe.setPublishableKey($form.data("stripe-publishable-key"));
            Stripe.createToken({
                number: cardData.number,
                cvc: cardData.cvc,
                exp_month: cardData.exp_month,
                exp_year: cardData.exp_year
            }, function (status, response) {
                if (response.error) {
                    if (window.clearMainBtnSubmitLoading) {
                        window.clearMainBtnSubmitLoading($btn);
                    }
                    $form.find(".stripe_error").removeClass("d-none").find(".alert").text(response.error.message);
                } else {
                    $form.find("input[type=text]").val("");
                    $form.find("input[name='stripeToken']").remove();
                    $form.append("<input type='hidden' name='stripeToken' value='" + response.id + "'/>");
                    $form.get(0).submit();
                }
            });
        });
    }

    $("#promotion_razorpay_btn").on("click", function () {
        $(".razorpay-payment-button").click();
    });

    $("#promotion_paypal_btn").on("click", function () {
        window.location.href = "{{ route('user.listing-promotion.pay-paypal', $order->id) }}";
    });

    $("#promotion_mollie_btn").on("click", function () {
        window.location.href = "{{ route('user.listing-promotion.pay-mollie', $order->id) }}";
    });

    $("#promotion_instamojo_btn").on("click", function () {
        window.location.href = "{{ route('user.listing-promotion.pay-instamojo', $order->id) }}";
    });
});
</script>

@if ($flutterwave && $flutterwave->status == 1)
    <script src="https://checkout.flutterwave.com/v3.js"></script>
    @php
        $promotion_flutterwave_amount = round($order->amount * $flutterwave->currency->currency_rate, 2);
    @endphp
    <script>
        "use strict";
        $(function () {
            $("#promotion_flutterwave_btn").on("click", function () {
                var isDemo = "{{ env('APP_MODE') }}";
                if (isDemo == 'DEMO') {
                    toastr.error('{{ __('translate.This Is Demo Version. You Can Not Change Anything') }}');
                    return;
                }

                FlutterwaveCheckout({
                    public_key: "{{ $flutterwave->public_key }}",
                    tx_ref: "{{ substr(rand(0, time()), 0, 10) }}",
                    amount: {{ $promotion_flutterwave_amount }},
                    currency: "{{ $flutterwave->currency->currency_code }}",
                    country: "{{ $flutterwave->currency->country_code }}",
                    payment_options: " ",
                    customer: {
                        email: "{{ $user->email }}",
                        phone_number: "{{ $user->phone }}",
                        name: "{{ $user->name }}",
                    },
                    callback: function (data) {
                        var tnx_id = data.transaction_id;
                        var _token = "{{ csrf_token() }}";
                        $.ajax({
                            type: 'post',
                            data: { tnx_id: tnx_id, _token: _token },
                            url: "{{ route('user.listing-promotion.pay-flutterwave', $order->id) }}",
                            success: function (response) {
                                if (response.status == 'success') {
                                    toastr.success(response.message);
                                    window.location.href = "{{ route('user.listing.index') }}";
                                } else {
                                    toastr.error(response.message);
                                    window.location.reload();
                                }
                            },
                            error: function () {
                                toastr.error("{{ __('translate.Something went wrong, please try again') }}");
                                window.location.reload();
                            }
                        });
                    },
                    customizations: {
                        title: "{{ $flutterwave->title }}",
                        logo: "{{ custom_asset($flutterwave->logo) }}",
                    },
                });
            });
        });
    </script>
@endif

@if ($paystack && $paystack->paystack_status == 1)
    <script src="https://js.paystack.co/v1/inline.js"></script>
    @php
        $promotion_paystack_amount = round($order->amount * $paystack->paystack_currency->currency_rate * 100);
    @endphp
    <script>
        "use strict";
        $(function () {
            $("#promotion_paystack_btn").on("click", function () {
                var isDemo = "{{ env('APP_MODE') }}";
                if (isDemo == 'DEMO') {
                    toastr.error('{{ __('translate.This Is Demo Version. You Can Not Change Anything') }}');
                    return;
                }

                var handler = PaystackPop.setup({
                    key: '{{ $paystack->paystack_public_key }}',
                    email: '{{ $user->email }}',
                    amount: '{{ $promotion_paystack_amount }}',
                    currency: "{{ strtoupper($paystack->paystack_currency->currency_code) }}",
                    callback: function (response) {
                        let reference = response.reference;
                        let tnx_id = response.transaction;
                        let _token = "{{ csrf_token() }}";
                        $.ajax({
                            type: "get",
                            data: { reference: reference, tnx_id: tnx_id, _token: _token },
                            url: "{{ route('user.listing-promotion.pay-paystack', $order->id) }}",
                            success: function (response) {
                                if (response.status == 'success') {
                                    toastr.success(response.message);
                                    window.location.href = "{{ route('user.listing.index') }}";
                                } else {
                                    toastr.error(response.message);
                                    window.location.reload();
                                }
                            },
                            error: function () {
                                toastr.error('{{ __('translate.Something went wrong, please try again') }}');
                                window.location.reload();
                            }
                        });
                    },
                });
                handler.openIframe();
            });
        });
    </script>
@endif
@endpush