@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>
<?php
$dialingCodes = [
    'IN' => '+91',
    'US' => '+1',
    'GB' => '+44',
    'AU' => '+61',
    'DE' => '+49',
];
?>

@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('patient-portal') }}" data-redirect="{{ route('patients.vitals') }}" enctype="multipart/form-data">
      <!-- Phone Number with Country Code -->
      <div class="mb-4">
        <div class="input-group">  
          <!-- Country Code Dropdown -->
          <select name="countryCode" id="countryCode" class="form-select" style="max-width: 80px;">
            <?php foreach ($dialingCodes as $country => $code): ?>
              <option value="<?= $code ?>"><?= $code ?></option>
            <?php endforeach; ?>
          </select>

          <!-- Phone Number Input -->
          <input id="phone" type="text" class="form-control @error('phone') is-invalid @enderror" name="phone" value="{{ old('phone') }}" required placeholder="Registered Phone Number">

          <!-- Send OTP Button -->
          <button type="button" id="sendButton" class="btn btn-primary">Send OTP</button>
        </div>
        @error('phone')
          <span class="text-danger">{{ $message }}</span>
        @enderror
      </div>
      
      <div class="mb-4" id="otp_filed" 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="otp" type="text" class="form-control" name="otp" placeholder="Enter OTP" maxlength="6" />
  </div>
</div>
 
<div class="mb-4">
  <div class="input-group">
    <span class="input-group-text">
      <i class="bi bi-person-badge"></i>
    </span>
    <input id="identifier" type="text" class="form-control" name="identifier" placeholder="Last 4 digits of Aadhar Number" readonly />
 
    <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-bs-toggle="dropdown" aria-expanded="false" style="display:none;">
      Select Aadhar
    </button>
   
    <ul id="recordDropdown" class="dropdown-menu dropdown-menu-end" aria-labelledby="dropdownMenuButton" style="max-height: 200px; overflow-y: auto; width: 300px;">
 
  </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>
<a class="register-link d-block mt-n1 fw-semibold text-decoration-none text-center" href="{{ route('abha-register') }}" style="color: #1A2980;">
  Register to Get Your ABHA
</a>


  </div>
</div>

@endsection