@extends('layouts.app')

@section('content')
<div class="container">
    <div class="row justify-content-center">
        <div class="col-md-8">
            <div class="card">
                <div class="card-header" style="background-color: #14345d; color: white">{{ __('Sign Up Form') }}</div>

                <div class="card-body">
                    <form method="POST" id="company_register" onsubmit="return validatePassword()" action="{{ route('register') }}">
                        @csrf

                        <div class="row mb-3">
                            <label for="name"  class="col-md-4 col-form-label text-md-end">{{ __('Name') }}</label>

                            <div class="col-md-6">
                                <input id="name" type="text" class="form-control @error('name') is-invalid @enderror" name="name"  required autocomplete="name" autofocus>

                                @error('name')
                                    <span class="invalid-feedback" role="alert">
                                        <strong>{{ $message }}</strong>
                                    </span>
                                @enderror
                            </div>
                        </div>

                        <div class="row mb-3">
                            <label for="email" class="col-md-4 col-form-label text-md-end">{{ __('Email') }}</label>

                            <div class="col-md-6">
                                <input id="email" type="email" class="form-control @error('email') is-invalid @enderror" name="email"  required autocomplete="email">

                                @error('email')
                                    <span class="invalid-feedback" role="alert">
                                        <strong>{{ $message }}</strong>
                                    </span>
                                @enderror
                            </div>
                        </div>
                        <div class="row mb-3">
                            <label for="company name" class="col-md-4 col-form-label text-md-end">{{ __('Company Name') }}</label>

                            <div class="col-md-6">
                                <input id="company name" name="companyname" type="text" class="form-control @error('company name') is-invalid @enderror" value="" required autocomplete="companyname">

                                @error('Company Name')
                                    <span class="invalid-feedback" role="alert">
                                        <strong>{{ $message }}</strong>
                                    </span>
                                @enderror
                            </div>
                        </div>
                        @csrf
 
                        <div class="row mb-3">
                            <label for="phonenumber" class="col-md-4 col-form-label text-md-end">{{trans('Mobile Number') }}</label>

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

                            <div class="d-flex">
                            <select id="countryDropdown" onchange="updateCountryCode()" >
                                <option value="">Emirates</option>
                                <option value="Abu Dhabi">Abu Dhabi</option>
                                <option value="Dubai">Dubai</option>
                                <option value="Sharjah">Sharjah</option>
                                <option value="Ajman">Ajman</option>
                                <option value="Umm Al Quwain">Umm Al Quwain</option>
                                <option value="Ras Al Khaimah">Ras Al Khaimah</option>
                                <option value="Fujairah">Fujairah</option>
                                <!-- Add more country options here -->
                            </select>
                    
                            <input type="text" class="form-control" id="countryCodeInput" readonly name="countrycode">
                            </div>
                            <!-- <input type="text" id="phone" name="phone" required> -->
                                <input id="phonenumber" name="mobile" class="form-control"  minlength=9 maxlength=9 required="">
                                 <span id="validateMobileNumber"></span>
                                  @error('mobile number')
                                    <span class="invalid-feedback" role="alert">
                                        <strong>{{ $message }}</strong>
                                    </span>
                                @enderror

                            </div>
                        </div>
                        

                        <div class="row mb-3">
                            <label for="password" class="col-md-4 col-form-label text-md-end">{{ __('Password') }}</label>

                            <div class="col-md-6">
                                <input id="password" name="password" type="password" class="form-control @error('password') is-invalid @enderror" name="password" required autocomplete="new-password">
                                    
                                <!-- @error('password')
                                    <span class="invalid-feedback" role="alert">
                                        <strong>{{ $message }}</strong>
                                    </span>
                                @enderror -->
                            </div>
                        </div>

                        <div class="row mb-3">
                            <label for="password-confirm" class="col-md-4 col-form-label text-md-end">{{ __('Confirm Password') }}</label>

                            <div class="col-md-6">
                                <input id="password_confirm" type="password" class="form-control @error('password') is-invalid @enderror" name="password_confirmation" required autocomplete="new-password">
                                <span id="error" class="error"></span><br>
                            </div>
                        </div>

                        <div class="row mb-0">
                            <div class="col-md-6 offset-md-4">
                                <button type="submit" style="margin-left:110px" class="btn btn-success">
                                    {{ __('Register') }}
                                </button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>
