@extends('layouts.login')
@section('title')
All Brands
@endsection
@section('content')
<style>
  .hide{display:none;}
</style>
@php 
$class = 'hide';$class2 = 'hide';$class3 = 'hide';
$selectOption = old('selectOption'); 
if(!empty($selectOption)){
  if($selectOption ==1) {
    $class = '';
    $class3 = '';
  }
  if($selectOption == 3){
    $class2 = '';
    $class3 = '';
  }
}
@endphp
<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>Forgot Password</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="request-password-reset-form" autocomplete="off" action="{{ route('forget.password.post')}}" method="post">
          @csrf
          <div class="row">
            <div class="row mb-3">
              <label class="col-sm-4 col-form-label">Select Password Reset Option <span class="astric-sign">*</span></label>
              <div class="col-sm-5">
                <div class="mb-3 field-selectTypeVal required">
                  <select id="selectTypeVal" class="form-select" name="selectOption" aria-required="true" aria-invalid="true">
                    <option value="">Select Option</option>
                    <option value="1" {{ (old('selectOption')==1) ? 'selected' : ''}}>Retrieve via security question</option>
                    <option value="3" {{(old('selectOption')==3) ? 'selected' : ''}}>Retrieve via link sent to email</option>
                  </select>
                </div>
              </div>
            </div>
          </div>
          <div class="row {{ $class }}"  id="resetSeqSection">
            <div class="row mb-3">
              <label class="col-sm-4 col-form-label">Application Number <span class="astric-sign">*</span></label>
              <div class="col-sm-5 ">
                <div class="mb-3 form-group">
                  <input type="text" id="ApplicationNumber" class="form-control form-control-sm" name="ApplicationNumber" autocomplete="off" maxlength="12" minlength="12" onkeypress="return blockSpecialChar(event,'numeric')"  placeholder="Enter Application Number" value="{{old('ApplicationNumber')}}">
                  @error('ApplicationNumber')
                  <div class="text-danger">{{ $message }}</div>
                  @enderror
                </div>
              </div>
            </div>
            <div class="row mb-3 ">
              <label class="col-sm-4 col-form-label">Security Question <span class="astric-sign">*</span></label>
              <div class="col-sm-5 tooltipmsg">
                <div class="mb-3 form-group">
                  <select id="SecurityQuestion" class="form-select" name="SecurityQuestion">
                    <option value="">Select</option>
                    @foreach($securityQuestions as $key => $question)
                      <option value="{{$question->ID}}" {{ (old('SecurityQuestion')==1) ? 'selected' : ''}}>{{$question->Question}}</option>
                    @endforeach
                  </select>
                  @error('SecurityQuestion')
                  <div class="text-danger">{{ $message }}</div>
                  @enderror
                </div>
              </div>

            </div>
            <div class="row mb-3">
              <label class="col-sm-4 col-form-label">Security Answer <span class="astric-sign">*</span></label>
              <div class="col-sm-5">
                <div class="mb-3 form-group">
                  <input type="text" id="SecurityAnswer" class="form-control form-control-sm" name="SecurityAnswer" autofocus="" autocomplete="off" placeholder="Enter Security Answer" value="{{old('SecurityAnswer')}}">
                  @error('SecurityAnswer')
                  <div class="text-danger">{{ $message }}</div>
                  @enderror
                </div>
              </div>
            </div>
          </div> <!--End-->

          <div class="row form-group hide" id="resetMobileSection">
            <div class="row mb-3">
              <label class="col-sm-4 col-form-label required-asterisk">Application Number</label>
              <div class="col-sm-5">
                <div class="mb-3">

                  <input type="text" id="applicationnumbermobile" class="form-control form-control-sm" name="ApplicationNumberMobile" maxlength="12" minlength="12" onkeypress="return blockSpecialChar(event,'numeric')" autofocus="" autocomplete="off" placeholder="Enter Application Number" value="{{old('ApplicationNumberMobile')}}">

                  <div class="invalid-feedback"></div>
                </div>
              </div>
            </div>
            <div class="row mb-3">
              <label class="col-sm-4 col-form-label required-asterisk">Mobile Number</label>
              <div class="col-sm-5 tooltipmsg">
                <div class="mb-3 field-candidatemobile">

                  <input type="text" id="candidatemobile" class="form-control form-control-sm" name="CandidateMobile" maxlength="10" autofocus="" autocomplete="off" placeholder="Enter Mobile Number" value="{{old('CandidateMobile')}}">

                  <div class="invalid-feedback"></div>
                </div> <span class="tooltiptext ">As selected at the time of registration</span>
              </div>
            </div>

            <div class="row mb-3">
              <label class="col-sm-4 col-form-label empity-cell">&nbsp;</label>
              <div class="col-sm-5">
                <button type="submit" class="btn btn-sm btn-success btn-theme">Submit</button>
              </div>
            </div>
          </div>
          <!--End-->
          <div class="row {{ $class2}}" id="resetEmailSection">
            <div class="row mb-3">
              <label class="col-sm-4 col-form-label required-asterisk">Application Number</label>
              <div class="col-sm-5">
                <div class="mb-3 form-group">

                  <input type="text" id="applicationnumberemail" class="form-control form-control-sm" name="ApplicationNumberEmail" maxlength="12" autofocus="" minlength="12" onkeypress="return numericaOnly(event)" autocomplete="off" placeholder="Enter Application Number" value="{{old('ApplicationNumberEmail')}}">

                  @error('ApplicationNumberEmail')
                  <div class="text-danger">{{ $message }}</div>
                  @enderror
                </div>
              </div>
            </div>
            <div class="row mb-3">
              <label class="col-sm-4 col-form-label required-asterisk">Candidate Email</label>
              <div class="col-sm-5">
                <div class="mb-3 form-group">

                  <input type="text" id="candidateemail" class="form-control form-control-sm" name="CandidateEmail" autofocus="" autocomplete="off" placeholder="Enter Candidate Email" value="{{old('CandidateEmail')}}">

                  @error('CandidateEmail')
                  <div class="text-danger">{{ $message }}</div>
                  @enderror
                </div>
              </div>
            </div>
          </div>
          <div id="captchaR" class="{{$class3}}">
            <div class=" row mb-2">
              <label class="col-sm-3 col-form-label">Captcha <span class="astric-sign">*</span></label>
              <div class="col-sm-9">
                <div class="mb-3 field-my-captcha-image">

                  <div class="row">
                    <div class="col-sm-3 col-form-label captcha_div">
                      <span> {!! captcha_get_html()!!} </span>
                    </div>
                    <div class="col-sm-1 col-form-label">
                      <button type="button" class="btn btn-primary btn-sm" class="reload" id="reload">
                        &#x21bb;
                      </button>
                    </div>
                    <div class="col-sm-4 form-group">
                      <input type="text" id="pinValue" class="form-control form-control-sm" name="pinValue" placeholder="Enter verification code">
                      <span id="captcha-error"></span>
                    </div>
                    @error('pinValue')
                    <div class="text-danger">{{ $message }}</div>
                    @enderror
                  </div>
                </div>
              </div>
            </div>

            <div class=" row mb-3">
              <label class="col-sm-4 col-form-label empity-cell">&nbsp;</label>
              <div class="col-sm-5">
                <button type="submit" class="btn btn-sm btn-warning btn-theme" id="forgotPasswordSubmitBtn"><i class="ri-save-line float-start me-1"></i> Submit</button>
              </div>
            </div>
          </div>

        </form>
      </div>

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

