@php
  use \App\Http\Controllers\microfin\savings\MfnSavingsDepositTypeController as createForm;
@endphp
<div class="row">
    <div class="col-lg-12">
        <div class="table-responsive">
            <table class="table table-striped table-bordered action" border="1pt solid ash" style="color:black; border-collapse: collapse;">
                <thead>
                    <tr>
                        <th width="5%">SL#</th>   
                        <th width="180px;">LOAN CODE</th>
                        <th>SAMITY CODE</th>
                        <th>MEMBER CODE</th>
                        <th>DATE</th>
                        <th>WRITE OFF <br> COLLECTION AMOUNT</th>
                        <th>MODE OF PAYMENT</th>
                        <th>ENTRY BY</th>
                        <th width="100px;">ACTION</th>
                    </tr>
                </thead>
                <tbody>
                    @foreach ($writeOffcollections as $key => $writeOffcollection)
                        <tr>
                            @if (!isset($not_paginate))
                              <td>{{ ($writeOffcollections->currentPage() - 1) * $writeOffcollections->perPage() + $loop->iteration }}</td>
                            @else
                                <td>{{$loop->iteration}}</td>
                            @endif
                            <td>{{ $loans->where('id',$writeOffcollection->loanIdFk)->first()->loanCode }}</td>
                            <td>{{ $samities->where('id',$writeOffcollection->samityIdFk)->first()->code }}</td>
                            <td>{{ $members->where('id',$writeOffcollection->memberIdFk)->first()->code }}</td>
                            <td>{{ date('d-m-Y',strtotime($writeOffcollection->date)) }}</td>
                            <td class="amount">{{ number_format($writeOffcollection->amount,2) }}</td>
                            <td class="name">{{ $writeOffcollection->paymentType }}</td>
                            <td style="text-align: left; padding-left: 5px;">{{$writeOffcollection->entryByEmpName}}</td>
                            <td>                                                 
                                <a href="javascript:;" class="showDetails" data-id="{{$writeOffcollection->id}}">
                                    <i class="fa fa-eye" aria-hidden="true"></i>
                                </a>
                                @php
                                    if ($softwareDate!=$writeOffcollection->date) {
                                        $editClassName = 'not-active';
                                        $deleteClassName = 'not-active';
                                    }
                                    else{
                                        $editClassName = 'showUpdateForm';
                                        $deleteClassName = 'deleteConfirmation';
                                    }
                                @endphp
                                {{-- <a href="javascript:;" class="{{$editClassName}}" data-id="{{$writeOffcollection->id}}">
                                  <i class="fa fa-pencil-square-o fa-lg" aria-hidden="true"></i>
                                </a> --}}
                                <a href="javascript:;" class="{{$deleteClassName}}" data-id="{{$writeOffcollection->id}}">
                                    <i class="fa fa-trash-o fa-lg" aria-hidden="true"></i>
                                </a>                            
                            </td>
                        </tr>
                    @endforeach
                </tbody>
            </table>
             <!-- Bottom Pagination -->
            @if (!isset($not_paginate))
                @if($writeOffcollections->hasPages())
                  <div class="text-center">
                      {{ $writeOffcollections->appends(request()->except('page'))->links() }}
                  </div>
                @endif
            @endif
        </div>{{-- responseDIV --}}
    </div> 
</div>  {{-- end first table --}}


{{-- View Modal --}}
<div class="modal fade" id="show-details-modal">
  <div class="modal-dialog" style="width:750px">
    <div class="modal-content">
      <div class="panel panel-color panel-black">
        <div class="panel-heading">
          <h4 class="panel-title">Loan Writeoff Collection Details</h4>
          <div class="panel-options">
            <a class="close" href="#" data-dismiss="modal">X</a>
          </div>
        </div>
        <div style="padding:0" class="panel-body">
          <div class="table-responsive" style="border:none!important;margin:0">
            <table id="detailsModalTable" cellspacing="0" cellpadding="0" class="table table-small-font table-striped samity-details-table-wrapper" style="color: black;">
              <tbody>
                
              </tbody>
            </table>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
{{-- End View Modal --}}

