@extends('layouts.frontend')

@section('js_after')
    <script>
        $("#is_client").click( function(){
            if( $(this).is(':checked') ){
                $('input[name="clientname"]').prop("readonly", false);
            }else {
                $('input[name="clientname"]').prop("readonly", true);
            }
        });

        var calculation_type = $("input[name='investment_type']").val();
        if(calculation_type == "SIP") {
            $(".calculate-sip").show();
            $(".calculate-sip input").prop("disabled", false);
            $(".calculate-lumpsum").hide();
            $(".calculate-lumpsum input").prop("disabled", true);
        }
        if(calculation_type == "lumpsum") {
            $(".calculate-sip").hide();
            $(".calculate-sip input").prop("disabled", true);
            $(".calculate-lumpsum").show();
            $(".calculate-lumpsum input").prop("disabled", false);
        }

        $("input[name='investment_type']").on('change', function () {
            calculation_type = $(this).val();
            if(calculation_type == "SIP") {
                $(".calculate-sip").show();
                $(".calculate-sip input").prop("disabled", false);
                $(".calculate-lumpsum").hide();
                $(".calculate-lumpsum input").prop("disabled", true);
            }
            if(calculation_type == "lumpsum") {
                $(".calculate-sip").hide();
                $(".calculate-sip input").prop("disabled", true);
                $(".calculate-lumpsum").show();
                $(".calculate-lumpsum input").prop("disabled", false);
            }
        });

        jQuery.validator.addMethod("twodecimalplaces", function(value, element) {
            return this.optional(element) || /^\d{0,4}(\.\d{0,2})?$/i.test(value);
        }, "You must include two decimal places");

        var validator = $(".js-validate-form").validate({
            errorElement: "em",
            errorContainer: $("#warning, #summary"),
            errorPlacement: function(error, element) {
                error.appendTo(element.parent());
            },
            rules: {
                target_amount: {
                    required: true,
                    digits: true,
                    maxlength: 10,
                    range: [100, 9999999999],
                },
                period: {
                    required: true,
                    digits: true,
                    maxlength: 2,
                    range: [1, 99],
                },
                investment_amount: {
                    required: true,
                    digits: true,
                    maxlength: 10,
                    range: [100, 9999999999],
                },
                sip_interest_rate: {
                    required: true,
                    number: true,
                    twodecimalplaces: true,
                    range: [0.10, 18.00]
                },
                onetime_interest_rate: {
                    required: true,
                    number: true,
                    twodecimalplaces: true,
                    range: [0.10, 18.00]
                },
            }
        });
    </script>

    @if(old('client')!='')
        <script>
            $('input[name="clientname"]').prop("readonly", false);
        </script>
    @else
        <script>
            $('input[name="clientname"]').prop("readonly", true);
        </script>
    @endif

@endsection

