@extends('reachassuree_agent/layouts.main')
@section('title', $data['title'])
@section('content')
<style>
    td.disable,
    .table-striped>tbody>tr td.disable{
        --bs-table-accent-bg: #b2c8e5 !important;
    }
    .pricing-table-header1 th.disabled {
        background: #023e8acc !important;
    }
    p#currentContent {
        font-size: 14px;
        font-weight: 400;
    }
    .table-bordered>:not(caption)>*>*{
        font-weight: 500;
    }
    .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;
        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;
        }
    }
    .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-radius: 0.6rem;
    }
    .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;
    }
    .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 {
        display: flex;
        padding: 10px;
        height: 58.5px;
        color: #ffffff;
        text-align: left;
        font-weight: bold;
        align-items: center;
        border: 1px solid #eff2f7;
        background-color: #023E8A;
        justify-content: space-between;
        border-radius: 0.8rem 0.8rem 0 0;
        border-bottom: 0.2px solid white;
    }
    .pricing-detail-title-2 {
        padding: 10px;
        color: #ffffff;
        text-align: left;
        font-weight: bold;
        background-color: #023E8A;
        border: 1px solid #eff2f7;
    }
    tbody tr td:first-child{
        white-space: nowrap;
        font-weight: 500;
        font-size: 14px;
        text-align: center;
        vertical-align: middle;
    }
    .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;
    }
    i.bx.bxs-send {
        line-height: 19px;
        margin: 0 5px 0 0;
    }
    button#payNowButton:hover {
        border-color: #F1F5FE;
        color: #ffffff!important;
        background-color: #213438 !important;
        box-shadow: 0px 0px 6px #ffffff59 !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;
        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 {
        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;
        backface-visibility: visible;
        -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);
    }
    .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;
    }
    .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;
    }
    @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;
        }
    }
    button#payNowButton {
        border: 0;
        color: #fff;
        font-weight: 600;
        padding: 8px 13px;
        border-radius: 0.6rem;
        background-color: var(--bs-blue);
        transition: 0.2s all ease-in-out;
    }
    tbody tr:last-child{
        border-radius: 0 0 0.6rem 0.6rem;
    }

    .agentDetails .row>*{
        width: unset !important;
    }
    .single-features-item p {
        font-size: 14px;
        font-weight: 500;
        margin-bottom: 0 !important;
    }
    .agentDetails .single-features-item{
        padding: 0 30px;
        border-right: 1px solid #264a9f94;
    }
    .agentDetails .single-features-item:last-child{
        border-right: unset !important;
    }
    .form-check-input{
        margin-top: 0.15em !important;
    }
    i.bx.bx-right-arrow-circle.bx-fade-right{
        margin: 0 25px 0 10px;
        font-size: 18px;
        line-height: 20px;
    }
    a.btn.btn-primary.p-2.waves-effect.waves-light.btn-sm {
        display: inline-flex;
        width: auto;
    }
    a.btn.btn-primary span{
        margin-right: 10px;
    }
    label{
        margin-bottom: 0 !important;
        margin-top: 0 !important;
    }

    #responsiveContent{
        display: none;
    }
    @media(max-width:1440px){
        p#currentContent{
            font-size: 13px;
            font-weight: 400;
        }
    }
    @media(max-width:1199px){
        .agentDetails .d-flex .single-features-item {
            flex-basis: 100%;
            max-width: 100%;
            margin-bottom: 15px;
            border: none;
        }

        .agentDetails .d-flex .single-features-item p{
            margin-top: -10px;
        }
        #responsiveContent{
            display: block;
            font-size: 12px;
            font-weight: 400;
            text-align: center;
        }
        p#currentContent{
            font-size: 12px;
            font-weight: 400;
        }
        #currentContent{
            display: none;
        }
    }
    
    @media (max-width: 745px) {
        .table-container {
            display: flex;
            overflow-x: auto;
        }
    }

    b, strong {
        font-size: 14px;
        font-weight: 600;
    }

    strong.impt-word {
        background-color: #0c63e4d9;
        color: white;
        padding: 0 11px;
        border-radius: 0.4rem;
    }

    strong.impt-word.light {
        background-color: #307ae8d9;
    }

    .blockquote>:last-child {
        margin-bottom: 0;
        line-height: 30px;
    }
