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

<style>

.level-tag {
    padding: 10px;
    background: #7fa7e9;
    color: #1f365c;
    width: 50px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    justify-content: center;
    font-weight: 800;
    justify-content: center;
    border-radius: 50%;
    height: 50px;
    vertical-align: text-bottom;
}

.transaction-card {
      border: 1px solid #ddd;
      border-radius: 8px;
      padding: 16px;
      margin-bottom: 16px;
      background-color: #fff;
      box-shadow: 0 0 10px rgba(0,0,0,0.05);
    }
    .transaction-header {
      font-weight: bold;
      font-size: 1.25rem;
    }
    .transaction-meta {
      color: #888;
      font-size: 0.95rem;
    }
    .transaction-amount {
      font-weight: 600;
      font-size: 1.1rem;
      color: green;
    }
    .level-badge {
      font-size: 0.9rem;
      padding: 3px 8px;
      border-radius: 4px;
      background-color: #e0f0ff;
      color: #007bff;
    }

    .text-decoration-underline {
        text-decoration: underline;
    }

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

    .date h3 {
        font-size: 11px;
        line-height: 11px;
        color: #1f365c;
        font-weight: bold;
        margin-bottom: 5px;
    }


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





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

        .transaction-meta {
            font-size: 11px;
    line-height: 11px;
    color: #000000;
    font-weight: bold;
    margin-bottom: 5px;
    }


        .leveltagspan {
    width: 70%;
}

        .depo {
            font-size: 15px;
        }

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

        .level-tag {
            padding: 5px;
            background: #7fa7e9;
            color: #1f365c;
            width: 30px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            justify-content: center;
            font-weight: 800;
            justify-content: center;
            border-radius: 50%;
            height: 30px;
            vertical-align: text-bottom;
        }

        .transaction-name {
    font-size: 11px;
    line-height: 11px;
    color: #000000;
    font-weight: bold;
    margin-bottom: 5px;
}

.level-tag {
    padding: 5px;
    background: #7fa7e9;
    font-size: 11px;
    color: #1f365c;
    width: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    justify-content: center;
    font-weight: 800;
    justify-content: center;
    border-radius: 50%;
    height: 30px;
    vertical-align: text-bottom;
}

    }

    div#siptable {
        overflow-x: auto;
    }

    .table_plan {
        border: 1px dashed;
        white-space: nowrap;
    }



    #buybtn {
        padding: 10px 40px;
        border-radius: 10px;
        font-size: 20px;
    }

    .table_plan {
        border: 1px dashed;
    }

    /* .table_plan thead th{

} */

    .table:not(.table-sm) thead th {
        background-color: #333;
        color: #fff;
    }


    /* @media (max-width:768px) {
        .card .card-header h4 {
            font-size: 16px;
        }

        h3 .badge {
            font-size: 10px;
            padding: 6px 7px;
            margin: 3px 0;
        }

        .btn.btn-sm {
            padding: .10rem .4rem;
            font-size: 10px;
            line-height: 14px;
            border-radius: 5px;
        }

        .cus-padding {
            background: transparent;
        }

    } */
</style>
<div class="main-content">
    <section class="section">

    {{--
            <input type="hidden" name="authtoken" value={{$token}}>
            --}}
        <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>
                                    Available Amount
                                </h5>
                            </div>
                        </div>


                    </div>

                </div>

            </div>

        </div>

        <div class="clearfix"></div>



        <div class=" cus-padding">
            <div class=" ">


                <div class="carddetail">
                <div class="container my-5">
  <h3 class="mb-4">Recent Transaction</h3>

  <!-- Entry 1 -->




  <!-- Button Group -->


  <div class="card mb-10 br-20">
    <div class="card-body p-3">
    <div class="d-flex justify-content-between align-items-center">
      <div class="leveltagspan">
        <div class="level-tag">L1</div>
        <div class="d-inline-block">
            <div class="transaction-name">Surya Tiwari</div>
            <div class="transaction-meta">Sept 17, 2022</div>
        </div>
      </div>

      <div class="button-group text-right">

    <button class="btn btn-primary m-1">Paid</button>
  </div>
    </div>
    </div>

  </div>
  

  <!-- Entry 4 -->
  <!-- <div class="transaction-card"> -->
  <div class="card mb-10 br-20">
    <div class="card-body p-3">
    <div class="d-flex justify-content-between align-items-center">
      <div class="leveltagspan">
        <div class="level-tag">L1</div>
        <div class="d-inline-block">
            <div class="transaction-name">Surya Tiwari</div>
            <div class="transaction-meta">Sept 17, 2022</div>
        </div>
      </div>

      <div class="button-group text-right">
    <button class="btn btn-outline-primary m-1">Pay Interest</button>
    <button class="btn btn-primary m-1">Pay Full</button>
  </div>
    </div>
    </div>

  </div>


  <div class="card mb-10 br-20">
    <div class="card-body p-3">
    <div class="d-flex justify-content-between align-items-center">
      <div class="leveltagspan">
        <div class="level-tag">L1</div>
        <div class="d-inline-block">
            <div class="transaction-name">Surya Tiwari</div>
            <div class="transaction-meta">Sept 17, 2022</div>
        </div>
      </div>

      <!-- <div class="button-group text-right">
    <button class="btn btn-outline-primary m-1">Pay Interest</button>
    <button class="btn btn-primary m-1">Pay Full</button>
  </div> -->
    </div>
    </div>

  </div>



