@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">
                        <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">
                                <span class="text-danger" id="pinValue_error"></span>
                                @error('pinValue')
                                  <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('additional')}}" 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>
       
        // $("#personalDetailsSubmitBtn").click(function(e) {
        //     e.preventDefault();
        //     var form = $("#personalDetailsForm");
        //     form.validate({
        //         rules: {

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

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

        //             ThrdChoiceForExamState: {
        //                 required: true
        //             },
        //             ThrdChoiceForExamCity: {
        //                 required: true
        //             },
        //              pinValue: {
        //                 required: true
        //              }
        //         },
        //         messages: {
                  
        //             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."
        //             },
        //             pinValue: {
        //                 required: "Captcha 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) {

        //         $("#personalDetailsForm").submit();
        //     }
        // });

    </script>
    <script>
        $(document).ready(function() {

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

            $('#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();
                }
            });
        }

        /*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>
    {!! $validator->selector('#personalDetailsForm') !!}
@endpush