@extends('user.layouts.app')

@section('body_class', 'Tolly Fest 2025')

@section('content')
     
 <div class="container login-wrapper d-flex align-items-center justify-content-center">
      <div class="row w-100 justify-content-center">
        <div class="member-login-box">
          <div class="row g-0 login-card">
                      
            <!-- Login Form Side -->
            <div class="col-md-12 login-show-box">
              <div class="member-login">
                <div class="padlock">
                  <div class="padlock-icon">
                    <svg version="1.2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 780 1059" width="780" height="1059">
                      <title>68aca3a8-80dd-403c-88a9-d444655ec042</title>
                      <style>
                        .s0 { fill: #ffffff } 
                      </style>
                      <g id="Objects">
                        <path id="&lt;Compound Path&gt;" fill-rule="evenodd" class="s0" d="m760.1 483.8v456c0 58.7-47.5 106.2-106.2 106.2h-520.9c-58.6 0-106.1-47.5-106.1-106.2v-456c0-58.7 47.5-106.2 106.1-106.2h28.9v-128.1c0-31.2 6.2-61.5 18.2-90.1 11.7-27.6 28.4-52.3 49.6-73.6 21.3-21.2 46.1-37.9 73.6-49.6 28.6-12.1 58.9-18.2 90.2-18.2 31.2 0 61.5 6.1 90.1 18.2 27.6 11.7 52.4 28.4 73.6 49.6 21.3 21.3 37.9 46 49.6 73.6 12.1 28.6 18.2 58.9 18.2 90.1v128.1h28.9c58.7 0 106.2 47.5 106.2 106.2zm-275 174.8c0-50.6-41-91.6-91.6-91.6-50.6 0-91.7 41-91.7 91.6 0 38.6 23.8 71.6 57.5 85.1v78.7c0 18.9 15.3 34.2 34.2 34.2 18.8 0 34.1-15.3 34.1-34.2v-78.7c33.7-13.5 57.5-46.5 57.5-85.1zm40.4-409.1c0-35.2-13.7-68.4-38.7-93.3-24.9-24.9-58.1-38.7-93.3-38.7-35.3 0-68.4 13.8-93.4 38.7-24.9 24.9-38.7 58.1-38.7 93.3v128.1h264.1z"/>
                      </g>
                    </svg>
                  </div>
                </div>
                <div class="verify-wrap">
                  <h3 class="text-center">TOLLY FEST 2025</h3>
                  <p>Please verify your membership.</p>
                </div>
                <!-- Tab Content -->
                <div class="change-content" id="">
                  <div class="tab-pane">
                    <form>
                      <div class="form-row box-focus">
                        <label for="MembershipNumber">Membership number</label>
                        <input id="MembershipNumber" type="tel" class="form-control" placeholder="" required />
                      </div>
                      <div class="form-row box-focus">
                        <select class="custom-selectpicker" data-placeholder="Member Type">
                          <option value="" disabled selected>Member Type</option>
                          <option value="1">Primary Member</option>
                          <option value="2">Member Spouse</option>
                        </select>
                      </div>
                      <div class="login-btn-outer">
                        <button type="submit" class="btn btn-primary" id="sendOtp">Send OTP</button>
                      </div>                    
                    </form>
                  </div>
                </div>
              </div>
            </div>          
          </div>
        </div>
      </div>
    </div>
@endsection

@section('footer')
<!-- footer bottom appears here -->
@endsection

@push('scripts')
<script>
    let slideIndex = 1;
    showSlides(slideIndex);

    function plusSlides(n) {
        showSlides(slideIndex += n);
    }

    function currentSlide(n) {
        showSlides(slideIndex = n);
    }

    function showSlides(n) {
        let i;
        let slides = document.getElementsByClassName("mySlides");
        let dots = document.getElementsByClassName("dot");
        if (n > slides.length) {
            slideIndex = 1
        }
        if (n < 1) {
            slideIndex = slides.length
        }
        for (i = 0; i < slides.length; i++) {
            slides[i].style.display = "none";
        }
        for (i = 0; i < dots.length; i++) {
            dots[i].className = dots[i].className.replace(" active", "");
        }
        slides[slideIndex - 1].style.display = "block";
        dots[slideIndex - 1].className += " active";
    }
</script>
@endpush