@extends('reachassuree_web/layouts.main')
@section('title', $data['title'])
@section('content')
<style>
	.single-features-item:hover{
		-webkit-transform: translateY(0px) !important;
		transform: translateY(0px) !important;
	}
div#msgSubmit {
    font-size: 20px;
    font-weight: 400;
}
.bg-color{
	background-color: #f8f8fb;
}
.login-box{
	background-color: #fff;
	border-radius: 1.5rem;
	padding: 4rem;
    margin: 0 auto;
}
.row {
    justify-content: center;
}
.avatar-md {
    height: 4.5rem;
    width: 4.5rem;
}
.avatar-title {
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    background-color: #556ee6;
    color: #fff;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    font-weight: 500;
    height: 100%;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    width: 100%;
}
.default-btn,
.form-control{
	border-radius: 0.6rem;
}
i.text-primary{
	color: #023E8A !important;
}
	h2.heading {
		font-weight: 800;
		font-size: 20px;
		margin-bottom: 1.5rem;
		color: #264a9f;
		text-transform: uppercase;
	}
	h3.heading {
		font-weight: 700;
		font-size: 16px;
		margin-bottom: 8px;
		color: #264a9f;
		text-transform: uppercase;
	}

@media (max-width:991px) {
	.login-box{
		padding: 2.5rem 4rem;
	}
	.mb-5{
		margin-bottom: 2rem!important;
	}
}
@media (max-width:680px) {
	.login-box{
		padding: 2rem 2.5rem;
	}
	.mb-5{
		margin-bottom: 1.5rem!important;
	}
}
.card-body {
    -ms-flex: 1 1 auto;
    flex: 1 1 auto;
    min-height: 1px;
    padding: 1.25rem;
	background-color: #f5f5f5;
}
.CustomCard {
    background: -webkit-gradient(linear,left top,right bottom,from(#eff0f3),to(#e5e6eb));
    background: -webkit-linear-gradient(top left,#eff0f3,#e5e6eb);
    background: linear-gradient(to bottom right,#eff0f3,#e5e6eb);
    -webkit-box-shadow: 3px 3px 6px #bfc3cf, -3px -3px 6px #fff;
    box-shadow: 3px 3px 6px #bfc3cf, -3px -3px 6px #fff;
    border-radius: 10px;
    border: none!important;
}
.p-3 {
    padding: 1rem!important;
}
.mb-3, .my-3 {
    margin-bottom: 1rem!important;
}
.mt-3, .my-3 {
    margin-top: 1rem!important;
}
.mr-2, .mx-2 {
    margin-right: 0.5rem!important;
}
.border-0 {
    border: 0!important;
}
.card {
    position: relative;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: column;
    flex-direction: column;
    min-width: 0;
    word-wrap: break-word;
    background-color: #fff;
    background-clip: border-box;
    border: 1px solid rgba(0,0,0,.125);
    border-radius: 0.25rem;
}
.t_text, .t_text_small {
    font-size: 13px;
    line-height: 1.56;
    letter-spacing: normal;
    color: #071e54;
    font-weight: 400;
}
.t_anchor, .t_heading_primary a, .t_heading_secondary a, .t_heading a, .t_sub_heading_primary a, .t_sub_heading a, .t_text_small a, .t_text a {
    font-size: inherit;
    font-weight: 500;
    line-height: inherit;
    color: #7683a0;
    text-decoration: underline;
    cursor: pointer;
}
.bg-transparent {
    background-color: transparent!important;
}
.p-2 {
    padding: 0.5rem!important;
}
.p-lg-4 {
    padding: 1.5rem!important;
}
.text-center {
    text-align: center!important;
}
/* format for pricing table */
.pricing-table-header1 th {
        color: #ffffff;
        text-align: center;
        background: #023E8A !important;
    }

    .pricing-table-header2 tr {

        color: #ffffff;
        text-align: center;
        background: #1a62be !important;
    }

	.pricing-detail-title-1 {
    text-align: left;
    background-color: #023E8A;
    font-weight: bold;
    color: #ffffff;
    padding: 10px;
    border-bottom: 0.2px solid white;
    height: 67px;
    line-height: 50px;
}

    .pricing-detail-title-2 {
        text-align: left;
        background-color: #023E8A;
        font-weight: bold;
        color: #ffffff;
        padding: 10px;
    }
    tbody tr td:first-child{
       white-space: nowrap;
    }
    .single-pricing:hover {
        -webkit-transform: unset !important;
        transform: unset !important;
    }
    .pricing-more-button.default-btn{
        display: block;
        text-align: center;
        margin: 10px 0 10px auto;
        width: max-content;
        padding: 2px 9px;
        background-color: #023E8A;
        color: white;
        font-size: 13px;
        border-radius: 0.4rem;
    }
    .pricing-more-button.default-btn::after{
        background-color: white !important;

    }
    button#payNowButton:hover {
     
    color: #213438 !important;
    border-color: #F1F5FE;
    background-color: #F1F5FE !important;

    }
    button#payNowButton:hover::after{
        background-color: #F1F5FE !important;
        color: #213438;
    }
    button.coming-soon.default-btn {
        color: #023E8A;
        background-color: transparent;
    }
    button.coming-soon.default-btn:hover{
        color: white;
    }
    ul#myTab {
        justify-content: center;
        /* background-color: #023E8A; */
        color: white;
        display: flex;
        margin: 0 auto;
        padding: 1px;
        width: fit-content;
        margin-bottom: -36px;
        padding: 8px;
        border-radius: 200px;
        font-family: 'IBM Plex Mono',sans-serif;
        background-color: #2a2c2c;
    }
    .nav button.nav-link {
        background-color: #2a2c2c;
        border-radius: 1.5rem !important;
        color: white;
        font-size: 18px;
        font-weight: 600;
        padding: 6px 25px;
        border:none;
    }
    .nav button.nav-link.active {
        background-color: #b8cdda;
        color: #3a3c3c;
    }
    .nav-tabs {
        border-bottom: none;
    }
    .pricing-bg {
        display: flex;
        background-color: #2a2c2c;
        padding: 10px;
        border-radius: 5rem;
    }
    
    .intro {
		color:#ffffff;
	  }

.owl-carousel .owl-item img {
	border-radius: 0.4rem;
}


/*carousel_se_02 start*/
.carousel_se_02 {
	overflow: hidden;
	position: relative;
	padding-bottom: 80px;
}

.carousel_se_02 .product-grid3 {
  border: none;
  box-shadow: none;
}

.carousel_se_02 .owl-theme .owl-dots {
  text-align: center;
  margin-top: 18px;
}
.single-review-item.width1 {
    margin: auto;
	background-color: transparent !important;
	padding: 0;
}
.single-review-item.width1 ul{
	text-align: center;
	margin-bottom: 0;
	line-height: 20px;
}
.carousel_se_02 .owl-theme .owl-dots .owl-dot {
  display: inline-block;
}
.description{
        white-space: normal;
    word-wrap: break-word;
}

.carousel_se_02 .owl-theme .owl-dots .owl-dot span {
  width: 9px;
  height: 9px;
  margin: 4px;
  border: 2px solid #94a5b4;
  display: block;
  -webkit-backface-visibility: visible;
  -webkit-transition: opacity 200ms ease;
  -moz-transition: opacity 200ms ease;
  -ms-transition: opacity 200ms ease;
  -o-transition: opacity 200ms ease;
  transition: opacity 200ms ease;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}
.single-review-item-main.width{
	margin: auto !important;
}
.carousel_se_02 .owl-arrow .owl-nav {
  position: absolute;
  top: 0;
  right: 0;
  font-size: 1.8rem;
}

.carousel_se_02 .owl-arrow .owl-nav .owl-prev,
.carousel_se_02 .owl-arrow .owl-nav .owl-next {
  display: inline-block;
  transition: all 0.6s ease-in-out;
  color: #000000;
}
.latest-post-item.col-12{
	padding-left: 10px;
	padding-right: 10px;
}
.carousel_se_02 .row>*{
	padding-right: calc(var(--bs-gutter-x) * -10px);
    padding-left: calc(var(--bs-gutter-x) * -10px);
}
/* //carousel_se_02 end*/
.pricing-plan.col-12 {
    position: relative;
    padding-left: 10px;
    padding-right: 10px;
}
.latest-post-content-inner {
	position: absolute;
    bottom: 0;
	width: 100%;
    padding: 10px;
    color: #213438;
    border-radius: 4px;
    text-align: center;
    background-color: #ffffffd4;
}
h4.post-title {
    font-size: 18px;
}
.carousel_se_02 h6{
	text-align: center;
	color: #023E8A;
}
/* .carousel_se_02 h2{
    text-align: center;
    line-height: 45px;
    margin-bottom: 30px;
    font-size: 36px;
} */
.owl-carousel.owl-theme .owl-nav [class*="owl-"] {

    background-color: rgba(0, 0, 0, 0.601);
	color: white;
    position: absolute;
    top: 0;
    bottom: 0;
    margin: auto 0;
    font-size: 20px;
    height: 40px;
    width: 40px;
    line-height: 40px;
    text-align: center;
    z-index: 1;
    border-radius: 50px;
    -moz-border-radius: 50px;
    -webkit-border-radius: 50px;
    transition: all 0.4s ease 0s;
    -moz-transition: all 0.4s ease 0s;
    -webkit-transition: all 0.4s ease 0s;
    -ms-transition: all 0.4s ease 0s;
    -o-transition: all 0.4s ease 0s;
}

.owl-carousel.owl-theme .owl-nav .owl-prev:hover,
.owl-carousel.owl-theme .owl-nav .owl-next:hover {
    background-color: #023E8A;
}
.owl-carousel.owl-theme .owl-nav .owl-prev {
    left: -10px;
}
.owl-carousel.owl-theme .owl-nav .owl-next {
    right: -10px;
}
/*less than 575px*/
@media only screen and (max-width: 991px) {
	.carousel_se_02{
		padding-bottom: 30px;
	}
	.carousel_se_02 h2 {
		text-align: center;
		line-height: 38px;
		margin-bottom: 25px;
		font-size: 30px;
	}
}
.card {
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2); /* this adds the "card" effect */
  padding: 16px;
  text-align: center;
  background-color: #f1f1f1;
}
.single-features-item{
    margin-bottom: 15px;
    padding: 15px;
}

