

<div class="row">
    <div class="container">

       <ol class="breadcrumb">
            <li><a href="#">نظام العقارات والوحدات </a></li>
            <li><a href="realestateunitsrenters.php?do=show"> تأجير الوحدات للمستأجرين   </a></li>
            <li class="active">اضافة  </li>
        </ol>

        <div class="panel panel-default panel-m">
            <div class="panel-heading">
                <h3 class="panel-title">اضافة  </h3>
            </div>
            <div class="panel-body">


                {literal}
                <form class="form-horizontal"  action="realestateunitsrenters.php"  id="submitformajax"  method="post"  enctype="multipart/form-data" data-dosave="?do=savedata" data-direction="?do=show" data-print="">
                    {/literal}

                     <div class="form-group">
                        <label for="txtName" class="col-lg-2 control-label">المستاجرين</label>
                        <div class="col-lg-4">
                            <input type="text" name="clientid" class="wdt100" id="select2client" data-placeholder="اختر " />
                         </div>
                    </div>

                     <div class="form-group">
                        <label for="txtName" class="col-lg-2 control-label">العقار</label>
                        <div class="col-lg-4">
                            <input type="text" name="realestateid" class="wdt100" id="select2realestates" data-placeholder="اختر " />
                         </div>
                    </div>

                     <div class="form-group">
                        <label for="txtName" class="col-lg-2 control-label">الوحدات</label>
                        <div class="col-lg-4">
                            <input type="text" name="realestateunitid" class="wdt100" id="select2realestatesunits" data-placeholder="اختر " />
                         </div>
                    </div>



                    <div class="form-group">
                        <label for="txtName" class="col-lg-2 control-label">قيمه الايجار </label>
                        <div class="col-lg-4">
                            <input    required="required" id="valuerents"   type="text" name="valuerents" 
                            class="form-control installmentsorvaluerents nummbers"  placeholder="قيمه الايجار" />
                        </div>
                    </div>

                    <div class="form-group">
                        <label for="txtName" class="col-lg-2 control-label">المدفوع مقدمه </label>
                        <div class="col-lg-4">
                            <input    required="required" id="advancepayment"   type="text" name="advancepayment"  class="form-control installmentsorvaluerents nummbers"  placeholder="المدفوع مقدمه" />
                        </div>
                    </div>

                     <div class="form-group">
                        <label for="txtName" class="col-lg-2 control-label">المدفوع  </label>
                        <div class="col-lg-4">
                            <input  readonly  id="totalpaid"  value="0"  type="text" name="totalpaid" 
                            class="form-control installmentsorvaluerents nummbers"  placeholder="المدفوع " />
                        </div>
                    </div>


                    <div class="form-group">
                        <label for="txtName" class="col-lg-2 control-label">عدد الاقساط </label>
                        <div class="col-lg-4">
                            <input    required="required" id="numberinstallments"   type="text" name="numberinstallments" class="form-control installmentsorvaluerents floats"   placeholder="عدد الاقساط "  />
                        </div>
                    </div>

                     <div class="form-group">
                        <div class="col-md-12">
                             <ul >
                                 <li  style="list-style-type: none;">
                                   <div class="col-lg-4">
                                       <label for="txtName" class="control-label">الاقسط</label>
                                   </div>
                                    <div class="col-lg-4">
                                     <label for="txtName" class="control-label">المدفوع</label>
                                   </div>
                                   <div class="col-lg-4">
                                     <label for="txtName" class="control-label">تاريخ الاقسط</label>
                                   </div>
                                </li>
                            </ul>                             
                              <ul id="installmentsorvaluerents">
                                
                            </ul>  
                        </div>
                    </div>
                   
                    <div class="form-group">
                        <div class="col-lg-offset-2 col-lg-4">
                            <button type="button" class="btn btn-primary pull-left submitformajax" >حفظ الامر</button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>



{literal}

