@include('front.layouts.old_header')

<style>
    /* The snackbar - position it at the bottom and in the middle of the screen */
    #snackbar {
        visibility: hidden; /* Hidden by default. Visible on click */
        min-width: 250px; /* Set a default minimum width */
        margin-left: -125px; /* Divide value of min-width by 2 */
        background-color: red; /* Black background color */
        color: #fff; /* White text color */
        text-align: center; /* Centered text */
        border-radius: 2px; /* Rounded borders */
        padding: 16px; /* Padding */
        position: fixed; /* Sit on top of the screen */
        z-index: 1; /* Add a z-index if needed */
        left: 50%; /* Center the snackbar */
        bottom: 30px; /* 30px from the bottom */
    }

    /* Show the snackbar when clicking on a button (class added with JavaScript) */
    #snackbar.show {
        visibility: visible; /* Show the snackbar */
        /* Add animation: Take 0.5 seconds to fade in and out the snackbar.
        However, delay the fade out process for 2.5 seconds */
        -webkit-animation: fadein 0.5s, fadeout 0.5s 2.5s;
        animation: fadein 0.5s, fadeout 0.5s 2.5s;
    }

    /* Animations to fade the snackbar in and out */
    @-webkit-keyframes fadein {
        from {bottom: 0; opacity: 0;}
        to {bottom: 30px; opacity: 1;}
    }

    @keyframes fadein {
        from {bottom: 0; opacity: 0;}
        to {bottom: 30px; opacity: 1;}
    }

    @-webkit-keyframes fadeout {
        from {bottom: 30px; opacity: 1;}
        to {bottom: 0; opacity: 0;}
    }

    @keyframes fadeout {
        from {bottom: 30px; opacity: 1;}
        to {bottom: 0; opacity: 0;}
    }
    .wait-ld{
        position: absolute;
         top: 40%;
        bottom: 0;
        left: 0;
        margin: auto;
        z-index: 42;
        text-align: center;
        width: 100%;
    }