/* End pricing tables */
/* PAYnow button */


button#payNowButton {
    float: right;
    height: unset;
    line-height: unset;
    padding: unset;
}
.paynow {
    float: right;
    height: unset;
    line-height: unset;
    padding: unset;
}
/* end paynow button */
</style>
<div class="page-title-area">
	<div class="container">
		<div class="page-title-content">
			<h2>Re-Activation</h2>
			<ul>
				<li><a href="{{ route('home.page') }}">Home</a></li>
				<li class="active">Re-Activation
                    (Renew)</li>
			</ul>
		</div>
	</div>

	<img src="{{ asset('rassets/images/subscribe-shape-1.png') }}" alt="Image" class="shape shape-1" data-speed="0.04" data-revert="true">
	<img src="{{ asset('rassets/images/subscribe-shape-2.png') }}" alt="Image" class="shape shape-2" data-speed="0.04" data-revert="true">
</div>
<div class="bg-color">
	<div class="container p-5 text-center">
		<div class="row">
			<div class="col-md-5" style="margin-top:0;">
				<div class="login-box">
					<h2  class="heading">For Re-activation plan</h2>
					<div class="re-activation-form">
						<form id="re-activation">
							@csrf
							<div class="row">
								<div class="col-lg-7 col-sm-7">
									<div class="form-group mb-4">
										<input type="text" name="agent_code" id="agent_code" class="form-control" required data-error="Enter Agent Code" placeholder="Enter Agent Code">
										<div class="help-block with-errors"></div>
									</div>
								</div>
								<div class="col-lg-8 col-sm-8"><button type="submit" class="default-btn"><i class="ri-arrow-right-s-line"></i>Get Plan</button></div>
								<div class="col-lg-12 text-center"><div id="msgSubmit" class="h3 text-center hidden"></div></div>
							</div>
						</form>
					</div>
				</div>
			</div>
			<div class="col-md-7">
				<div class="col-md-12 d-flex" style="float:right;">
                    <div class="col-md-6">
                        <div class="single-features-item w-100" >
                            <h3 class="heading">Your Current Plan</h3>
                            <p id="plan" style="height:24px;">------------</p>
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="services-contents w-100" style="margin-left:10px;">
                            <div class="single-features-item">
                                <h3 class="heading">Active Date</h3>
                                <p id="active_date" style="height:24px;">------------</p>
                            </div>
                        </div>
                    </div>
				</div>
				<div class="col-md-12 d-flex" style="float:right;">
                    <div class="col-md-6">
                        <div class="single-features-item w-100" >
                            <h3 class="heading">Expiry Date</h3>
                            <p id="expiry_date" style="height:24px;">------------</p>
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="single-features-item w-100" style="margin-left:10px;">
                            <h3 class="heading">Used Days</h3>
                            <p id="usedays" style="height:24px;">------------</p>
                        </div>
                    </div>
				</div>
                <div class="col-md-12" style="float:right;">
                    <div class="col-md-12">
                        <div class="single-features-item w-100">
                            <h3 class="heading">Remain Days</h3>
                            <p id="remaindays" style="height:24px;">------------</p>
                        </div>
                    </div>
				</div>
			</div>
		</div>
	</div>
	</div>

	<section class="pricing-area pt-50 pb-50" id="pricing-table">
    <div class="container card">
        <div class="row">
            <div class="col-lg-12 col-sm-12 ">

                <div class="tableFixHead">
				<div class="row">
				<form id="formPayNowCheck">
							@csrf
                            <input type="hidden" id="agent_code1" name="agent_code1"  />
                            <input type="hidden" id="plan_type" name="plan_type"  />
                            <input type="hidden" id="plan_selection" name="plan_selection" value="Single"/>
                      
                         
            <div class="col-lg-12 col-sm-6 ">
                    <div class="pricing-detail-title-1">Reach Insurance Agent Portfolio (RIAP)
				<p class="paynow" id="paynow"> <button type="submit" class="default-btn" id="payNowButton"><i class="ri-arrow-right-s-line"></i>Pay Now</button></p>
           </div>

                    <div class="pricing-detail-title-2">Subscription Value Chart</div>
           </div>
         </div>
					
                    <table class="table table-striped w-100 table-bordered text-center "  id="table_plan">

                    </table>

                </div>
