@extends('layouts.app')

@section('title')
    <title>Register</title>
    {!! htmlScriptTagJsApi() !!}
@endsection

@section('body') 

      <section class="banner" style="background: url(./images/dynamic/About-Us.png)">
				<div class="container">
					<div class="row">
						<div class="col-lg-12">
							<div class="breadcrumb-info text-center" data-lag="0.2" data-stagger="0.08" data-speed="1" style="translate: none; rotate: none; scale: none; transform: translate(0px, 0px); will-change: transform;">
								<h1>Register</h1>
							</div>
						</div>
					</div>
				</div>
			</section>



  <div class="event_text">
    <section class="register contact_form p90">
      <div class="container">


      <form action="{{Route('register')}}" method="POST">
      @csrf
        <div class="row">
          <div class="col-md-8">
            <div class="c_form">
              <label>Full Name</label>
              <input type="text" placeholder="Full Name" name="full_name" required>
            </div>
          </div>

          <div class="col-md-4">
            <div class="c_form">
              <label>Gender</label>
              <div class="c_form_radio">
                <div class="form-check">
                  <input class="form-check-input" type="radio" name="gender" id="male" value="Male">
                  <label class="form-check-label" for="male">
                    Male
                  </label>
                </div>
                <div class="form-check">
                  <input class="form-check-input" type="radio" name="gender" id="female" value="Female" checked>
                  <label class="form-check-label" for="female">
                    Female
                  </label>
                </div>
              </div>
            </div>
          </div>

          <div class="col-md-4">
            <div class="c_form">
              <label>Country</label>
              <input type="text" placeholder="Country" name="country" required>
            </div>
          </div>

          <div class="col-md-4">
            <div class="c_form">
              <label>Mobile No</label>
              <input type="text" placeholder="Mobile No." name="mobile">
            </div>
          </div>


          <div class="col-md-4">
            <div class="c_form">
              <label>Date of Birth</label>
              <input type="text" placeholder="DD/MM/YYYY" name="DOB">
            </div>
          </div>

          <div class="col-md-4">
            <div class="c_form">
              <label>Passport No</label>
              <input type="text" placeholder="Passport number" name="passport" required>
            </div>
          </div>

          <div class="col-md-4">
            <div class="c_form">
              <label>Issue Date</label>
              <input type="text" placeholder="DD/MM/YYYY" name="issue_date">
            </div>
          </div>

          <div class="col-md-4">
            <div class="c_form">
              <label>Expiry Date</label>
              <input type="text" placeholder="DD/MM/YYYY" name="expiry_date">
            </div>
          </div>


          <div class="col-md-12">
            <div class="c_form">
              <label>Email</label>
              <input type="email" placeholder="you@company.com" name="email" required>
            </div>
          </div>

          <div class="col-md-12">
            <div class="c_form">
              <label>Race Option</label>
              <div class="c_form_radio">
                <div class="form-check">
                  <input class="form-check-input" type="radio" name="raceOption" id="halfMarathon" value="Half Marathon" required>
                  <label class="form-check-label" for="halfMarathon">
                    21K Half Marathon
                  </label>
                </div>
                <div class="form-check">
                  <input class="form-check-input" type="radio" name="raceOption" id="fullMarathon" value="Full Marathon">
                  <label class="form-check-label" for="fullMarathon">
                    42K Full Marathon
                  </label>
                </div>

                <div class="form-check">
                  <input class="form-check-input" type="radio" name="raceOption" id="ultraMarathon" value="Ultra Marathon">
                  <label class="form-check-label" for="ultraMarathon">
                    70K Ultra Marathon
                  </label>
                </div>

                <div class="form-check">
                  <input class="form-check-input" type="radio" name="raceOption" id="nonRunner" value="Non Runner">
                  <label class="form-check-label" for="nonRunner">
                    Non Runner
                  </label>
                </div>
              </div>
            </div>
          </div>

          <div class="col-md-12">
            <div class="c_form">
              <label>Package Option</label>
              <div class="c_form_radio">
                <div class="form-check">
                  <input class="form-check-input" type="radio" name="packageOption" id="islandPeakClimb" value="Island PeakClimb" required>
                  <label class="form-check-label" for="islandPeakClimb" checked>
                    Island Peak Climb
                  </label>
                </div>
                <div class="form-check">
                  <input class="form-check-input" type="radio" name="packageOption" id="heliInOut" value="Heli In Out">
                  <label class="form-check-label" for="heliInOut">
                    Heli In-Out
                  </label>
                </div>

                <div class="form-check">
                  <input class="form-check-input" type="radio" name="packageOption" id="lodgeRegular" value="Lodge Regular">
                  <label class="form-check-label" for="lodgeRegular">
                    Lodge Regular
                  </label>
                </div>

                <div class="form-check">
                  <input class="form-check-input" type="radio" name="packageOption" id="gokyoValleyTrek" value="Gokyo Valley Trek">
                  <label class="form-check-label" for="gokyoValleyTrek">
                    Gokyo Valley Trek
                  </label>
                </div>

                <div class="form-check">
                  <input class="form-check-input" type="radio" name="packageOption" id="lodgeHeli" value="Lodge Heli">
                  <label class="form-check-label" for="lodgeHeli">
                    Lodge Heli
                  </label>
                </div>

                <div class="form-check">
                  <input class="form-check-input" type="radio" name="packageOption" id="baseCampJoining" value="Base Camp Joining">
                  <label class="form-check-label" for="baseCampJoining">
                    Base Camp Joining
                  </label>
                </div>
              </div>
            </div>
          </div>

          <div class="col-md-12">
            <div class="c_form">
              <label>T-Shirt Size</label>
              <div class="c_form_radio">
                <div class="form-check">
                  <input class="form-check-input" type="radio" name="tshirt" id="xs36"  value="XS-36" required>
                  <label class="form-check-label" for="xs36">
                    XS-36''
                  </label>
                </div>
                <div class="form-check">
                  <input class="form-check-input" type="radio" name="tshirt" id="s38" value="S-38">
                  <label class="form-check-label" for="s38">
                    S-38''
                  </label>
                </div>

                <div class="form-check">
                  <input class="form-check-input" type="radio" name="tshirt" id="m40" value="M-40">
                  <label class="form-check-label" for="m40">
                    M-40''
                  </label>
                </div>

                <div class="form-check">
                  <input class="form-check-input" type="radio" name="tshirt" id="l42" value="L-42">
                  <label class="form-check-label" for="l42">
                    L-42''
                  </label>
                </div>

                <div class="form-check">
                  <input class="form-check-input" type="radio" name="tshirt" id="xl44" value="XL-44">
                  <label class="form-check-label" for="xl44">
                    XL-44''
                  </label>
                </div>

                <div class="form-check">
                  <input class="form-check-input" type="radio" name="tshirt" id="2xl46" value="2XL-46">
                  <label class="form-check-label" for="2xl46">
                    2XL-46''
                  </label>
                </div>

                <div class="form-check">
                  <input class="form-check-input" type="radio" name="tshirt" id="2xl48" value="3XL-48">
                  <label class="form-check-label" for="3xl48">
                    3XL-48''
                  </label>
                </div>
              </div>
            </div>
          </div>
          <input type="hidden" name="ip" value="">

          {!! htmlFormSnippet() !!}

          <div class="col-md-12">
            <div class="c_form">
              <!--button type="submit" class="cta red">Send Message</button-->
              <button type="submit" class="cta">
                <span class="btn-flip">
                  <span data-text="Send Message">Send Message</span>
                </span>
              </button>
            </div>
          </div>

        </div>
      </form>
      </div>
    </section>
  </div>
@endsection

@section('javascript')
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.css" integrity="sha512-3pIirOrwegjM6erE5gPSwkUzO+3cTjpnV9lexlNZqvupR64iZBnOOTiiLPb9M36zpMScbmUNIcHUqKD47M719g==" crossorigin="anonymous" referrerpolicy="no-referrer" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.js" integrity="sha512-VEd+nq25CkR676O+pLBnDW09R7VQX9Mdiij052gVCp5yVH3jGtH70Ho/UUv4mJDsEdTvqRCFZg0NKGiojGnUCw==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
    <script>  
    @if(Session::has('success'))  
            toastr.success("{{ Session('success') }}");  
    @endif  
    @if(Session::has('error')) 
            toastr.error("{{ Session('error') }}");
    @endif
    </script>  
@endsection