@extends('main.layouts.app')
@section('content')

<style>
    h6.sip-head {
        font-size: 12px;
        /* color: #283369; */
        color: #1a1d22;
    }

    .bg_purchased {
        background-color: bisque;
    }

    .card_bg {
        transition: all 0.3s;
        box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.2);
    }

    .card_bg:hover {
        box-shadow: 0 22px 43px rgba(0, 0, 0, 0.15);
    }

    .card-sip-body {
        text-align: center;
    }

    .buybtn {
        border-radius: 20px;
    }

    .header_top {
        border: none;
    }

    .card_bg {
        background-image: url('/goldcoin/img/card_slip.png');
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center;
        background: linear-gradient(to right, #cae5f0, #e2e6f3, #a7c7de);
        background-blend-mode: overlay;
        border-radius: 20px;
    }

    /* .btn-primary, .btn-primary.disabled {
    box-shadow: 0 2px 6px #DAA520;
    background-color: #DAA520;
    border-color: #DAA520;
}

.main-sidebar .sidebar-menu li.active a {
    color: #DAA520;
    background-image: linear-gradient(to right, #ffdfb9, #fffbe6);
}
.navbar-bg {

    background-image: linear-gradient(to bottom right, #DAA520, #f3db47);
} */


    .br-20 {
        border-radius: 20px;
    }

    .align-middle {
        vertical-align: middle;
    }

    div.clock {
        font-size: 26px;
        line-height: 28px;
        color: #1f365c;
        padding-right: 0px;
        margin-bottom: 0;
        font-weight: bold;
    }

    .autopull-header h5 {
        font-size: 16px;
        line-height: 28px;
        color: #1f365c;
        padding-right: 0px;
        margin-bottom: 0;
    }

    .autopull-header h3 {
        font-size: 26px;
        line-height: 28px;
        color: #1f365c;
        padding-right: 0px;
        margin-bottom: 0;
        font-weight: bold;
    }



    .card .card-header {
        width: 100%;
        min-height: 0px;
    }


    .card .card-header h4 {
        font-size: 16px;
        line-height: 28px;
        color: #1f365c;
        padding-right: 0px;
        margin-bottom: 0;
    }

    .bg_blue_color {
        border-radius: 20px !important;
        background-color: #0E194D !important;
    }

    .depo {
        font-size: 14px;
    }

    .dash-text {
        text-align: center;
    }

    @media (max-width:767px) {
        .autopull-header h3 {
            font-size: 13px;
            line-height: 14px;
            color: #1f365c;
        }

        .depo {
            font-size: 15px;
        }

        .autopull-header h5 {
            font-size: 13px;
            line-height: 15px;
            color: #1f365c;
            padding-right: 0px;
            margin-bottom: 0;
        }
    }
</style>


<div class="main-content">
    <section class="section">

        {{-- <div class="section-header">
            <h1><i class="fa fa-fw fa-users"></i> SIP List </h1>
        </div> --}}

        <input type="hidden" name="authtoken" value={{$token}}>
        <input type="hidden" id="selectedPlanId" value="">
        <input type="hidden" id="selectedAmount" value="">


        <div class="section-header d-block bg_blue_color">
            <div class="row">
                <div class="col-12">
                    <div class="d-flex align-items-center justify-content-between">
                        <div>
                            {{-- <div class="dash-cover pr-3">
                                    <img src="img/wallet_circle.png" alt="wallet-circle" class="dash-img">
                                </div> --}}
                            <div class="dash-text">
                                <h5 class="text-white depo mb-0">
                                    <a href="/"><img src="img/homepage.png" alt="image"> </a>
                                    Plan List
                                </h5>
                            </div>
                        </div>
                        <div>
                            <a href="/sip-transaction-log">
                                <img src="img/transaction_logo.png" alt="">
                            </a>
                            {{-- <button class="btn btn-primary p-0" title="Amount Withdrawal" data-toggle="modal" data-target="#amountWithdrawal" style="background: #0e194d;border: none;">
                                <img src="img/download_btn.png" alt="download">
                            </button> --}}

                        </div>

                    </div>

                </div>

            </div>

        </div>

        <div class="row">
            @if ($goldplans->count() == 0)
            <div class="col-lg-12 col-md-12 col-sm-12 col-12">
                <div class="card card_bg ">
                    <div class="card-wrap">
                        <div class="card-body card-sip-body">
                            <div class="row">
                                <div class="col-12">
                                    <div>
                                        <h5>No Record Found</h5>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            @else
            @foreach ($goldplans as $plans)
            <div class="col-lg-4 col-md-6 col-sm-6 col-12 p-1">

                @if($plans->is_purchased == true)
                <div class="card card_bg bg_purchased h-100">
                    @else
                    <div class="card card_bg h-100">
                        @endif
                        <div class="card-wrap">
                            <div class="card-header justify-content-center header_top">
                                <h4>{{ $plans->name }}</h4>
                            </div>
                            <div class="card-body card-sip-body ">
                                <div class="row">
                                    <div class="col-6 mb-2">
                                        <div>
                                            <i class="fa fa-inr"></i>{{ $plans->sip_per_month }}
                                        </div>
                                        <div>
                                            <h6 class="sip-head">Monthly Premium</h6>
                                        </div>
                                    </div>

                                    <div class="col-6 mb-2">
                                        <div>
                                            <i class="fa fa-inr"></i>{{ $plans->price ?? '' }}
                                        </div>
                                        <div>
                                            <h6 class="sip-head">Total Premium</h6>
                                        </div>
                                    </div>

                                </div>

                                <div class="row">

                                    <div class="col-6 mb-2">
                                        <div>
                                            {{ $plans->no_months }}
                                        </div>
                                        <div>
                                            <h6 class="sip-head">No of Months</h6>
                                        </div>
                                    </div>

                                    <div class="col-6 mb-2">
                                        <div>
                                            <i class="fa fa-inr"></i>{{ $plans->maturity }}
                                        </div>
                                        <div>
                                            <h6 class="sip-head">Maturity</h6>
                                        </div>
                                    </div>
                                </div>

                                <div class="row">

                                    <div class="col-12 mb-2">
                                        <div class="round-percentage">
                                            {{ round(($plans->maturity-$plans->price)/$plans->price*100,2) }}%
                                        </div>
                                        <div>
                                            <h6 class="sip-head">ROI Percentage</h6>
                                        </div>
                                    </div>
                                </div>

                            </div>
                            <div class="card-footer text-center pt-0 pb-0">
                            @if($plans->is_purchased == 0)
                                <input type="hidden" id="plane_new_id" value="{{ $plans->id }}">
                                <a class="btn btn-primary buybtn" href="/buy-sip?pland-id={{ $plans->id }}" >Buy Plan</a>
                            @elseif($plans->is_purchased == 1)
                                <div>
                                    <a href="/sip-schedule">View Plans</a>
                                </div>
                                <a class="btn btn-success buybtn" href="#" >Purchased</a>
                            @else
                                <a href="/sip-schedule" class="btn btn-warning  disabled buybtn">Requested</a>
                            @endif

                            </div>
                        </div>
                    </div>
                </div>
                @endforeach
                @endif
            </div>
            <div class="clearfix"></div>
    </section>
</div>

<div class="modal fade" id="myModalselect" role="dialog" aria-labelledby="...">
    <div class="modal-dialog modal-dialog-centered" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span></button>
            </div>
            <div class="modal-body text-center">
                <div>
                    <h5 class="contact-hg">Select Your Payment Method</h5>
                </div>
                <div class="mt-3">
                    <select name="selectmethod" id="selectmethod" class="form-control">
                        <option value="">Select Payment Method</option>
                        <option value="withdrawalwallet">Withdrawal Wallet</option>
                        <option value="payrequest">Pay Request</option>
                        <option value="upi">UPI</option>
                    </select>
                    <span class="error_message" id="selectmethoderror"></span>
                </div>
            </div>
            <div class="modal-footer justify-content-center">
                <button type="button" id="pay_submit" class="btn btn-primary">Submit</button>
            </div>
        </div>
    </div>
</div>

<div class="modal fade" id="myModalcheckout" role="dialog" aria-labelledby="...">
    <div class="modal-dialog modal-dialog-centered" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span></button>
            </div>
            <div class="modal-body text-center">
                <div>
                    <h5 class="contact-hg">Contact your Crown member</h5>
                </div>
                <div>
                    Request Pay to this Number Before clicking the Pay Request <span class="color-text">+91 95947 63911</span>
                </div>
                <div class="mt-2">
                    <a href="tel:+919594763911" class="btn-contact"><i class="fa fa-phone"></i>Contact</a>
                    <a href="https://wa.me/9594763911?text=Hello%20Sir" class="btn-contact"><i class="fab fa-whatsapp" aria-hidden="true"></i>whatsaap</a>
                </div>
            </div>
            <div class="modal-footer justify-content-center">
                <button type="button" id="pay_now" class="btn btn-primary">Pay Request</button>
            </div>
        </div>
    </div>
</div>

<script>
    $(document).ready(function() {
        // Modify the Buy Plan button click handler
        $('a[href^="/buy-sip"]').click(function(e) {
            e.preventDefault();
            const planId = $(this).attr('href').split('=')[1];
          
            // Get monthly premium value instead of maturity
            const amount = $(this).closest('.card').find('.col-6:first-child .fa-inr').parent().text().trim();
            $('#selectedPlanId').val(planId);
            $('#selectedAmount').val(amount);
            $('#myModalselect').modal('show');

            $('#pay_submit').click(function() {
                const selectmethod = $('#selectmethod').val();
                if (selectmethod == '') {
                    $('#selectmethoderror').html('(Please Choose the Method)');
                    return false;
                }


                let name = "{{ Auth::user()->name ?? '' }}";
                let email = "{{ Auth::user()->email ?? '' }}";
                let address = "{{ Auth::user()->user_personal_detail->address ?? '' }}";
                let city = "{{ Auth::user()->user_personal_detail->city ?? '' }}";
                let province = "{{ Auth::user()->user_personal_detail->state ?? '' }}";
                let postalcode = "{{ Auth::user()->user_personal_detail->pincode ?? '' }}";
                let phone = "{{ Auth::user()->user_personal_detail->phone ?? '' }}";
                let authToken = $('input[name="authtoken"]').val();  // Get token value
                if (!name || !email || !address || !city || !province || !postalcode || !phone) {
                    // $('#profileModal').modal('show'); // Show modal popup
                    $('#myModalselect').modal('hide');
                    alert('Complete your profile')
                    return false;
                }

                const paymentData = {
                    plan_id: planId,
                    billing_subtotal: amount,
                    name: name,
                    email: email,
                    address: address,
                    city: city,
                    province: province,
                    postalcode: postalcode,
                    phone: phone,
                    selectmethod: selectmethod
                };

                if (selectmethod === 'withdrawalwallet') {
                    $.ajax({
                        type: 'POST',
                        url: '/api/checkout-sip-plan',
                        data: JSON.stringify(paymentData),
                        contentType: "application/json",
                        headers: {
                            "Authorization": "Bearer " + authToken 
                        },
                        success: function(response) {
                            if (!response.success) {
                                $('#selectmethoderror').html('(Insufficient wallet balance)');
                            } else {
                                window.location.href = 'thankyou?flag=sip';
                            }
                        }
                    });
                } else if (selectmethod === 'upi') {
                    
                    console.log(authToken)
                    $.ajax({
                        type: 'POST',
                        url: '/api/checkout-sip-plan',
                        data: JSON.stringify(paymentData),
                        contentType: "application/json",
                        headers: {
                            "Authorization": "Bearer " + authToken  
                        // 'Authorization': authToken,
                        },
                        success: function(response) {
                            console.warn(response, 'response');
                            if (response.success && response.data && response.data.payment_link) {
                                // Redirect to the payment link
                                window.location.href = response.data.payment_link;
                            } else {
                                $('#selectmethoderror').html('(Error processing UPI payment)');
                            }
                        },
                        error: function(xhr, status, error) {
                            console.log('Status:', status);
                            console.log('Response:', xhr.responseText);
                            $('#selectmethoderror').html('(Server error)');
                        }
                    });
                } else {
                    
                    $('#myModalselect').modal('hide');
                    $('#myModalcheckout').modal('show');
                }
            });
        });

        $('#pay_now').click(function() {
            let planId = $('#selectedPlanId').val();
            let amount = $('#selectedAmount').val();
            let name = "{{ Auth::user()->name ?? '' }}";
                let email = "{{ Auth::user()->email ?? '' }}";
                let address = "{{ Auth::user()->user_personal_detail->address ?? '' }}";
                let city = "{{ Auth::user()->user_personal_detail->city ?? '' }}";
                let province = "{{ Auth::user()->user_personal_detail->state ?? '' }}";
                let postalcode = "{{ Auth::user()->user_personal_detail->pincode ?? '' }}";
                let phone = "{{ Auth::user()->user_personal_detail->phone ?? '' }}";
                let authToken = $('input[name="authtoken"]').val();  // Get token value
                if (!name || !email || !address || !city || !province || !postalcode || !phone) {
                    // $('#profileModal').modal('show'); // Show modal popup
                    $('#myModalselect').modal('hide');
                    alert('Complete your profile')
                    return false;
                }

            const paymentData = {
                    plan_id: planId,
                    billing_subtotal: amount,
                    name: name,
                    email: email,
                    address: address,
                    city: city,
                    province: province,
                    postalcode: postalcode,
                    phone: phone,
                    selectmethod: 'payrequest'
                };

            // Submit payment request
            $.ajax({
                type: 'POST',
                url: '/api/checkout-sip-plan',
                data: JSON.stringify(paymentData),
                contentType: "application/json",
                headers: {
                    "Authorization": "Bearer " + authToken 
                },
                success: function(response) {
                    window.location.href = 'thankyou?flag=sip';
                }
            });
        });
    });
</script>

@endsection