@push('js')
<script>
  $('#selectTypeVal').on('change', function() {
    var selectTypeVal = $("#selectTypeVal").val();

    var captchaContainer = $('.captcha_div');

    // Extract the CAPTCHA code from the container's HTML
    var captchaValue = captchaContainer.find('img').attr('alt');
    
    // Display the CAPTCHA code (for demonstration purposes)
    console.log('CAPTCHA Value:', captchaValue);

    if (selectTypeVal == 1) {
      $('#resetSeqSection').removeClass('hide');
      $('#resetEmailSection').addClass('hide')
      $("#captchaR").css("display", "block");
      $("#resetSeqSection").css("display", "block");
      $("#resetMobileSection").css("display", "none");
      $("#resetEmailSection").css("display", "none");
      $("#OtpSection").css("display", "none");
      $("#applicationnumbermobile").val("");
      $("#candidatemobile").val("");
      $("#candidateemail").val("");
      $("#EmailOtp").val("");
      $("#MobileOtp").val("");
      $("#applicationnumberemail").val("");
      $("#passwordresetrequestform-selectoption").val("");

    } else if (selectTypeVal == 2) {
      $("#captchaR").css("display", "none");
      $("#resetSeqSection").css("display", "none");
      $("#resetMobileSection").css("display", "block");
      $("#resetEmailSection").css("display", "none");
      $("#candidateemail").val("");
      $("#applicationnumber").val("");
      $("#securityquestion").val("");
      $("#securityanswer").val("");
      $("#applicationnumberemail").val("");
    } else if (selectTypeVal == 3) {
      $('#resetSeqSection').addClass('hide');
      $('#resetEmailSection').removeClass('hide')
      $("#captchaR").css("display", "block");
      $("#resetSeqSection").css("display", "none");
      $("#resetMobileSection").css("display", "none");
      $("#resetEmailSection").css("display", "block");
      $("#OtpSection").css("display", "none");
      $("#applicationnumber").val("");
      $("#securityquestion").val("");
      $("#securityanswer").val("");
      $("#applicationnumbermobile").val("");
      $("#candidatemobile").val("");
      $("#EmailOtp").val("");
      $("#MobileOtp").val("");
      $("#passwordresetrequestform-candidateemailid").val("");
      $("#passwordresetrequestform-candidateid").val("");
      $("#passwordresetrequestform-selectoption").val("");
      $("#passwordresetrequestform-otpexptime").val("");
    } else {
      $("#captchaR").css("display", "none");
      $("#resetSeqSection").css("display", "none");
      $("#resetMobileSection").css("display", "none");
      $("#resetEmailSection").css("display", "none");
      $("#OtpSection").css("display", "none");
      $("#applicationnumbermobile").val("");
      $("#candidatemobile").val("");
      $("#applicationnumber").val("");
      $("#securityquestion").val("");
      $("#securityanswer").val("");
      $("#EmailOtp").val("");
      $("#MobileOtp").val("");
      $("#CandidateEmailID").val("");
      $("#CandidateID").val("");
      $("#passwordresetrequestform-selectoption").val("");
      $("#applicationnumberemail").val("");
    }
  });

  $(document).ready(function() {
    
  $("#request-password-reset-form").validate({
      rules: {
        selectOption: {
          required: true
        },
        ApplicationNumber: {
          required: function (element) {
              return $("#selectTypeVal").val() == 1;
          }
        },
        SecurityQuestion: {
          required: function (element) {
              return $("#selectTypeVal").val() == 1;
          }
        },
        ApplicationNumberEmail:{
          required: function (element) {
              return $("#selectTypeVal").val() == 3;
          }   
        },
  
        CandidateEmail:{
          required: function () {
                  return $("#selectTypeVal").val() == 3;
                },
          email:true
        },
        SecurityAnswer: {
          required: function (element) {
              return $("#selectTypeVal").val() == 1;
          }
        },
        pinValue: {
          required: function (element) {
            return $('#selectTypeVal :selected').val() == 1 || $('#selectTypeVal :selected').val() == 3;
          },
          remote: {
            url: '{{route("validate-captcha")}}', 
            type: "post",
            data: {
              captcha: function () {
                return $("#pinValue").val(); 
              },
              _token :'{{csrf_token()}}'
            }
          
        }
          
        },

      },
      messages: {
        selectOption: {
              required: "Please fill required field."
          },
        ApplicationNumber: {
          required: "Application Number cannot be blank.",
        },
        SecurityQuestion: {
          required: "Security Question cannot be blank..",
        },
        ApplicationNumberEmail: {
            required: "Application Number cannot be blank."
        },
        CandidateEmail: {
            required: "Candidate Email cannot be blank."
        },
        SecurityAnswer: {
          required: "Security Answer cannot be blank."
        },
        pinValue: {
          required: "Captcha code cannot be blank.",
          remote: "Please enter valid captcha."
        }
      },
      errorElement: 'span',
      errorPlacement: function(error, element) {
        error.insertAfter(element); // Display error message next to the input field
        error.addClass('invalid-feedback');
        element.closest('.form-group').append(error);
      },
      highlight: function(element, errorClass, validClass) {
        $(element).addClass('is-invalid');
      },
      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");
      }

    });
  });

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

</script>

@endpush