@extends('layouts.master-auth')

@section('title', 'Login')

@section('content')

    @include('layouts/loader')
    <div class="auth-main">
      <div class="auth-wrapper v3">
        <div class="auth-form">
          <div class="auth-header row">
            <div class="col my-1">
              <a href="#"><img src="/build/images/logo-dark.svg" alt="img" /></a>
            </div>
            <div class="col-auto my-1">
              <h5 class="m-0 text-muted f-w-500">Step <b class="h5" id="auth-active-slide">1</b> to 5</h5>
            </div>
          </div>
          <div class="card my-5">
            <div class="card-body">
              <ul class="nav nav-tabs d-none" id="myTab" role="tablist">
                <li class="nav-item">
                  <a
                    class="nav-link active"
                    id="auth-tab-1"
                    data-bs-toggle="tab"
                    href="#auth-1"
                    role="tab"
                    data-slide-index="1"
                    aria-controls="auth-1"
                    aria-selected="true"
                  >
                  </a>
                </li>
                <li class="nav-item">
                  <a
                    class="nav-link"
                    id="auth-tab-2"
                    data-bs-toggle="tab"
                    href="#auth-2"
                    role="tab"
                    data-slide-index="2"
                    aria-controls="auth-2"
                    aria-selected="true"
                  >
                  </a>
                </li>
                <li class="nav-item">
                  <a
                    class="nav-link"
                    id="auth-tab-3"
                    data-bs-toggle="tab"
                    href="#auth-3"
                    role="tab"
                    data-slide-index="3"
                    aria-controls="auth-3"
                    aria-selected="true"
                  >
                  </a>
                </li>
                <li class="nav-item">
                  <a
                    class="nav-link"
                    id="auth-tab-4"
                    data-bs-toggle="tab"
                    href="#auth-4"
                    role="tab"
                    data-slide-index="4"
                    aria-controls="auth-4"
                    aria-selected="true"
                  >
                  </a>
                </li>
                <li class="nav-item">
                  <a
                    class="nav-link"
                    id="auth-tab-5"
                    data-bs-toggle="tab"
                    href="#auth-5"
                    role="tab"
                    data-slide-index="5"
                    aria-controls="auth-5"
                    aria-selected="true"
                  >
                  </a>
                </li>
              </ul>
              <div class="tab-content">
                <div class="tab-pane show active" id="auth-1" role="tabpanel" aria-labelledby="auth-tab-1">
                  <div class="text-center">
                    <h3 class="text-center mb-3">Welcome to the Able Pro</h3>
                    <p class="mb-4">Sign up or login with your work email.</p>
                    <div class="d-grid my-3">
                      <button type="button" class="btn mt-2 btn-light-primary bg-light text-muted" onClick="change_tab('#auth-2')">
                        <img src="/build/images/authentication/sms.svg" alt="img" /> <span> Continue with work email</span>
                      </button>
                      <button type="button" class="btn mt-2 btn-light-primary bg-light text-muted">
                        <img src="/build/images/authentication/facebook.svg" alt="img" /> <span> Sign In with Facebook</span>
                      </button>
                      <button type="button" class="btn mt-2 btn-light-primary bg-light text-muted">
                        <img src="/build/images/authentication/twitter.svg" alt="img" /> <span> Sign In with Twitter</span>
                      </button>
                      <button type="button" class="btn mt-2 btn-light-primary bg-light text-muted">
                        <img src="/build/images/authentication/google.svg" alt="img" /> <span> Sign In with Google</span>
                      </button>
                    </div>
                  </div>
                </div>
                <div class="tab-pane" id="auth-2" role="tabpanel" aria-labelledby="auth-tab-2">
                  <div class="text-center">
                    <h3 class="text-center mb-3">Welcome to the Able Pro</h3>
                    <p class="mb-4">Sign up or login with your work email.</p>
                  </div>
                  <div class="mb-3">
                    <label class="form-label">Enter your work email to continue</label>
                    <input type="email" class="form-control" placeholder="Email" />
                  </div>
                  <div class="row g-3">
                    <div class="col-sm-6">
                      <div class="d-grid">
                        <button class="btn btn-outline-secondary" onClick="change_tab('#auth-1')">Back</button>
                      </div>
                    </div>
                    <div class="col-sm-6">
                      <div class="d-grid">
                        <button class="btn btn-primary" onClick="change_tab('#auth-3')">Continue</button>
                      </div>
                    </div>
                  </div>
                </div>
                <div class="tab-pane" id="auth-3" role="tabpanel" aria-labelledby="auth-tab-3">
                  <div class="text-center">
                    <h3 class="text-center mb-3">What’s your purpose for use Able</h3>
                    <p class="mb-4">Your setup experience will be streamlined accordingly</p>
                  </div>
                  <div class="row mb-4 g-3">
                    <div class="col-sm-6">
                      <div class="auth-option">
                        <input type="radio" class="btn-check" name="options" id="option1" checked />
                        <label class="auth-megaoption" for="option1">
                          <svg class="pc-icon">
                            <use xlink:href="#custom-user"></use>
                          </svg>
                          <span class="h5">Personal</span>
                        </label>
                      </div>
                    </div>
                    <div class="col-sm-6">
                      <div class="auth-option">
                        <input type="radio" class="btn-check" name="options" id="option2" />
                        <label class="auth-megaoption" for="option2">
                          <svg class="pc-icon">
                            <use xlink:href="#custom-home"></use>
                          </svg>
                          <span class="h5">Business</span>
                        </label>
                      </div>
                    </div>
                  </div>
                  <div class="row g-3">
                    <div class="col-sm-6">
                      <div class="d-grid">
                        <button class="btn btn-outline-secondary" onClick="change_tab('#auth-2')">Back</button>
                      </div>
                    </div>
                    <div class="col-sm-6">
                      <div class="d-grid">
                        <button class="btn btn-primary" onClick="change_tab('#auth-4')">Continue</button>
                      </div>
                    </div>
                  </div>
                </div>
                <div class="tab-pane" id="auth-4" role="tabpanel" aria-labelledby="auth-tab-4">
                  <div class="text-center">
                    <h3 class="text-center mb-3">Tell us About Yourself</h3>
                    <p class="mb-4">Tell us a bit about yourself</p>
                  </div>
                  <div class="row my-4">
                    <div class="col-sm-6">
                      <div class="mb-3">
                        <label class="form-label">First name</label>
                        <input type="text" class="form-control" placeholder="First name" />
                      </div>
                    </div>
                    <div class="col-sm-6">
                      <div class="mb-3">
                        <label class="form-label">Last name</label>
                        <input type="text" class="form-control" placeholder="Last name" />
                      </div>
                    </div>
                    <div class="col-12">
                      <div class="mb-3">
                        <label class="form-label">Email id</label>
                        <input type="email" class="form-control" placeholder="Email id" />
                      </div>
                    </div>
                    <div class="col-12">
                      <div class="mb-3">
                        <label class="form-label">Password</label>
                        <input type="password" class="form-control" placeholder="Password" />
                      </div>
                    </div>
                    <div class="col-12">
                      <div class="mb-3">
                        <label class="form-label">Confirm Password</label>
                        <input type="password" class="form-control" placeholder="Confirm Password" />
                      </div>
                    </div>
                  </div>
                  <div class="row g-3">
                    <div class="col-sm-6">
                      <div class="d-grid">
                        <button class="btn btn-outline-secondary" onClick="change_tab('#auth-3')">Back</button>
                      </div>
                    </div>
                    <div class="col-sm-6">
                      <div class="d-grid">
                        <button class="btn btn-primary" onClick="change_tab('#auth-5')">Continue</button>
                      </div>
                    </div>
                  </div>
                </div>
                <div class="tab-pane" id="auth-5" role="tabpanel" aria-labelledby="auth-tab-5">
                  <div class="text-center">
                    <h3 class="text-center mb-3">Please confirm your email id</h3>
                    <p class="mb-4">Lorem Ipsum is simply dummy text of the printing and typesetting industry of Lorem Ipsum.</p>
                  </div>
                  <div class="row my-4 text-center">
                    <div class="col">
                      <input type="number" class="form-control text-center code-input" placeholder="0" />
                    </div>
                    <div class="col">
                      <input type="number" class="form-control text-center code-input" placeholder="0" />
                    </div>
                    <div class="col">
                      <input type="number" class="form-control text-center code-input" placeholder="0" />
                    </div>
                    <div class="col">
                      <input type="number" class="form-control text-center code-input" placeholder="0" />
                    </div>
                  </div>
                  <div class="d-grid">
                    <button class="btn btn-primary auth-conf">Continue</button>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="auth-footer">
            <p class="m-0 w-100 text-center"
              >By signing up, you confirm to have read Able pro <a href="#">Privacy Policy</a> and agree to the
              <a href="#">Terms of Service</a>.</p
            >
          </div>
        </div>
        <div class="auth-sidecontent">
          <div class="p-3 px-lg-5 text-center">
            <div id="carouselExampleIndicators" class="carousel slide" data-bs-ride="carousel">
              <div class="carousel-inner">
                <div class="carousel-item active">
                  <img src="/build/images/user/avatar-1.jpg" alt="user-image" class="user-avtar wid-50 rounded-circle mb-3" />
                  <h5 class="text-white mb-0">Allie Grater</h5>
                  <p class="text-white text-opacity-50">@alliegrater</p>
                  <div class="star f-20 my-4">
                    <i class="fas fa-star text-warning"></i>
                    <i class="fas fa-star text-warning"></i>
                    <i class="fas fa-star text-warning"></i>
                    <i class="fas fa-star text-warning"></i>
                    <i class="fas fa-star-half-alt text-warning"></i>
                  </div>
                  <p class="text-white"
                    >Very good customer service!👌 I liked the design and there was nothing wrong, but found out after testing that it did
                    not quite match the functionality and overall design that I needed for my type of software. I therefore contacted
                    customer service and it was no problem even though the deadline for refund had actually expired.😍</p
                  >
                </div>
                <div class="carousel-item">
                  <img src="/build/images/user/avatar-2.jpg" alt="user-image" class="user-avtar wid-50 rounded-circle mb-3" />
                  <h5 class="text-white mb-0">Allie Grater</h5>
                  <p class="text-white text-opacity-50">@alliegrater</p>
                  <div class="star f-20 my-4">
                    <i class="fas fa-star text-warning"></i>
                    <i class="fas fa-star text-warning"></i>
                    <i class="fas fa-star text-warning"></i>
                    <i class="fas fa-star text-warning"></i>
                    <i class="fas fa-star-half-alt text-warning"></i>
                  </div>
                  <p class="text-white"
                    >Very good customer service!👌 I liked the design and there was nothing wrong, but found out after testing that it did
                    not quite match the functionality and overall design that I needed for my type of software. I therefore contacted
                    customer service and it was no problem even though the deadline for refund had actually expired.😍</p
                  >
                </div>
                <div class="carousel-item">
                  <img src="/build/images/user/avatar-3.jpg" alt="user-image" class="user-avtar wid-50 rounded-circle mb-3" />
                  <h5 class="text-white mb-0">Allie Grater</h5>
                  <p class="text-white text-opacity-50">@alliegrater</p>
                  <div class="star f-20 my-4">
                    <i class="fas fa-star text-warning"></i>
                    <i class="fas fa-star text-warning"></i>
                    <i class="fas fa-star text-warning"></i>
                    <i class="fas fa-star text-warning"></i>
                    <i class="fas fa-star-half-alt text-warning"></i>
                  </div>
                  <p class="text-white"
                    >Very good customer service!👌 I liked the design and there was nothing wrong, but found out after testing that it did
                    not quite match the functionality and overall design that I needed for my type of software. I therefore contacted
                    customer service and it was no problem even though the deadline for refund had actually expired.😍</p
                  >
                </div>
                <div class="carousel-item">
                  <img src="/build/images/user/avatar-4.jpg" alt="user-image" class="user-avtar wid-50 rounded-circle mb-3" />
                  <h5 class="text-white mb-0">Allie Grater</h5>
                  <p class="text-white text-opacity-50">@alliegrater</p>
                  <div class="star f-20 my-4">
                    <i class="fas fa-star text-warning"></i>
                    <i class="fas fa-star text-warning"></i>
                    <i class="fas fa-star text-warning"></i>
                    <i class="fas fa-star text-warning"></i>
                    <i class="fas fa-star-half-alt text-warning"></i>
                  </div>
                  <p class="text-white"
                    >Very good customer service!👌 I liked the design and there was nothing wrong, but found out after testing that it did
                    not quite match the functionality and overall design that I needed for my type of software. I therefore contacted
                    customer service and it was no problem even though the deadline for refund had actually expired.😍</p
                  >
                </div>
                <div class="carousel-item">
                  <img src="/build/images/user/avatar-5.jpg" alt="user-image" class="user-avtar wid-50 rounded-circle mb-3" />
                  <h5 class="text-white mb-0">Allie Grater</h5>
                  <p class="text-white text-opacity-50">@alliegrater</p>
                  <div class="star f-20 my-4">
                    <i class="fas fa-star text-warning"></i>
                    <i class="fas fa-star text-warning"></i>
                    <i class="fas fa-star text-warning"></i>
                    <i class="fas fa-star text-warning"></i>
                    <i class="fas fa-star-half-alt text-warning"></i>
                  </div>
                  <p class="text-white"
                    >Very good customer service!👌 I liked the design and there was nothing wrong, but found out after testing that it did
                    not quite match the functionality and overall design that I needed for my type of software. I therefore contacted
                    customer service and it was no problem even though the deadline for refund had actually expired.😍</p
                  >
                </div>
              </div>
              <div class="carousel-indicators position-relative mt-3">
                <button
                  type="button"
                  data-bs-target="#carouselExampleIndicators"
                  data-bs-slide-to="0"
                  class="active"
                  aria-current="true"
                  aria-label="Slide 1"
                ></button>
                <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="1" aria-label="Slide 2"></button>
                <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="2" aria-label="Slide 3"></button>
                <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="3" aria-label="Slide 4"></button>
                <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="4" aria-label="Slide 5"></button>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- [ Main Content ] end -->

