@extends('reachassuree_web/layouts.main')
@section('title', $data['title'])
@section('content')
<style>
  .razorpay-payment-button {
    font-size: 16px;
    color: white;
    transition: all ease 0.5s;
    text-align: center;
    position: relative;
    z-index: 1;
    overflow: hidden;
    display: inline-flex;
    padding: 12px 30px;
    background-color: #023E8A;
    border-radius: 4px;
    font-weight: 600;
    border: 1px solid #023E8A;

  }
  .single-features-item:hover p{
    color:#023E8A;
  }
  .nav{
		background-color: #f1f5fe;
    	border-radius: 0.8rem;
	}
	.nav-tabs{
		border-bottom: 0;
	}
	.nav-link{
		padding: 0.7rem 1.5rem;
		font-weight: 500;
	}
	.nav-tabs .nav-item.show .nav-link, .nav-tabs .nav-link.active{
		border-color: unset;
		border: none;
		color: #fff;
    	background-color: #0d3674;
		border-radius: 0.6rem;
	}
	.nav-tabs .nav-link:focus, .nav-tabs .nav-link:hover{
		border-color: unset;
		border: 0;
	}
	.nav-tabs .nav-link{
		border-radius: 0.6rem;
		border: 0;
	}
 


</style>
	<section class="pricing-area pt-50 pb-50">
        <div class="my-5">
            <div class="container">
                <div class="row">
                    <div class="col-lg-12">
                        <div class="text-center">
                            <div class="row justify-content-center">
                                <div class="col-sm-4">
                                    <div class="maintenance-img">
                                        <img src="{{ asset('ra-assets/images/payment.png')}}" alt="" class="img-fluid mx-auto d-block">
                                    </div>
                                </div>
                            </div>
                            <h4 class="mt-5 ">For Re-Activation Plan</h4>
                            <p class="text-muted">You are hereby agreeing to pay us the amount required for the Service you</p>

                            <form class="text-center" action="{{ route('razorpay.payment.store') }}" method="POST">
                               @csrf

                                <input type="hidden" name="transcation_id" value="{{$data['renewtranscation_id']}}" />
                                 <input type="hidden" name="plan_price" value="{{$data['plan_price']}}" />
                                 <input type="hidden" name="refund_transaction_id" value="{{$data['refund_transaction_id']}}" />
                                  <script src="https://checkout.razorpay.com/v1/checkout.js" data-key="{{ env('RAZORPAY_KEY') }}" data-amount="{{$data['agent_transcation']->payable_amount*100}}" data-buttontext="Pay with RozorPay : {{$data['agent_transcation']->payable_amount}} INR" data-name="Reachassuree" data-description="{{$data['renewtranscation_id']}}" data-image="{{ asset('rassets/images/logo.png') }}" data-prefill.contact="{{ $data['agent_detail']->mobile_number}}" data-prefill.email="{{ $data['agent_detail']->email}}" data-theme.color="#023E8A;"></script>
                            </form>
                            <div class="row justify-content-center mt-5">
                                <div class="col-md-12 d-flex">
                                    <div class="col-md-4 mx-2">
                                   <div class="single-features-item">  
                                        <h6>Email</h6> 
                                        <p>{{ $data['agent_detail']->email }}</p> 
                                    </div>
                                    </div>
                                    <div class="col-md-4 mx-2">
                                    <div class="single-features-item">  
                                        <h6>Mobile</h6> 
                                        <p>{{ $data['agent_detail']->mobile_number}}</p>
                                   </div> 
                                    </div>
                                    <div class="col-md-4 mx-2">
                                    <div class="single-features-item">  
                                        <h6>Current Plan</h6> 
                                        <p>{{ $data['subscription_plan']->name}}</p> 
                                   </div>
                                    </div>
                                </div> <!-- end col-->
                            </div> <!-- end row-->

                            <div class="row justify-content-center">
                                <div class="col-md-12 d-flex">
                                    <div class="col-md-4 mx-2">
                                        <div class="single-features-item">
                                        <h6>Re-Activation Plan</h6> 
                                        <p>{{ $data['GetReActivationPlan']->name}}</p> 
                                    </div>
                                    </div>
                                    <div class="col-md-4 mx-2">
                                        <div class="single-features-item">
                                        <h6>Current Plan Remain Days</h6> 
                                        <p>{{$data['remainDays']}}</p> 
                                    </div>
                                    </div>
                                    <div class="col-md-4 mx-2">
                                        <div class="single-features-item">
                                        <h6>CreditNote Amount</h6> 
                                        <p>{{ $data['creditnote_amount']}}</p> 
                                    </div>
                                    </div>

                                </div> <!-- end col-->
                            </div> <!-- end row-->
                        </div>
                    </div>
                </div>
            </div>
        </div>
        </section>
        <!-- JAVASCRIPT -->
        <script src="{{ asset('ra-assets/libs/jquery/jquery.min.js')"></script>
        <script src="{{ asset('ra-assets/libs/bootstrap/js/bootstrap.bundle.min.js')"></script>
        <script src="{{ asset('ra-assets/libs/metismenu/metisMenu.min.js')"></script>
        <script src="{{ asset('ra-assets/libs/simplebar/simplebar.min.js')"></script>
        <script src="{{ asset('ra-assets/libs/node-waves/waves.min.js')"></script>

        <!-- Plugins js-->
        <script src="{{ asset('ra-assets/libs/jquery-countdown/jquery.countdown.min.js')"></script>

        <!-- Countdown js -->
        <script src="{{ asset('ra-assets/js/pages/coming-soon.init.js')"></script>

        <script src="{{ asset('ra-assets/js/app.js')"></script>

            @endsection