@extends('layouts.app')
@section('content')
  <main class="membersregistration-form  py-32">
   <div class="cotainer">
   <div class="row justify-content-center">
      <div class="col-11 col-sm-9 col-md-7 col-lg-6 col-xl-5 text-center p-0 mt-3 mb-2">
            <div class="card px-0 pt-4 pb-0 mt-3 mb-3">
                <h2 id="heading">Member Registration</h2>
                <p>Fill all form field to go to next step</p>

                <form id="msform">
                    <!-- progressbar -->
                    <ul id="progressbar">
                        <li class="active" id="personal"><strong>Personal</strong></li>
                        <li id="payment"><strong>Business</strong></li>
                        <li id="account"><strong>Account</strong></li>
                        <li id="confirm"><strong>Finish</strong></li>
                    </ul>
                    <div class="progress">
                     <div class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar" aria-valuemin="0" aria-valuemax="100"></div>
                  </div>
                    <br>
                    <!-- fieldsets -->
                    <fieldset>
                        <div class="form-card">
                           <div class="row">
                              <div class="col-7">
                                 <h2 class="fs-title">{{ __('messages.personal_information') }}:</h2>
                              </div>
                              <div class="col-5">
                                 <h2 class="steps">Step 1 - 4</h2>
                              </div>
                            </div>
                            <div class="row">
                                <div class="col-12">
                                    <label class="fieldlabels">Name of applicant's representative: *</label>
                                    <input type="text" name="name_representative" placeholder="Name of applicant's representative"/>
                                </div>
                                <div class="col-12">
                                    <label class="fieldlabels">Relationship with the institution: *</label>
                                    <input type="text" name="relationship" placeholder="Relationship with the institution"/>
                                </div>  
                                <div class="col-12">
                                    <div class="form-check-inline">
                                    <label class="form-check-label" for="radio2">
                                        <input type="radio" class="form-check-input" id="partner" name="partner_relation" value="1"><label class="fieldlabels">Partner</label>
                                    </label>
                                    </div>
                                    <div class="form-check-inline">
                                    <label class="form-check-label">
                                        <input type="radio" class="form-check-input" id="relation" name="partner_relation" value="2"><label class="fieldlabels">Relationship</label>
                                    </label>
                                    </div>  
                                </div>
          
                                <div class="col-6">
                                    <label class="fieldlabels">Address of the institution: *</label>
                                    <textarea rows = "5" name="address_institution" placeholder="Address of the institution"></textarea>
                                </div>
                                <div class="col-6">
                                    <label class="fieldlabels">Pincode: *</label>
                                    <input type="text" name="pincode_institution" placeholder="Pincode"/>
                                    <label class="fieldlabels">Phone number: *</label>
                                    <input type="text" name="phone" placeholder="Phone number"/>
                                </div>

                                <div class="col-12">
                                <label class="fieldlabels">Email: *</label>
                                <input type="email" name="email" placeholder="Email Id"/>
                                </div>
                                <div class="col-12">
                                    <label class="fieldlabels">Select Your Blood group: *</label>
                                    <select name="blood_group" class="form-group">
                                        <option>-----------Select Blood Group-----------</option>
                                        <option>O negative</option>
                                        <option>O positive</option>
                                        <option>A negative</option>
                                        <option>A positive</option>
                                        <option>B negative</option>
                                        <option>B positive</option>
                                        <option>AB negative</option>
                                        <option>AB positive</option>
                                    </select>

                                </div>
                                <div class="col-6">
                                    <label class="fieldlabels">Home Address: *</label>
                                    <textarea rows = "5" name="address_home" placeholder="Address of the institution"></textarea>
                                </div>
                                <div class="col-6">
                                    <label class="fieldlabels">Pincode: *</label>
                                    <input type="text" name="pincode_home" placeholder="Pincode"/>
                                    <label class="fieldlabels">Date of Birth: *</label>
                                    <input type="date" name="dob" placeholder="Date of Birth"/>
                                </div>

                                <div class="col-12">
                                    <label class="fieldlabels">Member's wife / husband's Name : *</label>
                                    <input type="text" name="wife_husband" placeholder="Member's wife / husband's Name"/>
                                </div>
                                <div class="col-12">
                                    <label class="fieldlabels">The heir: *</label>
                                    <input type="text" name="heir" placeholder="The heir"/>
                                </div>
   

                               

                            </div>


                        </div>
                        <input type="button" name="next" class="next action-button" value="Next"/>
                    </fieldset>
                    <fieldset>
                        <div class="form-card">
                            <div class="row">
                              <div class="col-7">
                                 <h2 class="fs-title">Business Information:</h2>
                              </div>
                              <div class="col-5">
                                 <h2 class="steps">Step 2 - 4</h2>
                              </div>
                            </div>
                            <div class="row">

                                <div class="col-12">
                                    <label class="fieldlabels">Building number: *</label>
                                    <input type="text" name="building_number" placeholder="Building number"/>
                                </div>
                                <div class="col-12">
                                    <div>
                                    <label class="fieldlabels">Building owned / rented:</label> 
                                    </div>
                                    <div class="form-check-inline">                  
                                    <label class="form-check-label" for="radio2">
                                        <input type="radio" class="form-check-input" id="owned" name="owned_rented" value="1">owned
                                    </label>
                                    </div>
                                    <div class="form-check-inline">
                                    <label class="form-check-label">
                                        <input type="radio" class="form-check-input" id="rented" name="owned_rented" value="2">rented
                                    </label>
                                    </div>  
                                </div>
                                <div class="col-12">
                                    <label class="fieldlabels">Type of business: *</label>
                                    <input type="text" name="business_type" placeholder="Type of business"/>
                                </div>
                                <div class="col-12">
                                    <label class="fieldlabels">Panchayat / Municipal License Number: *</label>
                                    <input type="text" name="license_number" placeholder="Panchayat / Municipal License Number"/>
                                </div>
                                <div class="col-12">
                                    <label class="fieldlabels">GST Registration number: *</label>
                                    <input type="text" name="gst_number" placeholder="GST Registration number"/>
                                </div>
                                <div class="col-12">
                                    <label class="fieldlabels">Establishment Date, Month, Year: *</label>
                                    <input type="date" name="establishment_date" placeholder="Establishment Date, Month, Year"/>
                                </div>
                                <div class="col-12">
                                    <label class="fieldlabels">Nature of Partnership in Business: *</label>
                                    <input type="text" name="partnership_nature" placeholder="Nature of Partnership in Business"/>
                                </div>
                                <div class="col-12">
                                    <label class="fieldlabels">Other organizations with membership : *</label>
                                    <input type="text" name="membership_organizations" placeholder="Other organizations with membership"/>
                                </div>

                            </div>


                         
                        </div>
                        <input type="button" name="next" class="next action-button" value="Next"/>
                        <input type="button" name="previous" class="previous action-button-previous" value="Previous"/>
                    </fieldset>
                    <fieldset>
                        <div class="form-card">
                            <div class="row">
                              <div class="col-7">
                                 <h2 class="fs-title">Account Information:</h2>
                              </div>
                              <div class="col-5">
                                 <h2 class="steps">Step 3 - 4</h2>
                              </div>
                            </div>
                            <div class="row">

                                <div class="col-6">
                                    <label class="fieldlabels">Name: *</label>
                                    <input type="text" name="name" placeholder="Name"/>
                                </div>
                                <div class="col-6">
                                    <label class="fieldlabels">Signature: *</label>
                                    <input type="file" name="signature"  accept="image/*">
                                </div>
                                <div class="col-12">
                                    <label class="fieldlabels">Password: *</label>
                                    <input type="password" name="pwd" placeholder="Password"/>
                                </div>
                                <div class="col-12">
                                    <label class="fieldlabels">Confirm Password: *</label>
                                    <input type="password" name="cpwd" placeholder="Confirm Password"/>
                                </div>
                                
                            </div>   
                        </div>
                        <input type="button" name="next" class="next action-button" value="Submit"/>
                        <input type="button" name="previous" class="previous action-button-previous" value="Previous"/>
                    </fieldset>
                    <fieldset>
                        <div class="form-card">
                           <div class="row">
                              <div class="col-7">
                                 <h2 class="fs-title">Finish:</h2>
                              </div>
                              <div class="col-5">
                                 <h2 class="steps">Step 4 - 4</h2>
                              </div>
                            </div>
                            <br><br>
                            <h2 class="purple-text text-center"><strong>SUCCESS !</strong></h2>
                            <br>
                            <div class="row justify-content-center">
                                <div class="col-3">
                                    <img src="https://i.imgur.com/GwStPmg.png" class="fit-image">
                                </div>
                            </div>
                            <br><br>
                            <div class="row justify-content-center">
                                <div class="col-7 text-center">
                                    <h5 class="purple-text text-center">You Have Successfully Signed Up</h5>
                                </div>
                            </div>
                        </div>
                    </fieldset>
                </form>
            </div>
        </div>
   </div>
</div>
</main>

@stop