@extends('layouts.app_without_header')


<style>
ul#recordDropdown {
    left: auto;
    right: 0;
    top: 37px;
}
     .login {
            width: 100%;
            padding: 15px;
            background: linear-gradient(135deg, #1A2980, #26D0CE); /* Gradient button */
            color: white;
            border: none;
            border-radius: 8px;
            font-size: 16px;
            cursor: pointer;
            margin-top: 15px;
            font-weight: bold;
            transition: 0.3s;
        }
         .login:hover {
            background: linear-gradient(135deg, #26D0CE, #1A2980); /* Reverse gradient on hover */
            transform: scale(1.05);
        }
        
        #sendButton{
         background: linear-gradient(135deg, #1A2980, #26D0CE); /* Gradient button */
            color: white;
            border: none;
            font-size: 16px;
            cursor: pointer;
            font-weight: bold;
            transition: 0.3s;
        
        }
        
           #sendButton:hover{
         background: linear-gradient(135deg, #1A2980, #26D0CE); /* Gradient button */
            color: white;
            border: none;
            font-size: 16px;
            cursor: pointer;
            font-weight: bold;
            transition: 0.3s;
        
        }
        
          .register-link {
            display: block;
            margin-top: -5px;
            color: #1A2980;
            text-decoration: none;
            font-weight: 600;
        }

        .register-link:hover {
            text-decoration: underline;
        }
</style>

@section('content')

<div class="d-flex justify-content-center align-items-center vh-100" style="background: url('https://bluhealth.bluai.ai/img/background.png') no-repeat center center / cover;">
  <div class="card shadow-lg p-5" style="width: 100%; max-width: 550px; height: auto; min-height: 600px;">
    
    <!-- Logo and Slogan Section -->
    <div class="text-center mb-4">
      <img src="https://bluhealth.bluai.ai/img/logo/BluHealth_Logo.png" alt="BluHealth Logo" class="img-fluid mb-2" style="max-height: 100px;">
      <p class="slogan text-secondary fs-5">Manage. My Health. My Way.</p>
      <h4 class="welcome-back text-primary">Welcome Back!</h4>
    </div>

    <form id="patient_login" class="ajax-form forms-sample" action="{{ route('verifyAbdmOtp') }}" data-redirect="{{ route('patients.vitals') }}" enctype="multipart/form-data">
      <!-- Phone Number with Country Code -->
      <div class="mb-4">
        <div class="input-group">       
        <span class="input-group-text"> 
      <i class="bi bi-person-badge"></i>
    </span>
    <input id="aadhaarNumber" type="text" class="form-control" name="aadhaarNumber" placeholder="Last  Aadhar Number" />
 
                  
          <!-- Send OTP Button -->
          <button type="button" id="sendButtonotp" class="btn btn-primary">Send OTP</button>
        </div>
        @error('aadhaarNumber')
          <span class="text-danger">{{ $message }}</span>
        @enderror
      </div>
      
      
            <div class="mb-4" id="mobile_number" style="display: none;">
  <div class="input-group">
    <span class="input-group-text">
      <i class="bi bi-telephone"></i> <!-- Changed to phone icon -->
    </span>
    <input id="mobile_number" type="text" class="form-control" name="mobile" placeholder="Enter Phone number" maxlength="10" />
  </div>
</div>  
  
  
      
      <div class="mb-4" id="otp_filed_aadhar" style="display: none;">
 
  <div class="input-group">
    <span class="input-group-text">
      <i class="bi bi-key"></i> <!-- OTP ke liye Key Icon -->
    </span>
    <input id="otpaadhar" type="text" class="form-control" name="otpValue" placeholder="Enter OTP" maxlength="6" />
  </div>
</div>
 
   

      <!-- Submit Button -->
      <button type="submit" class="btn btn-primary w-100 login">Submit</button>
    </form>
<a class="register-link d-block mt-n1 fw-semibold text-decoration-none text-center" href="{{ route('patients.registers') }}" style="color: #1A2980;">
  Register to Get Your BluID
</a>
               


  </div>
</div>

@endsection