@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 width="100px;">REASON<br>(IS DEATH?)</th>      
            <th>DATE</th>
            <th>WRITE OFF AMOUNT</th>
            <th>NOTES</th>
            <th width="100px;">ACTION</th>
          </tr>
        </thead>
        <tbody>

          @foreach ($writeOffs as $key => $writeOff)
          <tr>
            @if (!isset($not_paginate))
              <td>{{ ($writeOffs->currentPage() - 1) * $writeOffs->perPage() + $loop->iteration }}</td>
            @else
                <td>{{$loop->iteration}}</td>
            @endif
            <td>{{ $loans->where('id',$writeOff->loanIdFk)->first()->loanCode }}</td>
            <td>{{ $samities->where('id',$writeOff->samityIdFk)->first()->code }}</td>
            <td>{{ $members->where('id',$writeOff->memberIdFk)->first()->code }}</td>
            <td>
              @if($writeOff->isDeath==1)
              {{ "Yes" }}
              @else
              {{ "No" }}
              @endif
            </td>
            <td>{{ date('d-m-Y',strtotime($writeOff->date)) }}</td>
            <td class="amount">{{ number_format($writeOff->amount,2) }}</td>
            <td class="name">{{ $writeOff->notes }}</td>
            <td>
              <a href="{{ url('mfn/addWriteOffCollection').'/'.encrypt($writeOff->id) }}" title="Add New Collection">
                <i class="fa fa-plus-circle" aria-hidden="true"></i>
              </a>                                              
              <a href="javascript:;" class="showDetails" data-id="{{$writeOff->id}}">
                <i class="fa fa-eye" aria-hidden="true"></i>
              </a>
              @php
              $writeOffCollectionNum = $writeOffCollections->where('loanIdFk',$writeOff->loanIdFk)->count();
              if ($softwareDate!=$writeOff->date || $writeOffCollectionNum>0) {
                $deleteClassName = 'not-active';
              }
              else{
                $deleteClassName = 'deleteConfirmation';
              }
              $deleteClassName = 'deleteConfirmation';
              @endphp
              <a href="javascript:;" class="{{$deleteClassName}}" data-id="{{$writeOff->id}}">
                <i class="fa fa-trash-o fa-lg" aria-hidden="true"></i>
              </a>                            
            </td>
          </tr>

          @endforeach
          <tr style="font-weight: bold;">
            <td colspan="6">Total</td>
            <td class="amount">{{ number_format($writeOffs->sum('amount'),2) }}</td>
            <td></td>
            <td></td>
          </tr>

        </tbody>
        
      </table>
       <!-- Bottom Pagination -->
      @if (!isset($not_paginate))
          @if($writeOffs->hasPages())
            <div class="text-center">
                {{ $writeOffs->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 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 --}}


{{-- 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/getWriteOffDetails')) { 
        $.ajax({
          url: './getWriteOffDetails',
          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*/


    
    /*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: './deleteLoanWriteOff',
        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*/

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

    /*check the amount limit of waiver amount*/
    $("#rebateAmount").on('input', function(event) {
      $(".amountLimit").remove();
      var amountLimit = parseFloat($(this).attr('amountlimit'));
      var inputAmount = 0;
      if (this.value!='') {
        inputAmount = parseFloat(this.value);
      }
      console.log(inputAmount);
      console.log(amountLimit);
      console.log('    ');
      if (inputAmount>amountLimit) {
        this.value = '';
        $(this).after("<p class='amountLimit' style='color:red;'>* Amount can not be greater than the Outstanding Interest Amount.</p>");

        var element = $("#loanInfoTable tbody tr:last");
        element.find('td').eq(1).html('');
        element.find('td').eq(2).html('');
        element.find('td').eq(3).html('');
      }
      else{
        calculatePayableAmountAfterRebate(inputAmount);
      }

    });
    /*end check the amount limit of waiver amount*/

    /*calculate payable amount after rebate*/
    function calculatePayableAmountAfterRebate(rebateAmount) {
      var rebateAmount = parseFloat(rebateAmount);
      var principalAmount = 0;
      var interestAmount = 0;
      if ($("#principalAmount").val().replace(',','')!='') {
        var principalAmount = parseFloat($("#principalAmount").val().replace(',',''));            
      }
      if ($("#interestAmount").val().replace(',','')!='') {
        var interestAmount = parseFloat($("#interestAmount").val().replace(',',''));            
      }
      var element = $("#loanInfoTable tbody tr:last");
      element.find('td').eq(1).html(num(principalAmount+interestAmount-rebateAmount));
      element.find('td').eq(2).html(num(principalAmount));
      element.find('td').eq(3).html(num(interestAmount-rebateAmount));
    }
    /*end calculating payable amount after rebate*/


    $('#filDateFrom').datepicker({
      dateFormat: 'dd-mm-yy',
      changeYear: true,
      changeMonth: true,
      onSelect: function(){
        thisDate = $("#filDateFrom").datepicker('getDate');
        $('#filDateTo').datepicker('option','minDate',thisDate);
      }
    });

    $('#filDateTo').datepicker({
      dateFormat: 'dd-mm-yy',
      changeYear: true,
      changeMonth: true,
      onSelect: function(){
        thisDate = $("#filDateTo").datepicker('getDate');
        $('#filDateFrom').datepicker('option','maxDate',thisDate);
      }
    });

    $('#filDateFrom,#filDateTo').click(function(event) {
     this.value = '';
   });

    /*on change branch get the samity list*/
    $("#filBranch").change(function(event) {
      var branchId = $(this).val();
      $.ajax({
        url: './getMfnBranchWiseSamityList',
        type: 'POST',
        dataType: 'json',
        data: {branchId: branchId},
      })
      .done(function(samityList) {
        $("#filSamity option:gt(0)").remove();
        $.each(samityList, function(index, val) {
         $("#filSamity").append("<option value='"+index+"'>"+val+"</option>");
       });
      })
      .fail(function() {
        alert("error");
      });

    });
    /*end on change branch get the samity list*/


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