@extends('layouts.app',['dashBoardTitle'=>'CREATE NEW USER'])
@php
use App\Master\Master_Emirates;
$details=Master_Emirates::get_emirates();
@endphp
@section('content')
<div class="container " id="main-container">
    <div class="row justify-content-center">
        <div class="col-md-12">
            <div class="card">
       <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="form-group row">
                <div class="col-sm-6">
                    <label class="bold pad-al" for="exampleInputEmail1">{{trans('Emirates')}}</label>
                    <select class="form-select" name="countrycode" id="countryDropdown" onchange="updateCountryCode()">
                    <option value="0">Select Emirates</option>  
                        @foreach($details as $emirates)
                                <option value="{{ $emirates->id }}">{{ $emirates->name }}</option>
                            @endforeach  
                        </select>
                </div>
           
                <div class="col-sm-2">
                
                    <label class="bold pad-al" for="exampleInputEmail1">{{trans('Mobile No')}}</label>  
                    <div class="d-flex">
                        <input type="text" class="form-control" id="countryCodeInput" readonly name="countrycode"  style="width: 160px">
                        <div class="d-flex">
                        <div class="col-sm-30">
                    
                        <input id="phoneNumberInput" name="mobile" class="form-control"  minlength=9 maxlength=9 required="" readonly="readonly" name=mobile style="width:320px">
                        
                            @error('mobile number')
                            <span class="invalid-feedback" role="alert">
                                <strong>{{ $message }}</strong>
                            </span>
                        @enderror
                    </div>
                </div>           
          </div>
            
        </div>
            
              <div class="p-3">
                <button type="submit" class="btn btn-success float-right">Save user</button>
               
             
            </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 = {
        @foreach($details as $emirate)
             '{{$emirate->name}}':'{{$emirate->code}}',
        @endforeach
      // Add more country code mappings here
    };

    // Function to update country code
    function updateCountryCode() {
      const dropdown = document.getElementById("countryDropdown");
   // console.log(dropdown.selectedIndex);
      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;
        phoneNumberInput.removeAttribute('readonly');
        phoneNumberInput.removeAttribute('disabled');
       } else {
        countryCodeInput.value = "";
        phoneNumberInput.disabled = true;
      }
    }
  </script>

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

  <script>
      $(document).ready(function () {
        $("#phoneNumberInput").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
        alert("Mobile Number Allow Numbers & Start with 5 only");
      }
      else{
        ("error");
      }

    });
      });
  </script>
@endsection