@extends('layouts.login')
@section('title')
All Brands
@endsection
@section('content')
<div class="container-fluid">
 
    <div class="row">
        <div class="col-md-6 bg-img"></div>
        <div class="col-md-6">

        <div class="card card-white extra-height">
            <div class="card-header py-3 d-flex flex-row align-items-center justify-content-between">
                <h6 class="m-0 font-weight-bold text-head-color"><i class="fa fa-user-o" aria-hidden="true"></i> Login to Exams Dashboard/ MIS Portal</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
          
				<div class="inner-frm">
                
          <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 custom-label">User Id<span class="astric-sign">*</span></label>
                        <div class="col-sm-8">
                        <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 custom-label">Password<span class="astric-sign">*</span></label>
                        <div class="col-sm-8">
                        <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-3">
                        <label class="col-sm-4 col-form-label custom-label">Security PIN as Shown Below<span class="astric-sign">*</span></label>
                        <div class="col-sm-8">
                        <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 custom-label">Security PIN</label>
                        <div class="col-sm-8 col-form-label captcha_div">
                        <span > {!! captcha_get_html()!!} </span>  
                        <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-8">
                            <button type="submit" class="btn btn-sm btn-success btn-theme w-100"><span class="spinner-border spinner-border-sm"></span> Login</button>
                        </div>
                    </div>


                </form>
				</div>
            </div>
        </div>

</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);
            },
            highlight: function (element, errorClass, validClass) {
            $(element).addClass('is-invalid');
            // $(element).focus();
            },
            unhighlight: function (element, errorClass, validClass) {
            $(element).removeClass('is-invalid');
            }

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