@extends('admin/layouts/default')

{{-- Page title --}}
@section('title')
    Lien Registration
    @parent
@stop

{{-- page level styles --}}
@section('header_styles')

    <link href="{{ asset('assets/vendors/select2/css/select2.min.css') }}" rel="stylesheet" />
    <link href="{{ asset('assets/vendors/datetimepicker/css/bootstrap-datetimepicker.min.css') }}" rel="stylesheet" type="text/css" />

    <link href="{{ asset('assets/vendors/bootstrap-datepicker/css/bootstrap-datepicker.css') }}" rel="stylesheet" type="text/css" />      
    <link href="{{ asset('assets/vendors/iCheck/css/all.css') }}" rel="stylesheet" />
    <link href="{{ asset('assets/vendors/bootstrapvalidator/css/bootstrapValidator.min.css') }}" rel="stylesheet"/>
    <link href="{{ asset('assets/vendors/jquery_steps/css/jquery.steps.css') }}" rel="stylesheet"/>

    <link type="text/css" href="{{ asset('assets/vendors/select2/css/select2-bootstrap.css') }}" rel="stylesheet" />
    <link type="text/css" href="{{ asset('assets/vendors/select2/css/select2-bootstrap.css') }}" rel="stylesheet" />
    <link href="{{ asset('assets/css/pages/invoice.css') }}" rel="stylesheet" type="text/css"/>
    <link href="{{ asset('assets/css/property-slider.css') }}" rel="stylesheet" type="text/css"/>

    <style>
    .wizard > .content > .body
    {        
        width: 100%;
        padding: 2.0%;
/*        height: 110%;*/
        overflow-y: auto;
    }    

    </style>
    
@stop

{{-- Page content --}}
@section('content')   
    <section class="content paddingleft_right15">
        <div class="panel panel-success">
            <div class="panel-heading">
                <h4 class="box-title">Lien Application</h4>
            </div>
            <div class="panel-body">
                <div id='wizard-error' class='validation' style='display:none; color:red;padding-bottom: 10px;'></div>
                <form id="mortgage" action="#" class="basic_steps">
                    <h6>{{Lang::get('property.property')}}</h6>
                    <div class="">
                        <div class="form-group">
                            <div class="row">     
                                <div class="col-md-12">
                                    <div class="col-sm-2">
                                        <select class="form-control" id="parcel_serial" name="parcel_serial">
                                            <option value="">Please select one</option>
                                            <option value="parcel_id_search">Parcel ID Search</option>
                                            <option value="serial_no_search">Title Serial No Search</option>
                                        </select>
                                    </div>
                                    <div class="col-sm-3">
                                        <input type="text" class="form-control required" id="parcel_id"  name="parcel_id" />                            
                                    </div>
                                    <div class="col-sm-1">
                                        <button type="button" class="btn btn-raised btn-md btn-success" id="search_lien_property">Search</button>
                                    </div>
                                </div>
                                <input type="hidden" id="property_id" name="property_id" />                                    
                                <input type="hidden" id="multiple_property_id" name="multiple_property_id" />    
                                <input type="hidden" id="primary_property_id" name="primary_property_id"/>                                
                            </div>
                        </div>

                      <div class="col-md-12 col-sm-12">
                        <div class="panel-group wrap" id="accordion" role="tablist" aria-multiselectable="true">
                            <div id="property-details"> </div>
                        </div>
                      </div>



                    </div>
                    
                    <h6>Borrower</h6>
                    <div class="mt-2 mb-3">
                        <div class="row">
                            <!-- <a class="btn btn-raised btn-success btn-sm" id="select" data-select ="{{ Lang::get('general.select') }}" data-toggle="modal" data-href="#customer-modal-div" href="#customer-modal-div">Add Borrower</a><p></p>  -->
                            <input type="hidden" id="customer_id" name="customer_id"/>                             
                            <input type="hidden" id="borrower_id" name="borrower_id"/>                             
                            <input type="hidden" id="selected_customer" name="selected_customer"/>  
                            <input type="hidden" id="selected_borrower_id" name="selected_borrower_id"/>  
                            <input type="hidden" id="selected_relation_id" name="selected_relation_id"/>  
                        </div>
                        @include('admin.lien.selected-customers-table')  
                        @include('admin.lien.selected-borrowers-table')  
                    </div>
                    <input type="hidden" name="domain_code" id="domain_code" value="{{env('DOMAINCODE')}}">
                    <h6>Lien Details</h6>
                    <div class="mt-2 mb-3">
                        <div class="row">
                            @include('admin.lien.lien-details')  
                        </div>
                    </div>
                    <h6>{{Lang::get('transactions.summary')}}</h6>
                    <div class="mt-2 mb-3">
                        <div class="row">
                            <section id="wizard-summary-view"></section>
                        </div>
                    </div>
                </form>
            </div>
        </div>                
    </section>

@include('admin.lien.modal-customer-search')
@include('admin.lien.modal-relationship-select')

@stop

