@extends('layouts.login')
@section('content')

<form id="loginPageForm" class="loginPageForm" method="POST" action="{{ route('answer-login-page.store') }}"
                    autocomplete="off">
                    @csrf
<div class="card card-white mb-4">
    <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 head-color"><i class="fa fa-edit"></i> Answerkey Challenge </h6>
    </div>

    <div class="card-body">
        <div class="row">
            <div class="col-sm-6 offset-4">
            @if (session('message'))
            <div class="alert alert-success alert-block">
                <strong>{{ session('message')}}</strong>
            </div>
            @endif

            @if (session('error'))
            <div class="alert alert-danger alert-block">
                <strong>{{ session('error')}}</strong>
            </div>
            @endif
            </div>
        </div>
        <div class="row mb-3">
            <label class="col-sm-4 text-end col-form-label required-asterisk">Application number <span
                    class="astric-sign">*</span></label>
            <div class="col-sm-6">
                        <div class="col-sm-12 form-group">
                            <input type="text" class="form-control form-control-sm"
                                placeholder="Enter Application Number" name="ApplicationNumber" id="ApplicationNumber" maxlength="25"
                                autocomplete="off" onkeypress="return blockSpecialChar(event,'numeric')">
                            @error('ApplicationNumber')
                            <div class="text-danger">{{ $message }}</div>
                            @enderror
            </div>
        </div>
        <div class="row mb-3" style="margin-bottom: 0px !important;">
            <label class="col-sm-4 text-end col-form-label required-asterisk">Date of Birth <span
                    class="astric-sign">*</span></label>

            <div class="col-sm-2 form-group" >
                     <select class="form-select form-select-sm" aria-label=".form-select-sm example" id="day" name="day" >
                        <option value=""> Day</option>
                        @foreach($DobDate as $keyDate=>$valuedate)
                        <option value="{{ $keyDate }}" {{ (old("day") == $keyDate ? "selected":"") }}> {{ $valuedate }}</option>
                        @endforeach
                     </select>
                     @error('day')
                     <div class="text-danger">{{ $message }}</div>
                     @enderror
                  </div>
                  <div class="col-sm-2 form-group">
                     <select class="form-select form-select-sm" aria-label=".form-select-sm example" id="month" name="month" style="margin-left:10px">
                        <option value="">Month</option>
                        @foreach($DobMonth as $keyMonth=>$valueMonth)
                        <option value="{{ $keyMonth }}" {{ (old("month") == $keyMonth ? "selected":"") }}> {{ $valueMonth }}</option>
                        @endforeach
                     </select>
                     @error('month')
                     <div class="text-danger">{{ $message }}</div>
                     @enderror
                  </div>
                  <div class="col-sm-2 form-group">
                     <select class="form-select form-select-sm" aria-label=".form-select-sm example" id="year" name="year">
                        <option selected="" value="">Year</option>
                        @foreach($DobYear as $keyYear=>$valueYear)
                        <option value="{{ $keyYear }}" {{ (old("year") == $keyYear ? "selected":"") }}> {{ $valueYear }}</option>
                        @endforeach
                     </select>
                     @error('year')
                     <div class="text-danger">{{ $message }}</div>
                     @enderror
                  </div>

            
            </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-6 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-5">
            <div class="col-sm-5 offset-4">
                <button type="submit" class="btn btn-sm btn-primary active bt-bgc"><i class="ri-save-line float-start me-1"></i>
                Submit
                </button>
       
            </div>
        </div>
    </div>
</div>
</form>
@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).ready(function() {

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