@extends('adminlte::page')
@section('css')
<style>
  .select2 {
    width: 100% !important;
    padding-top: 10px;
    border: 1px solid #d2d6de;
    padding-left: 5px;
  }

  li[aria-disabled="true"] {
    background-color: gainsboro !important;
    font-weight: bold !important;
  }

  .center-div {
    width: 60%;
    margin: 0 auto
  }

  .step {
    border: none !important;
  }
</style>
@stop
@section('content')
<?php Fun::lang() ?>
<div class="page">
  <div class="row" id="form_addnew">
    <div class="col-md-12">
      <div class="portlet box blue" id="form_wizard_1">
        <div class="portlet-title">
          <div class="caption">
            <i class="icon-reorder"></i>
            <span>Generate Schedule Maintenance</span>
          </div>
          <div class="tools hidden-xs">
            <a href="javascript:;" class="collapse"></a>
            <a href="#portlet-config" data-toggle="modal" class="config"></a>
            <a href="javascript:;" class="reload"></a>
            <a href="javascript:;" class="remove"></a>
          </div>
        </div>
        <div class="portlet-body form">
          <form action="{{ route('maintenance-list.store')}}" class="form-horizontal" id="submit_form" enctype="multipart/form-data" method="POST">
            {{ csrf_field() }}
            <div class="form-wizard">
              <div class="form-body">

                <div class="tab-content">
                  <div class="form-group first-loan-generate">
                    <div class="col-md-12">
                      <div class="col-md-4">

                        <div class="col-md-12 ">
                          <div class="form-group">
                            <label class="col-md-4  control-label">House Type <span class="required" aria-required="true">*</span></label>
                            <div class="col-md-8">
                              <input type="text" name="house_type" class="form-control" id="house_type" value="{{$sub_category_amount->sub_category_name}}"  readonly="readonly">
                            </div>
                          </div>
                        </div>
                        <div class="col-md-12 ">
                          <div class="form-group">
                            <label class="col-md-4  control-label">Amount <span class="required" aria-required="true">*</span></label>
                            <div class="col-md-8">
                              <input type="text" name="loan_amount" class="form-control znumber number-only" id="loan_amount_main" value="{{$sub_category_amount->sub_category_amount}}"  readonly="readonly">
                            </div>
                          </div>
                        </div>
                      </div>

                      <div class="col-md-4">
                        <div class="col-md-12 ">
                          <div class="form-group">
                            <label class="col-md-4  control-label">Duration <span class="required" aria-required="true">*</span></label>
                            <div class="col-md-8">
                              <input type="text" name="loan_duration" class="form-control number-only" id="loan_duration" value="" placeholder="">
                            </div>
                          </div>
                        </div>
                      </div>

                      <div class="col-md-4">
                        <div class="col-md-12 ">
                          <div class="form-group">
                            <label class="col-md-4  control-label">Next Date Pay <span class="required" aria-required="true">*</span></label>
                            <div class="col-md-8">
                              <input class="form-control required date_picker auto_date" type="text" data-date-format="dd-mm-yyyy" name="loan_firstpaydate" id="firstpaydateloan" value="{{date('d-m-Y')}}" placeholder="Input date" required="" aria-required="true">
                            </div>
                          </div>
                        </div>
                      </div>
                      <input type="hidden" name="loan_id"  value="{{$loan_id}}">
                    </div>
                  </div>
                  <div class="first-loan-generate" style="border-bottom: 2px solid #4CAF50"><span style="margin-top: 20px;" class="pull-right btn btn-success btn-sm btn-generate">Generate</span>List Generate Schedule Maintenance</div><br /><br /><br />
                  <table class="table table-striped table-bordered first-loan-generate">
                    <tbody class="resultbody3">
                    </tbody>
                    <tfoot>
                    <tr>
                      <td colspan="5" align="right">Total :</td>
                      <td>
                        <div class="row">
                          <input type="text" name="amount_payment_step1" class="form-control total_cost1" value="0" readonly="readonly">
                        </div>
                      </td>
                    </tr>
                    </tfoot>
                  </table>
                </div>
                </div>

              <div class="form-actions fluid">
                <div class="row">
                  <div class="col-md-12">
                    <div class="col-md-offset-5 col-md-7">
                      <a href="{{ route('maintenance-list.index') }}" class="btn red"><i class="fa fa-reply" aria-hidden="true"></i> Cancel</a>
                      <a href="javascript:;" class="btn default button-previous">
                        <i class="m-icon-swapleft"></i> Back
                      </a>
                      <button type="button" class="btn green" onclick="check_amount(this)">Submit <i class="m-icon-swapright m-icon-white"></i></button>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </form>
        </div>
      </div>
    </div>
  </div>
</div>
@endsection

@section('js')

<link rel="stylesheet" href="{{asset('assets/scripts/installment/components.min.css')}}">
<link rel="stylesheet" href="{{asset('assets/scripts/installment/plugins.min.css')}}">


<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

<script type="text/javascript" src="{{ asset('assets/scripts/installment/bootstrap-wizard/jquery.bootstrap.wizard.min.js') }}"></script>
<script type="text/javascript" src="{{ asset('assets/scripts/installment/table-advanced.js') }}"></script>
<script type="text/javascript" src="{{ asset('assets/scripts/installment/form-wizard.js') }}"></script>
<script type="text/javascript" src="{{ asset('assets/scripts/installment/jquery-validation/js/jquery.validate.min.js') }}"></script>
<script type="text/javascript" src="{{ asset('assets/scripts/installment/bootstrap-switch/js/bootstrap-switch.min.js') }}"></script>
<script type="text/javascript" src="{{ asset('assets/scripts/installment/app.min.js') }}"></script>
<script type="text/javascript" src="{{ asset('assets/scripts/installment/components-select2.min.js') }}"></script>
<script type="text/javascript" src="{{ asset('assets/scripts/installment/select2/js/select2.full.min.js') }}"></script>
<script type="text/javascript" src="{{asset('assets/scripts/datepicker/bootstrap-datepicker.min.js')}}"></script>

<script type="text/javascript" src="{{asset('assets/controller/generate-schedule-maintenance.js')}}"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-confirm/3.3.2/jquery-confirm.min.js"></script>


<script type="text/javascript">
  function check_amount (obj) {
      $(obj).submit();
  }
  $('.date_picker').datepicker({
    yearRange: "-100:+0",
    dateFormat: "dd-mm-yy",
    changeMonth: true,
    changeYear: true
  });

  $(document).ready(function() {
    $("#menu2").show();
    TableAdvanced.init();
    FormWizard.init();
    $(".button-start").hide();
    if ("{{ $data['sale_id'] }}" > 0) {
      $("#form_addnew").show();
    } else {
      $("#form_addnew").hide();
    }
    $("#addnew").click(function() {
      $("#form_addnew").slideToggle("show");
    });
  });
  $(document).on('click', '.btn-generate', function() {
    var amount = parseFloat($('#loan_amount_main').val());
    var duration = $('#loan_duration').val();

    var start_date = $('#firstpaydateloan').val();
    var row = loan_generator_schedule_mantenance(amount,duration,start_date);
    $("#first_loan_condition").val(1);
    $('.resultbody3').empty().append(row);
    var totalPrincipal = 0;
    $('.resultbody3 tr td:nth-child(6) .amount').each(function() {
      totalPrincipal += parseFloat($(this).val());
    });

    var last_date = $('.resultbody3 tr td:nth-child(4) .loan-payment-date').last().val();

    $("#firstpaydateloan_second").val(Loan_date_generator(last_date));
    $('.total_cost1').val(totalPrincipal.toFixed(2));

  });

</script>
@endsection