@extends('layout.app')
@section('content')
   <div class="container login-page">
      <div class="row justify-content-between align-items-center w-100">
         <div class="col-md-6 col-lg-7 login-left">
            <img class="left-img" src="{{ asset('/assets/images/login-left.png') }}" alt="login illustration">
            <p class="text-white" fs-2x>Telecommunication Service Authorisation under the Telecommunications Rules, 2026
               and the Telecommunications Act, 2023.</p>
         </div>

         <div class="col-md-6 col-lg-5">
            <div class="login-container">
               @if(session('error'))
                  <div class="alert alert-danger">
                     {{ session('error') }}
                  </div>
               @endif
               <form action="{{ route('submit-auth') }}" method="POST">
                  @csrf
                  <div class="form-group mb-3">
                     <label class="required">Username</label>
                     <input type="text" name="user_name" class="form-control" placeholder="Enter username" maxlength="15"
                        onkeypress="return /[a-zA-Z0-9_]/.test(event.key)" value="{{ old('user_name') }}">
                     @error('user_name')
                        <div class="invalid-feedback d-block">
                           {{ $message }}
                        </div>
                     @enderror
                  </div>
                  <div class="form-group mb-3">
                     <label class="required">Password</label>
                     <!-- 1. Wrapped in an input-group to hold the input and the toggle button side-by-side -->
                     <div class="input-group">
                        <input type="password" name="password" id="auth_pwd" class="form-control"
                           placeholder="Enter password" maxlength="20">

                        <!-- 2. Interactive toggle button attachment -->
                        <span class="input-group-text" id="togglePwd" style="cursor: pointer;">
                           <i class="fas fa-eye" id="toggleIcon"></i>
                        </span>
                     </div>
                     @error('password')
                        <div class="invalid-feedback d-block">
                           {{ $message }}
                        </div>
                     @enderror
                  </div>
                  @if(app()->environment() != 'local')
                  <div class="captcha-wrapper mb-3">
                     <label class="required">Captcha Verification</label>
                     <div class="captcha-box">
                        {{-- Captcha Image --}}
                        <div class="captcha-image">
                           <span id="captcha-img">
                              {!! captcha_img('flat') !!}
                           </span>
                        </div>
                        <button type="button" class="reload-btn" id="reloadCaptcha">
                           <i class="fas fa-sync-alt"></i>
                        </button>
                        <div>
                           <input type="text" name="captcha" id="captcha"
                              class="form-control mt-2 {{ $errors->has('captcha') ? 'is-invalid' : '' }}"
                              placeholder="Enter captcha" />
                        </div>
                     </div>
                     <div class="captcha-loader" id="captchaLoader">
                        <i class="fas fa-spinner fa-spin"></i>
                        Refreshing...
                     </div>
                     @error('captcha')
                        <div class="invalid-feedback d-block">
                           {{ $message }}
                        </div>
                     @enderror
                  </div>
                  @endif
                  <button type="submit" class="login-btn">
                     Login
                  </button>
                  @error('error')
                     <div class="alert alert-danger mt-3">
                        {{ $message }}
                     </div>
                  @enderror
               </form>
               <div class="divider">
                  <span>OR</span>
               </div>
               <a href="{{ route('janparichay-login') }}" class="jan-btn">
                  Login with JanParichay
               </a>
               <div class="row mt-3 text-center">
                  <div class="col-md-4 ">
                     <a href="{{ config('app.saral_host') }}/ForgotPassword.php">Forgot Password?</a>
                  </div>
                  <div class="col-md-4 ">
                     <a href="{{ config('app.saral_host') }}/admin/forgot_userid.php">Forgot User ID?</a>
                  </div>
                  <div class="col-md-4 ">
                     <a href="{{ config('app.saral_host') }}/admin/olmRegistration_add.php">Register Yourself</a>
                  </div>
               </div>
            </div>
         </div>

      </div>
   </div>