<script type="text/javascript">

    $(document).ready(function () {


         var formatResult;
        formatResult = function (data) {
            return  data.text;
        }
         $("#select2client").select2({
            placeholder: "إسم  المشروع",
            multiple: false,
            quietMillis: 100,
            ajax: {
                url: "realestateunits.php?do=select2client",
                type: "post",
                dataType: 'json',
                data: function (term, page) {
                    return {
                        searchTerm: term,
                    };
                },
                results: function (data) {
                    return {results: data};
                }
            },
            formatResult: formatResult,
            initSelection: function (element, callback) {
                var item = element.val().split(':');
                var data = {id: item[0], text: item[1]};
                callback(data);
            }
        });

        $("#select2realestates").select2({
            placeholder: "إسم  المشروع",
            multiple: false,
            quietMillis: 100,
            ajax: {
                url: "realestateunits.php?do=select2realestates",
                type: "post",
                dataType: 'json',
                data: function (term, page) {
                    return {
                        searchTerm: term,
                    };
                },
                results: function (data) {
                    return {results: data};
                }
            },
            formatResult: formatResult,
            initSelection: function (element, callback) {
                var item = element.val().split(':');
                var data = {id: item[0], text: item[1]};
                callback(data);
            }
        });


        $("#select2realestatesunits").select2({
            placeholder: "الوحده",
            multiple: false,
            quietMillis: 100,
            ajax: {
                url: "realestateunits.php?do=select2realestatesunits",
                type: "post",
                dataType: 'json',
                data: function (term, page) {
                    var select2realestates = Number($('#select2realestates').val());
                     if (!select2realestates) {
                        alert('يجب اختيار العقار اولا');
                        return false;
                     }
                    return {
                        searchTerm: term,
                        realestateid: select2realestates,
                    };
                },
                results: function (data) {
                    return {results: data};
                }
            },
            formatResult: formatResult,
            initSelection: function (element, callback) {
                var item = element.val().split(':');
                var data = {id: item[0], text: item[1]};
                callback(data);
            }
        });


        $('body').on('change', '.installmentsorvaluerents', function () {
            var valuerents = Number($('#valuerents').val()) - Number($('#advancepayment').val());
            var advancepayment = Number($('#advancepayment').val());
            // var totalpaid = Number($('#totalpaid').val());
            var numberinstallments =  Number($('#numberinstallments').val());
            if (numberinstallments < 1) {
                numberinstallments = 1;
            }
            $("#installmentsorvaluerents").html('');
            var valuerent = (valuerents / numberinstallments).toFixed(2);       
            text ='';
            for (let i = 1; i <= numberinstallments; i++) {
              $("#installmentsorvaluerents").append(
                '<li  style="list-style-type: none;">'
                   +'<div class="col-lg-4">'
                    +'   <input  required="required"    type="text" name="valuerent_'+i+'" class="form-control allvaluerent checktotalpaid' 
                    +'" placeholder="* اسم  الوحده " id="valuerent_'+i+'" value="'+valuerent+'" data-itr="'+i+'"/>'
                    +'</div>'
                    +'<div class="col-lg-4">'
                    +'   <input      type="text" name="totalpaid_'+i+'" class="form-control checktotalpaid alltotalpaid'
                    +'" placeholder="المدفوع "  id="totalpaid_'+i+'" value="" data-itr="'+i+'"/>'
                    +'</div>'
                    +'<div class="col-lg-4">'
                    +' <input      type="text" name="installmentdate_'+i+'" class="form-control  newdatepicker" '
                    +'placeholder="تاريخ الاقسط " autocomplete="off"   data-date-format="yyyy-mm-dd" value="'+dateWithMonthsDelay(i-1)+'"  />'
                    +'</div>'
                    +'</li>');
            }
            var allvaluerent = 0;
            $(".allvaluerent").each(function( ) {
                allvaluerent += Number($(this).val());
            });

            var alltotalpaid = 0;
            $(".alltotalpaid").each(function( ) {
                alltotalpaid += Number($(this).val());
            });

            $('#totalpaid').val(alltotalpaid + advancepayment);
            if (valuerents != allvaluerent) {
                $('.submitformajax').prop("disabled", true);
                $('.submitformajax').css("background", "red");
            }else{
                $('.submitformajax').prop("disabled", false); 
                $('.submitformajax').css("background", "blue");
            }
            newdatepicker();


        });
        $('body').on('change', '.allvaluerent', function () {
            var valuerents = Number($('#valuerents').val()) - Number($('#advancepayment').val());
            var allvaluerent = 0;
            $(".allvaluerent").each(function( ) {
                allvaluerent += Number($(this).val());
            });
            if (valuerents != allvaluerent) {
                $('.submitformajax').prop("disabled", true);
                $('.submitformajax').css("background", "red");
            }else{
                $('.submitformajax').prop("disabled", false); 
                $('.submitformajax').css("background", "blue");
            }
        });

         $('body').on('change', '.checktotalpaid', function () {
            var itr = $(this).attr('data-itr');
            var valuerent = Number($('#valuerent_'+itr).val());
            var totalpaid = Number($('#totalpaid_'+itr).val());
            if (totalpaid > valuerent) {
                $(this).val(valuerent).trigger('change');
            }
        });




        $('body').on('change', '.alltotalpaid', function () {
            var alltotalpaid = 0;
            $(".alltotalpaid").each(function( ) {
                alltotalpaid += Number($(this).val());
            });
            $('#totalpaid').val(alltotalpaid + Number($('#advancepayment').val()));
        });

        function dateWithMonthsDelay (months) {  
          const date = new Date();
          return new Date(date.setMonth(date.getMonth() + months)).toISOString().slice(0, 10);
        }



        function newdatepicker() {
            $('.newdatepicker').datepicker({
                orientation: "left",
                format: "yyyy-mm-dd",
                autoclose: true
            });
        }


});
    
</script>
{/literal}
