<style>
.step_two_form, .step_three_form, .login_form{
    display: none;

}

.toast-top-center {
    top: 12px;
    left:50%;
    margin:0 0 0 -150px;
}

.loader {
    width: 100%;
    height: 100%;
    position: fixed;
    top: 1px;
    display: flex;
    justify-content: center;
    flex-direction: row;
    align-items: center;
    background: #ffffff8a;
    padding: 150px;
    box-shadow: 0px 40px 60px -20px rgba(0, 0, 0, 0.2);
    z-index: 1051;
}

.loader span {
  display: block;
  width: 20px;
  height: 20px;
  background: #eee;
  border-radius: 50%;
  margin: 0 5px;
  box-shadow: 0 2px 2px rgba(0, 0, 0, 0.2);
}

.loader span:nth-child(2) {
  background: #f07e6e;
}

.loader span:nth-child(3) {
  background: #84cdfa;
}

.loader span:nth-child(4) {
  background: #5ad1cd;
}

.loader span:not(:last-child) {
  animation: animate 1.5s linear infinite;
}

@keyframes  animate {
  0% {
    transform: translateX(0);
  }

  100% {
    transform: translateX(30px);
  }
}

.loader span:last-child {
  animation: jump 1.5s ease-in-out infinite;
}

@keyframes  jump {
  0% {
    transform: translate(0, 0);
  }
  10% {
    transform: translate(10px, -10px);
  }
  20% {
    transform: translate(20px, 10px);
  }
  30% {
    transform: translate(30px, -50px);
  }
  70% {
    transform: translate(-150px, -50px);
  }
  80% {
    transform: translate(-140px, 10px);
  }
  90% {
    transform: translate(-130px, -10px);
  }
  100% {
    transform: translate(-120px, 0);
  }
}

</style>
<div>
    <div class="loader d-none">
      <span></span>
      <span></span>
      <span></span>
      <span></span>
      <span></span>
    </div>
</div>
<div class="modal fade" id="MainModal" data-backdrop="static" tabindex="-1" role="dialog" aria-labelledby="MainModalLabel" aria-hidden="true" >
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="MainModalLabel">Booking Details</h5>
        <button type="button" class="close" data-bs-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
          <form action="<?php echo e(route('userbookings.store')); ?>" method="POST">
            <?php echo csrf_field(); ?>
            <?php if(auth()->guard()->check()): ?>
            <input type="hidden" name="customer_id" id="customer_id" value="<?php echo e(auth()->user()->id); ?>">
            <?php else: ?>
            <input type="hidden" name="customer_id" id="customer_id">
            <?php endif; ?>
              <div class="step_one_form">
                  <h2>There are <span id="seats_available">0</span> seats available!</h2>
                  <span>Date</span>
                  <input class="form-control" type="text" name="booking_date" id="booking_date" required readonly>
                  <span>Time Slot</span>
                  <input class="form-control" type="text" name="timeslot" id="timeslot" required readonly>
                    
                    <br>
                  <span>How many seats you want?</span>
                  <input class="form-control mb-2" type="number" name="seats" id="seats" pattern="[0-9]*" value="1" min="1" max="25">
                  <span>You will pay:</span>&nbsp;Rs.<span id="seats_price_total">--</span>

                   <div class="d-block text-right mt-3">
                      <button type="button" class="btn btn-primary step_one_bt">NEXT</button>
                   </div>
                </div>
                <div class="step_two_form">
                    <h5>Please give your details to Sign Up and reserve seats or Login <span role="button" class="text-primary login_link">here</span></h5>
                    <div class="text-danger" id="signup_error"></div>
                  <span>First Name</span>
                  <input class="form-control" type="text" name="fname" id="fname">
                  <span>Last Name</span>
                  <input class="form-control" type="text" name="lname" id="lname">
                  <span>Email</span>
                  <input class="form-control" type="text" name="email" id="email">
                  <span>Contact</span>
                  <input class="form-control" type="text" name="contact_number" id="contact_number">
                  <span>Password</span>
                  <input class="form-control" type="password" name="password" id="password">
                  <span>Confirm Password</span>
                  <input class="form-control" type="password" name="password_confirm" id="password_confirm">
                   <div class="captcha mt-3 mb-1">
                    <span><?php echo captcha_img(); ?></span>
                    <button type="button" class="btn btn-danger" class="reload" id="reload">
                        &#x21bb;
                    </button>
                    </div>
                    <input class="form-control"  type="text" name="captcha" id="captcha" placeholder="Enter Captcha" >
                  <div class="d-block text-right mt-3">
                        <button type="button" class="btn btn-primary step_two_bt">Sign Up</button>
                  </div>
                </div>
                <div class="step_three_form">
                    <h2>You have reserved <span id="bill_seats">--</span> seats!</h2>
                    <div class="text-danger" id="bill_error"></div>
                    <h5>Date: <span id="bill_date">--</span></h5>
                    <h5>Timeslot: <span id="bill_timeslot">--</span></h5>
                    <h5>Total Bill: Rs.<span id="bill_to_paid">--</span></h5>
                    <div class="d-block text-right mt-3">
                          <button type="submit" class="btn btn-primary step_three_bt">Proceed to pay</button>
                    </div>
                </div>
                <div class="login_form">
                    <h5>Please give your details to Login</h5>
                    <div class="text-danger" id="login_error"></div>
                    <span>Email</span>
                    <input class="form-control" type="text" name="login_email" id="login_email">
                  <span>Password</span>
                  <input class="form-control" type="password" name="login_password" id="login_password">
                  <div class="d-block text-right mt-3">
                        <button type="button" class="btn btn-primary login_bt">Login</button>
                  </div>
              </div>
        </form>
      </div>
    </div>
  </div>
</div>
<?php /**PATH C:\xampp\htdocs\pec_portal\resources\views/website/partials/forms.blade.php ENDPATH**/ ?>