@endsection
@push('styles')
   <style>
      .login-page {
         /* height: calc(100vh - 120px); */
         /* overflow: hidden; */
         display: flex;
         align-items: center;
         justify-content: center;
         padding: 0;
      }

      .login-container {
         width: 100%;
         /* max-width: 420px; */
         background: #ffffff;
         padding: 24px;
         border-radius: 14px;
         box-shadow: 0 8px 25px rgba(0, 0, 0, 0.08);
      }

      .form-group label {
         font-weight: 600;
         font-size: 14px;
         margin-bottom: 6px;
         display: block;
         color: #343a40;
      }

      .form-control {
         width: 100%;
         height: 44px;
         border-radius: 10px;
         border: 1px solid #dcdcdc;
         padding: 10px 14px;
         font-size: 14px;
         transition: 0.3s ease;
      }

      .form-control:focus {
         border-color: #0d6efd;
         box-shadow: 0 0 0 3px rgba(13, 110, 253, 0.15);
         outline: none;
      }

      .captcha-wrapper label {
         font-weight: 600;
         font-size: 13px;
         margin-bottom: 6px;
      }

      .captcha-box {
         display: flex;
         align-items: center;
         gap: 8px;
         background: #f8f9fa;
         border: 1px solid #e9ecef;
         padding: 8px;
         border-radius: 10px;
         /* flex-wrap: wrap; */
      }

      .captcha-image {
         /* flex: 1; */
         display: flex;
         align-items: center;
         justify-content: center;
         height: 50px;
         background: #fff;
         border-radius: 8px;
         border: 1px dashed #ced4da;
         /* overflow: hidden; */
      }

      .captcha-image img {
         height: 38px !important;
         width: auto !important;
         min-width: 130px;
      }

      .reload-btn {
         width: 42px;
         height: 42px;
         border: none;
         border-radius: 8px;
         background: #0d6efd;
         color: #fff;
         cursor: pointer;
         transition: 0.3s ease;
         display: flex;
         align-items: center;
         justify-content: center;
         flex-shrink: 0;
      }

      .reload-btn:hover {
         background: #0b5ed7;
      }

      .reload-btn:disabled {
         opacity: 0.7;
         cursor: not-allowed;
      }

      .reload-btn i {
         font-size: 13px;
      }

      .captcha-loader {
         display: none;
         align-items: center;
         gap: 6px;
         color: #0d6efd;
         font-size: 12px;
         margin-top: 6px;
      }

      #captcha {
         height: 42px;
         font-size: 14px;
      }

      .login-btn {
         width: 100%;
         height: 46px;
         border: none;
         border-radius: 10px;
         background: #0d6efd;
         color: #fff;
         font-weight: 600;
         font-size: 15px;
         transition: 0.3s ease;
         cursor: pointer;
      }

      .login-btn:hover {
         background: #0b5ed7;
      }

      .divider {
         position: relative;
         text-align: center;
         margin: 18px 0;
      }

      .divider::before {
         content: '';
         position: absolute;
         top: 50%;
         left: 0;
         width: 100%;
         height: 1px;
         background: #dee2e6;
      }

      .divider span {
         position: relative;
         background: #fff;
         padding: 0 12px;
         color: #6c757d;
         font-size: 13px;
      }

      .jan-btn {
         width: 100%;
         height: 46px;
         display: flex;
         align-items: center;
         justify-content: center;
         text-decoration: none;
         border-radius: 10px;
         background: #198754;
         color: #fff;
         font-weight: 600;
         font-size: 14px;
         transition: 0.3s ease;
      }

      .jan-btn:hover {
         background: #157347;
         color: #fff;
         text-decoration: none;
      }

      .alert {
         border-radius: 10px;
         font-size: 13px;
         padding: 10px 14px;
      }

      .login-left {
         display: flex;
         flex-direction: column;
         justify-content: center;
         align-items: center;
         color: #fff;
      }

      .left-img {
         width: 60%;
      }

      @media(max-width:768px) {
         .login-page {
            padding: 15px;
         }

         .login-container {
            padding: 20px;
         }

         .login-left {
            display: none;
         }

         .captcha-box {
            flex-direction: column;
            align-items: flex-start;
         }

      }
   </style>
@endpush
@push('scripts')
   <script>
      $(document).ready(function () {

         $('#reloadCaptcha').on('click', function () {

            let button = $(this);

            button.prop('disabled', true);

            $('#captchaLoader').css('display', 'flex');

            $.ajax({

               type: 'GET',

               url: "{{ route('refresh_captcha') }}",

               cache: false,

               success: function (data) {

                  $('#captcha-img').html(data.captcha);

                  $('#captchaLoader').hide();

                  button.prop('disabled', false);

               },

               error: function () {

                  $('#captchaLoader').hide();

                  button.prop('disabled', false);

                  alert('Captcha refresh failed');

               }

            });

         });

         $('#togglePwd').on('click', function () {
            const passwordField = $('#auth_pwd');
            const icon = $('#toggleIcon');

            // Check the current type attribute value
            const currentType = passwordField.attr('type');

            if (currentType === 'password') {
               // Change input type to visible text
               passwordField.attr('type', 'text');

               // Switch font-awesome icon class to 'eye-slash'
               icon.removeClass('fa-eye').addClass('fa-eye-slash');
            } else {
               // Revert back to hidden password type
               passwordField.attr('type', 'password');

               // Switch font-awesome icon class back to 'eye'
               icon.removeClass('fa-eye-slash').addClass('fa-eye');
            }
         });

      });


   </script>
@endpush