</form>

</section>

<script type="text/javascript">
	var ajaxReActivationURL="{{route('reactivation.process')}}";
	var ajaxReActivatPlan = '{{route("reactivation.plan")}}';
    var paymentURL = "";
	</script>
        <!-- Links of JS File -->
        <script src="{{ asset('rassets/js/jquery.min.js') }}"></script>
        <script src="{{ asset('rassets/js/bootstrap.bundle.min.js') }}"></script>
		<script src="{{ asset('rassets/js/meanmenu.min.js') }}"></script>
		<script src="{{ asset('rassets/js/owl.carousel.min.js') }}"></script>
		<script src="{{ asset('rassets/js/carousel-thumbs.min.js') }}"></script>
        <script src="{{ asset('rassets/js/aos.min.js') }}"></script>
        <script src="{{ asset('rassets/js/appear.min.js') }}"></script>
        <script src="{{ asset('rassets/js/odometer.min.js') }}"></script>
        <script src="{{ asset('rassets/js/magnific-popup.min.js') }}"></script>
		<script src="{{ asset('rassets/js/tween-max.min.js') }}"></script>
		<script src="{{ asset('rassets/js/form-validator.min.js') }}"></script>
		<script src="{{ asset('rassets/js/re-activation-script.js') }}"></script>
		<script src="{{ asset('rassets/js/ajaxchimp.min.js') }}"></script>
		<script src="{{ asset('rassets/js/custom.js') }}"></script>
		<script>



