@extends('layouts.frontend.app')
@section('title', trans('emi.emi_calculator'))
@section('meta_keys',trans('emi.emi_calculator'))
@section('meta_description',trans('emi.emi_calculator'))
@section('script')
{!! isset($schema) && !empty($schema) ? $schema : '' !!}
@endsection

@section('content')
@include('inner.breadcrumb',['pageName'=> trans('emi.emi_calculator')])

<script type="text/javascript" src="{{asset('mechi/js/emi.js')}}"></script>
<section id="inner-contanier">


    <img class="service-shape1 animate-y" src="{{asset('mechi/images/shape1.png')}}" alt="">
    <img class=" about-shape1 animate-y" src="{{asset('mechi/images/shape2.png')}}" alt="">
    <div class=" container">
        <div class="row calculate-block">
            <h1>{{trans('emi.emi_calculator')}}</h1>
            <div class="col-xs-12 col-sm-12 col-md-6 col-lg-4 col-xl-4">
                <div class="rightsection">
                    <h2>{{trans('emi.emi_calculator')}}</h2>
                    <div class="emi-calc col-md-12 col-lg-12">
                        <p class="text-danger  validation-alert" style="display: none;"></p>
                        <label for="emi-principal">{{trans('emi.your_loan_amount')}} </label>
                        <div class="input-group">
                            <div class="input-group-prepend"> <span class="input-group-text">{{trans('emi.npr')}}</span> </div>
                            <input type="number" class="form-control" name="principle" value="100000" max="5000000" min="0">
                        </div>
                        <label for="emi-rate">{{trans('emi.your_annual_interest_rate')}}</label>
                        <div class="input-group">
                            <div class="input-group-prepend"> <span class="input-group-text">%</span> </div>
                            <input type="number" class="form-control" name="interest" value="5" max="20" min="0">
                        </div>
                        <div class="form-group">
                            <label for="emi-time">{{trans('emi.repayment_period')}}</label>
                            <input type="number" class="form-control" name="number_op_period" value="120" max="360" min="0">
                        </div>

                        <div class="form-group">
                            <div class="custom-control custom-radio d-inline-block my-1 mr-sm-2">
                                <input type="radio" class="custom-control-input js-emic-radio-var js-time-type" name="period" value="months" data-emic-id="emi-time-type-months" checked="" id="emic-radio-months-emic-calculator-1691727014688">
                                <label class="custom-control-label" for="emic-radio-months-emic-calculator-1691727014688">{{trans('emi.months')}}</label>
                            </div>
                            <div class="custom-control custom-radio d-inline-block my-1 mr-sm-2">
                                <input type="radio" id="emic-radio-years-emic-calculator-1691727014688" class="custom-control-input  d-inline-block js-emic-radio-var js-time-type" name="period" value="years" data-emic-id="emi-time-type-years">
                                <label class="custom-control-label" for="emic-radio-years-emic-calculator-1691727014688">{{trans('emi.years')}}</label>
                            </div>
                        </div>
                        <div class="col-lg-6 col-md-12 readmore-btn"> <button type="button" class="btn btn-primary calculate">{{trans('emi.calculate')}} </button> </div>
                    </div>

                </div>
            </div>
            <div class="col-xs-12 col-sm-12 col-md-6 col-lg-4 col-xl-4">
                <h2>{{trans('emi.payment-result')}}</h2>
                <div class="form-group">
                    <label class="err-message text-danger"></label>

                </div>
                <div class="emi-cal-results">
                    <div class="pay-result">
                        <h6>{{trans('emi.loan_emi')}}</h6>
                        <h3 class="loan_emi">{{trans('emi.npr')}} 1060.66</h3>
                    </div>
                    <div class="calblock-below"></div>

                    <div class="pay-result">
                        <h6>{{trans('emi.total_interest_payable')}}</h6>
                        <h3 class="total_intrest">{{trans('emi.npr')}} 27279.20
                        </h3>
                    </div>
                    <div class="calblock-below"></div>
                    <div class="pay-result">
                        <h6>{{trans('emi.total_payment')}}</h6>
                        <h3 class="total_payment">{{trans('emi.npr')}} 127279.20
                        </h3>
                    </div>
                </div>
            </div>


        </div>
    </div>

</section>
<!-- Add this script at the end of your HTML body -->
<script>

</script>

@endsection