@extends('portal.layout.app')
<link rel="stylesheet" href="{{ URL::asset('assets/css/global.css') }}">
<link rel="stylesheet" href="{{ URL::asset('assets/css/input.css') }}">
<link rel="stylesheet" href="{{ URL::asset('assets/plugins/bootstrap/css/bootstrap.min.css') }}">
@section('content')
<style>
    .modal-dialog {
        margin-right: 40% !important;
    }
    .principal {
        text-align: right;
        width: 25%;
    }
    .balance {
        text-align: right;
        width: 24%;
    }
    .amount {
        text-align: right;
        width: 57%;
    }
    /*Allign columns and rows of table*/
    .table tr th, .table tr td {
        width: 119px !important;
        padding: 7px 15px;
    }
    .table table tr {
            display: table;
            width: 1208px !important;
            box-sizing: border-box;
    }
    .table table thead {
        display: table;
        width: 100%;
    }
    .table table tbody {
        display: block;
        max-height: 597px;
        overflow-y: auto;
        width: 1208px;
        overflow-x: hidden !important;
    }
    /*End allignment*/
   .notification_custom {
      bottom: 6% !important;
      margin-top: 0px !important;
      margin-right: auto !important;
      margin-left: auto !important;
   }
    .modal_title {
        margin-top:  -7px;
        margin-left: -2px;
    }
    table thead tr th span {
    margin-left: 13px !important;
    }
        ::placeholder{
        color: transparent; !important;
    }
    .select:after {
        border-left: 5px solid transparent;
        border-right: 5px solid transparent;
        border-top: 5px solid #333333;
        position: absolute;
        top: 11px !important;
        right: 9px;
     }
    label{
        font-size: 12px !important;
    }
    .margin_top_eighteen {
        margin-top: -18px !important;
    }
    .select:after {
        top: 12px;
    }
    .dropdown_width {
        width:  261px !important;
    }
    .margin_top_thirteen{
        margin-top: -13px !important;
    }
    .table tbody tr td{
        padding: 7.5px;
    }
    .table thead tr th{
        padding: 6.5px;
    }
    .search_btn {
        margin-right: -2px;
        margin-left: 5px;
        margin-top: -1px;
    }
    .modal-header {
        height: 29px !important;
    }
    .modal_height {
        height: 150px;
    }
    .decrease_height {
        height: 109px;
    }
    .modal-dialog {
        margin-right: 751px;
    }
    .select-text{
        padding-top: 6px;
        padding-left: 8px;
        font-size: 11px;
        font-family: Roboto, sans-serif;
    }
    .dropdown_height {
        height: 26px !important;
    }
    .width {
        width: 260px;
    }
    .datepicker {
        left: 40% !important;
        position: absolute !important;
        z-index: 9999;
    }
    .form-check-inline{
        width: 50px;
    }
    .form-check-inline input{
        width: 15px;
    }
    .form-check-label{
        top: 14px !important;
        margin-left: 20px;
        font-size: 14px;
        color: black;
    }
    .margin-left-eight {
        margin-left: 8px !important;
    }
    .select:after {
        right: 86px important;
    }
    .active{
        background-color: #3080EA !important;
        color: white !important;
    }
</style>
<div class="breadcrum">
    HrServices / Loan & Advances / <span class="text-primary">Amortization </span>
