@extends('layouts.app')
@section('title')
@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-bold text-head-color">Apply for Post</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>
            {{-- @if(count($CandidatePostApplied) > 0) 
             <div class="row mb-3 justify-content-center">
                <div class="col-sm-7 text-center" style="min-height:180px">
                    <table class="table table-bordered">
                        <tbody>
                        <tr>
                            <th colspan="2"> Applied POST For </th>
                        </tr>
                        @foreach($CandidatePostApplied as $CandidatePostKey => $CandidatePostValue)
                        <tr>
                            @php $getPostNameAppliedByID = getPostNameAppliedByID($CandidatePostKey,); @endphp
                            <th>{{ $getPostNameAppliedByID['postName']; }}</th>
                            <td>{{ date('d-m-Y H:i:s',strtotime($CandidatePostValue['CreatedAt'])); }}</td>
                        </tr>
                        @endforeach
                       </tbody>
                    </table>
               </div>
            </div>
            @endif
    --}}
    <form id="ApplyPostDetailsForm"  method="post" action="{{route('apply.posts')}}" 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-bold text-head-color"> Apply for Post </h6>
        </div> --}}

        <div class="card-body"> 

           
            <div class="row">

                {{-- <div class="col-sm-6">
 
                    <label class="">Choose Post Group<span class="astric-sign">*</span>:</label>
                    <div class="form-group">
                    <select class="form-select form-select-sm" aria-label=".form-select-sm example" name="PostGroupName" id="PostGroupName">
                        <option value="">Apply For</option>
                        @foreach($PostGroup as $PostGroupKey => $PostGroupValue)
                        <option value="{{$PostGroupKey }}" {{((isset($PostAppliedData['PostGroupID']) && ($PostAppliedData['PostGroupID']==$PostGroupKey)) OR (old("PostGroupName") == $PostGroupKey)) ? "selected":""}}>{{ $PostGroupValue}}</option>
                        @endforeach
                     </select>
                     @error('PostName')
                     <div class="text-danger">{{ $message }}</div>
                     @enderror
                    </div>
                </div> --}}
                {{-- <div class="col-sm-6">
                    <label class="">Apply Post for<span class="astric-sign">*</span>:</label>
                    <div class="form-group">
                    <select class="form-select form-select-sm" aria-label=".form-select-sm example" name="PostName" id="PostName">
                        <option value="">Select Post</option>
                        @foreach($AllPostMst as $PostGroupKey => $PostGroupValue)
                        <option value="{{$PostGroupValue['ID'] }}">{{ $PostGroupValue['PostName']}}</option>
                        @endforeach
                        
                     </select>
                     @error('PostName')
                     <div class="text-danger">{{ $message }}</div>
                     @enderror
                    </div>
                </div> --}}


                {{-- <div class="col-sm-6 hide PostPreference">
                    <label class="">First preference for POST<span class="astric-sign">*</span>:</label>
                    <div class="form-group">
                    <select class="form-select form-select-sm selectAllPost" aria-label=".form-select-sm example" name="FirstChoicePostName" id="FirstChoicePostName">
                        <option value="">Select Post</option>
                        @if(isset($AllPostMst) && !empty( $AllPostMst))
                            @foreach($AllPostMst as $key => $AllPost)
                            @if($AllPost['ID']==3)
                            @continue
                            @endif
                            {{-- <option value=""  >{{ $AllPost['PostName']}}</option> --}}
                            {{-- @endforeach
                        @endif
                     </select>
                     @error('FirstChoicePostName')
                     <div class="text-danger">{{ $message }}</div>
                     @enderror
                    </div>
                </div> --}} 

                {{-- <div class="col-sm-6 hide PostPreference">
                    <label class="">Second preference for POST<span class="astric-sign">*</span>:</label>
                    <div class="form-group">
                    <select class="form-select form-select-sm selectAllPost" aria-label=".form-select-sm example" name="SecondChoicePostName" id="SecondChoicePostName">
                        <option value="">Select Post</option>
                        @if(isset($AllPostMst) && !empty( $AllPostMst))
                            @foreach($AllPostMst as $key => $AllPost)
                            @if($AllPost['ID']==3)
                            @continue
                            @endif
                            <option value=""  >{{ $AllPost['PostName']}}</option>
                            @endforeach
                        @endif
                     </select>
                     @error('SecondChoicePostName')
                     <div class="text-danger">{{ $message }}</div>
                     @enderror
                    </div>
                </div> --}}



                {{-- <div class="col-sm-6 hide" id="OtherPostNameDiv">
                    <label class="">Post Name<span class="astric-sign">*</span>:</label>
                    <div class="form-group">
                        <input type="text" class="form-control form-control-sm space-remover text-upper copy-paste"
                                placeholder="Enter post name" name="OtherPostName" value="{{ (isset($result['otherPostName']) && !empty($result['otherPostName'])) ? $result['otherPostName'] : old('OtherPostName') }}" id="OtherPostName"
                                onkeypress="return blockSpecialChar(event,'alphanumeric')">

                     @error('OtherPostName')
                     <div class="text-danger">{{ $message }}</div>
                     @enderror
                    </div>
                </div> --}}

                {{-- <div class="col-sm-6">
                    <label class="">District Prefference is Required<span class="astric-sign">*</span>:</label>
                    <div class="form-group">
                    <select class="form-select form-select-sm" aria-label=".form-select-sm example" name="ApplyDistrict" id="ApplyDistrict">
                        <option value="">Select Apply District</option>
                        @foreach($DistrictMst as $DistrictKey => $DistrictValue)
                        <option value="{{ $DistrictKey }}" {{ ((isset($PostAppliedData['ApplyDistrictID']) && ($PostAppliedData['ApplyDistrictID']==$DistrictKey)) OR (old("ApplyDistrict") == $DistrictKey )) ? "selected":"" }}>{{ $DistrictValue }}</option>
                        @endforeach
                     </select>
                     @error('ApplyDistrict')
                     <div class="text-danger">{{ $message }}</div>
                     @enderror
                    </div>
                </div> --}}

                {{-- <div class="col-sm-6">
                    <label class="">Select Court<span class="astric-sign">*</span>:</label>
                    <div class="form-group">
                    <select class="form-select form-select-sm" aria-label=".form-select-sm example" name="CourtName" id="CourtName">
                        <option value="">Select Court</option>
                        @foreach($CourtMst as $CourtKey => $CourtVal)
                        <option value="{{ $CourtKey }}" {{((isset($PostAppliedData['CourtID']) && ($PostAppliedData['CourtID']==$CourtKey)) OR (old("CourtName") == $CourtKey)) ? "selected":"";}}>{{ $CourtVal }}</option>
                        @endforeach
                     </select>
                     @error('CourtName')
                     <div class="text-danger">{{ $message }}</div>
                     @enderror
                    </div>
                </div> --}}

                {{-- <div class="col-sm-6">
                    <label class="">Name Of the Domicile/Permanent Resident Certificate of Uttarakhand<span class="astric-sign">*</span>:</label>
                    <div class="form-group">
                    <select class="form-select form-select-sm" aria-label=".form-select-sm example" name="DomicileDistrict" id="DomicileDistrict">
                        <option value="">Select Domicile District</option>
                        @foreach($DistrictMst as $DistrictKey => $DistrictValue)
                        <option value="{{ $DistrictKey }}" {{ ((isset($PostAppliedData['ApplyDistrictID']) && ($PostAppliedData['ApplyDistrictID']==$DistrictKey)) OR (old("ApplyDistrict") == $DistrictKey )) ? "selected":"" }}>{{ $DistrictValue }}</option>
                        @endforeach
                     </select>
                     @error('DomicileDistrict')
                     <div class="text-danger">{{ $message }}</div>
                     @enderror
                    </div>
                </div> --}}
            </div>

                <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"> Exam center </h6>
                </div>
                <br>
                <div class="row">
                   
                    <div class="col-sm-6">
                        <label class="">1<sup>st</sup> Choice For Exam City <span class="astric-sign">*</span>:</label>
                            <div class="form-group">
                                <select class="form-select form-select-sm selectAllCity cityID" aria-label=".form-select-sm example" id="FstChoiceForExamCity" name="FstChoiceForExamCity">
                                    <option value="">--Select City--</option>    
                                    @foreach($CityMst as $City)
                                    <option value="{{isset($City['ID'])? $City['ID'] :''}}"  
                                                                                >{{isset($City['CityName'])? $City['CityName'] :old('FstChoiceForExamCity')}} </option>
                                    @endforeach                                
        
                                </select>
                            </div>
                    </div>
                    <div class="col-sm-6">
                    </div>

                    <div class="col-sm-6">
                        <label class="">2<sup>nd</sup> Choice For Exam City <span class="astric-sign">*</span>:</label>
                            <div class="form-group">
                                <select class="form-select form-select-sm selectAllCity cityID" aria-label=".form-select-sm example" id="SndChoiceForExamCity" name="SndChoiceForExamCity">
                                    <option value="">--Select City--</option>                                  
                                    @foreach($CityMst as $City)
                                    <option value="{{isset($City['ID'])? $City['ID'] :''}}"  
                                                                                >{{isset($City['CityName'])? $City['CityName'] :old('SndChoiceForExamCity')}} </option>
                                    @endforeach  
                                
                                </select>
                            </div>
                    </div>
                    <div class="col-sm-6">
                    </div>

                    <div class="col-sm-6">
                        <label class="">3<sup>rd</sup> Choice For Exam City <span class="astric-sign">*</span>:</label>
                            <div class="form-group">
                                <select class="form-select form-select-sm selectAllCity cityID" aria-label=".form-select-sm example" id="thrdChoiceForExamCity" name="thrdChoiceForExamCity">
                                    <option value="">--Select City--</option>                                  
                                    @foreach($CityMst as $City)
                                    <option value="{{isset($City['ID'])? $City['ID'] :''}}"  
                                                                                >{{isset($City['CityName'])? $City['CityName'] :old('thrdChoiceForExamCity')}} </option>
                                    @endforeach  
                                
                                </select>
                            </div>
                    </div> 

            </div>
            
            <br>  <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 copy-paste" placeholder="Enter Security PIN as Shown Below" id="pinValue" name="pinValue">
                        @error('pinValue')
                        <div class="text-danger">{{ $message }}</div>
                        @enderror
                    </div>
                </div>
            </div>

           <div class="col-sm-12 card-body">
                <div class="form-group">
                <input class="form-check-input" type="checkbox" id="clarification" name="clarification">
                &nbsp;I AGREE 
                </div>
                @error('clarification')
                    <div class="text-danger">{{ $message }}</div>
                @enderror
                <p>I hereby acknowledge that I have read the detailed advertisement and studied the information bulletin, alongwith the stipulations, eligibility criteria, educational qualifications, and experience requirements outlined for the position I am applying for. I affirm that, I meet all the eligibility criteria for the specified post. I am fully aware that my candidature is subject to verification of my eligibility by the Uttarakhand Highcourt Board/National Testing Agency after both the stages of examination and my candidature remains provisional pending such verification.</p>
                <p>I acknowledge that if, at any point in the application process, it is discovered that I have furnished false information or I do not meet the stipulated eligibility criteria for the aforementioned post, my candidature will be summarily rejected by the Uttarakhand Highcourt Board/National Testing Agency</p>
            </div>


            <div class="row mb-3 justify-content-center">
                <div class="col-sm-2">
                    <a href="{{ route('document')}}" 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-8 astric-sign">Note: To apply for more than one post, please complete the payment for one post and then return to the "Apply For Post" section to apply for another post.</div> --}}
                <div class="col-sm-10">
                    <button  type="button"  id="ApplyPostSubmitBtn" 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>

<div class="modal fade" tabindex="-1" role="dialog" id="myModal">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <!--div class="modal-header">        
        <h4 class="modal-title">Review Page </h4>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
      </div-->
            <div class="modal-body">
                City Already selected, Please select other city for center
            </div>
            <div class="modal-footer">

                <!-- <button type="button" class="btn btn-primary">Submit</button> -->
                <div class="col-md-12 text-center">

                    <button type="button" class="btn btn-primary close">Close</button>
                </div>
            </div><!-- /.modal-content -->
        </div><!-- /.modal-dialog -->
    </div><!-- /.modal -->
</div>

@endsection

@push('js')
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.4/moment.min.js"></script>
<script>

    $(document).ready(function () {
        var PostName = $("#PostName").val();
        if (PostName == 3) {
            $(".PostPreference").removeClass('hide');
        } else {
            $(".PostPreference").addClass('hide');
        }
      
    $("#ApplyPostSubmitBtn").click(function (e) 
    {      
        e.preventDefault();
        var form = $("#ApplyPostDetailsForm");
        form.validate({
            rules: {
                // PostGroupName:{
                //     required: true
                // },
                // PostName: {
                //     required: true
                // },
                // FirstChoicePostName:{
                //     required: function() {
                //         return $("#PostName").val() == 3;
                //     },
                // },
                // SecondChoicePostName:{
                //     required: function() {
                //         return $("#PostName").val() == 3;
                //     },
                // },
                // ApplyDistrict: {
                //     required: true
                // },
                // CourtName: {
                //     required: true
                // },
                DomicileDistrict: {
                    required: true
                },
                FstChoiceForExamCity:{
                    required:true
                },
    
                SndChoiceForExamCity:{
                    required:true
                },
                thrdChoiceForExamCity:{
                    required:true
                },
                pinValue:{
                    required: true
                },
                clarification:{
                     required: true
                 }
            
            },
            messages: {
                // PostName: {
                //     required: "Please select required field."
                // },
                // OtherPostName: {
                //     required: "Please fill required field."
                // },
                // // ApplyDistrict: {
                //     required: "Apply District cannot be blank."
                // },
                // CourtName: {
                //     required: "Please select required field."
                // },
                DomicileDistrict: {
                    required: "Domicile District cannot be blank."
                },
                // FstChoiceForExamState: {
                //     required: "First Choice of Exam state cannot be blank."
                // },
                FstChoiceForExamCity: {
                    required: "First Choice of Exam city cannot be blank."
                },
                // SndChoiceForExamState: {
                //     required: "Second Choice of Exam state cannot be blank."
                // },
                SndChoiceForExamCity: {
                    required: "Second Choice of Exam city cannot be blank."
                },
                // thrdChoiceForExamState: {
                //     required: "Third Choice of Exam state cannot be blank."
                // },
                thrdChoiceForExamCity: {
                    required: "Third Choice of Exam city cannot be blank."
                },
                pinValue: {
                    required: "Captcha cannot be blank."                   
                },
                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');            
            },
            unhighlight: function (element, errorClass, validClass) {
            $(element).removeClass('is-invalid');
            }

        });
        if (form.valid() === true) {
            $("#ApplyPostDetailsForm").submit();
        }  
    });
     
    });

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

    $(function(){
        // $('#FstChoiceForExamState,#SndChoiceForExamState').on('change',function(){            
        //     var elementId = $(this).attr("id");
        //     var elemCityId = '';
        //     if (elementId == 'FstChoiceForExamState') {
        //         elemCityId = '#FstChoiceForExamCity';                   
        //     }
        //     if (elementId == 'SndChoiceForExamState') {
        //         elemCityId = '#SndChoiceForExamCity';
        //     }
        //     if (elementId == 'thrdChoiceForExamState') {
        //         elemCityId = '#thrdChoiceForExamCity';
        //     }
        //     var state_id = $(this).val();
        //     var fstcity_id = $('#FstChoiceForExamCity option:selected').val();
        //     var sndcity_id = $('#SndChoiceForExamCity option:selected').val();
        //     var thrdcity_id = $('#thrdChoiceForExamCity option:selected').val();
        //     $.ajax({
        //         type: "POST",
        //         url: "{{route('ExamStateCities')}}",
        //         data:{
        //             state_id:state_id,
        //         _token :'{{csrf_token()}}'
        //         },                 
        //         success: function(response){
        //             console.log(response);                                                       
        //             $(elemCityId).html(response);
        //         }
        //     });
               
        // });

        $('.selectAllCity').on('change', function(event ) {
            var selectCity =$(this).attr('id');
            var currentCity =$(this).val();
            var firstCity =$('#FstChoiceForExamCity').val();
            var secCity =$('#SndChoiceForExamCity').val();
            var thirdCity =$('#thrdChoiceForExamCity').val();
            var message = "This city you have already selected, please select another one.";
            if(selectCity=='FstChoiceForExamCity') {

                if(currentCity==secCity){
                    //$('#myModal').modal('show');
                    Swal.fire({icon: 'error',text: message});
                    $('#FstChoiceForExamCity').prop('selectedIndex',0);                  
                    return false;
                } 
            } else  if(selectCity=='SndChoiceForExamCity') {            
                if(currentCity==firstCity){
                    //$('#myModal').modal('show');
                    Swal.fire({icon: 'error',text: message});
                    $('#SndChoiceForExamCity').prop('selectedIndex',0);
                    return false;
                }
            
            }
            else  if(selectCity=='thrdChoiceForExamCity') {            
                if((currentCity==secCity)||(currentCity==firstCity)){
                    //$('#myModal').modal('show');
                    Swal.fire({icon: 'error',text: message});
                    $('#thrdChoiceForExamCity').prop('selectedIndex',0);
                    return false;
                }
            } 
             
        });
        
        $('.close').on('click', function(e) {
            $('#myModal').modal('hide');
            e.preventDefault();
        });

        // $("#PostName").on("change", function() {
        //     var postName = $("#PostName").val();
        //     if(postName == 3){
        //         $(".PostPreference").removeClass('hide');
        //     }else{
        //         $(".PostPreference").addClass('hide');
        //         $('#FirstChoicePostName').val('');
        //         $('#SecondChoicePostName').val('');
        //     }
        // });

    // $('#PostGroupName').on('change',function(){
        
    //     var groupID = $(this).val();
    //     $.ajax({
    //         type: "POST",
    //         url: "{{route('GroupPostName')}}",
    //         data:{
    //             groupID:groupID,
    //         _token :'{{csrf_token()}}'
    //         },                 
    //         success: function(response){
    //             console.log(response);                                                       
    //             $('#PostName').html(response);
    //         }
    //     }); 
    // });

    // $('.selectAllPost').on('change', function(event ) {

    //         var selectPost =    $(this).attr('id');
    //         var currentPost =   $(this).val();
    //         var firstPost = $('#FirstChoicePostName').val();
    //         var secondPost =   $('#SecondChoicePostName').val();
    //         var message = "This post you have already selected, please select another one.";
    //         if(selectPost=='FirstChoicePostName') {

    //             if(currentPost==secondPost){
    //                 //$('#postChoiceModal').modal('show');
    //                 Swal.fire({icon: 'error',text: message});
    //                 $('#FirstChoicePostName').prop('selectedIndex',0);                  
    //                 return false;
    //             } 
    //         } else  if(selectPost=='SecondChoicePostName') {            
    //             if(currentPost==firstPost){
    //                 //$('#postChoiceModal').modal('show');
    //                 Swal.fire({icon: 'error',text: message});
    //                 $('#SecondChoicePostName').prop('selectedIndex',0);
    //                 return false;
    //             }
            
    //         }
           
    //     });

        
    });

    
</script>

@endpush