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

    <style>
        .intruc-table {
            margin-top: 10px;
        }

        .point-table {
            width: 100%;
            border: 1px solid #000;
        }

        .border {
            border: 1px solid #080808;
        }

        table,
        td,
        th {
            border: 1px solid;
        }

        table {
            width: 100%;
            border-collapse: collapse;
        }

        tr .tbl-2 {
            width: 50%;
            padding: 5px 10px;
            text-align: center;
            font-size: 12px;
        }

        tr .tbl-1 {
            text-align: center;
            font-size: 14px;
            letter-spacing: 0.5px;
            padding: 0px 7px 1px;
        }
    </style>
    <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"> Exam Center 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>
        <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">Exam Center Detail List</h6>
        </div>
        <div class="card-body">
            <form id="personalDetailsForm" autocomplete="off" action=" {{ route('exam-center.store') }}" method="POST"
                enctype="multipart/form-data">
                @csrf
                <div class="row"> 
                    <div class="col-sm-6">
                        <label class=""> Exam State-1st choice <span class="astric-sign">*</span>:</label>                        
                        <div class="form-group">
                            <select class="form-select form-select-sm selectAllCity" aria-label=".form-select-sm example"
                                id="FstChoiceForExamState" name="FstChoiceForExamState">
                                <option value="">--Select State--</option>
                                @foreach ($StateMst as $State)
                                    <option value="{{ isset($State->ID) ? $State->ID : '' }}"
                                        >
                                        {{ isset($State->StateName) ? $State->StateName : old('FstChoiceForExamState') }}
                                    </option>
                                @endforeach
                            </select>
                            @error('FstChoiceForExamState')
                              <div class="text-danger">{{ $message }}</div>
                            @enderror 
                        </div>
                    </div>
                    <div class="col-sm-6">
                        <label class=""> Exam City-1st choice <span class="astric-sign">*</span>:</label>                        
                        <div class="form-group">
                            <select class="form-select form-select-sm selectAllCity" aria-label=".form-select-sm example"
                                id="FstChoiceForExamCity" name="FstChoiceForExamCity">
                                <option value="">--Select City--</option>
                                @if (isset($examCenter['firstCity']))
                                    @foreach ($examCenter['firstCity'] as $firstCity)
                                        <option value="{{ isset($firstCity['ID']) ? $firstCity['ID'] : '' }}"
                                            >
                                            {{ isset($firstCity['CityName']) ? $firstCity['CityName'] : old('FstChoiceForExamCity') }}
                                        </option>
                                    @endforeach
                                @endif
                            </select>
                            @error('FstChoiceForExamCity')
                              <div class="text-danger">{{ $message }}</div>
                            @enderror 
                        </div>
                    </div>
                    <div class="col-sm-6">
                        <label class=""> Exam State-2nd choice <span class="astric-sign">*</span>:</label>                        
                        <div class="form-group">
                            <select class="form-select form-select-sm selectAllCity" aria-label=".form-select-sm example"
                                id="SndChoiceForExamState" name="SndChoiceForExamState">
                                <option value="">--Select State--</option>
                                @foreach ($StateMst as $State)
                                    <option value="{{ isset($State->ID) ? $State->ID : '' }}"
                                        >
                                        {{ isset($State->StateName) ? $State->StateName : old('SndChoiceForExamState') }}
                                    </option>
                                @endforeach
                            </select>
                            @error('SndChoiceForExamState')
                              <div class="text-danger">{{ $message }}</div>
                            @enderror 
                        </div>
                    </div>
                    <div class="col-sm-6">                        
                        <label class=""> Exam City-2nd choice <span
                                class="astric-sign">*</span>:</label>
                        <div class="form-group">
                            <select class="form-select form-select-sm selectAllCity" aria-label=".form-select-sm example"
                                id="SndChoiceForExamCity" name="SndChoiceForExamCity">
                                <option value="">--Select City--</option>
                                @if (isset($examCenter['SndCity']) && !empty($examCenter['SndCity']))
                                    @foreach ($examCenter['SndCity'] as $SndCity)
                                        <option value="{{ isset($SndCity['ID']) ? $SndCity['ID'] : '' }}"
                                            >
                                            {{ isset($SndCity['CityName']) ? $SndCity['CityName'] : old('SndChoiceForExamCity') }}
                                        </option>
                                    @endforeach
                                @endif
                            </select>
                            @error('SndChoiceForExamCity')
                             <div class="text-danger">{{ $message }}</div>
                            @enderror 
                        </div>
                    </div>


                    <div class="col-sm-6">
                        <label class=""> Exam State-3rd choice <span class="astric-sign">*</span>:</label>                        
                        <div class="form-group">
                            <select class="form-select form-select-sm selectAllCity" aria-label=".form-select-sm example"
                                id="ThrdChoiceForExamState" name="ThrdChoiceForExamState">
                                <option value="">--Select State--</option>
                                @foreach ($StateMst as $State)
                                    <option value="{{ isset($State->ID) ? $State->ID : '' }}"
                                        >
                                        {{ isset($State->StateName) ? $State->StateName : old('ThrdChoiceForExamState') }}
                                    </option>
                                @endforeach
                            </select>
                            @error('ThrdChoiceForExamState')
                              <div class="text-danger">{{ $message }}</div>
                            @enderror 
                        </div>
                    </div>
                    <div class="col-sm-6">
                        <label class=""> Exam City-3rd choice <span class="astric-sign">*</span>:</label>
                            <div class="form-group">
                            <select class="form-select form-select-sm selectAllCity" aria-label=".form-select-sm example"
                                id="ThrdChoiceForExamCity" name="ThrdChoiceForExamCity">
                                <option value="">--Select City--</option>
                                @if (isset($examCenter['ThrdCity']) && !empty($examCenter['ThrdCity']))
                                    @foreach ($examCenter['ThrdCity'] as $ThrdCity)
                                        <option value="{{ isset($ThrdCity['ID']) ? $ThrdCity['ID'] : '' }}"
                                            >
                                            {{ isset($ThrdCity['CityName']) ? $ThrdCity['CityName'] : old('ThrdChoiceForExamCity') }}
                                        </option>
                                    @endforeach
                                @endif
                            </select>
                            @error('ThrdChoiceForExamCity')
                              <div class="text-danger">{{ $message }}</div>
                            @enderror 
                        </div>
                    </div>

                </div>
               
                <br>
                <div class="row mb-3 justify-content-center">
                    <div class="col-sm-6">
                        <a href="{{ route('experience')}}" 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 text-center">
                        <button type="submit" id="personalDetailsSubmitBtn" class="btn btn-warning btn-sm">Save & Next
                            <i class="ri-arrow-right-circle-line float-end ms-1"></i></button>
                    </div>
                </div>
            </form>
        </div>
    </div>

    <div class="modal fade" tabindex="-1" role="dialog" id="myModal">
        <div class="modal-dialog" role="document">
            <div class="modal-content">

                <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>
        jQuery.validator.addMethod("FnoSpace", function(value, element) {
            if (jQuery.trim(value).length < 2) {
                return false;
            } else {
                return true;
            }
        }, "Your Father Number must consist of at least 2 characters.");
        jQuery.validator.addMethod("MnoSpace", function(value, element) {
            if (jQuery.trim(value).length < 2) {
                return false;
            } else {
                return true;
            }
        }, "Your Mother Number must consist of at least 2 characters.");

        $("#personalDetailsSubmitBtn").click(function(e) {
            e.preventDefault();
            var form = $("#personalDetailsForm");
            form.validate({
                rules: {

                    Gpat: {
                        required: true,

                    },
                    FatherGuardianOccupation: {
                        required: true,

                    },
                    FatherGuardianQualification: {
                        required: true,

                    },
                    MotherGuardianOccupation: {
                        required: true,

                    },
                    MotherGuardianQualification: {
                        required: true,

                    },

                    FstChoiceForExamState: {
                        required: true
                    },
                    FstChoiceForExamCity: {
                        required: true
                    },

                    SndChoiceForExamState: {
                        required: true
                    },
                    SndChoiceForExamCity: {
                        required: true
                    },

                    ThrdChoiceForExamState: {
                        required: true
                    },
                    ThrdChoiceForExamCity: {
                        required: true
                    },

                },
                messages: {
                    Gpat: {
                        required: "Please fill required field.",
                        //  minlength: "Your Father Number must consist of at least 2 characters."
                    },
                    FatherGuardianOccupation: {
                        required: "Please fill required field.",
                        //  minlength: "Your Father Number must consist of at least 2 characters."
                    },
                    FatherGuardianOccupation: {
                        required: "Please fill required field.",
                        //  minlength: "Your Father Number must consist of at least 2 characters."
                    },
                    FatherGuardQualification: {
                        required: "Please fill required field.",
                        //  minlength: "Your Father Number must consist of at least 2 characters."
                    },
                    MotherGuardianOccupation: {
                        required: "Please fill required field.",
                        //  minlength: "Your Father Number must consist of at least 2 characters."
                    },
                    MotherGuardianQualification: {
                        required: "Please fill required field.",
                        //  minlength: "Your Father Number must consist of at least 2 characters."
                    },

                    FstChoiceForExamState: {
                        required: "State cannot be blank."
                    },
                    FstChoiceForExamCity: {
                        required: "City cannot be blank."
                    },

                    SndChoiceForExamState: {
                        required: "State cannot be blank."
                    },
                    SndChoiceForExamCity: {
                        required: "City cannot be blank."
                    },
                    ThrdChoiceForExamState: {
                        required: "State cannot be blank."
                    },
                    ThrdChoiceForExamCity: {
                        required: "City cannot be blank."
                    },

                },
                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');
                    $(element).addClass('is-valid');
                }

            });
            if (form.valid() === true) {

                //form.formSubmit(); 
                $("#personalDetailsForm").submit();
            }
        });
        jQuery(function($) { // DOM ready and $ alias secured
            let aadhaar = "";
            let aadhaarStack = [];
            let maskStack = [];
            let flag = 0;

            $('#AadharNumber').on('input', function(e) {
                let key = e.which || this.value.substr(-1).charCodeAt(0);
                if (this.value.length < aadhaarStack.length) {
                    aadhaarStack.pop();
                    maskStack.pop();
                } else {
                    key = String.fromCharCode(key);
                    if (aadhaarStack.filter(i => i !== " ").length <= 27 && !isNaN(key)) {
                        if (aadhaarStack.length > 1 && (aadhaarStack.filter(i => i !== " ").length) % 4 ===
                            0) {
                            aadhaarStack.push(" ");
                            aadhaarStack.push(key);
                            maskStack.push(" ");
                            if (aadhaarStack.filter(i => i !== " ").length > 8) {
                                maskStack.push(key);
                            } else {
                                maskStack.push("X");
                            }
                        } else {
                            aadhaarStack.push(key);
                            if (aadhaarStack.filter(i => i !== " ").length > 8) {
                                maskStack.push(key);
                            } else {
                                maskStack.push("X");
                            }
                        }
                    }
                }

                updateUi();
            });

            function updateUi() {
                setTimeout(function() {
                    aadhaar = maskStack.join("");
                    $('#AadharNumber').val(aadhaar);
                }, 100);
            }
        });
    </script>
    <script>
        $(document).ready(function() {
            $('#FstChoiceForExamState,#SndChoiceForExamState,#ThrdChoiceForExamState').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();
                    $('.overlay2').show();
                    $.ajax({
                        type: "POST",
                        url: "{{ route('StateCities') }}",
                        data: {
                            state_id: state_id,
                            _token: '{{ csrf_token() }}'
                        },
                        success: function(response) {
                            console.log(response);
                            $(elemCityId).html(response);
                            $('.overlay2').hide();
                        }
                    });

                });
        });

        function getCityByID(val) {
            $('.overlay2').show();
            $.ajax({
                type: "POST",
                url: "{{ route('StateCities') }}",
                data: {
                    ID: val,
                    _token: '{{ csrf_token() }}'
                },
                success: function(result) {
                    $('#FstChoiceForExamCity').html(result);
                    // $('.overlay2').hide();
                }
            });
        }

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

        /*select Sate */
        $('.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();
       
        if (selectCity == 'FstChoiceForExamCity') {
            if ((currentCity == secCity) || (currentCity == thirdCity)) {
                $('#myModal').modal('show');
                $('#FstChoiceForExamCity').prop('selectedIndex', 0);
                return false;
            }
        } else if (selectCity == 'SndChoiceForExamCity') {
            if ((currentCity == firstCity) || (currentCity == thirdCity)) {
                $('#myModal').modal('show');
                $('#SndChoiceForExamCity').prop('selectedIndex', 0);
                return false;
            }

        } else if (selectCity == 'ThrdChoiceForExamCity') {

            if ((currentCity == secCity) || (currentCity == firstCity)) {
                $('#myModal').modal('show');
                $('#ThrdChoiceForExamCity').prop('selectedIndex', 0);
                return false;
            }
        } 
    });

        $('.close').on('click', function(e) {
            $('#myModal').modal('hide');
            //return false;
            e.preventDefault();
        });
    </script>
@endpush