@extends('main.layouts.app')
@section('content')
    <style>



h5.fre-fonts {
    font-size: 17px;
    padding: 10px;
    margin-bottom: 0;
}

.ans-body {
    font-size: 14px;
    line-height: 1.5;
    padding: 5px 15px;
}
button.btn.btn-link{
    font-size:14px;
}
button.btn.btn-link:hover {
  text-decoration: none;
}

.payment-strip {
    background: linear-gradient(to right, #5c4326, #e5b349);
    display: flex;
    justify-content: space-between;
    border-radius: 8px;
    overflow: hidden;
}

.price-label {
    font-weight: 500;
    font-size: 16px;
}

.pay-now-button {
    background-color: #f2c94c;
    color: #000;
    font-weight: 600;
    padding: 10px 20px;
    text-align: center;
    text-decoration: none;
    border-left: 1px solid rgba(0,0,0,0.1);
    transition: background 0.3s ease;
}

.pay-now-button:hover {
    background-color: #ffd700;
    color: #000;
}


.br-radius{
    border-radius: 10px;
}
.header-row {
    background-color: #343a40;
    font-weight: bold;
    color: #fff;
    border-radius: 5px;
}


.featured_block {
    background: #343a40;
    color: #fff;
    padding: 0 10px;
    border-radius: 5px;
    max-height: 250px;
    overflow-y: scroll;
}

.feature-row {
    display: flex;
    padding: 12px 10px;
    border-bottom: 1px solid #ddd;
    align-items: center;
}



.feature-title {
    width: 60%;
    font-size: 14px;
}

.feature-col {
    width: 20%;
    font-size: 14px;
}



.premium-card {
    background: linear-gradient(135deg, #0f1a42, #465983);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1);
    border-radius: 20px;
}

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

.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;
        }

        .paycard {
    position: fixed;
    width: calc(100% - 60px);
    bottom: 0;
    left: 50%;
    transform: translate(-50%);
}
    }

h3.testinomial-header.mb-3 {
    margin-bottom: 0;
    font-weight: 700;
    display: inline-block;
    font-size: 24px;
    margin-top: 3px;
    color: #34395e;
}


        .picture-container {
            position: relative;
            cursor: pointer;
            text-align: center;
        }

        .picture {
            width: 106px;
            height: 106px;
            background-color: #999999;
            border: 4px solid #CCCCCC;
            color: #FFFFFF;
            border-radius: 50%;
            margin: 5px auto;
            overflow: hidden;
            transition: all 0.2s;
            -webkit-transition: all 0.2s;
        }

        .picture-src {
            width: 100%;
            height: 100%;
        }

        .picture:hover {
            border-color: #4caf50;
        }

        .picture input[type="file"] {
            cursor: pointer;
            display: block;
            height: 100%;
            left: 0;
            opacity: 0 !important;
            position: absolute;
            top: 0;
            width: 100%;
        }
    </style>
    <!-- <div class="main-content">
        <section class="section">
            <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-text">
                                    <h5 class="text-white depo mb-0">
                                        <a href="/"><img src="img/homepage.png" alt="image"> </a> 
                                        Profile
                                    </h5>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            
            <div>

            </div>

  
        </section>
    </div> -->
    <input type="hidden" name="authtoken" value={{$token}}>

    <div class="main-content">
    <section class="section">
        <!-- Header -->
        <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 class="dash-text">
                            <h5 class="text-white depo mb-0">
                                <a href="/"><img src="img/homepage.png" alt="image"> </a> 
                                {{ Auth::user()->name ?? '' }}
                            </h5>
                        </div>
                        <div class="order-history">
                            <a href="#" class="text-white">Order History</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Balance Card -->
        <div class="my-4">
            <div class="balance-card p-3 br-radius text-white" style="background: linear-gradient(to right, #9c6b16, #000);">
                <div class="d-flex justify-content-between align-items-center">
                    <div>
                        <small>Active Balance</small>
                        <h3>₹ 9999.00</h3>
                        @if (Auth::user()->is_member == 1)   
                        <h6 class="small"><i class="fa fa-calendar me-1"></i> Start: {{auth()->user()->membership_start_date}}</h6>
                        <h6 class="small"><i class="fa fa-calendar me-1"></i> End: {{auth()->user()->membership_end_date}}</h6>
                        @endif
                    </div>
                </div>
            </div>

            <!-- Activate with Premium Code -->
            <div class="mt-3 ">
                <a href="#" class="btn btn-dark w-100 br-radius">Activate with Premium Code</a>
            </div>

            <!-- Feature Table -->
            <div class="mt-4">
                <!-- Table Header -->
                <div class="feature-row header-row mb-3">
                    <div class="feature-title">Features</div>
                    <div class="feature-col text-center">Free</div>
                    <div class="feature-col text-center">Premium</div>
                </div>

                <div class="featured_block">

                                <!-- Feature Rows -->
              <div class="feature-row">
                    <div class="feature-title">1. Daily Autopull Income</div>
                    <div class="feature-col text-center text-danger">✗</div>
                    <div class="feature-col text-center text-success">✓</div>
                </div>

                <div class="feature-row">
                    <div class="feature-title">2. Gold Investment Returns – up to 24%</div>
                    <div class="feature-col text-center text-danger">✗</div>
                    <div class="feature-col text-center text-success">✓</div>
                </div>

                <div class="feature-row">
                    <div class="feature-title">3. Network-Based Earnings (Team Activity Bonus)</div>
                    <div class="feature-col text-center text-danger">✗</div>
                    <div class="feature-col text-center text-success">✓</div>
                </div>

                <div class="feature-row">
                    <div class="feature-title">4. Direct Referral Commission – up to 50%</div>
                    <div class="feature-col text-center text-success">✓</div>
                    <div class="feature-col text-center text-muted">(Limited)</div>
                </div>

                <div class="feature-row">
                    <div class="feature-title">5. Indirect Referral Commission</div>
                    <div class="feature-col text-center text-danger">✗</div>
                    <div class="feature-col text-center text-success">✓</div>
                </div>

                <div class="feature-row">
                    <div class="feature-title">6. 1 EMI Free After 12 Months (SIP Plan)</div>
                    <div class="feature-col text-center text-danger">✗</div>
                    <div class="feature-col text-center text-success">✓</div>
                </div>

                </div>



                <div class="faq-section mt-2">
    <h5 class="text-white bg-dark fre-fonts">Frequently Asked Questions – My Wealth Free</h5>

    <div class="accordion" id="accordionExample">

