@include('layouts.header')
<!-- banner section start -->
<style type="text/css">
   .getin-contact-fm{
   background: #f7f7f7;
   padding-top: 40px;
   padding-bottom: 40px;
   }
   .error_validate {
   font-size: 12px;
   }
   /*-- .table thead th {
   border-bottom: 1px solid #ebedfc;
   font-size: 14px;
   color: black;
   }--*/
   .date-wdth{
   width: 30%;
   }
   .date-wdth-two{
   width: 50%;
   }

   .date-wdth-three{
   width: 52%;
   }

   .bottom-sapce{
   margin-bottom: 15px;
   }
   .bottom-sapce h6{
   font-size: 14px;
   }
   .mg-botms{
   margin-bottom:10px;
   }
   .bottom-sapce2 p{
   font-size: 13px;
   margin-top: 25px;
   }
   .workin-box{
   border: 1px solid #cccccc38;
   padding: 20px;
   background: #ffffffd4;    
   border-radius: 5px;
   }
   .value-amnt{
   border-radius: 5px;
   width: 100%;
   border: 1px solid #d5d6e3;
   padding: 5px;
   }
   .working-hdng{
   background: #0edb60;
   color: #fff;
   padding: 20px;
   padding-top: 10px;
   padding-bottom: 10px;
   }
   @media only screen and (max-width: 767px) {
   .mobile-dsplay-only h6{
   display: none;
   }
   .margn-btm-select{
   margin-bottom: 10px;
   }
   }
</style>
<section class="getin-contact-fm">
   <div class="container">
      <div class="working-hdng">
         <p>Working Capital Interest Rate Calculator</p>
      </div>
      <div class="workin-box">
        <strong>Hwo to use Calculator</strong><br/>
       1. Select the year and the month of which you wish to calculate the rate of interest <br/>
       2.  Enter the amount of Interest charged by the financial institution for the month selected <br/>
       3.  Enter the day end balance as per Bank statement <br/> 
       4.  Enter value for all the days and then click on the “Calculate” button to get the Rate of Interest charged on your Working Capital Limit<br/>
      <strong>Points to remember:</strong><br/>
      - Do not enter Negative sign “-” in the day end balance columns <br/>
      - If there is Positive/ debit day end balance on any date, enter 0 as value <br/>
      - If there are no transactions on a day or the day end balance is same as previous day then simply click the delete button given next to the amount column.
         <br/><br/>
         <form  id="calculation_form">
          <input type="hidden" name="enquiry_id"  value="{{ Request::segment(2) }}" id="enquiry_id">
            <div class="row">
               <div class="col-md-3">
                  <select class="form-control margn-btm-select" name="year" id="year" data-rule-required="true" data-msg-required="Please select year" style="border-color: #d5d6e3!important;">
                     <option value="">Select Year</option>
                     <option value="2021">2021</option>
                     <option value="2020">2020</option>
                     <option value="2019">2019</option>
                     <option value="2018">2018</option>
                     <option value="2017">2017</option>
                     <option value="2016">2016</option>
                     <option value="2015">2015</option>
                     <option value="2014">2014</option>
                     <option value="2013">2013</option>
                     <option value="2012">2012</option>
                     <option value="2011">2011</option>
                     <option value="2010">2010</option>
                     <option value="2009">2009</option>
                     <option value="2008">2008</option>
                     <option value="2007">2007</option>
                     <option value="2006">2006</option>
                     <option value="2005">2005</option>
                     <option value="2004">2004</option>
                  </select>
               </div>
               <div class="col-md-3">
                  <select class="form-control margn-btm-select" onchange="select_month()" name="month" id="month" data-rule-required="true" data-msg-required="Please select month" style="border-color: #d5d6e3!important;">
                     <option value="">Select Month</option>
                     <option value="1">January</option>
                     <option value="2">February</option>
                     <option value="3">March</option>
                     <option value="4">April</option>
                     <option value="5">May</option>
                     <option value="6">June</option>
                     <option value="7">July</option>
                     <option value="8">August</option>
                     <option value="9">September</option>
                     <option value="10">October</option>
                     <option value="11">November</option>
                     <option value="12">December</option>
                  </select>
               </div>
               <div class="col-md-3">
                  <input type="text" class="form-control margn-btm-select" placeholder="Interest amount charged for the month" name="interest_amount" value="{{ $amount['santioned_limit'] }}" id="interest_amount" data-rule-required="true" data-msg-required="Please enter interest amount" style="border-color: #d5d6e3!important;">
               </div>
               <div class="col-md-3">
                  <input type="text" class="form-control margn-btm-select" placeholder="Sanctioned amount" name="sanctioned_amount" value="{{ $amount['sanctioned_amount'] }}" id="sanctioned_amount" style="border-color: #d5d6e3!important;">
               </div>
            </div>
            <br/> <br/>
            
            <div class="row">
              <div class="col-md-12">
                <div class="tab-headings">
                    <div class="row">
                      <div class="col-md-4">
                         <div class="row">
                            <div class="col-md-4">
                              <div class="date-wdth">
                                  <div class="bottom-sapce">
                                     <h6>Date</h6>
                                  </div>
                               </div>
                            </div>
                            <div class="col-md-8">
                               <div class="date-wdth-three">
                                  <div class="bottom-sapce">
                                    <h6>Day End Balance</h6>
                                  </div>
                                </div>
                            </div>
                         </div>
                      </div>
                      <div class="col-md-4">
                         <div class="row">
                            <div class="col-md-4">
                               <div class="bottom-sapce">
                                     <h6>Date</h6>
                                  </div>
                            </div>
                            <div class="col-md-8">
                                <div class="bottom-sapce">
                                    <h6>Day End Balance</h6>
                                  </div>
                            </div>
                         </div>
                      </div>

                      <div class="col-md-4">
                         <div class="row">
                            <div class="col-md-4">
                               <div class="bottom-sapce">
                                     <h6>Date</h6>
                                  </div>
                            </div>
                            <div class="col-md-8">
                                <div class="bottom-sapce">
                                    <h6>Day End Balance</h6>
                                  </div>
                            </div>
                         </div>
                      </div>

                    </div>
                    <div id="push_date"  style="display: flex;flex-wrap: wrap;justify-content: space-between;">
                      
                    </div>
                    <div class="row align-items-center mt-3">
                    <div class="col-md-2">
                       <button type="submit" style="background-color:#0edb60;font-size: 16px;padding: 5px 20px;"  id="page_sub_btn" class="btn">Calculate</button>
                    </div>

                     <div class="col-md-2">
                       <input type="text" name="final_amount" id="final_amount" style=" width: 100%;" value="00.00" class="valid value-amnt">
                    </div> 

                    <div class="col-md-6">
                        Interest Rate charged for the month (%)
                    </div> 
                   </div>
                   <br/>
                  <strong> Disclaimer: </strong><br/>