@section('content')
    <div class="banner">
        <div class="container">
            <div class="row">
                <div class="col-md-12 text-center">
                    <h2 class="page-title">CALCULATORS CUM CLIENT PROPOSALS</h2>
                </div>
            </div>
        </div>
    </div>
    <section class="main-sec">
        <div class="container">
            <div class="row">
                @include('frontend.calculators.left_sidebar')
                <div class="col-md-12">
                    <h3 class="mb-3 text-center">SIP / Lumpsum Required For Target Future Value</h3>
                    <div class="card sip-calculator">
                        <div class="card-header text-center">
                            This calculator gives either SIP amount required or Lumpsum investment required to achieve a future target amount. When Lumpsum amount is given, it finds out how much SIP would be required. If SIP amount is given, it finds out how much Lumpsum would be required.
                        </div>
                        <div class="card-body">
                        <form class="js-validate-form" action="{{route('frontend.sipLumpsumInvestmentTargetFutureValueOutput')}}" method="post">
                            @csrf

                            <div class="form-group row">
                                <label class="col-sm-5 col-form-label">Target Amount</label>
                                <div class="col-sm-7">
                                    <input type="text" class="form-control {{ $errors->has('target_amount') ? ' is-invalid' : '' }}" name="target_amount" value="{{old('target_amount')}}" maxlength="10"  required>
                                    <div class="cal-icon">
                                        ₹
                                    </div>
                                    @if ($errors->has('target_amount'))
                                        <div class="invalid-feedback" role="alert">
                                            <strong>{{ $errors->first('target_amount') }}</strong>
                                        </div>
                                    @endif
                                </div>
                            </div>
                            <div class="form-group row">
                                <label class="col-sm-5 col-form-label">Investment Period</label>
                                <div class="col-sm-7">
                                    <input type="text" class="form-control maxtwodigit {{ $errors->has('investment_period') ? ' is-invalid' : '' }}" name="investment_period" value="{{old('investment_period')}}"  required>
                                    <div class="cal-icon">
                                        Yrs
                                    </div>
                                    @if ($errors->has('investment_period'))
                                        <div class="invalid-feedback" role="alert">
                                            <strong>{{ $errors->first('investment_period') }}</strong>
                                        </div>
                                    @endif
                                </div>
                            </div>
                            <div class="form-group row">
                                <label class="col-sm-5 col-form-label">Calculate</label>
                                <div class="col-sm-7">
                                    <div class="form-check form-check-inline">
                                        <input class="form-check-input" type="radio" name="investment_type" id="inlineRadio1" value="lumpsum" @if(old('report')=='SIP') @else checked  @endif>
                                        <label class="form-check-label" for="inlineRadio1">Lumpsum Required</label>
                                    </div>
                                    <div class="form-check form-check-inline">
                                        <input class="form-check-input" type="radio" name="investment_type" id="inlineRadio2" value="SIP" @if(old('report')=='SIP') checked  @endif >
                                        <label class="form-check-label" for="inlineRadio2">SIP Required</label>
                                    </div>
                                </div>
                            </div>
                            <div class="form-group row calculate-sip">
                                <label class="col-sm-5 col-form-label">Lumpsum Investment</label>
                                <div class="col-sm-7">
                                    <input type="text" class="form-control {{ $errors->has('investment_amount') ? ' is-invalid' : '' }}" name="investment_amount" value="{{old('investment_amount')}}"  required>
                                    <div class="cal-icon">
                                        ₹
                                    </div>
                                    @if ($errors->has('investment_amount'))
                                        <div class="invalid-feedback" role="alert">
                                            <strong>{{ $errors->first('investment_amount') }}</strong>
                                        </div>
                                    @endif
                                </div>
                            </div>
                            <div class="form-group row calculate-sip">
                                <label class="col-sm-5 col-form-label">Expected Rate Of Return (Lumpsum)</label>
                                <div class="col-sm-7">
                                    <input type="text" class="form-control number {{ $errors->has('onetime_interest_rate') ? ' is-invalid' : '' }}" name="onetime_interest_rate" value="{{old('onetime_interest_rate')}}"   >
                                    <div class="cal-icon">
                                        %
                                    </div>
                                    @if ($errors->has('onetime_interest_rate'))
                                        <div class="invalid-feedback" role="alert">
                                            <strong>{{ $errors->first('onetime_interest_rate') }}</strong>
                                        </div>
                                    @endif
                                </div>
                            </div>
                            <div class="form-group row calculate-sip">
                                <label class="col-sm-5 col-form-label">Expected Rate Of Return (SIP)</label>
                                <div class="col-sm-7">
                                    <input type="text" class="form-control number {{ $errors->has('sip_interest_rate') ? ' is-invalid' : '' }}" name="sip_interest_rate" value="{{old('sip_interest_rate')}}"   >
                                    <div class="cal-icon">
                                        %
                                    </div>
                                    @if ($errors->has('sip_interest_rate'))
                                        <div class="invalid-feedback" role="alert">
                                            <strong>{{ $errors->first('sip_interest_rate') }}</strong>
                                        </div>
                                    @endif
                                </div>
                            </div>

                            <div class="form-group row calculate-lumpsum">
                                <label class="col-sm-5 col-form-label">SIP Amount Per Month</label>
                                <div class="col-sm-7">
                                    <input type="text" class="form-control {{ $errors->has('investment_amount') ? ' is-invalid' : '' }}" name="investment_amount" value="{{old('investment_amount')}}"  required>
                                    <div class="cal-icon">
                                        ₹
                                    </div>
                                    @if ($errors->has('investment_amount'))
                                        <div class="invalid-feedback" role="alert">
                                            <strong>{{ $errors->first('investment_amount') }}</strong>
                                        </div>
                                    @endif
                                </div>
                            </div>
                            <div class="form-group row calculate-lumpsum">
                                <label class="col-sm-5 col-form-label">Expected Rate Of Return (SIP)</label>
                                <div class="col-sm-7">
                                    <input type="text" class="form-control number {{ $errors->has('sip_interest_rate') ? ' is-invalid' : '' }}" name="sip_interest_rate" value="{{old('sip_interest_rate')}}"   >
                                    <div class="cal-icon">
                                        %
                                    </div>
                                    @if ($errors->has('sip_interest_rate'))
                                        <div class="invalid-feedback" role="alert">
                                            <strong>{{ $errors->first('sip_interest_rate') }}</strong>
                                        </div>
                                    @endif
                                </div>
                            </div>
                            <div class="form-group row calculate-lumpsum">
                                <label class="col-sm-5 col-form-label">Expected Rate Of Return (Lumpsum)</label>
                                <div class="col-sm-7">
                                    <input type="text" class="form-control number {{ $errors->has('onetime_interest_rate') ? ' is-invalid' : '' }}" name="onetime_interest_rate" value="{{old('onetime_interest_rate')}}"   >
                                    <div class="cal-icon">
                                        %
                                    </div>
                                    @if ($errors->has('onetime_interest_rate'))
                                        <div class="invalid-feedback" role="alert">
                                            <strong>{{ $errors->first('onetime_interest_rate') }}</strong>
                                        </div>
                                    @endif
                                </div>
                            </div>
                            <div class="form-group row">
                                <label class="col-sm-5 col-form-label">
                                    <input id="is_client" type="checkbox" name="client" value="1" @if(old('client')=='1') checked  @endif> Add Client Name
                                </label>
                                <div class="col-sm-7">
                                    <input type="text" class="form-control {{ $errors->has('clientname') ? ' is-invalid' : '' }}" name="clientname"   value="{{old('clientname')}}" maxlength="30">
                                    <div class="cal-icon">
                                        <i class="fa fa-user"></i>
                                    </div>
                                    @if ($errors->has('clientname'))
                                        <div class="invalid-feedback" role="alert">
                                            <strong>{{ $errors->first('clientname') }}</strong>
                                        </div>
                                    @endif
                                </div>
                            </div>

                            <div class="form-group row">
                                <label class="col-sm-5 col-form-label">Get Report</label>
                                <div class="col-sm-7">
                                    <div class="form-check form-check-inline">
                                        <input class="form-check-input" type="radio" name="report" id="inlineRadio1" value="summary" @if(old('report')=='summary') checked  @endif>
                                        <label class="form-check-label" for="inlineRadio1">Summary Report</label>
                                    </div>
                                    <div class="form-check form-check-inline">
                                        <input class="form-check-input" type="radio" name="report" id="inlineRadio2" value="detailed" @if(old('report')=='summary')  @else checked  @endif >
                                        <label class="form-check-label" for="inlineRadio2">Detailed Report</label>
                                    </div>
                                </div>
                            </div>
                            @include('frontend.calculators.suggested.form')
                            <div class="form-group row">

                                <div class="offset-5 col-sm-7">
                                    <div class="row">
                                        <div class="col-md-4">
                                            <button type="button" onclick="window.history.go(-1); return false;" class="btn btn-primary btn-round btn-block"><i class="fa fa-angle-left"></i> Back</button>
                                        </div>
                                        <div class="col-md-8">
                                            <button class="btn btn-primary btn-round btn-block">Calculate</button>
                                        </div>
                                    </div>

                                </div>
                            </div>
                        </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="btm-shape-prt">
            <img class="img-fluid" src="{{url('/')}}/f/images/shape2.png" alt="" />
        </div>
    </section>

@endsection