</style>

<div class="page-content">
    <div class="container-fluid">
        @include('../reachassuree_agent/master/comman/header')

        @include('../reachassuree_agent/upgrade/comman/current_plan')

        @if(count($data['future_plans']) > 0)
            @include('../reachassuree_agent/upgrade/comman/future_plan')
        @endif


        @if (isSendRequestForSurrender() == 1)
            <div class="card">
                <div class="card-body" style="margin: 4rem;">
                    <div class="row justify-content-center mb-5">
                        <div class="col-sm-4">
                            <div class="maintenance-img">
                                <img src="{{ asset('assets/images/no-document-illustration.png') }}" alt="" class="img-fluid mx-auto d-block">
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-8 text-center">
                            <p class="profile_complate_content" style="font-size: 18px; color: #cf0000; text-align: center;font-weight: 500; margin-bottom: 35px;">After confirming your surrender plan request from our side, feel free to utilize this tab for further actions. If you have any questions regarding the surrender plan or encounter any other issues, please don't hesitate to contact our team.</p>
                        </div>
                    </div>
                </div>
            </div>
        @else
            
            @if ($data['profile_complate'] == 1)

                <div class="row">
                    <div class="card col-10">
                        <div class="card-body">
                            <section class="pricing-area pt-50 pb-50" id="pricing-table">
                                <div class="row">
                                    <div class="col-lg-12 col-sm-12 ">
                                        @if (count($data['future_plans']) > 0)

                                            <blockquote class="blockquote font-size-16 mb-0">
                                                <p class="fw-bold">You are currently unable to renew your plan as it has already been renewed. Please wait until the current plan expires before attempting to renew again.</p>
                                            </blockquote>

                                        @else

                                            @if($data['current_plan_details']['current_plan_periods']['before_grace_period'] > date('Y-m-d H:i:s'))

                                                <blockquote class="blockquote font-size-16 mb-0">
                                                    <p class="fw-bold">Kindly note that you can renew your plan only within <strong class="impt-word light">{{ $data['current_plan_details']['current_plan_periods']['grace_period_days'] }} days before</strong> your current plan expires. <br>Please be aware that renewal is not possible before <strong class="impt-word">{{ $data['current_plan_details']['current_plan_periods']['before_grace_period_dmy'] }}</strong> this timeframe.</p>
                                                </blockquote>

                                            @else

                                                <form id="formPayNowCheck">
                                                @csrf
                                                    <div class="table-container">
                                                        <div class="tableFixHead">
                                                            <input type="hidden" id="agent_code1" name="agent_code1" value="{{ Auth::user()->agent_code }}"/>
                                                            <input type="hidden" id="plan_type" name="plan_type" value="{{ $data['plan_type'] }}" />
                                                            <input type="hidden" id="plan_selection" name="plan_selection" value=""/>
                                                            <table class="table mb-0">
                                                                <tbody>

                                                                    <p class="font-size-16 text-center">Right Now you are going to renew your current plan(<strong>{{ $data['plan'] }} - {{ $data['plan_duration'] }}</strong>) these plan Start Date <strong>{{ $data['renew_amount'][0]['from_date'] }}</strong> and Expiry Date <strong>{{ $data['renew_amount'][0]['end_date'] }}</strong></p>

                                                                    @foreach ($data['renew_amount'] as $key => $value)
                                                                        <tr class="spacer">
                                                                            <input type="hidden" id="plan_price_{{ $key + 1 }}" value="{{ $value['plan_price'] }}">
                                                                            <td class="font-size-14 fw-500 border-0 d-flex justify-content-center align-items-center">
                                                                                <div class="ddd me-3" style="padding: 8px 0;">
                                                                                    <input type="checkbox" class="checkbox plan-checkbox mx-2" name="plan_ids[]" id="plan_{{ $key + 1 }}" value="plan_{{ $key + 1 }}" autocomplete="off" style="vertical-align: middle;"><i class="bx bx-rupee"></i>{{ $value['plan_price'] }} 
                                                                                </div>
                                                                                <button type="submit" class="default-btn paynow" id="payNowButton"><i class="bx bxs-send"></i>Pay Now</button>
                                                                            </td> 
                                                                        </tr>
                                                                    @endforeach
                                                                </tbody>
                                                            </table>
                                                        </div>
                                                    </div>
                                                </form>

                                            @endif


                                        @endif
                                    </div>
                                </div>
                            </section>
                        </div>
                    </div>
                </div>

            @else
                <div class="card">
                    <div class="card-body" style="margin: 4rem;">
                        <div class="row justify-content-center mb-5">
                            <div class="col-sm-4">
                                <div class="maintenance-img">
                                    <img src="{{ asset('assets/images/no-document-illustration.png') }}" alt="" class="img-fluid mx-auto d-block">
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-8 text-center">
                                <p class="profile_complate_content" style="font-size: 18px; color: #cf0000; text-align: center;font-weight: 500; margin-bottom: 35px;">Dear valued agent, we kindly request you to upload your KYC documents, including your document numbers, and your agent profile details as soon as possible. This is because KYC documents are required for upgrading and reactivating your plan. Additionally, please ensure to verify your mobile number for further assistance.</p>
                                <a href="{{ route('profile', ['type'=>'renew']) }}" class="btn btn-primary p-2 waves-effect waves-light btn-sm" style="font-size: 14px;"><i class="bx bx-right-arrow-circle bx-fade-right"></i><span>Go to Agent Profile Page</span></a>
                            </div>
                        </div>
                    </div>
                </div>
            @endif

        @endif

    </div>