@section('footer_scripts')

    <script type="text/javascript" src="https://maps.google.com/maps/api/js?key=AIzaSyADWjiTRjsycXf3Lo0ahdc7dDxcQb475qw&sensor=false"></script>   
    <script language="javascript" type="text/javascript" src="{{ asset('assets/vendors/select2/js/select2.js') }}"></script>
    <script language="javascript" type="text/javascript" src="{{ asset('assets/vendors/iCheck/js/icheck.js') }}"></script>
    <script src="{{ asset('assets/vendors/bootstrapvalidator/js/bootstrapValidator.min.js') }}"type="text/javascript"></script>
    <script src="{{ asset('assets/vendors/jquery_steps/js/jquery.steps.min.js') }}"></script>
    <script src="{{ asset('assets/js/pluginjs/validate.js') }}"></script>
    <script language="javascript" type="text/javascript" src="{{ asset('assets/vendors/bootstrap-multiselect/js/bootstrap-multiselect.js') }}" ></script>
    <script language="javascript" type="text/javascript" src="{{ asset('assets/vendors/sifter/sifter.js') }}"></script>
    <script language="javascript" type="text/javascript" src="{{ asset('assets/vendors/microplugin/microplugin.js') }}"></script>
    <script language="javascript" type="text/javascript" src="{{ asset('assets/vendors/selectize/js/selectize.min.js') }}"></script>
    <script language="javascript" type="text/javascript" src="{{ asset('assets/vendors/bootstrap-switch/js/bootstrap-switch.js') }}"></script>
    <script language="javascript" type="text/javascript" src="{{ asset('assets/vendors/switchery/js/switchery.js') }}" ></script>
    <script language="javascript" type="text/javascript" src="{{ asset('assets/vendors/bootstrap-maxlength/js/bootstrap-maxlength.js') }}"></script>
    <script language="javascript" type="text/javascript" src="{{ asset('assets/vendors/card/lib/js/jquery.card.js') }}"></script>
    <script language="javascript" type="text/javascript" src="{{ asset('assets/js/pages/custom_elements.js') }}"></script>
    <script type="text/javascript" src="{{ asset('assets/vendors/datatables/js/jquery.dataTables.js') }}" ></script>
    <script type="text/javascript" src="{{ asset('assets/vendors/datatables/js/dataTables.bootstrap.js') }}" ></script>
    <script type="text/javascript" src="{{ asset('assets/vendors/datatables/js/dataTables.responsive.js') }}" ></script>
    <script type="text/javascript" src="{{ asset('assets/vendors/select2/js/select2.js') }}" ></script>
    <script type="text/javascript" src="{{ asset('assets/js/pages/customer-list.js') }}" ></script>
    <script type="text/javascript" src="{{ asset('assets/js/pages/lien-borrower.js') }}" ></script>
    <!-- <script src="{{ asset('assets/vendors/moment/js/moment.min.js') }}" type="text/javascript"></script> -->
    <script type="text/javascript" src="{{ asset('assets/js/moment-with-locales.min.js') }}"></script>
    <script src="{{ asset('assets/vendors/daterangepicker/js/daterangepicker.js') }}" type="text/javascript"></script>
    <script src="{{ asset('assets/vendors/datetimepicker/js/bootstrap-datetimepicker.min.js') }}" type="text/javascript"></script>
    <script src="{{ asset('assets/vendors/bootstrap-datepicker/js/bootstrap-datepicker.js') }}" type="text/javascript"></script>

    <script src="{{ asset('assets/vendors/clockface/js/clockface.js') }}" type="text/javascript"></script>
    <script src="{{ asset('assets/vendors/jasny-bootstrap/js/jasny-bootstrap.js') }}" type="text/javascript"></script>
    <script src="{{ asset('assets/js/pages/mortgage-wizard.js') }}"></script>
    <script src="{{ asset('assets/js/pages/lien-property.js') }}"></script>
    <script type="text/javascript" src="{{ asset('assets/js/responsive-carousel.js') }}"></script>

    <script src="{{ asset('assets/js/dojo.js') }}"></script>   

    <script>
        $(document).ready(function() {                   
            $('#mortgage_start_date').datepicker({ 
              format: "dd-mm-yyyy", 
              autoclose: true,
            });  

            $('#mortgage_end_date').datepicker({ 
              format: "dd-mm-yyyy", 
            });   
        });

        function isNumber(evt) {
            var iKeyCode = (evt.which) ? evt.which : evt.keyCode
            if (iKeyCode != 46 && iKeyCode > 31 && (iKeyCode < 48 || iKeyCode > 57))
                return false;

            return true;
        }

        $(document).ready(function() { 

            $("#mortgage_start_date").datepicker().on('changeDate', function(e){ 
                var period_year = $('#period_year').val();
                var period_month = $('#period_month').val();

                if(period_year == "" && period_month == "")
                {
                    swal({
                    title: "Please Select Period",
                    text: "",
                    type: "warning",
                    showCancelButton: false,
                    confirmButtonColor: "#418BCA",
                    confirmButtonText: "Ok",
                }); 
                    $('#mortgage_start_date').val('');
                } else {
                    endDate(); 
                }
             });


        });

        function endDate() {
            var period_year = ($('#period_year').val()).split(' ');
            var period_month = ($('#period_month').val()).split(' ');
            var start_date_picker = ($('#mortgage_start_date').val()) ? $('#mortgage_start_date').val() : null;
            if (start_date_picker != null) {
                var start_date = moment(start_date_picker, 'DD-MM-YYYY');
                var end_date = start_date.clone();
                if (period_year[0]) {
                   end_date.add(period_year[0], 'years');
                }
                if (period_month[0]) {
                    end_date.add(period_month[0], 'months');
                }
                $("#mortgage_end_date").datepicker("setDate", end_date.format('DD-MM-YYYY'));
            }
            
        }

</script>

<script>
$(document).ready(function() {
  $('.collapse.in').prev('.panel-heading').addClass('active');
  $('#accordion, #bs-collapse')
    .on('show.bs.collapse', function(a) {
      $(a.target).prev('.panel-heading').addClass('active');
    })
    .on('hide.bs.collapse', function(a) {
      $(a.target).prev('.panel-heading').removeClass('active');
    });
});
</script>
@stop