@extends('frontend.layouts.master')

@section('header')
    @include('frontend.layouts.header-layout.three')
@endsection
@section('contents') 
<!-- breadcrumb-area -->
<section id="hero" class="hero section dark-background">
  <div id="hero-carousel" class="carousel slide carousel-fade" data-bs-ride="carousel" data-bs-interval="5000">
    <div class="carousel-item active">
      <div class="carousel-container">
        <h1 class="text-center fw-bold hero-title fs-1">{{ getSessionLanguage() == 'en'?'Personal Loan EMI Calculator':'حاسبة القسط الشهري للقرض الشخصي'; }}</h1>
      </div>
    </div>
    <!-- End Carousel Item --> 
  </div>
</section>
<section id="contact-form" class="contact-form px-3 px-md-0">
<style>
.contact-form .form-label {
  font-size: 24px;
  font-weight: 500;
}
</style>
  <div class="container container-lg">
    <div class="row">
      <div class="col-md-7">
        <div class="cl-wrapper">
          <form method="post" id="loan-calculator-form-action" class="php-email-form contact-form">
            <div class="row gy-4">
              <div class="col-md-12" style="display:none;">
                <label class="form-label">{{ getSessionLanguage() == 'en'?'Monthly Salary ':' الراتب الشهري'; }} ({{ getSessionLanguage() == 'en'?'AED':'د.إ'; }})</label>
                <input name="salary" id="salary" type="number" class="form-control">
              </div>
              <div class="col-md-12">
                <label class="form-label">{{ getSessionLanguage() == 'en'?'Required Loan Amount':'مبلغ القرض المطلوب'; }} <aed class="blue"><span id="loanValue">{{ getSessionLanguage() == 'en'?'70,000':'٧٠٬٠٠٠'; }}</span></aed></label>
                <input type="range" id="loanAmount" name="loanAmount" min="10000" max="250000" step="1000" value="70000" oninput="updateLoanValue(this.value)" />
              </div>
              <div class="col-md-12">
                <label class="form-label">{{ getSessionLanguage() == 'en'?'Loan Tenor/Period':'وسأقوم بسداده'; }} <strong>(<span id="monthsValue">{{ getSessionLanguage() == 'en'?'36':'٣٦'; }}</span> {{ getSessionLanguage() == 'en'?'Months':'أشهر'; }})</strong></label>
                <input type="range" id="months" name="months" min="6" max="48" value="36" oninput="updateMonthValue(this.value)" />
              </div>
              <div class="col-md-12">
                <label class="form-label">{{ getSessionLanguage() == 'en'?'Reducing Annual Interest Rates':'معدلات الفائدة السنوية المتناقصة' }} <strong>(<span id="rateValue">{{ getSessionLanguage() == 'en'?'13.00':'١٣٫٠٠'; }}</span>%)</strong></label>
                <input type="range" name="interestRate" id="interestRate" min="5" max="13" step="0.1" value="13" oninput="updateRateValue(this.value)" />
              </div>
              <div class="col-md-12">
                <button id="submit" type="button" class="btn btn-blue px-3 py-2 text-white me-2" onclick="calculateLoan(event)"> {{ getSessionLanguage() == 'en'?'Calculate':'احسب'; }}</button>
              </div>
            </div>
          </form>
        </div>
      </div>
      <div class="col-md-5">
        <div class="output-sec">
          <div class="rs-title">
            <p><strong>{{ getSessionLanguage() == 'en'?'Monthly Repayment:':':السداد الشهري'; }}</strong> </p>
            <h2><aed class="white"> <span id="monthlyPayment">0.00</span></aed></h2>
          </div>
          <hr>
          <div class="rs-vl">
            <p><strong>{{ getSessionLanguage() == 'en'?'Total Repayable Amount:':':إجمالي المبلغ القابل للسداد'; }}</strong></p>
            <h2><aed class="white"> <span id="totalRepayable">0.00</span></aed></h2>
            <p style="font-size:14px;">* {{ getSessionLanguage() == 'en'?'Please note that this is just an estimate, calculated based on given details':'يرجى ملاحظة أن هذه الحاسبة هي مجرد تقدير استنادًا إلى المبالغ المدخلة.'; }}</p>
          </div>
          <!--<p style="font-size:14px">Additional one-time upfront processing fee of 1.05% will apply on the loan amount (minimum AED 525 and maximum AED 2,625). A life insurance fee may apply. For further information on fees and charges, please refer to the service and price guide.</p>-->
        </div>
      </div>
    </div>
  </div>
</section>
<!--  Marquee Area --> 
@include('frontend.partials.marquee')
@endsection
@section('footer')
    @include('frontend.layouts.footer-layout.two')
@endsection