<div class="modal fade" id="paymentModel" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-lg modal-dialog-centered">
        <div class="modal-content bda-card-area-box ">

            <form class="" action="{{ route('payment.checkout') }}" method="POST" enctype="multipart/form-data"
                  data-callback="paymentResponse">
                @csrf

                <input type="hidden" name="package_id" id="packageId">
                <input type="hidden" name="period" id="packagePeriod">

                <h1 class="bda-fs-24 title-light">{{__("Select payment gateway")}}</h1>
                <!-- payment system check add start-->
                <div class="row bda-mt-30 bda-mb-10">
                    @foreach($paymentGateway as $gatewayItem)
                        <div class="col-xl-3 col-lg-6">
                            <div class="bda-pay-area">
                                <label class="w-100">
                                    <input class="radio-input gateway-action" type="radio" name="selected_gateway"
                                           value="{{$gatewayItem->slug}}"
                                           data-currency-rate="{{$gatewayItem->currency_rate}}"
                                           data-currency-symbol="{{currencyOptions($gatewayItem->currency, true )}}">
                                    <span class="radio-tile">
                                    <span class="radio-icon">
                                    </span>
                                    <span class="radio-label">
                                        <img class="w-50" src="{{getImageUrl($gatewayItem->image)}}" alt="">
                                    </span>
                                </span>
                                </label>
                            </div>
                        </div>
                    @endforeach
                </div>

                <!-- payment system check add  end-->
                <p class="bda-fs-18 title-light bda-mb-10">{{__("User Information")}}</p>
                <div class="bda-border-paymentModel">
                    <div class="d-flex justify-content-between gap-2 flex-wrap bda-padding-10-p">
                        <p>{{__("Name:")}}</p>
                        <p>{{auth()->user()->name}}</p>
                    </div>
                    <div class="d-flex justify-content-between gap-2 flex-wrap bda-padding-10-p">
                        <p>{{__("Email:")}}</p>
                        <p>{{auth()->user()->email}}</p>
                    </div>
                    <div class="d-flex justify-content-between gap-2 flex-wrap bda-padding-10-p">
                        <p>{{__("Phone:")}}</p>
                        <p>{{auth()->user()->phone}}</p>
                    </div>
                </div>

                <p class="bda-fs-18 title-light bda-mb-10 mt-4">{{__("Purchase Information")}}</p>
                <div class="bda-border-paymentModel">
                    <div class="d-flex justify-content-between gap-2 flex-wrap bda-padding-10-p">
                        <p>{{__("Package Name:")}}</p>
                        <p id="packageName"></p>
                    </div>
                    <div class="d-flex justify-content-between gap-2 flex-wrap bda-padding-10-p">
                        <p>{{__("Package Price :")}}</p>
                        <p>$<span id="packageMainPrice"></span></p>
                    </div>
                    <div class="d-flex justify-content-between gap-2 flex-wrap bda-padding-10-p">
                        <p>{{__("Conversation Rate :")}}</p>
                        <p><span id="packageSymbol">$</span><span id="packagePrice"></span></p>
                    </div>
                    <div class="d-flex justify-content-between gap-2 flex-wrap bda-padding-10-p">
                        <p>{{__("Package Credit :")}}</p>
                        <p id="packageCredit"></p>
                    </div>
                    <div class="d-flex justify-content-between gap-2 flex-wrap bda-padding-10-p">
                        <p>{{__("Package Type :")}}</p>
                        <p id="packageType"></p>
                    </div>
                </div>

                <div class="bda-mt-30">
                    <button type="submit" class="bda-btu-theme pay-button-action">{{__("Pay")}}</button>
                </div>
            </form>

        </div>
    </div>
</div>
