{{-- Extends layout --}}
@extends('layouts.default')
{{-- Styles Section --}}
@section('styles')
    <title>Lynxconnect | {{ __('Add Candidate') }}</title>
	<link rel="stylesheet" href="/assets/plugin/datepicker/css/bootstrap-datepicker.min.css">
    <link rel="stylesheet" href="/assets/plugin/select2/css/select2.min.css">
@endsection
{{-- Content --}}
@section('content')

    <div class="row small-spacing">
        <div class="col-xl-12 col-12">
            <section class="app-user-edit">
                <div class="card">
                    <div class="card-header">{{ __('Add Candidate') }}</div>
                    <div class="card-body">
                        @if ($errors->any())
                            <div class="alert alert-danger">
                                <ul>
                                    @foreach ($errors->all() as $error)
                                        <li>{{ $error }}</li>
                                    @endforeach
                                </ul>
                            </div>
                        @endif
                        <form class="form-validate" data-toggle="validator" action="{{ route('save.candidate') }}" method="post">
                            @csrf
                            <div class="row">
                                @if (session('msg'))
                                    <div class="col-md-12">
                                        <div class="alert alert-success">
                                            <a href="#" class="close" data-dismiss="alert" aria-label="close">&times;</a> {{ session('msg') }}
                                        </div>
                                    </div>
                                @endif
                                <div class="col-md-4">
                                    <div class="form-group">
                                        <label for="candidate_type" class="control-label">Candidate Type<span style="color:red">*</span></label>
                                        <input type="hidden" name="employer_custom_id" id="employer_custom_id" value="{{ session('employer_custom_id') }}">
                                        <select name="candidate_type" id="candidate_type" class="form-control" data-error="select candidate type">
                                            <option value="">Select Candidate Type</option>
                                            @if($emp_types)
                                                @foreach ($emp_types as $emp_type)
                                                    <option value="{{ $emp_type->id }}">{{ $emp_type->type }}</option>
                                                @endforeach
                                            @endif
                                        </select>
                                        @if (isset(session('error_fields')->candidate_type[0]))
                                            <span class="invalid-feedback" style="display: block;" role="alert">
                                                <strong>{{ session('error_fields')->candidate_type[0] }}</strong>
                                            </span>
                                        @endif
                                    </div>
                                </div>
                                <div class="col-md-4">
                                    <div class="form-group">
                                        <label for="document_types_id" class="control-label">Document Type<span style="color:red">*</span></label>
                                        <select name="document_types_id" id="document_types_id" class="form-control" data-error="select document type">
                                            <option value="">Select Document Type</option>
                                            @if($documents_types)
                                                @foreach ($documents_types as $documents_type)
                                                    <option value="{{ $documents_type->id }}">{{ $documents_type->name }}</option>
                                                @endforeach
                                            @endif
                                        </select>
                                        @if (isset(session('error_fields')->document_types_id[0]))
                                            <span class="invalid-feedback" style="display: block;" role="alert">
                                                <strong>{{ session('error_fields')->document_types_id[0] }}</strong>
                                            </span>
                                        @endif
                                    </div>
                                </div>
                                <div class="col-md-4">
                                    <div class="form-group">
                                        <label for="email" class="control-label">Document Number<span style="color:red">*</span></label>
                                        <input type="text" name="document_number" id="document_number" class="form-control" placeholder="Enter document number here" />
                                       <span id="document_number_error" class="text-danger"></span>
                                       @if (isset(session('error_fields')->document_number[0]))
                                            <span class="invalid-feedback" style="display: block;" role="alert">
                                                <strong>{{ session('error_fields')->document_number[0] }}</strong>
                                            </span>
                                        @endif
                                    </div>
                                </div>
                                <div class="col-md-4">
                                    <div class="form-group">
                                        <label for="name" class="control-label">First Name<span style="color:red">*</span></label>
                                        <input type="text" name="first_name" id="first_name" class="form-control" pattern="[A-Za-z]*" placeholder="Enter first name here" />
                                        @if (isset(session('error_fields')->first_name[0]))
                                            <span class="invalid-feedback" style="display: block;" role="alert">
                                                <strong>{{ session('error_fields')->first_name[0] }}</strong>
                                            </span>
                                        @endif
                                    </div>
                                </div>
                                <div class="col-md-4">
                                    <div class="form-group">
                                        <label for="last_name" class="control-label">Last Name<span style="color:red">*</span></label>
                                        <input type="text" name="last_name" id="last_name" class="form-control" pattern="[A-Za-z]*" placeholder="Enter last name here" />
                                        @if (isset(session('error_fields')->last_name[0]))
                                            <span class="invalid-feedback" style="display: block;" role="alert">
                                                <strong>{{ session('error_fields')->last_name[0] }}</strong>
                                            </span>
                                        @endif
                                    </div>
                                </div>
                                <div class="col-md-4">
                                    <div class="form-group">
                                        <label for="father_name" class="control-label">Father's Name<span style="color:red">*</span></label>
                                        <input type="hidden" name="co_relation" id="co_relation" value="FATHER" aria-invalid="false">
                                        <input type="text" name="father_name" id="father_name" class="form-control" pattern="[a-zA-Z0-9\s]+" placeholder="Enter Father's Name here" />
                                        @if (isset(session('error_fields')->father_name[0]))
                                            <span class="invalid-feedback" style="display: block;" role="alert">
                                                <strong>{{ session('error_fields')->father_name[0] }}</strong>
                                            </span>
                                        @endif
                                    </div>
                                </div>
                                <div class="col-md-4">
                                    <div class="form-group">
                                        <label for="email" class="control-label">Email<span style="color:red">*</span></label>
                                        <input type="email" name="email" id="email" class="form-control" pattern="^[^\=\+\<\>\&\|\-]*$" placeholder="Enter email address here" data-error="Email address is invalid" />
                                        @if (isset(session('error_fields')->email[0]))
                                            <span class="invalid-feedback" style="display: block;" role="alert">
                                                <strong>{{ session('error_fields')->email[0] }}</strong>
                                            </span>
                                        @endif
                                    </div>
                                </div>
                                <div class="col-md-4">
                                    <div class="form-group">
                                        <label for="email" class="control-label">Mobile Number<span style="color:red">*</span></label>
                                        <input type="hidden" name="countryCode" id="countryCode" value="91">
                                        <input type="text" name="mobile" id="mobile"  class="form-control" placeholder="Enter mobile number here" />
                                        <span id="mobile-error" class="text-danger"></span>
                                        @if (isset(session('error_fields')->mobile[0]))
                                            <span class="invalid-feedback" style="display: block;" role="alert">
                                                <strong>{{ session('error_fields')->mobile[0] }}</strong>
                                            </span>
                                        @endif
                                    </div>
                                </div>
                                <div class="col-md-4">
                                    <div class="form-group">
                                        <label for="dob" class="control-label">Date of Birth<span style="color:red">*</span></label>
                                        <div class="input-group">
                                            <input type="text" name="dob" class="form-control" placeholder="mm/dd/yyyy" id="datepicker-autoclose" />
                                            <span class="input-group-addon bg-primary text-white"><i class="fa fa-calendar"></i></span>
                                            @if (isset(session('error_fields')->dob[0]))
                                            <span class="invalid-feedback" style="display: block;" role="alert">
                                                <strong>{{ session('error_fields')->dob[0] }}</strong>
                                            </span>
                                        @endif
                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-4">
                                    <div class="form-group">
                                        <label for="status" class="control-label">Plans<span style="color:red">*</span></label>
                                        <select class="form-control" name="plans" id="plans">
                                        <option value="">Select Plans</option>
                                            @foreach($plans as $plan)
                                                <option value="{{$plan->id}}">{{$plan->name}}</option>
                                            @endforeach
                                        </select>
                                        @if (isset(session('error_fields')->plans[0]))
                                            <span class="invalid-feedback" style="display: block;" role="alert">
                                                <strong>{{ session('error_fields')->plans[0] }}</strong>
                                            </span>
                                        @endif
                                    </div>
                                </div>

                                <div class="col-lg-4 col-md-6">
                                    <div class="form-group">
                                        <label class="d-block mb-1">Gender</label>
                                        <div class="custom-control custom-radio custom-control-inline">
                                            <input type="radio" id="male" name="gender" value="M" class="custom-control-input" checked />
                                            <label class="custom-control-label" for="male">Male</label>
                                        </div>
                                        <div class="custom-control custom-radio custom-control-inline">
                                            <input type="radio" id="female" name="gender" value="F" class="custom-control-input" />
                                            <label class="custom-control-label" for="female">Female</label>
                                        </div>
                                    </div>
                                </div>
                                
                                <div class="col-sm-4">
                                  <div class="form-group">
                                    <label>Verification Type</label>
                                    <div class="controls">
                                      <select name="vf_type" id="vf_type" class="form-control">
                                        <option value="PRE">PRE</option>
                                        <option value="POST">POST</option>
                                      </select>
                                    </div>
                                  </div>
                                </div>


                                <div class="col-12 d-flex flex-sm-row flex-column mt-2">
                                    <button type="submit" class="btn btn-primary mb-1 mb-sm-0 mr-0 mr-sm-1">Save </button>
                                    <button type="reset" class="btn btn-outline-secondary">Reset</button>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </section>
        </div>
    </div>