{{-- Edit Modal --}}
<div class="modal fade" id="show-update-modal" style="padding-top: 5% !important;">
  <div class="modal-dialog" style="width:1050px">
    {!! Form::open(array('url' => '', 'role' => 'form', 'class' => 'form-horizontal form-groups','id'=>'updateForm')) !!}
      <div class="modal-heading" style="background-color:#000;color:#FFF;padding:10px 15px!important;">
        <h4 class="modal-title">Update Wtiteoff Collection</h4>
        <div class="panel-options">
          <a class="close" href="#" data-dismiss="modal">X</a>
        </div>
      </div>
      <div class="modal-content">
        <div class="modal-body">
          <div class="row">
                
          <div class="tab-content no-margin">
            <div class="tab-pane with-bg active" id="fwv-1">
              <div class="panel panel-default" style="padding:0!important;">
                
                <div class="panel-body" style="padding:0px 5px;">
                  <div class="row">
                        <div class="col-xs-6">

                        {!! Form::hidden('writeOffCollectionId',null,['id'=>'writeOffCollectionId']) !!}

                        {!! createForm::text('member',null,'Member:',['id'=>'member','autocomplete'=>'off','readonly'=>'readonly']) !!}
                        {!! createForm::text('loanCode',null,'Loan Id:',['id'=>'loanCode','autocomplete'=>'off','readonly'=>'readonly']) !!}
                        {!! createForm::text('writeOffDate',null,'Write Off Date:',['id'=>'writeOffDate','autocomplete'=>'off','readonly'=>'readonly','style'=>'cursor:pointer']) !!}

                        {!! createForm::text('writeOffAmount',null,'Write Off Amount:',['id'=>'writeOffAmount','autocomplete'=>'off','readonly'=>'readonly']) !!}

                        {!! createForm::text('writeOffCollectionDate','','Writeoff Collection Date:',['id'=>'writeOffCollectionDate','autocomplete'=>'off','readonly'=>'readonly']) !!}

                        {!! createForm::text('writeOffCollectionAmount','','Writeoff Collection Amount:',['id'=>'writeOffCollectionAmount','autocomplete'=>'off','amountLimit'=>null, 'required'=>'required']) !!}

                        <div class="form-group">
                          {!! Form::label('notes', 'Notes:', ['class' => 'col-sm-4 control-label']) !!}
                            <div class="col-sm-8">
                             {!! Form::textarea('notes','',['class'=>'form-control','rows'=>4]) !!}
                            </div>                                            
                        </div>


                        </div>{{-- End First Column --}}

                        {{-- Second Coloum --}}
                        <div class="col-xs-6" >

                @php
                  $tableRows = ['Payable','Transaction','Outstanding','Installment','Wtiteoff Collection'];
                @endphp

              <h4 id="loanInfoTableHeading">Loan Information</h4>
              <table id="loanInfoTable" class="table table-striped table-bordered">
                 <thead>
                   <tr>
                     <th>Loan</th>
                     <th>Total</th>
                     <th>Principal</th>
                     <th>Interest</th>
                   </tr>
                 </thead>
                 <tbody>
                  @foreach ($tableRows as $tableRow)
                    <tr class="{{$tableRow}}">
                     <td class="name">{{$tableRow}}</td>
                     <td class="amount"></td>
                     <td class="amount"></td>
                     <td class="amount"></td>
                    </tr>
                  @endforeach
                   
                 </tbody>
              </table>          

              
            </div>
                        {{-- End Second Coloum --}}
                        
                      </div>
                  
                </div>
              </div>
            </div>
            
            </div>
              
            </div>
        </div>
      </div>
      <div class="modal-footer" style="background-color:#FFF;color:#FFF;">
        <button type="submit" class="btn btn-info animated slideInRight" style="margin-bottom:0!important;">Save</button>
        <button type="button" class="btn btn-white animated slideInRight" data-dismiss="modal" style="margin-bottom:0!important;">Close</button>
      </div>
    {!! Form::close() !!}
  </div>
</div>
{{-- End Edit Modal --}}