$("#table_plan").delegate('input[type="checkbox"]', "change", function(){
    $('input[type="checkbox"]').not(this).prop('checked', false);
     $('#plan_type').val($(this).val());

});


$("#table_plan").delegate('.checkBoxplan', "click", function(){
    if($(this).is(":checked")) {
  
        $(".paynow").show();
    } else {
        $(".paynow").hide();
    }
});







$("input").keyup(function(){
    if ($('input:text').val().length == 0) {
        $("#plan").text('----');
        $("#active_date").text('-----');
        $("#expiry_date").text('-----');
        $("#pricing-table").hide();
}

});
$( document ).ready(function() {
	$(".paynow").hide();
});

$("#tab_login").addClass("hightlight-tab");
				
// A $( document ).ready() block.

$("#payNowButton").click(function() {
     $("#payNowButton").prop("disabled", true);
     $("#payNowButton").html(
     '<i class="ri-arrow-right-s-line"></i> Processing...'
      );
        $.ajax({
            type: 'POST',
            data: $("#formPayNowCheck").serialize(),
            url: ajaxReActivatPlan,
            success: function(response) {
               
                
                $("#payNowButton").prop("disabled", false);
                $("#payNowButton").html(
                '<i class="ri-arrow-right-s-line"></i>   Pay Now'
                );
                paymentURL= response['payment_url'];
                window.location.href = paymentURL + "?plan_type=" +response['plan_type']+"&agent_code1=" +response['agent_code1'];
                
            }
        });
    // window.location.href = paymentURL;
    });
 

				</script>


</section>

@endsection