@extends('layouts.login')
@section('title')
All Brands
@endsection
@section('content')

<div class="row">
      <div class="col-lg-5 form-section">
        <div class="card card-white">
          <div class="card-header py-3 d-flex flex-row align-items-center justify-content-between">
            <h6 class="m-0 font-weight-normal text-head-color">Steps to Apply Online</h6>
          </div>
          <div class="card-body login-left-section"> 
            
            <img class="img-fluid mb-3" src="{{ asset('assets/images/entrance-exam.webp'); }}" /> 
            
          <div class="alert alert-primary">
            <strong>Step 1:-</strong> Apply for Online Registration.
          </div>
          
          <div class="alert alert-primary">
            <strong>Step 2:-</strong> Fill Online Application Form.
          </div>
          
          <div class="alert alert-primary">
            <strong>Step 3:-</strong> Pay Examination Fee.
          </div>
          
          <div class="extra-login form-group clearfix text-center">
                            <span>If You are a New Candidate Click on Below Link</span>
                        </div>
          
          <div class="d-grid mb-3"> 
                  <a href="{{ route('instruction') }}" class="btn btn-sm btn-success btn-block btn-theme"><i class="ri-user-add-line"></i> New Candidate Register Here</a> 
            </div>
  
           </div>
        </div> 
      </div>
      
     
      <div class="col-lg-7">
        
        <div class="card card-white">
        
          <div class="card-header py-3 d-flex flex-row align-items-center justify-content-between">
            <h6 class="m-0 font-weight-normal text-head-color"><i class="ri-user-3-line"></i> Only Registered Candidate Login Here</h6>
          </div>
          <div class="card-body login-right-section">
          @if (session('error'))
            <div class="alert alert-danger alert-block">   
                <strong>{{ session('error')}}</strong>
            </div>
            @endif

            @if (session('success'))
            <div class="alert alert-success alert-block">
                <strong>{{ session('success')}}</strong>
            </div>
            @endif
          
            
          <form id="loginPageForm"  class="loginPageForm" method="POST" action="{{ route('login-page.store') }}"  autocomplete="off">
          @csrf
            <div class="row mb-3">
              <label class="col-sm-4 col-form-label text-end">Application Number <span class="astric-sign">*</span></label>
              <div class="col-sm-5 form-group">
                <input type="text" class="form-control form-control-sm" placeholder="Enter User ID" name="userID" id="userID" maxlength="25" autocomplete="off">
                @error('userID')
                    <div class="text-danger">{{ $message }}</div>
                 @enderror
              </div>
            </div>
            
            <div class="row mb-3">
              <label class="col-sm-4 col-form-label text-end">Password <span class="astric-sign">*</span></label>
              <div class="col-sm-5 form-group">
                <input type="Password" autocomplete="off" class="form-control form-control-sm" placeholder="Enter Password" name="password" id="password" onchange="passwordSet()">
                @error('password')
                    <div class="text-danger">{{ $message }}</div>
                 @enderror
              </div>
            </div>
            
            <div class="row mb-3r">
              <label class="col-sm-4 col-form-label text-end">Security PIN as Shown Below <span class="astric-sign">*</span></label>
              <div class="col-sm-5 form-group">
                <input type="text" class="form-control form-control-sm" placeholder="Enter Security PIN as Shown Below" id="pinValue" name="pinValue">
                @error('pinValue')
                    <div class="text-danger">{{ $message }}</div>
                 @enderror
              </div>
            </div>

            <div class="row mb-3">
              <label class="col-sm-4 col-form-label text-end">Security PIN</label>
              <div class="col-sm-3 col-form-label captcha_div">
                   <span> {!! captcha_get_html()!!} </span>  
              </div>
              <div class="col-sm-2 col-form-label">
                   <button type="button" class="btn btn-primary" class="reload" id="reload">
                                &#x21bb;
                                </button>
              </div>
            </div>
            
            <div class="row mb-3">
              <label class="col-sm-4 col-form-label text-end empity-cell">&nbsp;</label>
              <div class="col-sm-5">
                 <button type="button" class="btn btn-sm btn-warning" id="loginPageSubmitBtn"><i class="ri-save-line float-start me-1"></i> Submit</button> 
                </div>
            </div>
            
            <div class="extra-login form-group clearfix text-center">
                            <span>If You are Forgot your password? or Forgot Application Number? click on below link</span>
                        </div>
            <div class="row">
              <div class="col-md-6 ">
                <!-- <label class="col-sm-4 col-form-label text-end empity-cell">&nbsp;</label> -->
                <div class="col-md-6 col-form-label" style="text-align: right;margin-left: 70px;">
                  <a href="{{ route('forgot-password') }}" class="btn btn-sm btn-success btn-theme"><i class="ri-key-line"></i> Forgot password?</a>
                  <!--button type="submit" data-bs-toggle="modal" data-bs-target="#myModal" class="btn btn-sm btn-success btn-theme"><i class="ri-key-line"></i> Forgot your password?</button-->
                </div>
              </div>
            
             <!-- <div class="col-md-6">
              <label class="col-sm-4 col-form-label text-end empity-cell">&nbsp;</label> -->
              <div class="col-md-6 col-form-label">
                  <a href="{{ route('request-application-reset') }}" class="btn btn-sm btn-success btn-theme"><i class="ri-key-line"></i> Forgot Application Number?</a>
                  <!--button type="submit" class="btn btn-sm btn-success btn-theme"><i class="ri-key-line"></i> Forgot User ID?</button-->
              </div>
            </div>

            </div>
             
            
          </form>
          
           </div>
        </div>
      </div>
    </div>
@endsection

@push('js')
<script>
  function passwordSet(){
    let valueToEncrypt = $('#password').val(); // this could also be object/array/whatever
        let password = '123456'
        let encrypted = CryptoJSAesJson.encrypt(valueToEncrypt, password);
        $('#password').val(encrypted);
        document.cookie = "identity_password = " + encrypted;

  }
        
    
  $(document).ready(function() {

    $('#reload').click(function () {
        $.ajax({
            type: 'GET',
            url: "{{ route('reload-captcha') }}",
            success: function (data) {
                $(".captcha_div span").html(data.captcha);
            }
        });
    });

    $("#loginPageSubmitBtn").click(function (e) 
    {      
        e.preventDefault();
        var form = $("#loginPageForm");
        form.validate({
            rules: {
                userID: {
                    required: true
                },
                password:{
                    required: true
                },
                pinValue:{
                    required: true,
                },
                
            },
            messages: {
              userID: {
                    required: "UserID cannot be blank."
                },
                password: {
                    required: "Password cannot be blank."
                },
                pinValue: {
                    required: "Captcha cannot be blank.",
                },  

            },
            errorElement: 'span',
            errorPlacement: function (error, element) {
                error.addClass('invalid-feedback');
                element.closest('.form-group').append(error);
                error.insertAfter(element); // Display error message next to the input field
            },
            highlight: function (element, errorClass, validClass) {
            $(element).addClass('is-invalid');
            // $(element).focus();
            },
            unhighlight: function (element, errorClass, validClass) {
            $(element).removeClass('is-invalid');
            },
            success: function(label, element) {
            // Add the is-valid class to the successfully validated element
            $(element).addClass("is-valid");
          }

        });
        if (form.valid() === true) {
            $('#loginPageForm').submit();
        }  
    });
  });
</script>
@endpush