{{-- Delete Modal --}}
<div class="modal fade" id="delete-confirmation-modal">
  <div class="modal-dialog">
    <div class="modal-header">
      <h4 class="modal-title">Delete Confirmation</h4>
      <a class="close" href="#" data-dismiss="modal">X</a>
    </div>
    <div class="modal-content">
      <div class="modal-body" style="color: black;">
        Are you sure to delete this record?
      </div>
    </div>
    <div class="modal-footer">
      <div class="form-group hidden">
        <div class="col-sm-6 col-sm-offset-2">
          {!! Form::text('id', null, ['class' => 'form-control', 'id' => 'id', 'type' => 'text', 'readonly']) !!}
        </div>
      </div>
      <button id="yesBtn" type="button" class="btn btn-info animated slideInRight" style="margin-bottom:0!important;" >Yes</button>
      <button id="noBtn" type="button" class="btn btn-white animated slideInRight" data-dismiss="modal" style="margin-bottom:0!important;">No</button>
    </div>
  </div>
</div>
{{-- End Delete Modal --}}

<style type="text/css">
    .fa-chevron-circle-right{
        font-size: 16px;
    }
    .not-active {
      pointer-events: none;
      cursor: default;
      text-decoration: none;
      color: black;
    }
</style>

<style type="text/css">

#areaListView thead tr th{
    padding: 2px;
}

#detailsModalTable tbody tr td{
    width: 25%;
    text-align: left;
    padding-left: 5px;
}

.modal {
  text-align: center;
  padding: 0!important;
}

.modal:before {
  content: '';
  display: inline-block;
  height: 100%;
  vertical-align: middle;
  margin-right: -4px; /* Adjusts for spacing */
}

.modal-dialog {

  display: inline-block;
  text-align: left;
  vertical-align: middle;
}


    .cbr-replaced {
        top: 8px!important;
    }
    table.samity-details-table-wrapper tbody tr td {
        padding: 0;
        border-bottom: none !important;
        /*vertical-align: top !important;*/
    }
    table.samity-details-table tbody tr td {
        text-align: left;
        padding: 3px 5px !important;
        font-size: 11px;
        border-bottom: 1px solid #EEE!important;
    }
    table.TTitleFirstTable tbody tr:last-child td,
    table.TValueFirstTable tbody tr:last-child td,
    table.TTitleSecondTable tbody tr:last-child td, 
    table.TValueSecondTable tbody tr:last-child td {
        border-bottom: none !important;
    }
    table.samity-details-table tbody tr th {
        text-align: left;
        padding: 3px 5px;
        font-weight: normal;
        font-size:11px;
    }
    table.samity-details-table-wrapper tr:nth-child(odd),
    table.samity-details-table tr:nth-child(odd),
    table#TTitleFirst tr:nth-child(odd),
    table#TValueFirst tr:nth-child(odd),
    table#TTitleSecond tr:nth-child(odd),
    table#TValueSecond tr:nth-child(odd) {
        background-color: #f9f9f9 !important;
    }
    table.samity-details-table-wrapper tbody tr:nth-child(even):hover td,
    table.samity-details-table tbody tr:nth-child(even):hover td
    table#TTitleFirst tbody tr:nth-child(even):hover td,
    table#TValueFirst tbody tr:nth-child(even):hover td,
    table#TTitleSecond tbody tr:nth-child(even):hover td,
    table#TValueSecond tbody tr:nth-child(even):hover td {
        background-color:#FFF !important;
    }
    table tbody tr td.name{
        text-align: left;
        padding-left: 5px;
    }
</style>