</div>

@endsection

@section('custom-scripts')
<script src="{{ asset('assets/libs/sweetalert2/sweetalert2.min.js') }}"></script>
<script src="{{ asset('assets/js/pages/sweet-alerts.init.js') }}"></script>

<script type="text/javascript">

    var planUpgrade = "{{ route('upgrade.plan')}}"; 
    var paymentURL = "";

    $(document).ready(function() {

        $(".paynow").hide();

        $("#payNowButton").click(function() {
            var planSelection = $('#plan_selection').val();

            $("#payNowButton").prop("disabled", true);
            $("#payNowButton").html('<i class="bx bxs-send"></i> Processing...');
    
            $.ajax({
                type: 'POST',
                data: $("#formPayNowCheck").serialize(),
                url: planUpgrade,
                success: function(response) {
                    var params = new window.URLSearchParams(window.location.search);
                    $("#payNowButton").prop("disabled", false);
                    $("#payNowButton").html('<i class="bx bxs-send"></i> Pay Now');
                    paymentURL= response['payment_url'];
                    window.location.href = paymentURL + "?plan_type=" +response['plan_type']+"&agent_code1=" +response['agent_code1']+"&type=" +params.get('type')+"&plan_selection=" +planSelection;
                }
            });
        });
  
        $('#plan_2, #plan_3').attr('disabled', 'disabled');

        $('input[name="plan_ids[]"]').change(function(event) {
            var selectedValue = parseInt($(event.target).val());

            logSelectedPlans();
            updateCheckboxStatus();
        });
    });

    function logSelectedPlans() {
        var selectedPlans = $('input[name="plan_ids[]"]:checked').length;
        $('#plan_selection').val('');
        if (selectedPlans > 1) {
            $('#plan_selection').val('MLT-'+ selectedPlans);
        } else if (selectedPlans === 1) {
            $('#plan_selection').val('MLT-'+ selectedPlans);
        } else {
            $('#plan_selection').val('');
        }
    }

    
    function updateCheckboxStatus() {

        var checkedIds = [];
        $('.plan-checkbox:checked').each(function () {
            checkedIds.push($(this).attr('id'));
        });

        var plansWithKeys = {};
        $.each(checkedIds, function(index, plan) {
            plansWithKeys[index + 1] = plan;
        });

        var plan_amount = 0;
        $.each(plansWithKeys, function(key, plan) {

            var singleInputPlanAmt = $('#plan_price_' + key).attr('value');
            singleInputPlanAmt = parseFloat(singleInputPlanAmt.replace(/,/g, ''));

            if (!isNaN(singleInputPlanAmt)) {
                plan_amount += singleInputPlanAmt;
            }
        });

        $('.paynow').toggle(checkedIds.length > 0);
    }

</script>
@endsection