@extends('backend.auth.master')

@section('title')
    {{ $data['title'] }}
@endsection

@section('content')
    <!-- form heading  -->
    <div class="form-heading mb-40">
        <h1 class="title mb-8">{{ ___('common.registration_form') }}</h1>
    </div>
    <!-- Start With form -->

    <form action="{{ route('register') }}" method="post"
        class="auth-form d-flex justify-content-center align-items-start-old flex-column registration-form"
        onsubmit="return registrationForm()">
        @csrf
        <!-- username input field  -->

        <div class="row">
            <div class="col-md-6">
                <div class="input-field-group mb-20">
                    <label for="username">{{ ___('common.school_name') }} : <sup
                            class="fillable text-danger">*</sup></label><br />
                    <div class="custom-input-field">
                        <input type="text" name="school_name" id="username"
                            class="ot-input @error('school_name') is-invalid @enderror" value="{{ old('school_name') }}"
                            required />
                        @error('school_name')
                            <p class="input-error error-danger invalid-feedback">{{ $message }}</p>
                        @enderror
                    </div>
                </div>
            </div>
            <div class="col-md-6">
                <div class="input-field-group mb-20">
                    <label for="username">{{ ___('school.Postal Address') }} : <sup
                            class="fillable text-danger">*</sup></label><br />
                    <div class="custom-input-field">
                        <input type="text" name="transactional_address"
                            class="ot-input @error('transactional_address') is-invalid @enderror" id="username"
                            value="{{ old('transactional_address') }}" required />
                        @error('transactional_address')
                            <p class="input-error error-danger invalid-feedback">{{ $message }}</p>
                        @enderror
                    </div>

                </div>
            </div>
            <div class="col-md-6">
                <div class="input-field-group mb-20">
                    <label for="username">{{ ___('school.District') }} : <sup
                            class="fillable text-danger">*</sup></label><br />
                    <div class="custom-input-field">
                        <input type="text" name="district" class="ot-input @error('district') is-invalid @enderror"
                            id="username" value="{{ old('taluka') }}" required />
                        @error('district')
                            <p class="input-error error-danger invalid-feedback">{{ $message }}</p>
                        @enderror
                    </div>

                </div>
            </div>

            <div class="col-md-6">
                <!-- select field  -->
                <div class="input-field-group mb-20">
                    <label for="inputname" class="form-label">{{ ___('common.Taluka') }} : <sup
                            class="fillable text-danger">*</sup></label>
                    <select name="taluka" id="taluka" onchange="changeTaluka(this.value)"
                        class="nice-select niceSelect ot-input min_width_200 file_system  bordered_style wide formSelect_input @error('taluka') is-invalid @enderror "
                        required>
                        <option value="">{{ ___('common.select') }}</option>
                        @foreach ($data['talukas'] as $taluka)
                            <option value="{{ $taluka->id }}">{{ $taluka->name }}</option>
                        @endforeach
                    </select>
                    @error('taluka')
                        <p class="input-error error-danger invalid-feedback">{{ $message }}</p>
                    @enderror
                </div>
            </div>
            <div class="col-md-6">
                <!-- select field  -->
                <div class="input-field-group mb-20">
                    <label for="inputname" class="form-label">{{ ___('common.Village/City') }} : <sup
                            class="fillable text-danger">*</sup></label>
                    <select name="village" id="village"
                        class="nice-select niceSelect ot-input min_width_200 file_system  bordered_style wide formSelect_input @error('taluka') is-invalid @enderror"
                        required>
                        <option value="">{{ ___('common.select') }}</option>
                    </select>
                    @error('village')
                        <p class="input-error error-danger invalid-feedback">{{ $message }}</p>
                    @enderror
                </div>
            </div>
            <div class="col-md-6">
                <div class="input-field-group mb-20">
                    <label for="username">{{ ___('school.Pincode') }} : <sup
                            class="fillable text-danger">*</sup></label><br />
                    <div class="custom-input-field">
                        <input type="number" name="pincode" maxlength="6"
                            class="ot-input @error('pincode') is-invalid @enderror" id="username"
                            value="{{ old('pincode') }}" required onkeypress="return inputLength(this.value, 6)" />
                        @error('pincode')
                            <p class="input-error error-danger invalid-feedback">{{ $message }}</p>
                        @enderror
                    </div>

                </div>
            </div>
            <div class="col-md-6">
                <div class="input-field-group mb-20">
                    <label for="username">{{ ___('school.Telephone Number(With STD Code)') }} : </label><br />
                    <div class="custom-input-field">
                        <input type="number" name="telephone_number"
                            class="ot-input @error('telephone_number') is-invalid @enderror" id="username"
                            value="{{ old('telephone_number') }}" />
                        @error('telephone_number')
                            <p class="input-error error-danger invalid-feedback">{{ $message }}</p>
                        @enderror
                    </div>

                </div>
            </div>
            <div class="col-md-6">
                <div class="input-field-group mb-20">
                    <label for="username">{{ ___('school.school_mobile_number') }} : <sup
                            class="fillable text-danger">*</sup></label><br />
                    <div class="custom-input-field">
                        <input type="number" name="school_mobile" maxlength="10"
                            class="ot-input @error('school_mobile') is-invalid @enderror" id="username"
                            value="{{ old('school_mobile') }}" required onkeypress="return inputLength(this.value, 10)" />
                        @error('school_mobile')
                            <p class="input-error error-danger invalid-feedback">{{ $message }}</p>
                        @enderror
                    </div>

                </div>
            </div>
            <div class="col-md-6">

                <div class="input-field-group mb-20">
                    <label for="username">{{ ___('school.school_email_id') }} : <sup
                            class="fillable text-danger">*</sup></label><br />
                    <div class="custom-input-field">
                        <input type="email" name="email" class="ot-input @error('email') is-invalid @enderror"
                            id="username" value="{{ old('email') }}" required />
                        @error('email')
                            <p class="input-error error-danger invalid-feedback">{{ $message }}</p>
                        @enderror
                    </div>

                </div>
            </div>
            <div class="col-md-6">
                <div class="input-field-group mb-20">
                    <label for="username">{{ ___('school.Name of the nearest police station') }} : <sup
                            class="fillable text-danger">*</sup></label><br />
                    <div class="custom-input-field">
                        <input type="text" name="police_station"
                            class="ot-input @error('police_station') is-invalid @enderror" id="username"
                            value="{{ old('police_station') }}" required />
                        @error('police_station')
                            <p class="input-error error-danger invalid-feedback">{{ $message }}</p>
                        @enderror
                    </div>

                </div>
            </div>
            <div class="col-md-6">
                <!-- select field  -->
                <div class="input-field-group mb-20">
                    <label for="inputname" class="form-label">{{ ___('common.School Type') }} : <sup
                            class="fillable text-danger">*</sup></label>
                    <select name="school_type"
                        class="@error('school_type') is-invalid @enderror nice-select niceSelect ot-input min_width_200 file_system  bordered_style wide formSelect_input"
                        required>
                        <option value="">{{ ___('common.select') }}</option>
                        <option value="granted" {{ old('school_type') == 'granted' ? 'selected' : '' }}>
                            {{ ___('common.Granted') }}</option>
                        <option value="partially_granted" {{ old('school_type') == 'partially granted' ? 'selected' : '' }}>
                            {{ ___('common.Partially Granted') }}</option>    
                        <option value="non-granted" {{ old('school_type') == 'non granted' ? 'selected' : '' }}>
                            {{ ___('common.Non Granted') }}</option>
                        <option value="self-finance" {{ old('school_type') == 'self finance' ? 'selected' : '' }}>
                            {{ ___('common.Self Finance') }}</option>
                        <option value="permanently_unaided" {{ old('school_type') == 'permanently_unaided' ? 'selected' : '' }}>
                            {{ ___('common.Permanently unaided') }}</option>
                    </select>
                    @error('school_type')
                        <p class="input-error error-danger invalid-feedback">{{ $message }}</p>
                    @enderror
                </div>
            </div>

            <div class="col-md-6">
                <!-- select field  -->
                <div class="input-field-group mb-20">
                    <label for="inputname" class="form-label">{{ ___('common.Udise No') }} : <sup
                            class="text-danger">*</sup></label>
                    <select style="height:50px;" name="UDISE_no"
                        class="@error('UDISE_no') is-invalid @enderror  udise_no nice-select niceSelect ot-input min_width_200 file_system  bordered_style wide formSelect_input"
                        required>
                        <option value="">{{ ___('common.select') }}</option>
                        <!-- <option value="1234" {{ old('UDISE_no') == '1234' ? 'selected' : '' }}>
                            1234</option>
                        <option value="12345" {{ old('UDISE_no') == '12345' ? 'selected' : '' }}>
                        12345</option>    
                        <option value="123456" {{ old('UDISE_no') == '123456' ? 'selected' : '' }}>
                        123456</option>
                        <option value="1234567" {{ old('UDISE_no') == '1234567' ? 'selected' : '' }}>
                        1234567</option> -->

                        @foreach ($data['udise_numbers'] as $number)
                            <option value="{{ $number->number }}">{{ $number->number }}</option>
                        @endforeach
                        
                    </select>
                    @error('UDISE_no')
                        <p class="input-error error-danger invalid-feedback">{{ $message }}</p>
                    @enderror
                </div>
            </div>

            <div class="col-md-6">
                <div class="input-field-group mb-20">
                    <label for="password">{{ ___('common.password') }} : <sup
                            class="fillable text-danger">*</sup></label><br />
                    <div class="custom-input-field password-input">
                        <input type="password" name="password" class="ot-input @error('password') is-invalid @enderror"
                            id="password" required />
                        <i class="lar la-eye"></i>
                        @error('password')
                            <p class="input-error error-danger invalid-feedback">{{ $message }}</p>
                        @enderror
                    </div>
                </div>
            </div>
            <div class="col-md-6">
                <!-- password input field  -->
                <div class="input-field-group mb-20">
                    <label for="password">{{ ___('common.confirm_password') }} : <sup
                            class="fillable text-danger">*</sup></label><br />
                    <div class="custom-input-field password-input">
                        <input type="password" name="confirm_password" id="confirm_password"
                            class="ot-input @error('confirm_password') is-invalid @enderror" required />
                        <i class="lar la-eye"></i>
                        @error('confirm_password')
                            <p class="input-error error-danger invalid-feedback">{{ $message }}</p>
                        @enderror
                    </div>
                </div>
            </div>

        </div>
        <!-- Remember Me and forget password section start -->
        {{-- <div class="d-flex justify-content-between w-100">
            <div class="remember-me input-check-radio">
                <div class="form-check d-flex align-items-center">
                    <input class="form-check-input" type="checkbox" name="agree_with" id="agree_with">
                    <label for="rememberMe">{{ ___('common.i_agree_to_privacy_policy_&_terms') }}</label>
                </div>
            </div>
        </div> --}}
        <!-- Remember Me and forget password section end -->
        <!-- submit button  -->
        <button type="submit" class="submit-btn pv-16 mt-32 mb-20" value="Sign In">
            {{ ___('common.register') }}
        </button>
    </form>
    <!-- End form -->
    <p class="authenticate-now mb-0">
        {{-- {{ ___('common.already_have_an_account') }} --}}
        <a class="link-text" href="{{ route('login') }}"> {{ ___('common.login') }}</a>
    </p>
