@extends('layouts.master')

@section('content')

   <!-- start header area -->
   <section class="main-slider-area">
        <!-- Banner Section Start -->
        <div id="banner" class="banner--section pd--80-0">
            <!-- Banner Slider Start -->
            <div class="banner--slider owl-carousel">
                <!-- Banner Item Start -->
                <div class="banner--item" data-bg-img="asset/img/banner_slides/all-product.jpg"></div>

                <div class="banner--item" data-bg-img="asset/img/banner_slides/Credit-Cards.jpg"></div>

                <div class="banner--item" data-bg-img="asset/img/banner_slides/Loan.jpg"></div>

                <div class="banner--item" data-bg-img="asset/img/banner_slides/Insurance.jpg"></div>

                <div class="banner--item" data-bg-img="asset/img/banner_slides/Fixed-Deposits.jpg"></div>

                <div class="banner--item" data-bg-img="asset/img/banner_slides/Mutual-funds.jpg"></div>

                <div class="banner--item" data-bg-img="asset/img/banner_slides/Bonds.jpg"></div>

                <div class="banner--item" data-bg-img="asset/img/banner_slides/NPS.jpg"></div>

                <div class="banner--item" data-bg-img="asset/img/banner_slides/pos.jpg"></div>
                 <!-- Banner Item End -->
            </div>
            <!-- Banner Slider End -->

            <!-- Banner From Start -->
            <div class="container-fluid">
                <input type="hidden" name="pos_id" id="pos_id" value="{{$agent_id}}">
                @include('forms.general')
            </div>

            <!-- Banner From End -->
        </div>
        <!-- Banner Section End -->
    </section>
    <!-- end of header area -->

    <!-- start featured section -->
    <section class="featured-section section-padding">
        <div class="container">
            <div class="row">
                <div class="col-md-11 text-center">
                    <div class="section-title">
                        <h2>Loans for your life</h2>
                        <p>We have range of products for your loan solutions</p>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-lg-6 col-md-6">
                    <div class="single-featured">
                        <div class="icon">
                            <img src="asset/img/sub_icons/PersonalLoan.png" alt="" />
                        </div>
                        <div class="content">
                            <h4>Personal Loan</h4>
                            <p>We Ensure, Your Loans are Personal.</p>
                            <a href="{{ route('Personal.personalAdd') }}" target="_blank" class="button btn btn-default btn-sm">Apply Now <i class="fa fa-angle-double-right"></i></a>
                        </div>
                    </div>
                </div>
                <div class="col-lg-6 col-md-6">
                    <div class="single-featured">
                        <div class="icon">
                            <img src="asset/img/sub_icons/HomeLoan.png" alt="" />
                        </div>
                        <div class="content">
                            <h4>Home Loan</h4>
                            <p>Let Your Dream Home be a reality.</p>
                            <a href="{{ route('Home.homeAdd') }}" target="_blank"  class="button btn btn-default btn-sm">Apply Now <i class="fa fa-angle-double-right"></i> </a>
                        </div>
                    </div>
                </div>
                <div class="col-lg-6 col-md-6">
                    <div class="single-featured">
                        <div class="icon">
                            <img src="asset/img/sub_icons/Businessloan.png" alt="" />
                        </div>
                        <div class="content">
                            <h4>Business Loan</h4>
                            <p>Ignite the Entrepreneur in you.</p>
                            <a href="{{ route('Business.businessAdd') }}" target="_blank"  class="button btn btn-default btn-sm">Apply Now <i class="fa fa-angle-double-right"></i> </a>
                        </div>
                    </div>
                </div>
                <div class="col-lg-6 col-md-6">
                    <div class="single-featured">
                        <div class="icon">
                            <img src="asset/img/sub_icons/LoanAgainst.png" alt="" />
                        </div>
                        <div class="content">
                            <h4>Loan Against Property</h4>
                            <p>Apporoach us with Trust.</p>
                            <a href="{{ route('Lap.lapAdd') }}" target="_blank" class="button btn btn-default btn-sm">Apply Now <i class="fa fa-angle-double-right"></i> </a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <!-- end of featured section -->

    <!-- Start Credit Card -->
    <section class="get-consultation-section section-padding " style="padding-top: 60px; padding-bottom: 20px;">
        <div class="container">
            <div class="row">
                <div class="col-md-11 text-center">
                    <div class="section-title">
                        <h2>Credit Cards</h2>
                        <p>Hand-Pick the Credit Card that satisfies your needs</p>
                        <div class="single-featured">
                            <div class="col-md-11 text-center">
                                <div class="content">
                                    <a href="{{ route('card.add') }}" target="_blank" class="button btn btn-default btn-sm">Apply Now <i class="fa fa-angle-double-right"></i></a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <!-- End Credit Card -->

    <!-- start get consultation section -->
    <section class="featured-section section-padding"  style="padding-top: 60px; padding-bottom: 20px;">
        <div class="container ">
            <div class="row">
                <div class="col-md-11 text-center">
                    <div class="section-title">
                        <h2>Deposits</h2>
                        <p>Your Investments are Our Priority.</p>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-lg-6 col-md-6">
                    <div class="single-featured">
                        <div class="icon">
                            <img src="asset/img/sub_icons/FD.png" alt="" />
                        </div>
                        <div class="content">
                            <h4>Fixed Deposits</h4>
                            <p>Assured Guaranteed Returns.</p>
                            <a href="{{ route('fixed.add') }}" target="_blank"  class="button btn btn-default btn-sm">Apply Now <i class="fa fa-angle-double-right"></i> </a>
                        </div>
                    </div>
                </div>
                <div class="col-lg-6 col-md-6">
                    <div class="single-featured">
                        <div class="icon">
                            <img src="asset/img/sub_icons/RD.png" alt="" />
                        </div>
                        <div class="content">
                            <h4>Recurring Deposits</h4>
                            <p>Build Your Savings bit by bit.</p>
                            <a href="{{ route('recurring.add') }}" target="_blank" class="button btn btn-default btn-sm">Apply Now <i class="fa fa-angle-double-right"></i> </a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <!-- end of get consultation section -->

    <!-- start get consultation section -->
    <section class="get-consultation-section section-padding"  style="padding-top: 60px; padding-bottom: 20px;">
        <div class="container">
            <div class="row">
                <div class="col-md-11 text-center">
                    <div class="section-title">
                        <h2>Investments</h2>
                        <p>Make Investments a Habit.</p>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-lg-6 col-md-6">
                    <div class="single-featured">
                        <div class="icon">
                            <img src="asset/img/sub_icons/MutualFund.png" alt="" />
                        </div>
                        <div class="content">
                            <h4>Mutual Funds</h4>
                            <p>Grow Your Money.</p>
                            <a href="{{ route('mutualfunds.add') }}" target="_blank"  class="button btn btn-default btn-sm">Invest Now <i class="fa fa-angle-double-right"></i> </a>
                        </div>
                    </div>
                </div>
                <div class="col-lg-6 col-md-6">
                    <div class="single-featured">
                        <div class="icon">
                            <img src="asset/img/sub_icons/Bounds.png" alt="" />
                        </div>
                        <div class="content">
                            <h4>Bonds</h4>
                            <p>A Debt Investment that offers Guaranteed Returns.</p>
                            <a href="{{ route('bond.add') }}" target="_blank"  class="button btn btn-default btn-sm">Invest Now <i class="fa fa-angle-double-right"></i> </a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <!-- end of get consultation section -->
    <section class="featured-section section-padding"  style="padding-top: 60px; padding-bottom: 20px;">
        <div class="container">
            <div class="row">
                <div class="col-md-11 text-center">
                    <div class="section-title">
                        <h2>Insurance </h2>
                        <p>We Ensure, You are Insured</p>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-lg-6 col-md-6">
                    <div class="single-featured">
                        <div class="icon">
                            <img src="asset/img/sub_icons/HealthInsurence.png" alt="" />
                        </div>
                        <div class="content">
                            <h4>Health Insurance</h4>
                            <p>Illness is Expensive, Better Protect Your Savings.</p>
                            <a href="{{ route('health.add') }}" target="_blank" class="button btn btn-default btn-sm">Apply Now <i class="fa fa-angle-double-right"></i></a>
                        </div>
                    </div>
                </div>
                <div class="col-lg-6 col-md-6">
                    <div class="single-featured">
                        <div class="icon">
                            <img src="asset/img/sub_icons/LifeInsurence.png" alt=""  />
                        </div>
                        <div class="content">
                            <h4>Life insurance</h4>
                            <p>Protect Your Loved Ones Financially.</p>
                            <a href="{{ route('life.add') }}" target="_blank"  class="button btn btn-default btn-sm">Apply Now <i class="fa fa-angle-double-right"></i> </a>
                        </div>
                    </div>
                </div>
              <!--  <div class="col-lg-6 col-md-6">
                    <div class="single-featured">
                        <div class="icon">
                            <img src="asset/img/sub_icons/Motor Insurance.png" alt=""  />
                        </div>
                        <div class="content">
                            <h4>Motor Insurance</h4>
                            <p>Being Safe is in Your Own Hands.</p>
                            <a href="https://vizzainsurance.com/#/four-wheeler-home" target="_blank"  class="button btn btn-default btn-sm">Apply Now <i class="fa fa-angle-double-right"></i> </a>
                        </div>
                    </div>
                </div>
                <div class="col-lg-6 col-md-6">
                    <div class="single-featured">
                        <div class="icon">
                            <img src="asset/img/sub_icons/Personal Accident.png" alt=""  />
                        </div>
                        <div class="content">
                            <h4>Car Insurance</h4>
                            <p>Accidents will happens, no matter how carefull we are.</p>
                            <a href="https://vizzainsurance.com/#/personalaccident" target="_blank" class="button btn btn-default btn-sm">Apply Now <i class="fa fa-angle-double-right"></i> </a>
                        </div>
                    </div>
                </div>
            </div>
        </div>-->

    </section>
    <!-- End Insurance -->

    <section class="featured-section section-padding"  style="padding-top: 60px; padding-bottom: 20px;">
        <div class="container">
            <div class="row">
                <div class="col-md-11 text-center">
                    <div class="section-title">
                        <h2>Motor Insurance</h2>
                        <p>Being Safe is in Your Own Hands.</p>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-lg-6 col-md-6">
                    <div class="single-featured">
                        <div class="icon">
                            <img src="asset/img/sub_icons/Motor Insurance.png" alt="" />
                        </div>
                        <div class="content">
                            <h4>Car Insurance</h4>
                            <p>Accidents will happen, no matter how careful we are.</p>
                            <a href="{{ route('car.insurance.add') }}" target="_blank" class="button btn btn-default btn-sm">Apply Now <i class="fa fa-angle-double-right"></i></a>
                        </div>
                    </div>
                </div>
                <div class="col-lg-6 col-md-6">
                    <div class="single-featured">
                        <div class="icon">
                            <img src="asset/img/sub_icons/Bike.png" alt="" />
                        </div>
                        <div class="content">
                            <h4>Two Wheeler insurance</h4>
                            <p>There is no time to explain, Don't let accidents overtake your life .</p>
                            <a href="{{ route('twowheeler.insurance.add') }}" target="_blank" class="button btn btn-default btn-sm">Apply Now <i class="fa fa-angle-double-right"></i> </a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>


    <!-- Start NPS -->
    <section class="get-consultation-section section-padding"  style="padding-top: 80px; padding-bottom: 20px;">
        <div class="container">
            <div class="row">
                <div class="col-md-11 text-center">
                    <div class="section-title">
                        <h2>National Pension Scheme</h2>
                        <p>We Ensure You a Calm Retirement.</p>
                        <div class="single-featured">
                            <div class="col-md-11 text-center">
                                <div class="content">
                                    <a href="{{ route('nps.add') }}" target="_blank"  class="button btn btn-default btn-sm">Invest Now <i class="fa fa-angle-double-right"></i> </a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <!-- End NPS -->

    <!-- start second about area -->
    <section class="second-about-area section-padding"   style="padding-top: 25px; padding-bottom: 25px;">
        <div class="container">
            <div class="row">
                <div class="col-md-11 text-center">
                    <div class="section-title">
                        <h2>Why Vizza FinTech ?</h2>
                    </div>
                </div>
            </div>
            <div class="row justify-content-between">
                <div class="col-md-6">
                    <div class="second-about-content">
                        <div class="about-cradit-list">
                            <ul>
                                <li> Wide range of choices</li>
                                <li> We guide you through financial struggles </li>
                                <li> We care about your investments</li>
                                <li> We take responsibility for you</li>
                            </ul>
                        </div>
                    </div>
                </div>
                <div class="col-md-6 col-lg-6">
                    <div class="about-cradit-list">
                        <ul>
                            <li> Hassle Free Transactions</li>
                            <li> Fast, easy and reliable</li>
                            <li> Reliable Customer Support</li>
                            <li> Your Investments are our priority</li>
                        </ul>
                    </div>
                </div>
            </div>
        </div><br><br>
    </section>
    <!-- end of second about area -->

