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

<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"> Education Details</h6>
    </div>
    <div class="formwizard">
        <div class="form-header d-flex mb-4"> <span class="stepIndicator finish">Registration</span> <span class="stepIndicator active">Application</span> <span class="stepIndicator">Payment</span> </div>
    </div>
    <form id="educationDetailsForm"  method="post" action="{{route('education.post')}}" enctype="multipart/form-data">
        @csrf
        <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"> Graduation</h6>
        </div>
        <div class="card-body"> 
            @include('pages.qualification.graduation_form')
        </div>
         
        <div class="card-body"> 
            {{-- @include('pages.qualification.pg_form') --}}
            <br>
            <div class="row">
                <div class="col-sm-4 text-end"><label > Captcha </label><span class="astric-sign">*</span> </div>
                <div class="col-sm-2">
                    <div class="captcha_div">
                        <span> {!! captcha_get_html()!!} </span>  
                    </div>
                </div>
                <div class="col-sm-1">
                    <div class="captcha_div">
                        <button type="button" class="btn btn-primary btn-sm" class="reload" id="reload">
                        &#x21bb;
                        </button>
                    </div>
                </div>
                
                <div class="col-sm-4">
                    <div class="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>
            <br>
             <div class="col-sm-12 card-body">
                <p><b>Declaration:</b><br>
                I hereby declare that I am filling up this online application after carefully reading the detailed Advertisement and fully understanding the provision/procedures mentioned therein. I further declare that all the particulars given by me in this application are mine and true to the best of my knowledge and belief.<b> I agree that my candidature may stand cancelled/ my result may be withheld/ not declared if at any stage of selection process,</b> information furnished by me is found to be false or incorrect. I will be liable for disciplinary action or termination of service as deemed fit, in case it is found at any point in time in future that false information has been furnished in this application. I shall abide by these terms and conditions as well as those laid down in the detailed Advertisement, Public Notices and Advisories issued by NTA/MNS regarding this exam time to time.
            
            </p>
                
              
                <div class="col-sm-3 form-group">
                <input class="form-check-input" type="checkbox" value="" id="clarification" name="clarification">
                &nbsp;I AGREE 
                </div>
                @error('clarification')
                    <div class="text-danger">{{ $message }}</div>
                @enderror
            </div>
            <div class="row mb-3 justify-content-center">
                <div class="col-sm-6">
                    <a href="{{ route('communication')}}" class="btn btn-sm btn-warning float-left"><i class="ri-arrow-left-circle-line float-start me-1"></i> Previous</a> 
                </div>
                <div class="col-sm-6">
                    <button  type="submit"  id="educationDetailsSubmitBtn" class="btn btn-warning btn-sm float-end">Save & Next <i class="ri-arrow-right-circle-line float-end ms-1"></i></button>
                </div>
            </div>
        </div>
    </form>
</div>

@endsection

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

jQuery.validator.addMethod("g_qualificationNoSpace", function(value, element) 
{
      let myString = value;
      let remText = myString.replace(/ /g, "");
      
         if(jQuery.trim(remText).length < 2){
            return false;
         }else{
            return true;
         }
}, "Your Qualification Name must consist of at least 2 characters.");

jQuery.validator.addMethod("g_collegenoSpace", function(value, element) 
{
      let myString = value;
      let remText = myString.replace(/ /g, "");
      
         if(jQuery.trim(remText).length < 2){
            return false;
         }else{
            return true;
         }
}, "Your College Name must consist of at least 2 characters.");

jQuery.validator.addMethod("p_qualificationNoSpace", function(value, element) 
{
      let myString = value;
      let remText = myString.replace(/ /g, "");
      
         if(jQuery.trim(remText).length < 2){
            return false;
         }else{
            return true;
         }
}, "Your Qualification Name must consist of at least 2 characters.");

jQuery.validator.addMethod("p_collegenoSpace", function(value, element) 
{
      let myString = value;
      let remText = myString.replace(/ /g, "");
      
         if(jQuery.trim(remText).length < 2){
            return false;
         }else{
            return true;
         }
}, "Your College Name must consist of at least 2 characters.");

jQuery.validator.addMethod("CheckYear", function(value, element) 
{
    if(jQuery.trim(value) < $('#g_year_joining').val()){
        return false;
    }else{
        return true;
    }
}, "Year of Passing should be less than Year of Joining.");

jQuery.validator.addMethod("FnoSpace", function(value, element) 
     {
      let myString = value;
      let remText = myString.replace(/ /g, "");
      
         if(jQuery.trim(remText).length < 2){
            return false;
         }else{
            return true;
         }
     }, "Please enter at least 2 characters.");

jQuery.validator.addMethod("CheckPostYear", function(value, element) 
{
    if(jQuery.trim(value) < $('#p_year_joining').val()){
        return false;
    }else{
        return true;
    }
}, "Year of Passing should be less than Year of Joining.");

$.validator.addMethod("validPercentage", function(value, element) {
    // Validate that the percentage is between 0 and 100
    return /^(\d{1,2}(\.\d{1,2})?|100)$/.test(value);
  }, "Please enter a valid percentage between 1 and 100.");
    
    $("#educationDetailsSubmitBtn").click(function (e) 
    {      
        e.preventDefault();
        var form = $("#educationDetailsForm");
        form.validate({
            rules: {
                g_qualification_name: {
                    required: true,
                },
                g_college_name: {
                    required: true,
                    minlength:2,
                    g_collegenoSpace: true
                },
                g_university_name:{
                    required: true,
                    minlength:2,
                    FnoSpace:true,
                },
                g_year_passing:{
                    required: true,
                    CheckYear : true
                },
                g_percentage_marks:{
                    required: true,
                    validPercentage:true 
                },
                // registration_no:{
                //     required: true, 
                // },
                g_college_recognized:{
                    required: true,
                },               
                clarification:{
                    required: true
                },
                pinValue: {
                required: true,
                remote: {
                    url: '{{route("validate-captcha")}}',
                    type: "post",
                    data: {
                        captcha: function() {
                            return $("#pinValue").val();
                        },
                        _token: '{{csrf_token()}}'
                    }
                  }
                }
               
            },
            messages: {
                g_qualification_name: {
                    required: "Please select required field.",
                   // minlength: "Your Qualification Name must consist of at least 2 characters."
                },
                g_college_name: {
                    required: "Please fill required field.",
                    minlength: "Your College Name must consist of at least 2 characters."
                },
                g_university_name:{
                    required: "Please fill required field.",
                    minlength: "Name of the University must consist of at least 2 characters."
                },
                g_year_passing: {
                    required: "Year of Passing cannot be blank."                   
                },
                pinValue: {
                    required: "Captcha cannot be blank.",
                    remote: "Please enter valid captcha."
                },
                clarification: {
                     required: "Please fill required field."
                 }
            }, 
            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');
            },
            success: function(label, element) {
                // Add the is-valid class to the successfully validated element
                $(element).addClass("is-valid");
            }

        });
        if (form.valid() === true) {
            //formSubmit();
            $("#educationDetailsForm").submit();
        }  
    });

    function toFixed(num, fixed) {
        var re = new RegExp('^-?\\d+(?:\.\\d{0,' + (fixed || -1) + '})?');
        return num.toString().match(re)[0];
    }    
</script>
@endpush