<!-- FAQ 1 -->
<div class="card bg-dark text-white mb-0">
    <div class="collapsed" id="heading1">
        <h2 class="mb-0">
            <button class="btn btn-link text-white bg-dark d-flex justify-content-between align-items-center text-left w-100" data-toggle="collapse" data-target="#collapse1" aria-expanded="false" aria-controls="collapse1">
                <span>What is My Wealth Free, and how can I earn from it?</span>
                <i class="fa fa-angle-down"></i>
            </button>
        </h2>
    </div>
    <div id="collapse1" class="collapse" aria-labelledby="heading1" data-parent="#accordionExample">
        <div class="ans-body p-3">
            My Wealth Free is a rewards platform where users earn through referrals, games, shopping, investments, and more. Earn active income via actions like referrals and gameplay, or passive income through features like Autopull and investments.
        </div>
    </div>
</div>

<!-- FAQ 2 -->
<div class="card bg-dark text-white mb-0">
    <div class="collapsed" id="heading2">
        <h2 class="mb-0">
            <button class="btn btn-link text-white bg-dark d-flex justify-content-between align-items-center text-left w-100" data-toggle="collapse" data-target="#collapse2" aria-expanded="false" aria-controls="collapse2">
                <span>What's the difference between a Free and Membership account?</span>
                <i class="fa fa-angle-down"></i>
            </button>
        </h2>
    </div>
    <div id="collapse2" class="collapse" aria-labelledby="heading2" data-parent="#accordionExample">
        <div class="ans-body p-3">
            A Free account offers limited access to features like gameplay and basic rewards. A Membership account unlocks daily Autopull income, higher referral commissions, network earnings, investment bonuses, full reward levels, and priority support.
        </div>
    </div>
</div>

<!-- FAQ 3 -->
<div class="card bg-dark text-white mb-0">
    <div class="collapsed" id="heading3">
        <h2 class="mb-0">
            <button class="btn btn-link text-white bg-dark d-flex justify-content-between align-items-center text-left w-100" data-toggle="collapse" data-target="#collapse3" aria-expanded="false" aria-controls="collapse3">
                <span>How does referral income work?</span>
                <i class="fa fa-angle-down"></i>
            </button>
        </h2>
    </div>
    <div id="collapse3" class="collapse" aria-labelledby="heading3" data-parent="#accordionExample">
        <div class="ans-body p-3">
            Earn commissions when someone joins using your referral link. Membership users earn up to 50% on direct referrals and up to 10% from their extended network.
        </div>
    </div>
</div>