<script type="text/javascript">
    $(document).ready(function(){
        var owl = $('.owl-carousel');
    owl.owlCarousel({
        items:1,
        loop:true,
        autoplay:true,
        autoplayTimeout:3000, slideSpeed: 3000,
    });
    });
        $.ajaxSetup({
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            }
        });

        /* All Product Form */

        $('#mobile').keypress(function (e) {
        if (e.which != 8 && e.which != 0 && (e.which < 48 || e.which > 57)) {
            $('#errmsg').html('Enter Digits Only').show().fadeOut('slow');
            return false;
        }
    });

    jQuery.validator.addMethod("lettersonly", function(value, element) {
        return this.optional(element) || /^[a-z," "]+$/i.test(value);
    }, "Name must be a valid name.");
        $('#all-product-form').validate({

            errorElement: 'span',
                errorClass: 'text-danger',
        rules: {
            product_name:{
                required: true,

            },
            name:{
                required: true,
                minlength: 3,
                maxlength: 50,
                lettersonly:true
            },
            email: {
            required: true,
            email: true
            },
            mobile: {
                required: true,
                number: true,
                minlength: 10,
                maxlength: 10,
            },
        },
        messages: {
            product_name: {
                required: "Please select product",
        },
            name: {
                required: "Please enter your name",
            minlength:'Minimum 3 letters required',
            maxlength:'only 50 characters allowed.',
        },
            mobile: {
                digits: 'Invalid phone number 10 Only numbers allowed',
                required: 'Please provide a valid Phone Number .',
                maxlength: 'Please provide a valid Phone Number',
                minlength: 'Please provide a valid Phone Number'
            },
            email: {
                required: 'Please provide a valid Email ID .',
            },

        },
    submitHandler: function(form) {
        $('#product-error').text('');
            $('#name-error').text('');
            $('#email-error').text('');
            $('#mobile-error').text('');

            product_name = $('#product_name').val();
            name = $('#name').val();
            email = $('#email').val();
            mobile = $('#mobile').val();
            pos_id = $('#pos_id').val();

            $.ajax({
            url: "/products",
            type: "POST",
            data:{
                "_token": "{{ csrf_token() }}",
                product_name:product_name,
                name:name,
                email:email,
                mobile:mobile,
                pos_id:pos_id,
            },
            success:function(response){
                if (response) {
                $('#success-message').text(response.success);
                setTimeout(function() { $("#success-message").hide(); }, 5000);

                $("#all-product-form")[0].reset();
                }
            },
            error: function(response) {
                $('#product-error').text(response.responseJSON.errors.name);
                $('#name-error').text(response.responseJSON.errors.name);
                $('#email-error').text(response.responseJSON.errors.email);
                $('#mobile-error').text(response.responseJSON.errors.mobile);
            }
            });
        }
    });

</script>
<style>
@media (max-width: 932px) {
    .bg--img , .banner--slider .owl-dot{
        display:none;
    }
    .banner--form .row > div {
            padding-left: 10px !important;
            padding-right: 10px !important;
        }
}
</style>
@stop