</div>

                </div>
          


            </div>
        </div>



        <div class="clearfix"></div>
        <div class="row marginTop">
            <div class="col-sm-12 paddingLeft pagerfwt">
            </div>
            <div class="clearfix"></div>
        </div>
        <div class="clearfix"></div>
    </section>
</div>

<!-- Withdrawal Modal -->
<div class="modal fade" tabindex="-1" id="successModal" data-keyboard="false" data-backdrop="static">
    <div class="modal-dialog modal-sm">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dissmiss="modal">
                    ×
                </button>
                <h4>success</h4>
            </div>
            <div class="modal-body">
                <h2>Registration Successful</h2>
            </div>
            <div class="modal-footer">
                <button type="button" data-dissmiss="modal" class="btn btn-success">
                    Close
                </button>
            </div>
        </div>

    </div>

</div>

<!-- Withdrawal Modal -->
<!-- Modal -->
<div class="modal fade" id="OpenMaturityModal" tabindex="-1" role="dialog" aria-labelledby="dataModalTitle" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title" id="dataModalTitle">Withdraw Maturity</h5>
          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">&times;</span>
          </button>
        </div>
        <div class="modal-body">
            <input type="text" name="withdrawmaturity" class="form-control" id="withdrawmaturity" value="" readonly>
            <input type="hidden" name="withdrawplanid" id="withdrawplanId">
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-primary" id="submit-maturity">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>
                  Request 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 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>
                <input type="hidden" name="" id="sipplanId">
                <input type="hidden" name="" id="sipplanIdAmount">
                <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>