</style>
<!--Main Layout-->
<?php setlocale(LC_MONETARY, 'en_IN.UTF-8'); ?>
    <main>
        <div class="container" style="padding-bottom: 60px;">
            <section class="screen_1">

                @if($total_pending_til_date > 0)
                <table class="table">
                    @if($total_pending_til_date >= $emi_amount)
                    <tr>
                        <td>
                            <span style="font-weight: 400;">EMI Amount</span>
                            @if($previous_pending_amount > 0)
                            <div style="padding-top: 8px;">Previous Pending Amount</div>
                            @endif
                        </td>
                        <td style="width: 22%;">
                            ₹{!! number_format($emi_amount) !!}
                            @if($previous_pending_amount > 0)
                            <div style="font-size: 13px;padding-top: 8px;">₹{!! number_format($previous_pending_amount) !!}</div>
                            @endif
                        </td>
                    </tr>
                    @endif
                    @if($totalBounceCharge > 0)
                    <tr>
                        <td>
                            <span style="font-weight: 400;">Bounce Charge</span>
                        </td>
                        <td>+ ₹{!! number_format($totalBounceCharge) !!}</td>
                    </tr>
                    @endif
                    @if($totalDelayPenalty > 0)
                    <tr>
                        <td>
                            <span style="font-weight: 400;">Delay Penalty</span>
                            <div style="padding-top: 7px;font-size: 13px;">Delay In Days (<span>{!! $totalDelayDays !!}</span>)</div>
                        </td>
                        <td>+ ₹{!! number_format($totalDelayPenalty) !!}
                            <a data-toggle="collapse" id="show_break_up_check" data-target="#show_break_up" aria-expanded="false" aria-controls="show_break_up" class="fa fa-angle-down" style="float: right;"></a>
                        </td>
                    </tr>
                    @endif
                    @if($totalChargesWaived > 0)
                        <tr>
                            <td>
                                <span style="font-weight: 400;">Charges Waived</span>
                            </td>
                            <td>- ₹{!! number_format($totalChargesWaived) !!}</td>
                        </tr>
                    @endif
                    <tr>
                        <td colspan="2">
                            <div class="collapse in" id="show_break_up">
                                <div class="card card-body">
                                    <table>
                                        <?php $bounce_charges = 0; $delay_penalty = 0; $charges_waived = 0; ?>
                                        @foreach($data as $emi_date=>$item)
                                            @if($item['bounce_charges'] > 0 || $item['delay_penalty'] > 0)
                                            <tr>
                                                <td colspan="2">
                                                    EMI Date {!! date('d M, Y', strtotime($emi_date)) !!}
                                                </td>
                                            </tr>
                                            @if($item['bounce_charges'] > 0)
                                                <tr>
                                                    <td>
                                                        <span style="font-weight: 400;">Bounce Charge</span>
                                                    </td>
                                                    <td>+ ₹{!! number_format($item['bounce_charges']) !!}</td>
                                                </tr>
                                                <?php $bounce_charges += $item['bounce_charges']; ?>
                                            @endif
                                            @if($item['delay_penalty'] > 0)
                                                <tr>
                                                    <td>
                                                        <span style="font-weight: 400;">Delay Penalty</span>
                                                        <div style="padding-top: 7px;font-size: 13px;">Delay In Days (<span>{!! $item['delay_days'] !!}</span>)</div>
                                                    </td>
                                                    <td>+ ₹{!! number_format($item['delay_penalty']) !!}</td>
                                                </tr>
                                                <?php $delay_penalty += $item['delay_penalty']; ?>
                                            @endif
                                            @if($item['charges_waived'] > 0)
                                                <tr>
                                                    <td>
                                                        <span style="font-weight: 400;">Charges Waived</span>
                                                    </td>
                                                    <td>- ₹{!! number_format($item['charges_waived']) !!}</td>
                                                </tr>
                                                <?php $charges_waived += $item['charges_waived']; ?>
                                            @endif
                                            @endif
                                        @endforeach
                                        @if($bounce_charges > 0 || $delay_penalty > 0 || $charges_waived > 0)
                                                <tr>
                                                    <td>
                                                        <span style="font-weight: 400;">Total</span>
                                                    </td>
                                                    <td>₹{!! number_format(($bounce_charges + $delay_penalty) - $charges_waived) !!}</td>
                                                </tr>
                                        @endif
                                    </table>
                                </div>
                            </div>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <span style="font-weight: 600;">Total Payable</span>
                        </td>
                        <td>
                            <span style="font-weight: 600;">₹{!! number_format($total_pending_til_date) !!}</span>
                        </td>
                    </tr>

                    <tr>
                        <td colspan="2" style="text-align: center;">OR</td>
                    </tr>

                    <!-- Mobile & Desktop Conditions -->
                        <!-- Desktop -->
                        <tr class="d-on-checker">
                            <td>
                                Pay Custom Amount
                                <div style="padding-top: 7px;font-size: 13px;">You can pay minimum @if($total_pending_til_date >= 500) ₹500/- @else ₹{!! $total_pending_til_date !!}/- @endif</div>
                            </td>
                            <td>
                                <?php
                                $minimum_amount = 500;
                                $_max_amount = $max_amount;
                                $payable = $total_pending_til_date;
                                $final_amount = 0;
                                if($payable > $_max_amount){
                                    $_max_amount = $payable;
                                }

                                if($payable < $minimum_amount){
                                    $minimum_amount = $payable;
                                }
                                ?>
                                <input type="number" min="{!! $minimum_amount !!}" max="{!! $_max_amount !!}" class="form-control" onkeypress="return is_valid(event);" name="pay_custom_amount" id="pay_custom_amount"/>
                            </td>
                        </tr>
                        <!-- end -->
                        <!-- Mobile -->
                        <tr class="m-on-checker">
                            <td colspan="2">
                                Pay Custom Amount
                                <div style="padding-top: 7px;font-size: 13px;">You can pay minimum @if($total_pending_til_date >= 500) ₹500/- @else ₹{!! $total_pending_til_date !!}/- @endif</div>
                            </td>
                        </tr>
                        <tr class="m-on-checker">
                            <td colspan="2">
                                <?php
                                $minimum_amount = 500;
                                $_max_amount = $max_amount;
                                $payable = $total_pending_til_date;
                                $final_amount = 0;
                                if($payable > $_max_amount){
                                    $_max_amount = $payable;
                                }

                                if($payable < $minimum_amount){
                                    $minimum_amount = $payable;
                                }
                                ?>
                                <input type="number" min="{!! $minimum_amount !!}" max="{!! $_max_amount !!}" class="form-control" onkeypress="return is_valid(event);" name="pay_custom_amount" id="pay_custom_amount"/>
                            </td>
                        </tr>
                        <!-- end -->
                        <!-- parent end -->

                    <tr>
                        <td colspan="2" style="text-align: center;">
                            <div class="btn-primary btn" id="pay_now">PAY NOW</div>
                        </td>
                    </tr>
                </table>
                @else
                    <p style="text-align: center;">No dues on {!! $emi_date !!}</p>
                @endif
            </section>
        </div>
        <div class="wait-ld" style="display: none;"><img src="/assets/front/img/loading.gif"/><div style="padding-top: 10px;">Please wait</div></div>
        <div id="snackbar"></div>
    </main>
