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

<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.min.css'>
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.theme.default.css'>

<style>

.diamond-card {
  background: linear-gradient(to right, #4a90e2, #5f67f6);
  border-radius: 12px;
  color: white;
  padding: 24px;
  width: 300px;
  box-shadow: 0 10px 25px rgba(0,0,0,0.1);
  position: relative;
}

.diamond-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-weight: bold;
  font-size: 14px;
}

.diamond-card-amount {
  font-size: 28px;
  font-weight: bold;
  margin: 20px 0;
}

.diamond-card-footer {
  font-size: 14px;
  display: flex;
  align-items: center;
  gap: 6px;
  opacity: 0.85;
}

    
.gold-card {
  background: linear-gradient(to right, #ffa500, #ff8c00);
  border-radius: 12px;
  color: white;
  padding: 24px;
  width: 300px;
  box-shadow: 0 10px 25px rgba(0,0,0,0.1);
  position: relative;
}

.gold-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-weight: bold;
  font-size: 15px;
}

.gold-card-amount {
  font-size: 28px;
  font-weight: bold;
  margin: 20px 0;
}

.gold-card-footer {
  font-size: 14px;
  display: flex;
  align-items: center;
  gap: 6px;
  opacity: 0.85;
}

.icon {
  font-style: normal;
}

    .card_bg_image p {
        font-size: 12px;
        line-height: 15px;
        color: #0f1a4e;
        font-weight: 600;
    }
    a#share-button {
        padding: 10px 15px;
        border: 2px solid #0f1a4d;
        border-radius: 20px;
        position: absolute;
    bottom:50px;
        background: #fff;
        cursor: pointer;
    }

    .wallet_earning_logo {
        max-width: 50px;
    }

    .card_bg_image {
        /* background-image: url('/img/lower_background.jpg'); */
        background-image: url('/img/lower_background.png');
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
        height: 350px;
    }

    .alert-has-icon {
        background: linear-gradient(to right, #d3d6df, #bcbfce, #f4f5f7);
        border-radius: 10px;
    }

    #owl-carousel p {
        color: #0E194D;
        text-align: center;
    }



    .img-cover img {
    max-width: 100%;
    max-height: 100%;
    width: auto!important;
    margin: auto;
}

    .img-cover {
        height: 200px;
        padding: 10px;
    }

    .owl-nav {
        margin: 0 !important;
        position: absolute;
        top: 50%;
        padding: 0;
        width: 100%;
        left: 50%;
        -ms-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);
    }


    button.owl-prev {
        position: absolute;
        left: 0;
        font-size: 24px !important;
        font-weight: 800 !important;
    }

    button.owl-next {
        position: absolute;
        right: 0;
        font-size: 24px !important;
        font-weight: 800 !important;
    }


    .bg-transparent {
        background-color: transparent;
    }

    .star_cover .card {
        box-shadow: none;
    }

    .star_cover .card:hover {
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.03);
    }

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

    .copy-text {
        position: relative;
        /* padding: 10px; */
        background: #fff;
        /* border: 1px solid #ddd; */
        box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
        border-radius: 10px;
        display: flex;
    }

    .card .card-header h4.product_head {
        font-size: 12px;
    }

    .br-solid {
        border-right: 2px solid #fff;
    }

    .buy-btn {
        padding: 10px 34px;
    }

    .notify_font .far {
        font-size: 24px;
        color: red;
    }

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

    #exampleModalScrollable h4 {
        font-size: 24px;
        line-height: 28px;
        color: red;
        padding-right: 10px;
        margin-bottom: 0;
    }

    .copy-text input.text {
        padding: 10px;
        font-size: 18px;
        color: #555;
        border: none;
        outline: none;
    }

    .copy-text button {
        padding: 10px 25px;
        background: #1f365c;
        color: #fff;
        font-size: 18px;
        border: none;
        outline: none;
        border-radius: 10px;
        cursor: pointer;
    }

    .copy-text button:active {
        background: #809ce2;
    }

    .copy-text button:before {
        content: "Copied";
        position: absolute;
        top: -45px;
        right: 0px;
        background: #5c81dc;
        padding: 8px 10px;
        border-radius: 20px;
        font-size: 15px;
        display: none;
    }

    .copy-text button:after {
        content: "";
        position: absolute;
        top: -20px;
        right: 25px;
        width: 10px;
        height: 10px;
        background: #5c81dc;
        transform: rotate(45deg);
        display: none;
    }

    .copy-text.active button:before,
    .copy-text.active button:after {
        display: block;
    }

    /* .section .section-header {
             background-color: #0E194D;
       } */

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

    .depo {
        font-size: 14px;
    }

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

    @media (max-width:767px) {



        .star_cover img {
            width: 100%;
        }

        .star_cover .card .card-header h4 {
            font-size: 12px;
            line-height: 16px;
        }


        .depo {
            font-size: 10px;
        }

        .img-cover {
            height: 80px;
            padding: 10px;
        }

    }

    @media (max-width:540px) {
        .card_bg_image {
            background: transparent;
            background-image: url('/img/lower_background.png');
            background-size: contain;
            background-position: bottom;
            height: 200px;
            /* background: transparent; */
            background-repeat: no-repeat;
        }

    }

    .slashed-price {
        text-decoration: line-through;
        color: red;
        font-weight: 300;
        font-size: 10px;

    }