</div>
<section class="expense">
    <div class="row">
        <div class="container-fluid">
            <div class="expense_header reason_box_width margin_left_one">
                <div class="expense_table">
                    <div class="row">
                        <div class="col-md-12">
                            <div class="expense_table_hader">
                                <div class="row">
                                    <div class="col-md-8">
                                        <div class="header_left">
                                            Amortization Schedule
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="table">
                                <table>
                                    <thead>
                                        <tr>
                                            <th><span>Sr #</span></th>
                                            <th>Payroll Month</th>
                                            <th>Monthly Installment</th>
                                            <th>Principal</th>
                                            <th>Balance</th>
                                            <th>Status</th>
                                        </tr>
                                        <tr>
                                    </thead>
                                    <tbody>
                                        @foreach ($data as $app)
                                        @php
                                            $app=(object)$app;
                                        @endphp
                                        <tr>
                                            <td><div><span>{{$app->sno}}</span></div></td>
                                            <td style="padding-left: 5px !important;">{{$app->payroll_month}}</td>
                                            <td><div class="amount">{{number_format($app->monthly_installment)}}</div></td>
                                            <td><div class="principal">{{number_format($app->principal)}}</div></td>
                                            <td><div class="balance">{{number_format($app->balance)}}</div></td>
                                            <td>
                                                @if($app->status == "recieved")
                                                <span class="text-success" @if($app->schedule_status != 'N/A') data-toggle="tooltip" title="{{ucfirst($app->schedule_status)}} @endif">Received</span>
                                                @elseif($app->status == "N/A")
                                                <span data-toggle="tooltip" title="{{ucfirst($app->schedule_status)}}">N/A</span>
                                                @elseif($app->status == "rescheduled")
                                                <span class="text-danger">Rescheduled</span>
                                                @elseif($app->status == "pending")
                                                @if(strtotime($app->payroll_month) <= strtotime(date('M-Y')))
                                                <span class="text-primary" onclick="openModel('{{$app->balance}}' , '{{$app->monthly_installment}}' , '{{$app->la_req_id}}' , '{{$app->installment_id}}','{{$app->empid}}','{{$app->status}}')" style="cursor:pointer;">Pending</span>
                                                @else
                                                 <span class="text-warning">Pending</span>
                                                @endif
                                                @endif
                                            </td>
                                        </tr>
                                        @endforeach
                                    </tbody>
                                </table>
                            </div>
                            <div class="expense_table_footer" />
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
<div class="modal" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabelexampleModal" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content modal_content" style="width:600px !important;">
            <div class="modal-header">
                <span class="modal-title modal_title" id="myModalLabelexampleModal"><b>Reschedule</b></span>
                <a class="close close_btn" data-dismiss="modal" aria-label="Close" style="padding: 4px 10px;">
                    <span class="test" aria-hidden="true" style="padding-top: 5px !important;">&times;</span>
                </a>
            </div>
            <form action="{{route('update_installment_reschedule')}}" method="POST" style="margin-bottom: 0; margin-top: -2px;">
                <div class="modal-body modal_body modal_height">

                    @csrf
                    <input type="hidden" id="loan_request_id" name="loan_request_id">
                    <input type="hidden" id="installment_id" name="installment_id">
                    <input type="hidden" id="secondtype" name="secondtype" value="1">
                    <input type="hidden" name="empId" id="empId_loan">
                    <input type="hidden" name="rescheduling" class="rescheduling">
                    
                    <div class="row mb-4">
                        <div class="col-lg-12 input_div display_item_flex">
                            <div class="material-textfield margin-left-eight">
                                <input value="" name="outstanding_balance" type="text" readonly id="outstanding_balance">
                                <label>Outstanding Balance</label>
                            </div>
                            <div class="material-textfield margin_left_thirtyeight">
                                <input value="" name="monthly_installment" type="text" readonly id="monthly_installment">
                                <label>Monthly Installment</label>
                            </div>
                        </div>
                    </div>
                    <div class="row mb-4">
                        <div class="col-lg-12 input_div display_item_flex">
                            <div class="margin-left-eight dropdown_width margin_top_thirteen">
                              <button class="dropdown_custom table_dropdown common_dropdown_properties changeres" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" style="width: 262px !important;height: 26px;" value=1>
                                <span style="
                                    display: inline-block;
                                    width: 85%;
                                    margin-left: 4px !important;
                                    text-overflow: ellipsis;
                                    white-space: nowrap;
                                    overflow: hidden;
                                ">Rescheduling</span>
                                <span style="margin-left: 18px !important;margin-top: 3px;position: fixed;">
                                    <svg xmlns="http://www.w3.org/2000/svg" width="10" height="6" viewBox="0 0 10 6">
                                      <path id="Down_Arrow" data-name="Down Arrow" d="M5,0l5,6H0Z" transform="translate(10 6) rotate(180)" fill="#343434"/>
                                    </svg>
                                </span>
                              </button>
                              <div class="dropdown-menu" aria-labelledby="dropdownMenuButton" style="width: 261px;!important">
                                    <a class="dropdown-item dropdown_option_custom" key-value="1">Change Tenure</a>
                                    <a class="dropdown-item dropdown_option_custom" key-value="2">Next Month</a>
                                    <a class="dropdown-item dropdown_option_custom" key-value="3">Balloon Payment</a>
                              </div>
                            </div>

                            <!-- <div class="select margin-left-eight dropdown_width margin_top_thirteen">
                                <select class="select-text dropdown_height width" required name="rescheduling" id="changeres">
                                    <option value="1">Change Tenure</option>
                                    <option value="2">Next Month</option>
                                    <option value="3">Balloon Payment</option>
                                </select>
                                <label class="select-label ">Rescheduling</label>
                            </div> -->
                        </div>
                    </div>
                    <div class="row mb-4">
                        <div class="col-lg-12 input_div display_item_flex" id="changeData">
                            <div class="material-textfield margin-left-eight margin_top_thirteen">
                                <input name="from_date" placeholder="From" class="dateselect" type="text" autocomplete="off">
                                <label class="font_size_eleven">From</label>
                            </div>
                            <div class="material-textfield margin_left_thirtyeight margin_top_thirteen">
                                <input name="to_date" placeholder="To" class="dateselect" type="text" autocomplete="off">
                                <label class="font_size_eleven">To</label>
                            </div>
                        </div>
                    </div>

                </div>
                <div class="modal-footer py-2" style="background-color: #D6D6D6; height: 29px;">
                    <div>
                    <button type="submit" class="search_btn">Submit</button>
                    <button type="submit" class="search_btn" data-dismiss="modal" aria-label="Close">Cancel</button>
                </div>

            <!--         <button type="submit" class="btn btn-sm py-0">Submit</button>
                    <button type="button" class="btn btn-sm py-0" data-dismiss="modal" aria-label="Close">Cancel</button> -->
                </div>
            </form>
        </div>
    </div>
</div>
@include('notification')
@stop
@section('scripts')
<script src="{{ URL::asset('assets/plugins/bootstrap/js/bootstrap.min.js') }}"></script>
 <script src="{{ URL::asset('assets/js/calendar.js') }}"></script>
<!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/js/bootstrap-datepicker.min.js"></script> -->
<script>
         
    var response_message =