@extends('web.app')

@section('main-content')
<div class="container">
    <section class="text-center profile_section"><!-- login_section -->
        <div class="container">
            <div class="row">
                <div class="title-heading text-center">
                    <h2>MY DETAILS</h2>
                </div>
            </div>
            <div class="row">                
                <div class="col-md-6">
                    <div class="title-heading personal-detail">  <!-- text-center -->
                        <!-- <h2>QUICK REGISTRATION</h2> -->
                        <!-- <h3>FREE <i class="fa fa-rupee"></i> 150 TO PLAY WHEN YOU FIRST REGISTER</h3> -->
                        <h3>PERSONAL DETAILS</h3>
                    </div>
                    <div class="login-form detail-section">
                        <!-- <form class="" action="{{ url('/profile') }}" autocomplete="off" method="POST"> -->
                        <div class="omb_loginForm">
                        <!-- {{ csrf_field() }} -->
                            <!-- <input type="hidden" name="id" value="{{ $userDetail->id }} " > -->
                            <div class="input-group">
                                <input type="text" value="" class="form-control" name="first_name" placeholder="First Name *">
                                <p class="red" id="fnameError"></p>
                            </div>
                            <div class="input-group">
                                <input type="text" value="" class="form-control" name="last_name" placeholder="Last Name *">
                                <p class="red" id="lnameError"></p>
                            </div>
                            {{-- <div class="input-group">
                                <input type="text" value="{{ $userDetail->email }}" class="form-control email" name="email" placeholder="E-mail Address *">
                                <p class="red" id="emailError"></p>
                            </div> --}}
                            <div class="input-group">
                                <input type="text" value="" class="form-control" name="phone1" placeholder="Phone 1 *">
                                <p class="red" id="phone1Error"></p>
                            </div>
                            <div class="input-group">
                                <input type="text" value="" class="form-control" name="phone2" placeholder="Phone 2">
                                <p class="red" id="phone2Error"></p>
                            </div>
                            <div class="input-group gender">
                                <input type="radio"  value="male" class="gender" name="gender">
                                <label class="gender">Male</label>
                                <input type="radio"  value="female" class="gender" name="gender"> 
                                <label class="gender">Female</label>
                                <p class="red" id="genderError"></p>
                            </div>
                            <div class="input-group save-btn">
                                <input type="button" name="personal-detail" class="btn btn-primary" value="SAVE">
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-md-6">
                    <div class="title-heading personal-detail">
                        <h3>BILLING ADDRESS</h3>
                    </div>
                    <div class="login-form detail-section">
                        <input type="hidden" name="billing_id" value="" >
                        <div class="omb_loginForm">
                            <div class="input-group">
                                <input type="text" class="form-control" name="country" value="India" placeholder="Country *" disabled="disabled">
                                <p class="red" id="countryError"></p>
                            </div>
                            <div class="input-group">
                                <input type="text" value="" class="form-control" name="state" placeholder="State *">
                                <p class="red" id="stateError"></p>
                            </div>
                            <div class="input-group">
                                <input type="text" value="" class="form-control" name="city" placeholder="City *">
                                <p class="red" id="cityError"></p>
                            </div>
                            <div class="">
                                <textarea class="form-control address" name="address" placeholder="Address *"></textarea>
                                <p class="red" id="addressError"></p>
                            </div>
                            <div class="input-group">
                                <input type="text" value="" class="form-control" name="zipcode" placeholder="Zipcode">
                                <p class="red" id="zipcodeError"></p>
                            </div>                            
                            <div class="input-group save-btn">
                                <input type="button" name="billing-detail" class="btn btn-primary" value="SAVE">
                            </div>
                        </div>
                    </div>
                </div>                
            </div>
            <!-- <div class="row">
                <div class="col-md-6">
                    <div class="col-md-12">
                        <div class="title-heading text-center">
                            <h2>&nbsp;</h2>
                            <h3>&nbsp;</h3>
                        </div>
                    </div>
                    <div class="col-md-12">
                        <div class="col-md-6 col-sm-6 col-xs-6 text-center">
                            <img src="img/reg_mi_logo.jpg">
                        </div>
                        <div class="col-md-6 col-sm-6 col-xs-6 text-center">
                            <img src="img/bike_logo.jpg">
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-12 reg_txt">
                            <h1 class="text-center">
                                Welcome to winabike.in part of the Motorbikes India group. The final stage!
                            </h1>
                            <p>
                                You have previously registered on <strong>Motorbikes India</strong> <a href="http://www.motorbikesindia.com/">www.motorbikesindia.com</a> to enter the competition to win the UM Renegade Commando signed exclusively by Leslie Porterfield. Please now complete the quick <br>
                            </p>
                        </div>
                    </div>
                </div>
            </div> -->
        </div>
    </section>
</div>
@endsection

@push('scripts')
<script type="text/javascript" src="{{ url('public/js/bootstrap-notify.js') }}"></script>
<script type="text/javascript">
$(document).ready(function(){
    $("input[name=personal-detail]").click(function(){
        // $(this).attr("disabled","disabled");

        var first_name  = $("input[name=first_name]").val();
        var last_name   = $("input[name=last_name]").val();
        var email       = $("input[name=email]").val();
        var phone1      = $("input[name=phone1]").val();
        var phone2      = $("input[name=phone2]").val();
        var gender      = $("input[name=gender]:checked").val();
        var $isError    = 0;

        if(first_name == ""){
            $('#fnameError').html('please enter the first name');
            $isError = 1;
        }

        if(last_name == ""){
            $('#lnameError').html('please enter the last name');
            $isError = 1;
        }

        if(phone1 == "") {
          $('#phone1Error').html('please enter the phone number');
          $isError = 1;
        }

        var phoneno = /^\+?([0-9]{2})\)?[-. ]?([0-9]{4})[-. ]?([0-9]{4})$/;  
        if(phone1.length > 0) {
          if(!phone1.match(phoneno)) {  
              $('#phone1Error').html('please enter the valid phone number');
              $isError = 1;
          }
        }

        if(phone2.length > 0) {
          if(!phone2.match(phoneno)) {  
              $('#phone2Error').html('please enter the valid phone number');
              $isError = 1;  
          }
        }

        /*if(email == ""){
            $('#emailError').html('please enter the email');
            $isError = 1;
        }

        var mailformat = /^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/;  
        if(!email.match(mailformat)) { 
          $('#emailError').html('please enter the valid email');
          $isError = 1;
        }*/
        
        if($('[name="gender"]:checked').length==0) { 
          $('#genderError').html('please select the gender');
          $isError = 1;
        }

        if($isError == 1){
            return false;
        }
        
        $.ajax({
            url: "