<script>
     function validatePassword() {
        
      var password = document.getElementById("password").value;
      var confirmPassword = document.getElementById("password_confirm").value;

      if (password !== confirmPassword) {
        alert("Passwords do not match.");
        return false;
      }
    }
    </script>
    <style>
    .error {
      color: red;
    }
  </style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/jquery.validation/1.16.0/jquery.validate.min.js"></script>
    <script src="https://cdn.jsdelivr.net/jquery.validation/1.16.0/additional-methods.min.js"></script>
    <script>
    $(document).ready(function () {
      $("#company_register").validate({
                // in 'rules' user have to specify all the constraints for respective fields
                rules: {
                    
                   
                    password: {
                        required: true,
                        minlength: 5
                    },
                    confirm_password: {
                        required: true,
                        minlength: 5,
                        equalTo: "#password" //for checking both passwords are same or not
                    },
                    email: {
                        required: true,
                        email: true
                    }
                    
                },
                // in 'messages' user have to specify message as per rules
                messages: {
                    
                    
                    password: {
                        required: " Please enter a password",
                        minlength: " Your password must be consist of at least 5 characters"
                    },
                    confirm_password: {
                        required: " Please enter a password",
                        minlength: " Your password must be consist of at least 5 characters",
                        equalTo: " Please enter the same password as above"
                    }
                }
            });
  
    });

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

  $("#phonenumber").on("input", function() {
    var input = $(this).val();
    var regex=/^[5]{1}[0-9+()]*$/;
   // var regex = /^\d{0,16}$/; // Regular expression to allow up to 16 digits only
    //var regex = /^\+971\s\d{2}\s\d{3}\s\d{4}$/;
    if (!regex.test(input)) {
      $(this).val(input.slice(0, -1)); // Remove the last character if it doesn't match the pattern
    }
    else{
      ("error");
    }

  });
    
});

function validateMobileNumber(number,countryCodeInput) {
  // India: 10 digits starting with 7, 8, or 9
  const indiaRegex = /^[7-9]\d{9}$/;
  
  // UAE: 9 digits starting with 05
  const uaeRegex = /^05\d{7}$/;
  
 if (countryCodeInput='UAE' && uaeRegex.test(number)) {
    return "Valid UAE mobile number.";
  } else {
    return "Invalid mobile number.";
  }
}
$('#phonenumber').blur(function() {
        if (validateMobileNumber('phonenumber,countryCodeInput')) {
            $('#validation_status').html('Valid Mobile Number');
            $('#validation_status').css('color', 'green');
        }
        else {
            $('#validation_status').html('Invalid Mobile Number or Country code');
            $('#validation_status').css('color', 'red');
        }
    }); 
  </script>
   <script>
    // Object mapping country names to codes
    const countryCodes = {
      "Abu Dhabi": "+971",
      "Dubai":"+971",
      "Sharjah":"+971",
      "Ajman":"+971",
      "Umm Al Quwain":"+971",
      "Ras Al Khaimah":"+971",
      "Fujairah":"+971",
      
      // Add more country code mappings here
    };

    // Function to update country code
    function updateCountryCode() {
      const dropdown = document.getElementById("countryDropdown");
      const selectedCountry = dropdown.options[dropdown.selectedIndex].text;
      const countryCodeInput = document.getElementById("countryCodeInput");
      const phoneNumberInput = document.getElementById("phoneNumberInput");

      // Check if the selected country exists in the countryCodes object
      if (selectedCountry in countryCodes) {
        const countryCode = countryCodes[selectedCountry];
        countryCodeInput.value = countryCode;
      } else {
        countryCodeInput.value = "";
      }

      phoneNumberInput.value = ""; // Clear phone number input
    }
  </script>

  <style>
    .error {
      color: red;
    }
  </style>

@endsection