<!-- FAQ 4 -->
<div class="card bg-dark text-white mb-0">
    <div class="collapsed" id="heading4">
        <h2 class="mb-0">
            <button class="btn btn-link text-white bg-dark d-flex justify-content-between align-items-center text-left w-100" data-toggle="collapse" data-target="#collapse4" aria-expanded="false" aria-controls="collapse4">
                <span>What is Autopull, and how does it generate daily income?</span>
                <i class="fa fa-angle-down"></i>
            </button>
        </h2>
    </div>
    <div id="collapse4" class="collapse" aria-labelledby="heading4" data-parent="#accordionExample">
        <div class="ans-body p-3">
            Autopull is a passive income feature exclusive to Membership users. Earn up to ₹10 daily automatically with no action required after setup.
        </div>
    </div>
</div>

<!-- FAQ 5 -->
<div class="card bg-dark text-white mb-0">
    <div class="collapsed" id="heading5">
        <h2 class="mb-0">
            <button class="btn btn-link text-white bg-dark d-flex justify-content-between align-items-center text-left w-100" data-toggle="collapse" data-target="#collapse5" aria-expanded="false" aria-controls="collapse5">
                <span>How can I earn by playing games?</span>
                <i class="fa fa-angle-down"></i>
            </button>
        </h2>
    </div>
    <div id="collapse5" class="collapse" aria-labelledby="heading5" data-parent="#accordionExample">
        <div class="ans-body p-3">
            Play games using coins or load your Star Wallet. Winnings can be withdrawn as cash. Membership users access higher-value games and better rewards.
        </div>
    </div>
</div>

<!-- FAQ 6 -->
<div class="card bg-dark text-white mb-0">
    <div class="collapsed" id="heading6">
        <h2 class="mb-0">
            <button class="btn btn-link text-white bg-dark d-flex justify-content-between align-items-center text-left w-100" data-toggle="collapse" data-target="#collapse6" aria-expanded="false" aria-controls="collapse6">
                <span>What is the Gold Investment feature?</span>
                <i class="fa fa-angle-down"></i>
            </button>
        </h2>
    </div>
    <div id="collapse6" class="collapse" aria-labelledby="heading6" data-parent="#accordionExample">
        <div class="ans-body p-3">
            Invest in digital gold and earn up to 24% annual returns. Membership users get investment returns, tracking, and bonuses when others invest using your referral.
        </div>
    </div>
</div>

<!-- FAQ 7 -->
<div class="card bg-dark text-white mb-0">
    <div class="collapsed" id="heading7">
        <h2 class="mb-0">
            <button class="btn btn-link text-white bg-dark d-flex justify-content-between align-items-center text-left w-100" data-toggle="collapse" data-target="#collapse7" aria-expanded="false" aria-controls="collapse7">
                <span>What are the benefits of the SIP/EMI Plan?</span>
                <i class="fa fa-angle-down"></i>
            </button>
        </h2>
    </div>
    <div id="collapse7" class="collapse" aria-labelledby="heading7" data-parent="#accordionExample">
        <div class="ans-body p-3">
            Membership users can purchase products via SIP or EMI and get 1 EMI free after 12 months, allowing for easy gadget purchases and rewards.
        </div>
    </div>
</div>

<!-- FAQ 8 -->
<div class="card bg-dark text-white mb-0">
    <div class="collapsed" id="heading8">
        <h2 class="mb-0">
            <button class="btn btn-link text-white bg-dark d-flex justify-content-between align-items-center text-left w-100" data-toggle="collapse" data-target="#collapse8" aria-expanded="false" aria-controls="collapse8">
                <span>How do rewards and achievement levels work?</span>
                <i class="fa fa-angle-down"></i>
            </button>
        </h2>
    </div>
    <div id="collapse8" class="collapse" aria-labelledby="heading8" data-parent="#accordionExample">
        <div class="ans-body p-3">
            Unlock higher levels by referring, playing, investing, or shopping. Membership users can win premium rewards like cars, bikes, and gadgets by reaching specific milestones.
        </div>
    </div>
</div>

<!-- FAQ 9 -->
<div class="card bg-dark text-white mb-0">
    <div class="collapsed" id="heading9">
        <h2 class="mb-0">
            <button class="btn btn-link text-white bg-dark d-flex justify-content-between align-items-center text-left w-100" data-toggle="collapse" data-target="#collapse9" aria-expanded="false" aria-controls="collapse9">
                <span>How can I use coins inside the app?</span>
                <i class="fa fa-angle-down"></i>
            </button>
        </h2>
    </div>
    <div id="collapse9" class="collapse" aria-labelledby="heading9" data-parent="#accordionExample">
        <div class="ans-body p-3">
            Use coins for shopping (direct payment or discounts), playing games, or loading your Star Wallet. 1 Coin = ₹1, with enhanced usability for Membership users.
        </div>
    </div>
