@extends('frontend.layouts.layout1')

@section("style")
    
@endsection
@section('pageTitle')
<title>{{ trans('panel.site_title') }} {{ trans('new.home') }}</title>
@endsection

@section('content')
    <section class="ticket_section burger p-relative">
      <div class="bg_strip1"><img src="{{URL::asset('frontend/images/bg_strip1.svg')}}" alt="ticket" class="img-svg" /></div>
      <div class="bg_strip2"><img src="{{URL::asset('frontend/images/bg_strip2.svg')}}" alt="ticket" class="img-svg" /></div>
      <div class="ccontainer">
        <div class="crow g-0">
          <div class="ccol ccol-xl-4 ccol-lg-4 ccol-md-6 ccol-sm-8 ticket_area mx-auto py-0">
            <h1 class="heading_1 text-black">Tickets</h1>
            <hr class="mt-4" />
            <div class="crow mx-0 g-0 ticket_dtl">
              <div class="ccol ccol-lg-8">
                <h3 class="heading_3"><span class="steps">1</span>Choose a ticket</h3>
              </div>
            </div>
            <div class="crow mx-0 g-0 ticket_dtl">
              <div class="ccol ccol-sm-4">
                <div class="d-flex">
                  <div>
                    <div class="ticket_sm mr-1">Free</div>
                  </div>
                  <div>
                    <h4>Free Ticket</h4>
                    <p>Log 3 volunteer hours to your profile to earn this free ticket to the event.</p>
                  </div>
                </div>
              </div>
              <div class="ccol ccol-sm-4 text-right text-sm-left">
                <a href="ticket.php" class="cbtn cbtn-bdr-primary">Change ticket <span><img src="{{URL::asset('frontend/images/arrow.svg')}}" alt="arrow" class="img-svg" /></span></a>
              </div>
            </div>
            <hr class="mt-2" />
            <div class="crow mx-0 g-0">
              <div class="ccol ccol-lg-8">
                <h3 class="heading_3 mb-0"><span class="steps">2</span>Create your profile</h3>
              </div>
            </div>
            <div class="crow mx-0 g-0 mb-4">
              <div class="ccol ccol-lg-4">
              </div>
              <div class="ccol ccol-lg-4">
                <form>
                  <div class="crow">
                    <div class="ccol ccol-sm-4 pb-0">
                      <div class="form_fld">
                        <label>First Name</label>
                        <input type="text" name="" class="fld-control">
                      </div>
                    </div>
                    <div class="ccol ccol-sm-4 pb-0">
                      <div class="form_fld">
                        <label>Last Name</label>
                        <input type="text" name="" class="fld-control">
                      </div>
                    </div>
                  </div>
                  <div class="crow">
                    <div class="ccol ccol-8 pb-0">
                      <div class="form_fld">
                        <label>Email</label>
                        <input type="email" name="" class="fld-control">
                      </div>
                      <div class="form_fld">
                        <label>Password</label>
                        <input type="password" name="" class="fld-control">
                      </div>
                      <div class="form_fld">
                        <label>Confirm Password</label>
                        <input type="password" name="" class="fld-control">
                      </div>
                      <div class="form_fld">
                        <label>Birthday</label>
                        <input type="date" name="" class="fld-control">
                      </div>
                      <div class="form_fld">
                        <label>Street Address</label>
                        <input type="text" name="" class="fld-control">
                      </div>
                      <div class="form_fld">
                        <label>Apartment, Unit, Suite (Optional)</label>
                        <input type="text" name="" class="fld-control">
                      </div>
                      <div class="crow">
                        <div class="ccol ccol-sm-4 pb-0">
                          <div class="form_fld">
                            <label>City</label>
                            <input type="text" name="" class="fld-control">
                          </div>
                        </div>
                        <div class="ccol ccol-sm-4 pb-0">
                          <div class="form_fld">
                            <label>Zip Code</label>
                            <input type="text" name="" class="fld-control">
                          </div>
                        </div>
                      </div>
                      <div class="form_fld">
                        <label>State</label>
                        <input type="text" name="" class="fld-control">
                      </div>
                      <div class="form_fld">
                        <div class="d-flex">
                          <div><input type="checkbox" name="" class="mr-1" /></div>
                          <label>I want to receive email updates from LIFT Cincy</label>
                        </div>
                      </div>
                      <div class="form_fld">
                        <div class="d-flex">
                          <div><input type="checkbox" name="" class="mr-1" /></div>
                          <label>I agree to the Terms of Use, Privacy Policy, and Volunteer Waiver</label>
                        </div>
                      </div>
                      <div class="mt-3">
                        <button class="cbtn cbtn-primary">Create profile <span><img src="{{URL::asset('frontend/images/arrow.svg')}}" alt="arrow" class="img-svg" /></span></button>
                      </div>
                    </div>
                  </div>
                </form>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
@endsection

@section('scripts')
     
    <script>
      $(document).ready(function(){
        $(".inner_nav a").removeClass("active")
        $("#home").addClass("active");
      });
    </script>
@endsection