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

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



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

    div#siptable {
        overflow-x: auto;
    }

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

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

    #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">
        {{-- <div class="section-header">
                <h1><i class="fa fa-fw fa-users"></i> Schedule List </h1>
            </div> --}}

            <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>
                                    Schedule List
                                </h5>
                            </div>
                        </div>


                    </div>

                </div>

            </div>

        </div>

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

        {{-- @if ($schedules->count() == 0)
            <div class="card">
                <div class="card-header justify-content-center">
                    <h4>Explore the investment plans that offer optimal returns tailored to your needs</h4>
                </div>
            <div class="card-body text-center">
                <a class="btn btn-primary" href="/sip-investment" id="buybtn">Plans</a>
            </div>
        </div>
        @else

            @endif --}}


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

                <div class="" id="siptable">
                </div>

                <div class="d-block d-md-none" id="sipmob">
                    {{-- <div class="plan_mob">
                <div class="d-flex justify-content-between">
                    <h5>Plan Name: ${plan.name}(${plan.plandid})</h5>
                    <h5>${plan.upcomming_date}</h5>
                </div>
                <div class="row">
                    <div class="col-lg-12">        
                        <div class="card mb-10 br-20">
                            <div class="card-body p-3">
                                <div>
                                    <div class="date d-flex justify-content-between align-items-center">
                                        <div>
                                            <h3 class="mb-0">${rowData.sip_end_date}</h3>
                                            <h3 class="mb-0"><span class="badge badge-info"><i class="fa fa-warning"></i> Due</span></h3>   
                                           <h3>--</h3>
                                         </div>
                                        
                                        <div class="transaction_type">
                                            <h3 class="text-right"><i class="fa fa-inr"></i>${rowData.amount}</h3> 
                                            <h3><a href="/pay-sip/${rowData.id}" class="btn btn-sm btn-primary ">Pay Now</a></h3>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="card mb-10 br-20">
                            <div class="card-body p-3">
                                <div>
                                    <div class="date d-flex justify-content-between align-items-center">
                                        <div>
                                            <h3 class="mb-0">${rowData.sip_end_date}</h3>
                                            <h3 class="mb-0"><span class="badge badge-info"><i class="fa fa-warning"></i> Due</span></h3>   
                                           <h3>--</h3>
                                         </div>
                                        
                                        <div class="transaction_type">
                                            <h3 class="text-right"><i class="fa fa-inr"></i>${rowData.amount}</h3> 
                                            <h3><a href="/pay-sip/${rowData.id}" class="btn btn-sm btn-primary ">Pay Now</a></h3>
                                        </div>
                                    </div>
                                </div>
                            </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>

<script>
function openPaymentModal(button) {
    let sip_id = $(button).data('id');  // Get sip_id
    let amount = $(button).data('amount'); // Get amount

    $('#pay_submit').data('sip_id', sip_id); // Store sip_id in submit button
    $('#pay_submit').data('amount', amount); // Store amount in submit button

    $('#myModalselect').modal('show'); // Open modal
    $('#sipplanId').val(sip_id);
    $('#sipplanIdAmount').val(amount);

}




$('#pay_submit').click(function(e) {
    let selectmethod = $('#selectmethod').val();
    let sip_id = $(this).data('sip_id'); // Get stored sip_id
    let amount = $(this).data('amount'); // Get stored amount
    let authToken = $('input[name="authtoken"]').val();

    let csrfToken = document.querySelector('meta[name="csrf-token"]').getAttribute('content');

let withdrawdata = {
    billing_subtotal: amount, // Send amount
    name: "{{ Auth::user()->name }}",
    email: "{{ Auth::user()->email }}",
    address: "{{ Auth::user()->user_personal_detail->address ?? '' }}",
    city: "{{ Auth::user()->user_personal_detail->city ?? '' }}",
    province: "{{ Auth::user()->user_personal_detail->state ?? '' }}",
    postalcode: "{{ Auth::user()->user_personal_detail->pincode ?? '' }}",
    phone: "{{ Auth::user()->user_personal_detail->phone ?? '' }}",
    selectmethod: selectmethod,
    sip_id: sip_id, // Send sip_id
};

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


        $.ajax({
            type: 'POST',
            url: '/api/installments-sip-checkout',
            data: JSON.stringify(withdrawdata),
            contentType: "application/json",
            headers: {
                "Authorization": "Bearer " + authToken  
            },
            success: function(response) {
                if (!response.success) {
                    $('#selectmethoderror').html(response.message);
                } else {
                    window.location.href = '/thankyou?flag=sip';
                }
            },
            error: function(xhr, status, error) {
                console.log('Status:', status);
                console.log('Response:', xhr.responseText);
            }
        });
    }
    
    else if (selectmethod === 'upi') {
                  // Get token value
                    console.log(authToken)
                    $.ajax({
                        type: 'POST',
                        // url: '/api/checkout-sip-plan',
                        url: '/api/installments-sip-checkout',
                        data: JSON.stringify(withdrawdata),
                        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(e) {

    let selectmethod = 'payrequest';
    let sip_id = $('#sipplanId').val(); // Get stored sip_id
    let amount = $('#sipplanIdAmount').val(); // Get stored sip_id
    // let amount = $(this).data('amount'); 
    let authToken = $('input[name="authtoken"]').val();

    let csrfToken = document.querySelector('meta[name="csrf-token"]').getAttribute('content');

let withdrawdata = {
    billing_subtotal: amount, // Send amount
    name: "{{ Auth::user()->name }}",
    email: "{{ Auth::user()->email }}",
    address: "{{ Auth::user()->user_personal_detail->address ?? '' }}",
    city: "{{ Auth::user()->user_personal_detail->city ?? '' }}",
    province: "{{ Auth::user()->user_personal_detail->state ?? '' }}",
    postalcode: "{{ Auth::user()->user_personal_detail->pincode ?? '' }}",
    phone: "{{ Auth::user()->user_personal_detail->phone ?? '' }}",
    selectmethod: selectmethod,
    sip_id: sip_id, // Send sip_id
};


$.ajax({
                        type: 'POST',
                        // url: '/api/checkout-sip-plan',
                        url: '/api/installments-sip-checkout',
                        data: JSON.stringify(withdrawdata),
                        contentType: "application/json",
                        headers: {
                            "Authorization": "Bearer " + authToken  
                        // 'Authorization': authToken,
                        },
                        success: function(response) {
                            if (!response.success) {
                                $('#selectmethoderror').html(response.message);
                            } else {
                                window.location.href = '/thankyou?flag=sip';
                            }
                        },
                        error: function(xhr, status, error) {
                            console.log('Status:', status);
                            console.log('Response:', xhr.responseText);
                            $('#selectmethoderror').html('(Server error)');
                        }
                    });


})



</script>
@endsection