@extends('adminlte::page')

@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>Client Installment</span> 
              <span class="step-title">
                Step 1 of 3
              </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('payment-installment.store') }}" class="form-horizontal" id="submit_form" enctype="multipart/form-data" method="POST">
            {{ csrf_field() }}
            <div class="form-wizard">
                <div class="form-body">
                <ul class="nav nav-pills nav-justified steps">
                  <li>
                  <a href="#tab1" data-toggle="tab" class="step">
                  <span class="number">1</span>
                  <span class="desc"><i class="icon-ok"></i>Payment Info</span>
                  </a>
                  </li>
                  <li>
                  <a href="#tab2" data-toggle="tab" class="step">
                  <span class="number">2</span>
                  <span class="desc"><i class="icon-ok"></i>Loan Info</span>
                  </a>
                  </li>
                  {{-- <li>
                  <a href="#tab3" data-toggle="tab" class="step">
                  <span class="number">3</span>
                  <span class="desc"><i class="icon-ok"></i>Who Involve</span>
                  </a>
                  </li> --}}
                </ul>
                <div id="bar" class="progress progress-striped" role="progressbar">
                  <div class="progress-bar progress-bar-success"></div>
                </div>
                <div class="tab-content">
                  <div class="tab-pane active" id="tab1">
                  <h3 class="block">Loan Information</h3>
                  <div class="form-group">
                    <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">Item Cost ($) </label>
                            <div class="col-md-8">
                            <input type="text" name="item_cost" readonly="" class="form-control  " id="item_cost" value="{{ $data['data'][0]->sale_amount }}" placeholder="" aria-invalid="false">
                            </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">Deposit Amount ($) </label>
                              <div class="col-md-8">
                              <input type="text" name="deposit_amount" readonly="" class="form-control  " id="deposit_amount" value="{{ $data['data'][0]->sale_receive }}" 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">Remain Amount ($) </label>
                              <div class="col-md-8">
                              <input type="text" name="loan_amount_payment" readonly="" class="form-control  " id="own_amount" value="{{ $data['data'][0]->sale_remain }}" placeholder="">
                              </div>
                          </div> 
                          
                        </div>   
                        <input type="hidden" name="salename_id" value="{{ $data['sale_id'] }}">  
                        <input type="hidden" name="clientname_id" value="{{ $data['client_id'] }}">  
                        <input type="hidden" name="agencyname_id" value="{{ $data['data'][0]->agency_id }}">  
                      </div>
                    </div>
                    <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">Discount Amount ($) </label>
                                <div class="col-md-8">
                                <input type="text" name="sale_discount" class="form-control  number-only" id="sale_discount" value="0" 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">Discount Percent (%) </label>
                                <div class="col-md-8">
                                <input type="text" name="sale_discount_percent" class="form-control  number-only" id="sale_discount_percent" value="0" placeholder="">
                                </div>
                            </div> 
                          </div>   
                        </div>
                    </div>
                    <table class="table table-striped table-bordered">
                      <thead>
                        <tr>
                          <th class="text-center" colspan="8"></th>
                          <th>
                            <span class="pull-right button_primary btn-sm plus_ens fa fa-plus add"></span>
                          </th>
                        </tr>
                      </thead>
                      <tbody class="resultbody">
                        <tr>
                          <td width="5%">
                            <label class="control-label"><strong> Step : </strong></label>
                          </td>
                          <td width="8%">
                            <input type="text" class="form-control" name="payment_no[]" value="1" readonly="readonly">
                          </td>
                          <td width="8%">
                            <label class="control-label"><strong> Payment Date : </strong></label>
                          </td>
                          <td>
                            <input type="text" id="meng" class="form-control date-picker-a date_picker" name="itempro_date[]" required>
                          </td>
                          <td width="9%">
                            <label class="control-label"><strong> Payment Amount : </strong></label>
                          </td>
                          <td>
                            <input type="text" name="itempro_payamount[]" class="number-only form-control itempro_payamount meng_payment" placeholder="Pay Amount" required>
                          </td>
                          <td width="7%">
                            <label class="control-label"><strong> Percentage : </strong></label>
                          </td>
                          <td>
                            <input type="text" class="number-only form-control payPercentage meng_percent" placeholder="Pay Percentage" required>
                          </td>
                        </tr>
                      </tbody>
                      <tfoot>
                        <tr>
                          <td colspan="5" align="right">Total :</td>
                          <td>
                            <div class="row">
                              <input type="text" name="amount_payment_step" class="form-control total_cost" value="0" readonly="readonly">
                            </div>
                          </td>
                          <td width="9%">Percentage :</td>
                          <td>
                            <div class="row">
                              <input type="text" name="total_percent" class="form-control total_percent" value="0" readonly="readonly">
                            </div>
                          </td>
                        </tr>
                        <tr>
                          <td colspan="5" align="right">Remain :</td>
                          <td>
                            <div class="row">
                              <input type="text" name="main_amount" class="form-control main_amount" value="0" readonly="readonly">
                            </div>
                          </td>
                          <td width="9%">Percentage :</td>
                          <td>
                            <div class="row">
                              <input type="text" name="main_percent" class="form-control main_percent" value="0" readonly="readonly">
                            </div>
                          </td>
                        </tr>
                      </tfoot>
                    </table>
                  </div>
                </div>
                <div class="tab-pane" id="tab2">
                  <h3 class="block">Loan Information</h3>
                  <div class="form-group">
                <div class="col-md-12">
                <div class="col-md-6">
                  <div class="col-md-12 ">
                    <div class="form-group">
                        <label class="col-md-4  control-label"> </label>
                        <div class="col-md-8">
                        <input type="hidden" name="loan_currency" readonly="" class="form-control  " id="loan_currency" value="1" placeholder="">
                        </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" readonly="" class="form-control required znumber" id="loan_amount_main" value="" placeholder="" required="" aria-required="true">
                        </div>
                    </div> 
                  </div>               
                  <div class="col-md-12 ">
                    <div class="form-group">
                        <label class="col-md-4  control-label">Type <span class="required" aria-required="true">*</span></label>
                        <div class="col-md-8">
                        <select name="loan_type" id="loan_type" class="form-control" data-placeholder="Select..." required="" tabindex="-1" aria-hidden="true" aria-required="true">
                          <option value="1">Installment with interest</option>
                          <option value="2" selected="">Installment</option>
                        </select>
                        {{--<input type="text" name="hidden" value="Installment" class="form-control" readonly="">--}}
                        {{--<input type="hidden" name="loan_type" id="loan_type" value="2" class="form-control" hidden="">--}}
                        </div>
                    </div> 
                  </div>    
                  <div class="col-md-12 ">
                    <div class="form-group">
                        <label class="col-md-4  control-label">Term <span class="required" aria-required="true">*</span></label>
                        <div class="col-md-8">
                        <!-- <select name="loan_term" id="loan_term" class="form-control" data-placeholder="Select..." required="" tabindex="-1" aria-hidden="true" aria-required="true">
                          <option value=""></option>
                          <option value="4" selected="">Month</option></select> -->
                          
                          <input type="text" name="hidden" value="Month" class="form-control" readonly="">
                          <input type="hidden" name="loan_term" id="loan_term" value="4" class="form-control" hidden>


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

                  <div class="col-md-12 ">
                    <div class="form-group">
                        <label class="col-md-4  control-label">Interest <span class="required" aria-required="true">*</span></label>
                        <div class="col-md-8">
                        <input type="text" name="loan_interest" class="form-control required number-only" id="loan_interest" value="" placeholder="" required="" aria-required="true">
                        </div>
                    </div> 
                  </div>
                </div>
                <div class="col-md-6">
                <div class="col-md-12 ">
                  <div class="form-group">
                      <label class="col-md-4  control-label"> </label>
                      <div class="col-md-8">
                      <input type="hidden" name="loan_payment_step" class="form-control  znumber" id="loan_payment_step" value="2" placeholder="">
                      </div>
                  </div> 
                </div>                  
                <div class="col-md-12 ">
                  <div class="form-group">
                      <label class="col-md-4  control-label">Disburment <span class="required" aria-required="true">*</span></label>
                      <div class="col-md-8">
                      <input class="form-control required date_picker" type="text" data-date-format="dd-mm-yyyy" name="loan_disbursement" id="loan_disbursement" value="" placeholder="Input date" required="" aria-required="true">
                      </div>
                  </div> 
                </div>                
                <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" type="text" data-date-format="dd-mm-yyyy" name="loan_firstpaydate" id="firstpaydateloan" value="" placeholder="Input date" required="" aria-required="true">
                      </div>
                  </div> 
                </div>               
                </div>
                </div>
                  </div>
                </div>
                {{-- <div class="tab-pane" id="tab3">
                  <h3 class="block">Provide Who Involve Info</h3>
                  <div class="form-group">
                    <div class="col-md-12">
                      <div class="col-sm-6">                      
                      <div class="col-md-12 ">
                        <div class="form-group">
                            <label class="col-md-4  control-label">Relationship </label>
                            <div class="col-md-8">
                            <input type="text" name="clientship_is" class="form-control  " id="clientship_is" value="" placeholder="">
                            </div>
                        </div> 
                      </div>                
                      <div class="col-md-12 ">
                        <div class="form-group">
                            <label class="col-md-4  control-label">Name </label>
                            <div class="col-md-8">
                            <input type="text" name="clientship_fullname" class="form-control  " id="clientship_fullname" value="" placeholder="">
                            </div>
                        </div> 
                      </div>                
                      <div class="col-md-12 ">
                        <div class="form-group">
                            <label class="col-md-4  control-label">DOB </label>
                            <div class="col-md-8">
                            <input class="form-control date-picker-a  date_picker" type="text" data-date-format="dd-mm-yyyy" name="clientship_dob" id="clientship_dob" value="" placeholder="Input date">
                            </div>
                        </div> 
                      </div>               
                      <div class="col-md-12 ">
                        <div class="form-group">
                            <label class="col-md-4  control-label">Gender </label>
                            <div class="col-md-8">
                            <select name="clientship_gender" id="clientship_gender" class="form-control" data-placeholder="Select..." tabindex="-1" aria-hidden="true">
                              <option value="">Select</option>
                              <option value="1">Male</option>
                              <option value="2">Famale</option>
                            </select>
                            </div>
                        </div> 
                      </div>               
                      <div class="col-md-12 ">
                        <div class="form-group">
                            <label class="col-md-4  control-label">Job </label>
                            <div class="col-md-8">
                            <input type="text" name="clientship_job" class="form-control  " id="clientship_job" value="" placeholder="">
                            </div>
                        </div> 
                      </div>                
                      <div class="col-md-12 ">
                        <div class="form-group">
                            <label class="col-md-4 control-label">Phone1 </label>
                            <div class="col-md-8">
                            <input type="text" name="clientship_phone1" class="form-control number-only" id="clientship_phone1" value="" placeholder="">
                            </div>
                        </div> 
                      </div>                
                      <div class="col-md-12 ">
                        <div class="form-group">
                            <label class="col-md-4 control-label">Phone2 </label>
                            <div class="col-md-8">
                            <input type="text" name="clientship_phone2" class="form-control number-only" id="clientship_phone2" value="" placeholder="">
                            </div>
                        </div> 
                      </div> 
                      </div>
                      <div class="col-sm-6">
                      <div class="col-md-12">
                        <div class="form-group">
                            <label class="col-md-4  control-label">Nationality </label>
                            <div class="col-md-8">
                            <input type="text" name="clientship_national" class="form-control  " id="clientship_national" value="" placeholder="">
                            </div>
                        </div> 
                      </div>               
                      <div class="col-md-12 ">
                        <div class="form-group">
                            <label class="col-md-4  control-label">IdCard </label>
                            <div class="col-md-8">
                            <input type="text" name="clientship_cardid" class="form-control number-only" id="clientship_cardid" value="" placeholder="">
                            </div>
                        </div> 
                      </div>                 
                      <div class="col-md-12 ">
                        <div class="form-group">
                            <label class="col-md-4  control-label">IdCard Date </label>
                            <div class="col-md-8">
                            <input class="form-control date-picker-a  date_picker" type="text" data-date-format="dd-mm-yyyy" name="clientship_datecard" id="clientship_datecard" value="" placeholder="Input date">
                            </div>
                        </div> 
                      </div>                
                      <div class="col-md-12 ">
                        <div class="form-group">
                            <label class="col-md-4  control-label">IdCard Date Valid </label>
                            <div class="col-md-8">
                            <input class="form-control date-picker-a  date_picker" type="text" data-date-format="dd-mm-yyyy" name="clientship_cardvalid" id="clientship_cardvalid" value="" placeholder="Input date">
                            </div>
                        </div> 
                      </div>                 
                      <div class="col-md-12 ">
                        <div class="form-group">
                            <label class="col-md-4  control-label">IdCardBy </label>
                            <div class="col-md-8">
                            <input type="text" name="clientship_cardby" class="form-control  " id="clientship_cardby" value="" placeholder="">
                            </div>
                        </div> 
                      </div> 
                    </div>
                  </div>
                </div> --}}
                
                </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('items-deposit.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>
                      <a href="javascript:;" class="btn blue button-next">
                      Next <i class="m-icon-swapright m-icon-white"></i>
                      </a>
                      <a href="javascript:;" class="btn blue button-start">
                      Generate <i class="m-icon-swapright m-icon-white"></i>
                      </a>
                      <a href="javascript:;" class="btn green button-submit">
                      Done <i class="m-icon-swapright m-icon-white"></i>
                      </a>
                  </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 type="text/javascript" src="{{asset('assets/controller/installment-administrator.js')}}"></script>

  <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">
    $(document).ready(function(){
      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");
      });
    });  
  </script>
@endsection