<script type="text/javascript">
    $(document).ready(function() {

        $('#loadingModal').hide();

        function num(argument){
            return argument.toLocaleString('en-US', { minimumFractionDigits: 2, maximumFractionDigits: 2 });
        }
        
        /*View Modal*/
        $(document).on('click', '.showDetails', function(event) {

            // if (hasAccess('./mfn/getWriteOffCollectionDetails/')) { 
            $.ajax({
                url: './../mfn/getWriteOffCollectionDetails',
                type: 'POST',
                dataType: 'json',
                data: {
                  'id': $(this).data('id')
                },
            })
            .done(function(data) {
                $("#detailsModalTable tbody").empty();
                var markup = "";
                $.each(data.tFirst, function(index, value) {                   
                    markup = markup + "<tr>"+
                            "<td>"+index+"</td>"+
                            "<td>"+value+"</td>"+
                            "<td></td>"+
                            "<td></td>"+
                            "</tr>";
                });
                $("#detailsModalTable tbody").append(markup);
                
                var i = 0;
                $.each(data.tSecond, function(index, value) {                   
                    $("#detailsModalTable tbody tr").eq(i).find('td:nth-child(3)').html(index);
                    $("#detailsModalTable tbody tr").eq(i).find('td:nth-child(4)').html(value);
                    i++;
                });
                
                
                jQuery('#show-details-modal').modal('show', {backdrop: 'fade'});
            })
            .fail(function() {
                alert("error");
            })  
            // }   
            
        });
        /*End View MOdal*/

        /*Edit Modal*/
        $(document).on('click', '.showUpdateForm', function() {
            $("#writeOffCollectionId").val($(this).data('id'));
           
            $.ajax({
                url: './../mfn/getWriteOffCollectionDetailsToUpdate',
                type: 'POST',
                dataType: 'json',
                data: {
                    operation: "update",
                    id : $(this).data('id')
                },
            })
            .done(function(data) {

                $("#member").val(data['tFirst']['Member Code:']+' - '+data['tFirst']['Member Name:']);
                $("#loanCode").val(data['tFirst']['Loan Code:']);
                $("#writeOffDate").val(data['info']['writeOffDate']);
                $("#writeOffAmount").val(data['info']['writeOffAmount']);
                $("#writeOffCollectionDate").val(data['tSecond']['WriteOff Collection Date:']);
                $("#writeOffCollectionAmount").val(data['info']['writeOffCollectionAmountPlain']);
                $("#writeOffCollectionAmount").attr('initialValue',data['info']['writeOffCollectionAmountPlain']);
                $("#writeOffCollectionAmount").attr('amountLimit',data['info']['writeOffEligibleAmount']);
                $("#notes").val(data['tFirst']['Notes:']);
                

                $.ajax({
                    url: './../mfnGetLoanInfoForWriteOffCollection',
                    type: 'POST',
                    dataType: 'json',
                    data: {loanId: data['info']['loanId']},
                    async: false,
                   })
                   .done(function(data) {
                        var element = $("#loanInfoTable tbody").find('.Payable');
                        element.find('td').eq(1).html(data['payableTotal']);
                        element.find('td').eq(2).html(data['payablePricipal']);
                        element.find('td').eq(3).html(data['payableInterest']);

                        var element = $("#loanInfoTable tbody").find('.Transaction');
                        element.find('td').eq(1).html(data['traTotal']);
                        element.find('td').eq(2).html(data['traPrincipal']);
                        element.find('td').eq(3).html(data['traInterest']);

                        var element = $("#loanInfoTable tbody").find('.Outstanding');
                        element.find('td').eq(1).html(data['outStandingAmount']);
                        element.find('td').eq(2).html(data['principalAmount']);
                        element.find('td').eq(3).html(data['interestAmount']);

                        var element = $("#loanInfoTable tbody").find('.Installment');
                        element.find('td').eq(1).html(data['installmentTotal']);
                        element.find('td').eq(2).html(data['installmentPrincipal']);
                        element.find('td').eq(3).html(data['installmentInterest']);

                        var element = $("#loanInfoTable tbody").find('.Wtiteoff.Collection');
                        element.find('td').eq(1).html(data['writeoffCollectionAmount']);
                        element.find('td').eq(2).html(data['writeoffCollectionPrincipalAmount']);
                        element.find('td').eq(3).html(data['writeoffCollectionInterestAmount']);

                        element.find('td').eq(1).attr('initialValue',data['writeoffCollectionAmountPlain']);
                        element.find('td').eq(1).attr('interestRateIndex',data['interestRateIndex']);
                        element.find('td').eq(2).attr('initialValue',data['writeoffCollectionPrincipalAmountPlain']);
                        element.find('td').eq(3).attr('initialValue',data['writeoffCollectionInterestAmountPlain']);
                   })
                   .fail(function() {
                    alert("error");
                   });
                
                $('#show-update-modal').modal('show', {backdrop: 'static'});
            })
            .fail(function() {
                console.log("error");
            });  
            
            
        });
        /*End Edit Modal*/


    
        /*Delete Modal*/
        $(document).on('click', '.deleteConfirmation', function() {
            if (hasAccess('mfn/deleteLoanWriteOff')) {
            $('#id').val($(this).data('id'));
            jQuery('#delete-confirmation-modal').modal('show', {backdrop: 'fade'});
            }
        });
        /*End Delete Modal*/

        /*Delete Product*/
        $("#yesBtn").click(function(event) {
            $.ajax({
                url: './deleteLoanWriteOffCollection',
                type: 'POST',
                dataType: 'json',
                data: {
                    id: $('#id').val()
                },
            })
            .done(function(data) {
                
                toastr.success(data.responseText, data.responseTitle, opts);
                    
                    setTimeout(function(){
                        location.reload();
                    }, 3000);
            })
            .fail(function() {
                alert("error");
            })
            
            
        });
        /*End Delete Product*/

        $("#writeOffCollectionAmount").on('input', function() {         
            this.value = this.value.replace(/[^0-9.]/g, '').replace(/(\..*)\./g, '$1');

            $('.amountLimitError').remove();
        
          var writeOffCollectionAmount = 0;
          if (this.value!='') {
            writeOffCollectionAmount = parseFloat(this.value);
          }

          var amountLimit = parseFloat($(this).attr('amountLimit'));

          var element = $("#loanInfoTable tbody").find('.Wtiteoff.Collection');         

          var initialTotal = parseFloat(element.find('td').eq(1).attr('initialValue'));
          var interestRateIndex = parseFloat(element.find('td').eq(1).attr('interestRateIndex'));
          var initialPrincipal = parseFloat(element.find('td').eq(2).attr('initialValue'));
          var initialInterest = parseFloat(element.find('td').eq(3).attr('initialValue')); 


          if (writeOffCollectionAmount>amountLimit) {
            this.value = '';
            $(this).after("<p style='color:red;' class='amountLimitError'>* Collection amount should be less or equal to writeoff amount.</p>");
            var initialValue = parseFloat($(this).attr('initialValue'));

            var newTotal = initialTotal + initialValue;
            var newPrincipal = (newTotal/interestRateIndex).toFixed(2);
            var newInterest = newTotal - newPrincipal;



            element.find('td').eq(1).html(num(newTotal));
            element.find('td').eq(2).html(num(newPrincipal));
            element.find('td').eq(3).html(num(newInterest));
          }
          else{
            var initialCollectionAmount = parseFloat($(this).attr('initialValue'));
            var difference = writeOffCollectionAmount - initialCollectionAmount;

            var newTotal = initialTotal + difference;
            var newPrincipal = (newTotal/interestRateIndex).toFixed(2);
            var newInterest = newTotal - newPrincipal;

            element.find('td').eq(1).html(num(newTotal));
            element.find('td').eq(2).html(num(newPrincipal));
            element.find('td').eq(3).html(num(newInterest));

          }
        });

  $("#updateForm").submit(function(event) {
        event.preventDefault();

        $.ajax({
            type: 'post',
            url: './../mfn/updateLoanWriteOffCollection',
            data: $("#updateForm").serialize(),
            dataType: 'json',
            success: function(_response) {
              
              $(".error").remove();
                if(_response.errors) {
                  $.each(_response.errors, function(name, error) {
                     $("#"+name).after("<p class='error'>* "+_response.errors[name]+"</p>");
                  });
                } 
                else { 
                  if (_response.responseTitle=='Warning!') {
                    toastr.warning(_response.responseText, _response.responseTitle, opts);
                  }
                  else{
                    toastr.success(_response.responseText, _response.responseTitle, opts);
                    
                    setTimeout(function(){
                        location.reload();
                    }, 3000);

                  }                
                    
                }
            },
            error: function(_response) {
                alert('Response Error');
            }
        });
    });

}); /*End Ready*/
</script>