@endsection

@section('script')
    <script type="text/javascript">
$(document).ready(function() {
    $('.udise_no').select2({
      placeholder: {
        id: '-1', // the value of the option
        text: 'Select an option'
      }
    });
});



        function registrationForm() {

            const Toast = Swal.mixin({
                toast: true,
                position: 'top-end',
                showConfirmButton: false,
                timer: 3000,
                timerProgressBar: true,
                didOpen: (toast) => {
                    toast.addEventListener('mouseenter', Swal.stopTimer)
                    toast.addEventListener('mouseleave', Swal.resumeTimer)
                }
            })




            var pincode = $("input[name='pincode']").val();
            if (pincode.length > 6 || pincode.length < 6) {
                Toast.fire({
                    icon: 'error',
                    title: 'The pincode must be 6 digits.'
                })
                return false;
            }
            var school_mobile = $("input[name='school_mobile']").val();
            if (school_mobile.length > 10 || school_mobile.length < 10) {
                Toast.fire({
                    icon: 'error',
                    title: 'The school mobile must be 10 digits.'
                })
                return false;
            }


            var password = $("input[name='password']").val();
            var confirm_password = $("input[name='confirm_password']").val();
            if (password != confirm_password) {
                Toast.fire({
                    icon: 'error',
                    title: 'The password and confirm password must match.'
                })
                return false;
            }
        }

        function inputLength(value, limit) {

            console.log(value);

            const Toast = Swal.mixin({
                toast: true,
                position: 'top-end',
                showConfirmButton: false,
                timer: 3000,
                timerProgressBar: true,
                didOpen: (toast) => {
                    toast.addEventListener('mouseenter', Swal.stopTimer)
                    toast.addEventListener('mouseleave', Swal.resumeTimer)
                }
            })

            if (value.length == limit) {

                if (limit == 6) {
                    Toast.fire({
                        icon: 'error',
                        title: 'The pincode must be 6 digits.'
                    })

                } else {
                    Toast.fire({
                        icon: 'error',
                        title: 'The school mobile must be 10 digits.'
                    })
                }

                return false;
            }
        }
        @if (env('APP_DEMO'))
            var textInputs = document.querySelectorAll('input[type="text"]');
            for (var i = 0; i < textInputs.length; i++) {
                textInputs[i].value = "Mr. Viraj " + i;
            }
            var textInputs = document.querySelectorAll('input[type="number"]');
            for (var i = 0; i < textInputs.length; i++) {
                textInputs[i].value = 1234567890;
            }
            var textInputs = document.querySelectorAll('input[type="email"]');
            for (var i = 0; i < textInputs.length; i++) {
                textInputs[i].value = "school@gmail.com";
            }
            var textInputs = document.querySelectorAll('input[type="password"]');
            for (var i = 0; i < textInputs.length; i++) {
                textInputs[i].value = "123456";
            }

            var selectElements = document.getElementsByName('taluka');
            for (var i = 0; i < selectElements.length; i++) {
                selectElements[i].selectedIndex = 1;
                selectElements[i].dispatchEvent(new Event('change'));
            }

            var selectElements = document.getElementsByName('village');
            for (var i = 0; i < selectElements.length; i++) {
                selectElements[i].selectedIndex = 1;
                selectElements[i].dispatchEvent(new Event('change'));
            }


            var pincodeElements = document.getElementsByName('pincode');
            for (var i = 0; i < pincodeElements.length; i++) {
                pincodeElements[i].value = 123456;
            }
        @endif
    </script>
@endsection