<script>
$(document).ready(function() {
    let authToken = $('input[name="authtoken"]').val();
    $.ajax({
        url: '/api/sip-schedule',
        type: 'get',
        headers: {
        "Authorization": "Bearer " + authToken  
    },

        success: function(response) {
            var url = window.location.pathname;
            var planIdFromUrl = url.split('/').pop(); // Extract "7" from "sip-schedule/7"

            response.data.forEach(function(plan) {
                var normalizedPlanId = parseInt(plan.plandid, 10).toString(); // Convert "00007" to "7"

                if (normalizedPlanId === planIdFromUrl) { 
                    // Now it matches correctly

                    console.log("Matching Plan Found:", plan); // Debugging

                    var planContainer = $('<div>').addClass('plan-container');
                    var plan_mob = $('<div>').addClass('plan_mob');
                    var mainmobDiv = $('<div>').addClass('d-flex justify-content-between');
                    
                    // Add plan details
                    mainmobDiv.append($(`<h5>Plan Name: ${plan.name} (${plan.plandid})</h5>`));
                    mainmobDiv.append($(`<h5>Next Payment: ${plan.upcomming_date}</h5>`));
                    plan_mob.append(mainmobDiv);
                    planContainer.append(mainmobDiv);

                    var table = $('<table>').addClass('table table-striped table-hover table_plan');
                    var headers = $(`<thead>
                        <tr>
                            <th scope="col">#</th>
                            <th>Start date</th>
                            <th>Due Date</th>
                            <th>OrderId</th>
                            <th>Amount</th>
                            <th>Status</th>
                            <th>Transaction ID</th>
                            <th>Action</th>
                        </tr>
                    </thead>`);
                    table.append(headers);
                    var tbody = $('<tbody>');

                    plan.data.forEach(function(rowData, index) {
                    const today = new Date().setHours(0, 0, 0, 0);
                    const sipStartDate = new Date(rowData.sip_start_date).setHours(0, 0, 0, 0);

                    const isPaid = rowData.sip_status == 1;
                    const isRequested = rowData.sip_status == 2;
                    const isFuture = sipStartDate > today;

                    const shouldDisable = isPaid || isRequested || isFuture;
                    const btnClass = isPaid ? 'success' : (isRequested ? 'warning' : 'primary');
                    const btnText = isPaid ? 'Paid' : (isRequested ? 'Requested' : 'Pay Now');
                    const btnDisabled = shouldDisable ? 'disabled' : '';
                    const btnOnClick = (!isPaid && !isRequested && !isFuture) ? 'openPaymentModal(this)' : '';

                    const row = $('<tr>');
                    row.append($(`<td>${rowData.id}</td>`));
                    row.append($(`<td>${rowData.sip_start_date}</td>`));
                    row.append($(`<td>${rowData.sip_end_date}</td>`));
                    row.append($(`<td>${rowData.order_id}</td>`));
                    row.append($(`<td><i class="fa fa-inr" aria-hidden="true"></i> ${rowData.amount}</td>`));
                    row.append($(`<td><span class="badge badge-${isPaid ? 'success' : 'info'}">
                        <i class="fa fa-${isPaid ? 'check' : 'warning'}"></i> ${isPaid ? 'Paid' : 'Due'}</span></td>`));
                    row.append($(`<td><span>${rowData.transactionid ? 'tId:' + rowData.transactionid : '--'}</span></td>`));
                    row.append($(`<td>
                        <button type="button"
                            class="btn btn-sm btn-${btnClass} ${btnDisabled}"
                            ${btnDisabled}
                            data-id="${rowData.id}"
                            data-amount="${rowData.amount}"
                            onclick="${btnOnClick}">
                            ${btnText}
                        </button>
                    </td>`));

                    tbody.append(row);
                });


                    table.append(tbody);
                    planContainer.append(table);
                    $('#siptable').append(planContainer);

                    // Add maturity row
                    var lastPaidDate = plan.data.length > 0 ? plan.data[plan.data.length - 1].sip_end_date : null;
                    var nextMonthDate = getNextMonthDate(lastPaidDate);

                    var defaultRow = $('<tr>');
                    defaultRow.append($(`<td>--</td>`));
                    defaultRow.append($(`<td>${nextMonthDate}</td>`));
                    defaultRow.append($('<td>--</td>'));
                    defaultRow.append($(`<td><i class="fa fa-inr" aria-hidden="true"></i> ${plan.maturity}</td>`));
                    defaultRow.append($(`<td><span class="badge badge-${plan.sip_withdrawal ? 'success' : 'info'}"><i class="fa fa-${plan.sip_withdrawal ? 'check' : 'warning'}"></i> ${plan.sip_withdrawal ? 'Paid' : 'Due'}</span></td>`));
                    defaultRow.append($('<td>--</td>'));
                    defaultRow.append($(`<td><button onclick="openMaturityModal(${plan.maturity},${plan.plandid})" class="btn btn-sm btn-warning" ${plan.sip_withdrawal ? '' : 'disabled'}>Withdraw Maturity</button></td>`));

                    tbody.append(defaultRow);
                }
            });
        },

        error: function(xhr, status, error) {
            console.log('Error:', error);
        }
    });

    function getNextMonthDate(lastPaidDate) {
        var date = lastPaidDate ? new Date(lastPaidDate) : new Date();
        date.setMonth(date.getMonth() + 1);
        return date.toISOString().split('T')[0]; // Format as YYYY-MM-DD
    }
});

</script>
<script>
    $(document).ready(function() {
        $(".withdrawal-button").click(function() {
            $("#successModal").modal('show');
        });
    });
</script>

<script>
 function openMaturityModal(n,p){
    $('#OpenMaturityModal').modal('show');
    $('#withdrawmaturity').val(n);
    $('#withdrawplanId').val(p);
 }

 $('#submit-maturity').on('click', function() {
    let csrfToken = document.querySelector('meta[name="csrf-token"]').getAttribute('content');
    let withdrawmaturity = $('#withdrawmaturity').val();
    let withdrawplanId = $('#withdrawplanId').val();
    let authToken = $('input[name="authtoken"]').val();
    let withdrawdata = {
        amount:withdrawmaturity,
        plan_id:withdrawplanId,
    }

    $.ajax({
    type: 'POST',
    url: '/api/withdraw-sip',
    data: JSON.stringify(withdrawdata),
    contentType: "application/json",
    headers: {
        "Authorization": "Bearer " + authToken  
    },
    success: function (response) {
        window.location.href = '/wallets';
    },
    error: function (xhr, status, error) {
        console.log('Status:', status);
        console.log('Response:', xhr.responseText);
        
        try {
            var responseJson = JSON.parse(xhr.responseText);
            if (responseJson.message) {
                alert(responseJson.message); // Show alert with the error message
            } else {
                alert("An unexpected error occurred. Please try again.");
            }
        } catch (e) {
            alert("An error occurred. Please check your network and try again.");
        }
    }
});


    $('#OpenMaturityModal').modal('hide');

});
</script>

@endsection