<?php $hide_table = 1; ?>
@include('front.layouts.old_footer')
<script>

    $(document).ready(function () {
        if (isMobile()) {
            $(".d-on-checker").remove();
        }else{
            $(".m-on-checker").remove();
        }
    });

    function isMobile(){
        let check = false;
        (function(a){if(/(android|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|mobile.+firefox|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows ce|xda|xiino/i.test(a)||/1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp( i|ip)|hs\-c|ht(c(\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac( |\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc\-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas\-|your|zeto|zte\-/i.test(a.substr(0,4))) check = true;})(navigator.userAgent||navigator.vendor||window.opera);
        return check;
    }

    function is_valid(evt)
    {
        let charCode = (evt.which) ? evt.which : event.keyCode;
        if (charCode > 31 && (charCode < 48 || charCode > 57))
            return false;

        return true;
    }
    $("#pay_now").click(function (event) {
        event.preventDefault();
        let minimum_amount = 500;
        let max_amount = <?php echo $max_amount; ?>;
        let payable = <?php echo $total_pending_til_date; ?>;
        let final_amount = 0;
        if(payable > max_amount){
            max_amount = payable;
        }

        let custom_payment = parseFloat($("#pay_custom_amount").val());

        if(custom_payment > 0 && isNaN(custom_payment)){
            snackBar("You've entered an incorrect amount");
            return true;
        }

        if(payable < minimum_amount){
            minimum_amount = payable;
        }

        if(custom_payment > 0 && custom_payment >= minimum_amount && custom_payment <= max_amount){
            final_amount = custom_payment;
        }else if(custom_payment < minimum_amount){
            snackBar("Amount Should Be Greater Than ₹"+minimum_amount);
            final_amount = 0;
            return true;
        }else if(custom_payment > max_amount){
            snackBar("Amount Should Be Less Than ₹"+max_amount);
            final_amount = 0;
            return true;
        }else if(custom_payment === 0){
            final_amount = 0;
        }
        var _token = '<?php echo csrf_token(); ?>';
        $(".wait-ld").removeAttr('style');
        $.ajax({
            type: 'POST',
            url: "/api/payment/validate",
            data:{f_amt:final_amount,_token:_token,id: <?php echo $id; ?>},
            dataType: "JSON",
            success: function(response) {
                if (response.status == 'OK') {
                    window.location.href = response.message;
                }else{
                    snackBar(response.message);
                }
            }
        });
    });

    function snackBar(message) {
        var x = document.getElementById("snackbar");
        x.innerText = message;
        x.className = "show";

        setTimeout(function(){ x.className = x.className.replace("show", ""); }, 3000);
    }
</script>