@extends('layouts.app')

@section('content')

    <div class="bg-light p-4 rounded">
       <center><h7>Create New User<h7></center>  


        <div class="container mt-4">
            <form method="POST" action="{{url('add-newuser')}}">
                @csrf
                <div class="mb-3">
                    <label for="name" class="form-label">Name</label>
                    <input value="{{ old('name') }}" 
                        type="text" 
                        class="form-control" 
                        name="name" 
                        placeholder="Name" required>

                    @if ($errors->has('name'))
                        <span class="text-danger text-left">{{ $errors->first('name') }}</span>
                    @endif
                </div>
                <div class="mb-3">
                    <label for="email" class="form-label">Email</label>
                    <input value="{{ old('email') }}"
                        type="email" 
                        class="form-control" 
                        name="email" 
                        placeholder="Email address" required>
                    @if ($errors->has('email'))
                        <span class="text-danger text-left">{{ $errors->first('email') }}</span>
                    @endif
                </div>
                <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>

                <button type="submit" class="btn btn-success">Save user</button>
                <a href="{{ route('users.index') }}" class="btn btn-default">Back</a>
             
            </form>
        </div>

    </div>

    <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");
        }

        });
        
        });
    </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>
@endsection