@extends('layouts.login')
@section('title')
Score Card 
@endsection
@section('content')

<div class="row">

    <div class="col-lg-12">

        <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="fa fa-edit"></i>Score Card </h6>
            </div>
            <div class="card-body login-right-section">
                @if (session('success'))
                <div class="alert alert-success alert-block text-center">
                    <strong>{{ session('success')}}</strong>
                </div>
                @endif
                @if (session('error'))
                <div class="alert alert-danger alert-block text-center">
                    <strong>{{ session('error')}}</strong>
                </div>
                @endif
                <form action="{{ route('fetchscorecardphasetwo') }}" autocomplete="off" method="POST" id="admitCardForm"
                    class="applicationResetPageForm">
                    @csrf

                    
                    <div class="row mb-3 justify-content-center">
                        <label class="col-sm-2 col-form-label">Application number<span
                                class="astric-sign">*</span></label>
                        <div class="col-sm-5 form-group">
                            <input type="text" class="form-control form-control-sm space-remover"
                                placeholder="Enter Application number" id="ApplicationNumber" name="ApplicationNumber"
                                value="{{old('CandidateName')}}" maxlength="50"
                                onkeypress="return blockSpecialChar(event,'numeric')">
                            @error('ApplicationNumber')
                            <div class="text-danger">{{ $message }}</div>
                            @enderror
                        </div>
                    </div>

                    <div class="row mb-3 justify-content-center">
                        <label class="col-sm-2 col-form-label">Date of Birth <span class="astric-sign">*</span></label>
                        <div class="col-sm-1 form-group">
                            <select class="form-select form-select-sm" aria-label=".form-select-sm example" id="day"
                                name="day" style="width:92px">
                                <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">
                                <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 class="row mb-3 justify-content-center">
                        <label class="col-sm-2 col-form-label">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"
                                maxlength="10">
                            @error('pinValue')
                            <div class="text-danger">{{ $message }}</div>
                            @enderror
                        </div>
                    </div>
                    <div class="row mb-3 justify-content-center">
                        <label class="col-sm-2 col-form-label">Security PIN <span class="astric-sign">*</span></label>
                        <div class="col-sm-2 col-form-label captcha_div">
                            <span> {!! captcha_get_html()!!} </span>
                        </div>
                        <div class="col-sm-3 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-5 col-form-label text-end empity-cell">&nbsp;</label>
                        <div class="col-sm-6">
                            <button type="button" id="applicationResetSubmitBtn"
                                class="btn btn-sm btn-primary btn-theme"><i class="ri-user-3-line float-start me-1"></i>
                                Submit</button>&nbsp;&nbsp;
                            <a href="{{ route('login-page')}}" class="btn btn-sm btn-warning"><i
                                    class="ri-arrow-left-circle-line float-start me-1"></i> Back</a>

                        </div>
                    </div>

                </form>

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

@push('js')
<script>
$(document).ready(function() {

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

    $("#applicationResetSubmitBtn").click(function(e) {
        e.preventDefault();
        var form = $("#admitCardForm");
        form.validate({
            rules: {
                ApplicationNumber: {
                    required: true,
                    minlength: 2,
                },
                day: {
                    required: true
                },
                month: {
                    required: true
                },
                year: {
                    required: true
                },
                pinValue: {
                    required: true,
                    remote: {
                        url: '{{route("validate-captcha")}}',
                        type: "post",
                        data: {
                            captcha: function() {
                                return $("#pinValue").val();
                            },
                            _token: '{{csrf_token()}}'
                        }
                    }
                }

            },
            messages: {
                ApplicationNumber: {
                    required: "Application Number cannot be blank.",
                },
                day: {
                    required: "Please fill required field."
                },
                month: {
                    required: "Please fill required field."
                },
                year: {
                    required: "Please fill required field."
                },
                pinValue: {
                    required: "Captcha cannot be blank.",
                    remote: "Please enter valid captcha."
                },

            },
            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) {
            $('#admitCardForm').submit();
        }
    });
});
</script>
@endpush