@extends('layouts.main.main')

@section('title')
volunteer


@endsection

@section('content')
<!--Main Slider Start-->
<div class="inner-banner-header wf100 default-banner">
  <h1>Join {{env('APP_SHORT_NAME')}}</h1>
  <div class="gt-breadcrumbs">
    <ul>
      <li> <a href="/"> <i class="fas fa-home"></i> Home </a> </li>
      <li> <a>Join {{env('APP_SHORT_NAME')}}</a> </li>
      <li> <a href="/volunteer" class="active">Be a Volunteer</a> </li>

    </ul>
  </div>
</div>
<!--Main Slider Start-->
<!--Main Content Start-->
<div class="main-content innerpagebg wf100 p80 default-bg ">
  <!--News Large Page Start-->
  <!--Start-->
  <div class="news-details">
    <div class="container ">
      <div class="row">
        <!--News Start-->
        <div class="col-lg-12 ">
          <div class="news-details-wrap">
            <div class="news-large-post">
              <div class="post-txt">
                {{-- <h2>Feel Free to Contact us</h2> --}}
                <h2>Be a Volunteer</h2>

                <div class="" style="padding-top: 10px">
                  <!-- <h2>==> Coming Soon</h2> -->
                  <!--Form Start-->
                  <div class="col-lg-12">
                    <div class="contact-form">
                      <input type="hidden" name="_token" id="_token" value="{{csrf_token()}}">
                                     
                      <form>
                        <ul class="form-row">
                          <li class="half-col">
                            <label>Name:</label> <span class="text-danger "
                              style="font-size:16pt;display: inline;">*</span>
                            <input type="text" class="form-control joinITInputs clearITFormInputs"
                              placeholder="Your Name" id="full_name">
                            <span id="error_full_name"></span>

                          </li>
                          <li class="half-col">
                            <label>State: <span class="text-danger " style="font-size:16pt;display: inline;">*</span>

                              <select class="form-control joinITInputs clearITFormSelects"
                                aria-label="Default select example" id="state" placeholder="State"
                                style="margin-top: 5px;min-width:100% !important;width:100% !important;height:50px">
                                <option value="0" selected>--Select State--</option>
                                @foreach ($states as $state)
                                @if($state->id ==15)
                                <option value="{{$state->id}}" selected>{{$state->name}}</option>
                                @else
                                <option value="{{$state->id}}">{{$state->name}}</option>
                                @endif
                                @endforeach
                              </select>
                              <span id="error_state"></span>

                          </li>
                        
                          <li class="half-col">
                            <label>Email-Id :</label> <span class="text-danger "
                              style="font-size:16pt;display: inline;">*</span>
                            <input type="email" class="form-control joinITInputs clearITFormInputs"
                              placeholder="Email" id="email">
                            <span id="error_email"></span>

                            <label>Contact:</label> <span class="text-danger "
                              style="font-size:16pt;display: inline;">*</span>
                            <input type="text" class="form-control joinITInputs clearITFormInputs"
                              placeholder="Contact" id="contact" maxlength="10" onkeypress="return isNumber(event)" >
                            <span id="error_contact"></span>

                          </li>
                          <li class="half-col">
                            <label>Address:</label> <span class="text-danger "
                              style="font-size:16pt;display: inline;">*</span>
                            <textarea style="height:auto;" class="form-control joinITInputs clearITFormInputs"
                              rows="4" style="" placeholder="Address" id="address"></textarea>
                            <span id="error_address"></span>

                          </li>
                          <li class="full-col" style="margin-top: 10px">
                            <button type="button" onclick="joinIT('volunteer')">Submit</button>
                          </li>
                        </ul>
                      </form>
                    </div>
                  </div>
                  <!--Form End-->


                </div>
              </div>
            </div>
          </div>
        </div>
        <!--News End-->
      </div>
    </div>
  </div>
  <!--End-->
</div>
<!--Main Content End-->

<!--  lodaer error modal --> 

<div class="modal" tabindex="-1" id="loader-modal" role="dialog" data-backdrop="static" data-keyboard="false" style="background: transparent;box-shadow: none; text-align: center">
  <div class="modal-dialog modal-dialog-centered" role="document">
    <div class="modal-content" style="background: transparent;box-shadow: none;border:none ">
      
      <div class="modal-body">
        <div class="lds-roller" style="margin: 0 auto;">
          <div></div>
          <div></div>
          <div></div>
          <div></div>
          <div></div>
          <div></div>
          <div></div>
          <div></div>
        </div>

      </div>
      
    </div>
  </div>
</div>

<!--end of loader modal-->

<!-- The Join {{env('APP_SHORT_NAME')}} Modal -->
  <div class="modal fade" id="errorModal">
    <div class="modal-dialog modal-dialog-centered">
      <div class="modal-content">
      
        <!-- Modal Header -->
          
          <button type="button" class="close" data-dismiss="modal" style="text-align:right;margin-right:5px">&times;</button>
        
        <!-- Modal body -->
        <div class="modal-body" id="{{env('APP_SHORT_NAME')}}_modal_body">
          
        </div>
        
      
      </div>
    </div>
  </div>
<!-- End of Join {{env('APP_SHORT_NAME')}} Modal -->
@endsection