</style>

<div class="main-content">
    <section class="section">
        <div class="section-header d-block bg_blue_color">
            <div class="row">
                <div class="col-6 pr-0 br-solid ">
                    <div class="d-flex align-items-center justify-content-center">
                        <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"> Deposited</h5>
                            <div>
                                <span class="text-white"><i class="fa fa-inr" aria-hidden="true"></i>{{$deposited}}</span>
                            </div>
                        </div>
                    </div>

                </div>
                <div class="col-6">
                    <div class="d-flex  align-items-center justify-content-center">
                        <div class="dash-cover pr-3">
                            <img src="img/earning_circle.png" alt="wallet-circle" class="dash-img">
                        </div>
                        <div class="dash-text">
                            <h5 class="text-white depo mb-0">Total Earning</h5>
                            <div>
                                <span class="text-white"><i class="fa fa-inr" aria-hidden="true"></i>{{$earning}}</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

        </div>
        <div class="section-body">
            <div class="row star_cover">
                <div class="col-3">
                    <a href="/referral-list">
                        <div class="card text-center p-2 bg-transparent">
                            <div class="card-icon ">
                                <img src="img/referral-star.png" alt="">
                            </div>
                            <div class="card-wrap">
                                <div class="card-header justify-content-center p-0">
                                    <h4>Referals</h4>
                                </div>
                            </div>
                        </div>
                    </a>
                </div>
                <div class="col-3">
                    <a href="/autopull">
                        <div class="card text-center p-2 bg-transparent">
                            <div class="card-icon ">
                                <img src="img/star-autopull.png" alt="">
                            </div>
                            <div class="card-wrap">
                                <div class="card-header justify-content-center p-0">
                                    <!-- <h4>Autopool</h4> -->
                                    <h4>Autopull</h4>
                                </div>
                            </div>
                        </div>
                    </a>
                </div>
                <div class="col-3">
                    <a href="/sip-investment">
                        <div class="card text-center p-2 bg-transparent">
                            <div class="card-icon ">
                                <img src="img/star_emi.png" alt="">
                            </div>
                            <div class="card-wrap">
                                <div class="card-header justify-content-center p-0">
                                    <h4>EMI Plan</h4>
                                </div>
                            </div>
                        </div>
                    </a>
                </div>
                {{-- <div class="col-3">
                        <a href="#">
                            <div class="card text-center p-2 bg-transparent">
                                    <div class="card-icon ">
                                        <img src="img/star_gamming.png" alt="">
                                    </div>
                                <div class="card-wrap">
                                    <div class="card-header justify-content-center p-0">
                                    <h4>Gaming</h4>
                                    </div>
                                </div>
                            </div>
                        </a>
                    </div> --}}

                <div class="col-3">
                    <a href="/rewards">
                        <div class="card text-center p-2 bg-transparent">
                            <div class="card-icon ">
                                <img src="img/star_rewards.png" alt="">
                            </div>
                            <div class="card-wrap">
                                <div class="card-header justify-content-center p-0">
                                    <h4>Rewards</h4>
                                </div>
                            </div>
                        </div>
                    </a>
                </div>

            </div>
            <div class="row star_cover">


                <div class="col-3">
                    <a href="/gold-plan">
                        <div class="card text-center p-2 bg-transparent">
                            <div class="card-icon ">
                                <img src="img/star_goldenstrem.png" alt="">
                            </div>
                            <div class="card-wrap">
                                <div class="card-header justify-content-center p-0">
                                    <h4>Stock Investment</h4>
                                </div>
                            </div>
                        </div>
                    </a>
                </div>

                <div class="col-3">
                    <a href="/our-product">
                        <div class="card text-center p-2 bg-transparent">
                            <div class="card-icon ">
                                <img src="img/star_product.png" alt="">
                            </div>
                            <div class="card-wrap">
                                <div class="card-header justify-content-center p-0">
                                    <h4>Products</h4>
                                </div>
                            </div>
                        </div>
                    </a>
                </div>

                <div class="col-3">
                    <a href="/wallets">
                        <div class="card text-center p-2 bg-transparent">
                            <div class="card-icon ">
                                <img src="img/star_wallet.png" alt="">
                            </div>
                            <div class="card-wrap">
                                <div class="card-header justify-content-center p-0">
                                    <h4>Wallets</h4>
                                </div>
                            </div>
                        </div>
                    </a>
                </div>






                <div class="col-3">
                    @php
                    $application = DB::table('app_version_control')
                    ->select('app_version_control.*')
                    ->where('app_version_control.status', '=', 1)
                    ->get();
                    @endphp
                    @forelse($application as $app)
                    @if($app->status == '1')

                    <a href="{{ $app->apk }}" target="_blank">
                        <div class="card text-center p-2 bg-transparent">
                            <div class="card-icon ">
                                <img src="img/star_download.png" alt="">
                            </div>
                            <div class="card-wrap">
                                <div class="card-header justify-content-center p-0">
                                    <h4 style="color:#fdba00;">Download App</h4>
                                </div>
                            </div>
                        </div>
                    </a>


                    @endif
                    @empty

                    <a href="https://shreeagtmultimedia.s3.ap-south-1.amazonaws.com/my_wealth_free/mwf_app.apk" target="_blank">
                        <div class="card text-center p-2 bg-transparent">
                            <div class="card-icon ">
                                <img src="img/star_download.png" alt="">
                            </div>
                            <div class="card-wrap">
                                <div class="card-header justify-content-center p-0">
                                    <h4 style="color:#fdba00;">Download App</h4>
                                </div>
                            </div>
                        </div>
                    </a>


                    @endforelse
                </div>

            </div>

            <div class="row">

                {{-- <div class="col-lg-8 col-md-12 col-12 col-sm-12"> --}}
                <div class="col-lg-12 col-md-12 col-12 col-sm-12">
                    <div class="alert alert-light alert-has-icon">
                        @if (Auth::user()->is_member == 0)
                        <div class="alert-icon text-danger"><i class="far fa-bell"></i></div>
                        <div class="alert-body text-danger">
                            <div class="alert-title">Notice!</div>
                            You are not member to <strong>any program</strong>. <div class="float-right mt-4">
                                <!-- <a href="/buy-membership" class="btn btn-danger btn-round">Buy Membership</a> -->
                                <button class="btn btn-danger btn-round" id="buy_membership">Buy Membership</button>
                            </div>
                        </div>
                        @else
                        <div class="alert-icon text-danger"><i class="far fa-bell"></i></div>
                        <div class="alert-body text-danger">
                            <div class="alert-title">Your Referral Link</div>
                            {{-- <input type="text" class="form-control" id="name" name="name" value="/register-user?referal-id={{ Auth::user()->id }}" required=""> --}}

                            {{-- <div class="float-right mt-4">
                                        <a href="/register-user?referal-id={{ Auth::user()->id }}"
                            class="btn btn-danger btn-round">Referral Links</a>
                        </div> --}}


                        <div class="">
                            {{-- <div class="label">
                                            E-mail address
                                        </div> --}}
                            <div class="copy-text">
                                <input type="text" class="text w-100" id="share-wp"
                                    value="https://mywealthfree.com/register-user?referal-id={{ Auth::user()->id }}" />
                                <button class="btn-copy"><i class="fa fa-clone"></i></button>
                            </div>
                        </div>

                    </div>
                    @endif
                </div>


                <div class="row">
                    <div class="col-lg-6">
         <div class="card d-none d-lg-block">
                    <div class="card-header">
                        <h4>Account Overview</h4>
                        <div class="card-header-action">
                            <div class="badge badge-success">Active</div>
                        </div>
                    </div>
                    <div class="card-body">
                        <div class="summary-item">
                            <ul class="list-unstyled list-unstyled-border">
                                <li class="media">
                                    <div class="row">
                                        <div class="col-6 d-flex align-items-center">
                                            <div class="avatar-item">
                                                <img class="mr-3 rounded-circle img-fluid" width="100"
                                                    height="100" src="../assets/image/mbr_defaultimage.jpg"
                                                    alt="sandeep">
                                                <div class="avatar-badge float-left">
                                                    <a href="index.php?hal=accountcfg" title="Update"
                                                        data-toggle="tooltip"><i
                                                            class="fas fa-wrench text-secondary"></i></a>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-6 text-right">
                                        </div>
                                    </div>
                                </li>
                                <li class="media">
                                    <div class="media-body">
                                        <div class="text-small">Registered</div>
                                        <div class="media-title"></div>
                                    </div>
                                </li>
                                <li class="media">
                                    <div class="media-body">
                                        <div class="text-small">Name</div>
                                        <div class="media-title">{{ Auth::user()->name }} (<a
                                                href="/cdn-cgi/l/email-protection" class="_cf_email_"
                                                data-cfemail="">{{ Auth::user()->email }}</a>)
                                        </div>
                                    </div>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
                    </div>
                    <div class="col-lg-6">

                         <div class="card gold-card">
                                <!-- <div class="card-header gold-card-header"> -->
                                <div class="gold-card-header">
                                    <div><i class="fa fa-credit-card"></i> GOLD CARD</div>
                                    <div><i class="fa fa-eye"></i></div>
                                </div>

                                <div class="gold-card-amount" >₹<span id="goldamount"></span></div>

                                <div class="gold-card-footer">
                                <!-- <i class="fa fa-shopping-bag"></i>  -->
                                <i class='fas fa-wallet'></i>   
                                 MyWealthFree
                                </div>
                                </div>


                                <div class="card diamond-card">
                                    <div class="diamond-card-header">
                                        <div><i class="fas fa-gem"></i> DIAMOND CARD</div>
                                        <div><i class="fa fa-eye"></i></div>
                                    </div>

                                    <div class="diamond-card-amount">₹<span id="diamodamount"></span>0.00</div>

                                    <div class="diamond-card-footer">
                                        <i class="fas fa-wallet"></i> MyWealthFree
                                    </div>
                                    </div>



                            </div>

                    </div>
                </div>
       

                <div class="card ">
                    <div class="card-header">
                        <h4>Recommended</h4>
                        <div class="card-header-action">
                            <a href="/our-product">
                                <div class="badge badge-success">View all product</div>
                            </a>
                        </div>
                    </div>

                    <div class="card-body">
                        <div id="owl-carousel" class="owl-carousel owl-theme">
                            @foreach ($products as $product)
                            @php
                            $decodedImages = json_decode($product->images, true) ?? [];
                            $firstImage = $decodedImages[0] ?? asset('img/placeholder_image.jpg');
                            @endphp
                            <div class="item card">
                                <a href="