</div>

<!-- FAQ 10 -->
<div class="card bg-dark text-white mb-0">
    <div class="collapsed" id="heading10">
        <h2 class="mb-0">
            <button class="btn btn-link text-white bg-dark d-flex justify-content-between align-items-center text-left w-100" data-toggle="collapse" data-target="#collapse10" aria-expanded="false" aria-controls="collapse10">
                <span>What is the Credit Wallet, and are there any extra charges?</span>
                <i class="fa fa-angle-down"></i>
            </button>
        </h2>
    </div>
    <div id="collapse10" class="collapse" aria-labelledby="heading10" data-parent="#accordionExample">
        <div class="ans-body p-3">
            The Credit Wallet allows eligible users to borrow funds without late fees or interest penalties. Membership users enjoy higher credit limits and flexible repayment options.
        </div>
    </div>
</div>

</div>

</div>

                
            </div>

            <!-- Pay Now Button -->
            @if (Auth::user()->is_member == 0)   
        <div class=" paycard ">
            <div class="payment-strip d-flex align-items-center rounded">
                <div class="price-label text-white px-3 py-2">₹9,999 / Year</div>
                <a  class="pay-now-button ml-auto" id="buy_membership">PAY NOW</a>
            </div>
        </div>
        @endif

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


<div class="modal fade" id="myModalselect" tabindex="-1" role="dialog" aria-labelledby="paymentSelectModal" aria-hidden="true">
        <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-lg modal-dialog-centered" role="document"> --}}
        <div class="modal-dialog  modal-dialog-centered" role="document">

            <div class="modal-content">
                <div class="modal-header">
                    {{-- <h5 class="modal-title" id="exampleModalLabel">New message</h5> --}}
                    <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>
                       Pay to this Number Before clicking the Pay Request <span class="color-text">+91 73040 85171</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" class="btn btn-secondary" data-dismiss="modal">Close</button> --}}
                    <button type="button" id="pay_now" class="btn btn-primary">Pay Request</button>
                  </div>
            </div>
        </div>
    </div>

    </div>

<script>

document.getElementById('buy_membership').addEventListener('click', function () {
    $('#myModalselect').modal('show');
});



$('#pay_submit').click(function() {
    const selectmethod = $('#selectmethod').val();
    const amount_id = 9999;

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

    // Retrieve user details from Laravel blade
    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 ?? '' }}";

    // Check if any field is empty
    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 = {
        billing_subtotal: amount_id,
        name: name,
        email: email,
        address: address,
        city: city,
        province: province,
        postalcode: postalcode,
        phone: phone,
        selectmethod: selectmethod
    };

    if (selectmethod === 'withdrawalwallet') {
        let authToken = $('input[name="authtoken"]').val();
        $.ajax({
            type: 'POST',
            url: '/api/membership-checkout',
            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=gold';
                }
            }
        });
    } else if (selectmethod === 'upi') {
        let authToken = $('input[name="authtoken"]').val();
        $.ajax({
            type: 'POST',
            url: '/api/membership-checkout',
            data: JSON.stringify(paymentData),
            contentType: "application/json",
            headers: {
                "Authorization": "Bearer " + authToken
            },
            success: function(response) {
                if (response.success && response.data && response.data.payment_link) {
                    window.location.href = response.data.payment_link;
                } else {
                    $('#selectmethoderror').html('(Error processing UPI payment)');
                }
            }
        });
    } else if (selectmethod === 'payrequest') {
        $('#myModalselect').modal('hide');
        setTimeout(function() {
            $('#myModalcheckout').modal('show');
        }, 500);
    }
});




$('#pay_now').click(function() {
    const selectmethod = $('#selectmethod').val();
    const amount_id = 9999;

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

    // Retrieve user details from Laravel blade
    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 ?? '' }}";

    // If the selected method is 'payrequest', check profile completion
    if (selectmethod === 'payrequest') {
        if (!name || !email || !address || !city || !province || !postalcode || !phone) {
            $('#myModalselect').modal('hide');
            alert('Complete your profile');
            return false;
        }
    }

    // If 'payrequest' is not selected, continue with the other methods
    const paymentData = {
        billing_subtotal: amount_id,
        name: name,
        email: email,
        address: address,
        city: city,
        province: province,
        postalcode: postalcode,
        phone: phone,
        selectmethod: selectmethod
    };

  if (selectmethod === 'payrequest') {
        let authToken = $('input[name="authtoken"]').val();
        $.ajax({
            type: 'POST',
            url: '/api/membership-checkout',
            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';
                    }
            }
        });
    }
});


</script>

@endsection