@endsection
@section('scripts')
<script src="/assets/plugin/datepicker/js/bootstrap-datepicker.min.js" type="text/javascript"></script>
<script src="/assets/plugin/select2/js/select2.min.js" type="text/javascript"></script>
<script src="/assets/scripts/form.demo.min.js" type="text/javascript"></script>
<script src="/assets/plugin/validator/validator.min.js" type="c09fd79887a6e32ad56e6c91-text/javascript"></script>
<script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
<script src="/assets/plugin/mCustomScrollbar/jquery.mCustomScrollbar.concat.min.js"></script>


    <script>
       
        $(document).ready(function () {
            // Add event listener to the mobile number input
            $('#mobile').on('input', function () {
             
                var sanitizedValue = $(this).val().replace(/[^0-9]/g, '');

               
                if (sanitizedValue.length > 10) {
                    sanitizedValue = sanitizedValue.substr(0, 10);
                   
                    $('#mobile-error').text('Mobile number cannot exceed 10 digits.').show();
                } else {
                    
                    $('#mobile-error').hide();
                }

                // Update the input value
                $(this).val(sanitizedValue);
            });

            // Add event listener for keypress to prevent non-numeric characters
            $('#mobile').on('keypress', function (e) {
                var charCode = e.which;
                // Allow only numeric characters (0-9)
                if (charCode < 48 || charCode > 57) {
                    // Display error message for non-numeric characters
                    $('#mobile-error').text('Only numbers are allowed in the mobile number.').show();
                    return false;
                } else {
                    // Hide the error message if the input is valid
                    $('#mobile-error').hide();
                }
            });
        });
        
       $(document).ready(function () {
            // Add event listener to the document type dropdown
            $('#document_types_id').on('change', function () {
                // Get the selected option value
                var selectedOption = $(this).val();

                // Update the validation rules for the document number input based on the selected option
                if (selectedOption === '1') {
                    // Allow only 12 numeric characters
                    $('#document_number').attr('maxlength', '12').attr('pattern', '^[0-9]*$');
                } else if (selectedOption === '2') {
                    // Allow only 9 characters (numbers or capital letters)
                    $('#document_number').attr('maxlength', '9').attr('pattern', '^[0-9A-Z]*$');
                } else if (selectedOption === '3') {
                    // Allow up to 16 characters (any characters)
                    $('#document_number').attr('maxlength','16').removeAttr('pattern');
                } else if (selectedOption === '4') {
                    // Allow only 15 characters (any characters)
                    $('#document_number').attr('maxlength', '15').removeAttr('pattern');
                } else if (selectedOption === '5') {
                    // Allow only 10 characters (capital letters or numbers)
                    $('#document_number').attr('maxlength', '10').attr('pattern', '^[0-9A-Z]*$');
                }

                // Clear any previous error messages
                $('#document_number_error').text('').hide();
            });
            
              $('#document_number').on('input', function () {
                var selectedOption = $('#document_types_id').val();
                if (selectedOption === '1') {
                    // Remove non-numeric characters
                    var sanitizedValue = $(this).val().replace(/[^0-9]/g, '');
                    $(this).val(sanitizedValue);
                }
                else if (selectedOption === '2' || selectedOption === '5') {
                    // Allow only numbers or capital letters
                    var sanitizedValue = $(this).val().replace(/[^0-9A-Z]/g, '');
                    $(this).val(sanitizedValue);
                }
            });

            // Add event listener to show error message for invalid input
            $('#document_number').on('invalid', function () {
                var errorMessage = "Invalid input for the selected document type.";
                $('#document_number_error').text(errorMessage).show();
            });
        });
    </script>
@endsection