The Interest rate Calculator provided by us on the Site is for general use only. It is provided on the Site in good faith, however we make no representation or warranty of any kind, express or implied, regarding the accuracy, adequacy, validity, reliability, availability or completeness of any information on the Site

                  </div>
              


               <div class="row mt-3">
               
                
              </div>
              </div>
           

            <!--  <div class="row">
               <div class="col-md-6">
                  <table class="table">
                     <thead>
                        <tr>
                           <th>Date</th>
                           <th>Day End Balance</th>
                        </tr>
                     </thead>
                     <tbody id="table_append_id">
                     </tbody>
                  </table>
               </div>
               </div>-->
         </form>
      </div>
   </div>
</section>
@include('layouts.footer')
<script src="{{ asset
   ('public/asset/js/jquery.validate.min.js') }}"></script>
<script type="text/javascript">
   function select_month(){
   
    if($('#year').val() == ''){
      alert('Please select Year');
   
    }else{
   
      $.ajax({
          type: 'GET',
          url: '{{ url('table-append') }}',
          data: {year: $('#year').val(),month: $('#month').val()},
          success: function(data){
            //$('#table_append_id').html(data);
            $('#push_date').html(data);
          }
       });
       }
    
   }
   
   $( document ).ready(function() {     
   $('#calculation_form').validate({
   
   onfocusout: function(element) {
   this.element(element);
   },
   errorClass: 'error_validate',
   errorElement:'span',
   highlight: function(element, errorClass) {
   $(element).removeClass(errorClass);
   
   },
   submitHandler:function(form)
   {
   
      $.ajax({
       type:'get',
       url:'{{url("post-calculation")}}',
       data:   $('#calculation_form').serialize(),
       success:function(data) {
   
           $('#final_amount').val(data);
       }
     });
   
   }
   });
          });
   
   
   function same_amount(obj){
   
     var index = obj-parseInt(1);
   
     var previous_value = $('#balance_amount_'+index).val();
     
     $('#balance_amount_'+obj).val(previous_value);
    
   }
   
</script>