@endsection

@section('scripts')
    <!-- [Page Specific JS] start -->
    <!-- Sweet Alert -->
    <script src="/build/js/plugins/sweetalert2.all.min.js"></script>
    <script>
      document.querySelector('.auth-conf').addEventListener('click', function () {
        Swal.fire({
          icon: 'success',
          title: 'Account created successfully'
        });
      });

      function change_tab(tab_name) {
        var someTabTriggerEl = document.querySelector('a[href="' + tab_name + '"]');
        document.querySelector('#auth-active-slide').innerHTML = someTabTriggerEl.getAttribute('data-slide-index');
        var actTab = new bootstrap.Tab(someTabTriggerEl);
        actTab.show();
      }

      const inputElements = [...document.querySelectorAll('input.code-input')];

      inputElements.forEach((ele, index) => {
        ele.addEventListener('keydown', (e) => {
          // if the keycode is backspace & the current field is empty
          // focus the input before the current. Then the event happens
          // which will clear the "before" input box.
          if (e.keyCode === 8 && e.target.value === '') inputElements[Math.max(0, index - 1)].focus();
        });
        ele.addEventListener('input', (e) => {
          // take the first character of the input
          // this actually breaks if you input an emoji like 👨‍👩‍👧‍👦....
          // but I'm willing to overlook insane security code practices.
          const [first, ...rest] = e.target.value;
          e.target.value = first ?? ''; // first will be undefined when backspace was entered, so set the input to ""
          const lastInputBox = index === inputElements.length - 1;
          const didInsertContent = first !== undefined;
          if (didInsertContent && !lastInputBox) {
            // continue to input the rest of the string
            inputElements[index + 1].focus();
            inputElements[index + 1].value = rest.join('');
            inputElements[index + 1].dispatchEvent(new Event('input'));
          }
        });
      });
    </script>
    <!-- [Page Specific JS] end -->
@endsection