@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>

.credit-summary {
  
      margin: auto;
    }

    .card-box {
      background-color: #4CAF50;
      color: white;
      padding: 20px;
      border-radius: 16px;
      margin-bottom: 20px;
      position: relative;
    }

    .card-box .view-icon {
      position: absolute;
      right: 20px;
      top: 20px;
    }

    .card-number {
      font-size: 18px;
      margin: 16px 0 8px;
    }

    .card-info {
      display: flex;
      justify-content: space-between;
      font-size: 14px;
    }

    .outstanding {
      background-color: white;
      padding: 16px;
      border-radius: 12px;
      margin-bottom: 20px;
      text-align: center;
      box-shadow: 0 0 10px rgba(0,0,0,0.05);
    }

    .outstanding h3 {
      margin: 0 0 10px;
      font-size: 16px;
    }

    .outstanding .amount {
      font-weight: bold;
      font-size: 20px;
    }

    .pay-btn {
      background-color: #4CAF50;
      color: white;
      padding: 10px 20px;
      border-radius: 25px;
      border: none;
      font-weight: bold;
      cursor: pointer;
    }

    .top-spends {
      display: flex;
      justify-content: space-between;
      align-items: center;
      font-size: 14px;
      margin-bottom: 10px;
    }

    .limit-box {
      background-color: white;
      border-radius: 12px;
      padding: 16px;
      box-shadow: 0 0 10px rgba(0,0,0,0.05);
    }

    .limit-box h4 {
      margin: 0 0 10px;
      font-size: 16px;
    }

    .wallet-breakdown {
      font-size: 14px;
      line-height: 1.6;
    }

    .wallet-breakdown .diamond {
      color: #4a90e2;
    }

    .wallet-breakdown .gold {
      color: #ff8c00;
    }

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

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

    .tract_message {
        color: red;
        font-size: 11px;
        line-height: 12px;
    }

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

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

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

    }

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

    .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;
        line-height: 1;
        font-weight: 800 !important;
    }

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

    .img_cover {
        padding: 10px;
    }

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

    .bg-card-wallet {
        background: #1f365c !important;
        border-radius: 10px;
    }

    .earn_ttl {
        border-radius: 20px;
        text-align: center;
        padding: 10px;
        background: #fff;
    }

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

    .wallet_earning_logo {
        max-width: 50px;
    }

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

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

    .wallet-header h4 {
        margin-bottom: 0;
        font-weight: 700;
        display: inline-block;
        font-size: 16px;
        margin-top: 3px;
        color: #34395e;
    }
</style>
<input type="hidden" name="authtoken" value={{$token}}>
<input type="hidden" name="userid" value="{{auth()->user()->id}}">
<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>
                                    Card Details
                                </h5>
                            </div>
                        </div>
                        <div>
                        </div>
                    </div>
                </div>
            </div>
        </div>


    
        <div class="section">
        <form class="credit-summary">

        
    <!-- Credit Card -->
     <div class="row">
        <div class="col-lg-6">
        <div class="card-box">
      <div class="view-icon"><i class="fa fa-eye"></i></div>
      <div class="label">MYWEALTHFREE CREDIT CARD</div>
      <div class="card-number">999999{{auth()->user()->phone}}</div>
      <div class="card-info">
        <div>
          <div class="holder-label">CARD HOLDER</div>
          <div class="holder-name"></div>
        </div>
        <div>
        <div>CVV {{ substr(auth()->user()->phone, -3) }}</div>
          <div>Exp: 07/30</div>
        </div>
      </div>
    </div>

        </div>
        <div class="col-lg-6">
            <!-- Total Outstanding -->
                <div class="outstanding">
                <h3>Total Outstanding</h3>
                <div class="amount">₹0.00</div>
                <button type="submit" class="pay-btn">Pay Early</button>
                </div>
        </div>
     </div>




<!-- Top Spends -->
<div class="top-spends d-flex justify-content-between align-items-center">
  <div>Top Spends</div>
  <div><a href="#" id="viewAllSpends" style="text-decoration: none;">See all</a></div>
</div>



<!-- Card Limit Section -->
<div class="limit-box">
  <h4>Your Card Limit</h4>
  <div class="wallet-breakdown">
    Available Limit: ₹<span id="availableLimit">0.00</span><br>
    Total Limit: ₹<span id="totalLimit">0.00</span><br><br>
    <span class="diamond">Diamond Wallet: ₹<span id="diamondWallet">0.00</span></span><br>
    <span class="gold">Gold Wallet: ₹<span id="goldWallet">0.00</span></span>
  </div>
</div>

<!-- Spends List Section -->
<div class="spends-list" style="display: none;">
  <ul class="list-group" id="spendsContainer"></ul>
</div>
  </form>
        </div>


        

        </div>
</div>


</section>
</div>
<script src='https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.js'></script>



<script>
$(document).ready(function () {
    let authToken = $('input[name="authtoken"]').val();
    let user_id = $('input[name="userid"]').val();

    $.ajax({
        url: `/api/credit-wallet/${user_id}`,
        type: 'POST',
        headers: {
            "Authorization": "Bearer " + authToken
        },
        success: function (response) {
            // Update card limit values

            if (response.user && response.user.name) {
                $('.holder-name').html('<strong>' + response.user.name + '</strong>');
            }

            // Update Total Outstanding Amount
            if (response.total_due) {
                $('.outstanding .amount').text('₹' + parseFloat(response.total_due).toFixed(2));
            }

            let creditBalance = parseFloat(response.credit_wallet_balance || 0).toFixed(2);
            $('#availableLimit').text(creditBalance);
            $('#totalLimit').text(creditBalance);

            // Update Diamond and Gold wallets
            $('#diamondWallet').text(parseFloat(response.diamond_wallet || 0).toFixed(2));
            $('#goldWallet').text(parseFloat(response.gold_wallet || 0).toFixed(2));

            // Show unpaid bills on "See all"
            $('#viewAllSpends').on('click', function (e) {
                e.preventDefault();

                const $this = $(this);
                const container = $('#spendsContainer');
                const spendsList = $('.spends-list');

                if ($this.text().trim() === 'See Less') {
                    spendsList.slideUp();
                    $this.html('View All Spends');
                    return;
                }

                const bills = response.unpaid_bills || [];
                container.empty();

                if (bills.length > 0) {
                    bills.forEach((bill) => {
                        container.append(`
                            <li class="list-group-item d-flex justify-content-between align-items-center">
                                <span>Due: ${bill.due_date}</span>
                                <span class="badge">₹${parseFloat(bill.total_amount).toFixed(2)}</span>
                            </li>
                        `);
                    });
                } else {
                    container.append(`<li class="list-group-item text-muted">No pending bills</li>`);
                }

                spendsList.slideDown();
                $this.html('See Less');
            });


            console.log('Credit wallet data loaded:', response);
        },
        error: function (xhr, status, error) {
            console.error('Error fetching wallet info:', error);
        }
    });
});
</script>



@endsection