@extends('layouts.app',['dashBoardTitle'=>'Sign Up Form'])
@php
use App\Master\Master_Emirates;
$details=Master_Emirates::get_emirates();
@endphp
<style>
    .password-field {
    display: flex;
    align-items: center;
}

.toggle-password {
    margin-left: -30px;
    cursor: pointer;
}
.error-message {
    color: red; /* Set the color for error messages */
}

.success-message {
    color: green; /* Set the color for success messages */
}
.input_error{
  color: red;
}

</style>
@section('content')
<div class="container">
    <div class="row justify-content-center">
        <div class="col-md-8">
            
                <div class="card-body">
                    <form method="POST" id="company_register" onsubmit="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>
                                <span class="input_error"></span>
                                @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">
                                <span class="input_error">please enter email</span>
                                <span id="error-message" style="color: red;"></span>
                                <span id="success-message" style="color: green;"></span>
                               
                                @error('email')
                                <span class="invalid-feedback" role="alert">
                                    <strong>{{ $message }}</strong>
                                </span>
                                @enderror
                              <span id="ajax-error-message" style="color: red;"></span> <!-- This is where the AJAX error message will appear -->
                            </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">
                                <span class="input_error">please enter company name</span>
                                @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('Emirates') }}</label>

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

                            <div class="d-flex">
                            <select id="countryDropdown" name="countrycode" required onchange="updateCountryCode()">
                                <option value="0">Select Emirates</option>
                                @foreach($details as $emirates)
                                <option value="{{ $emirates->id }}">{{ $emirates->name }}</option>
                                @endforeach
                                <!-- Add more country options here -->
                            </select>
                            <span class="input_error">please select Emirates</span>
                            </div>
                            
                            </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-2">
                              <input type="text" class="form-control" id="countryCodeInput" name=countrycode readonly name="mobile">
                              <span class="input_error"></span>
                              </div>
                              <div class="col-md-4">
                                  <input id="phoneNumberInput" name="mobile" class="form-control"  minlength="9" maxlength="9" required="" readonly="readonly">
                                  <span class="input_error"></span>
                                  <span id="mobile-number-error" class="text-danger"></span>
                              </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">
                              <div class="password-field">
                                <input id="password" name="password" type="password" minlength="8" class="form-control @error('password') is-invalid @enderror" name="password" required autocomplete="new-password">
                                <i class="toggle-password fas fa-eye"></i> 
                                </div>
                                <!-- <span id="password-error" class="text-danger"></span>   -->
                              
                            </div>
                            <span class="input_error" style="padding-left: 238px;"></span>
                        </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">
                              <div class="password-field">
                                <input id="password_confirm" type="password" minlength="8"  class="form-control @error('password') is-invalid @enderror" name="password_confirmation" required autocomplete="new-password">
                                <i class="toggle-password fas fa-eye"></i>
                               </div>
                               
                            </div>
                            <span class="input_error"></span>
                            <span id="password-confirm-error" class="text-danger" style="padding-left: 238px;"></span>
                          
                        </div>
                        <div class="col-md-6 offset-md-4">
                          <div class="form-group">
                              
                              <a data-toggle="modal" data-target="#myModal"><input type="checkbox" name="terms_conditions"  id="termsCheckbox" required> I agree to the License Agreement Terms & Conditions</a>
                          </div>
                      </div>

                        <div class="row mb-0" style="MARGIN-TOP: 15;">
                            <div class="col-md-6 offset-md-4">
                                <button type="submit" style="margin-left:110px" class="btn btn-success mybutton">
                                    {{ __('Register') }}
                                </button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        
    </div>
</div>
<div class="modal fade" id="myModal" role="dialog">
  <div class="modal-dialog modal-lg">
    <!-- Modal content-->
    <div class="modal-content">
    <div class="modal-header"style="background-color: #14345d!important;padding-top: 5px;padding-bottom: 5px;">
        <h4 class="modal-title"style="color:white">{{trans('CTax Terms & Conditions')}}</h4>
          <button type="button" class="close import-excel-btn"style="color:white" data-dismiss="modal" onclick="importclose()">&times;</button>
          
        </div>
      <div class="modal-body">
        
<p><h2><b>End-User License Agreement ("Agreement")</b></h2></p><br>

<p>Our EULA was last updated on [DATE]<p><br/>

<p>Please read this End-User License Agreement carefully before clicking the "I Agree" button, downloading or using [APP_NAME].<p><br/>

<p><h1><b>Interpretation and Definitions</b></h1></p><br/>

Interpretation

The words of which the initial letter is capitalized have meanings defined under the following conditions. The following definitions shall have the same meaning regardless of whether they appear in singular or in plural.

Definitions

For the purposes of this End-User License Agreement:

●	"Agreement" means this End-User License Agreement that forms the entire agreement between You and the Company regarding the use of the Application. This EULA was generated by TermsFeed EULA Generator.

●	"Application" means the software program provided by the Company downloaded by You through an Application Store's account to a Device, named [APP_NAME]

●	"Application Store" means the digital distribution service operated and developed by Apple Inc. (Apple App Store) or Google Inc. (Google Play Store) by which the Application has been downloaded to your Device.

●	"Company" (referred to as either "the Company", "We", "Us" or "Our" in this Agreement) refers to [COMPANY_INFORMATION]

●	"Content" refers to content such as text, images, or other information that can be posted, uploaded, linked to or otherwise made available by You, regardless of the form of that content.

●	"Country" refers to: [COMPANY_COUNTRY]

●	"Device" means any device that can access the Application such as a computer, a cellphone or a digital tablet.

●	"Family Sharing / Family Group" permits You to share applications downloaded through the Application Store with other family members by allowing them to view and download each others'
 
eligible Applications to their associated Devices.

●	"Third-Party Services" means any services or content (including data, information, applications and other products services) provided by a third-party that may be displayed, included or made available by the Application.

●	"You" means the individual accessing or using the Application or the company, or other legal entity on behalf of which such individual is accessing or using the Application, as applicable.

Acknowledgment

By clicking the "I Agree" button, downloading or using the Application, You are agreeing to be bound by the terms and conditions of this Agreement. If You do not agree to the terms of this Agreement, do not click on the "I Agree" button, do not download or do not use the Application.

This Agreement is a legal document between You and the Company and it governs your use of the Application made available to You by the Company.

This Agreement is between You and the Company only and not with the Application Store. Therefore, the Company is solely responsible for the Application and its content. Although the Application Store is not a party to this Agreement, it has the right to enforce it against You as a third party beneficiary relating to your use of the Application.

Since the Application can be accessed and used by other users via, for example, Family Sharing / Family Group or volume purchasing, the use of the Application by those users is expressly subject to this Agreement.

The Application is licensed, not sold, to You by the Company for use strictly in accordance with the terms of this Agreement.

License

Scope of License

The Company grants You a revocable, non-exclusive, non-transferable, limited license to download, install and use the Application strictly in accordance with the terms of this Agreement.

You may only use the Application on a Device that You own or control and as permitted by the Application Store's terms and conditions.

The license that is granted to You by the Company is solely for your personal, non-commercial purposes strictly in accordance with the terms of this Agreement.

License Restrictions

You agree not to, and You will not permit others to:
 
●	License, sell, rent, lease, assign, distribute, transmit, host, outsource, disclose or otherwise commercially exploit the Application or make the Application available to any third party.
●	Remove, alter or obscure any proprietary notice (including any notice of copyright or trademark) of the Company or its affiliates, partners, suppliers or the licensors of the Application.

Intellectual Property

The Application, including without limitation all copyrights, patents, trademarks, trade secrets and other intellectual property rights are, and shall remain, the sole and exclusive property of the Company.

The Company shall not be obligated to indemnify or defend You with respect to any third party claim arising out of or relating to the Application. To the extent the Company is required to provide indemnification by applicable law, the Company, not the Application Store, shall be solely responsible for the investigation, defense, settlement and discharge of any claim that the Application or your use of it infringes any third party intellectual property rights.

Modifications to the Application

The Company reserves the right to modify, suspend or discontinue, temporarily or permanently, the Application or any service to which it connects, with or without notice and without liability to You.

Updates to the Application

The Company may from time to time provide enhancements or improvements to the features/functionality of the Application, which may include patches, bug fixes, updates, upgrades and other modifications.

Updates may modify or delete certain features and/or functionalities of the Application. You agree that the Company has no obligation to (i) provide any Updates, or (ii) continue to provide or enable any particular features and/or functionalities of the Application to You.

You further agree that all updates or any other modifications will be (i) deemed to constitute an integral part of the Application, and (ii) subject to the terms and conditions of this Agreement.

Maintenance and Support

The Company does not provide any maintenance or support for the download and use of the Application. To the extent that any maintenance or support is required by applicable law, the Company, not the Application Store, shall be obligated to furnish any such maintenance or support.

Third-Party Services

The Application may display, include or make available third-party content (including data, information, applications and other products services) or provide links to third-party websites or services.

You acknowledge and agree that the Company shall not be responsible for any Third-party Services, including their accuracy, completeness, timeliness, validity, copyright compliance, legality, decency, quality
 
or any other aspect thereof. The Company does not assume and shall not have any liability or responsibility to You or any other person or entity for any Third-party Services.

You must comply with applicable Third parties' Terms of agreement when using the Application. Third-party Services and links thereto are provided solely as a convenience to You and You access and use them entirely at your own risk and subject to such third parties' Terms and conditions.

Term and Termination

This Agreement shall remain in effect until terminated by You or the Company. The Company may, in its sole discretion, at any time and for any or no reason, suspend or terminate this Agreement with or without prior notice.

This Agreement will terminate immediately, without prior notice from the Company, in the event that you fail to comply with any provision of this Agreement. You may also terminate this Agreement by deleting the Application and all copies thereof from your Device or from your computer.

Upon termination of this Agreement, You shall cease all use of the Application and delete all copies of the Application from your Device.

Termination of this Agreement will not limit any of the Company's rights or remedies at law or in equity in case of breach by You (during the term of this Agreement) of any of your obligations under the present Agreement.

Indemnification

You agree to indemnify and hold the Company and its parents, subsidiaries, affiliates, officers, employees, agents, partners and licensors (if any) harmless from any claim or demand, including reasonable attorneys' fees, due to or arising out of your: (a) use of the Application; (b) violation of this Agreement or any law or regulation; or (c) violation of any right of a third party.

No Warranties

The Application is provided to You "AS IS" and "AS AVAILABLE" and with all faults and defects without warranty of any kind. To the maximum extent permitted under applicable law, the Company, on its own behalf and on behalf of its affiliates and its and their respective licensors and service providers, expressly disclaims all warranties, whether express, implied, statutory or otherwise, with respect to the Application, including all implied warranties of merchantability, fitness for a particular purpose, title and
non-infringement, and warranties that may arise out of course of dealing, course of performance, usage or trade practice. Without limitation to the foregoing, the Company provides no warranty or undertaking, and makes no representation of any kind that the Application will meet your requirements, achieve any intended results, be compatible or work with any other software, applications, systems or services, operate without interruption, meet any performance or reliability standards or be error free or that any errors or defects can or will be corrected.

Without limiting the foregoing, neither the Company nor any of the company's provider makes any representation or warranty of any kind, express or implied: (i) as to the operation or availability of the Application, or the information, content, and materials or products included thereon; (ii) that the Application
 
will be uninterrupted or error-free; (iii) as to the accuracy, reliability, or currency of any information or content provided through the Application; or (iv) that the Application, its servers, the content, or e-mails sent from or on behalf of the Company are free of viruses, scripts, trojan horses, worms, malware, timebombs or other harmful components.

Some jurisdictions do not allow the exclusion of certain types of warranties or limitations on applicable statutory rights of a consumer, so some or all of the above exclusions and limitations may not apply to You. But in such a case the exclusions and limitations set forth in this section shall be applied to the greatest extent enforceable under applicable law. To the extent any warranty exists under law that cannot be disclaimed, the Company, not the Application Store, shall be solely responsible for such warranty.

Limitation of Liability

Notwithstanding any damages that You might incur, the entire liability of the Company and any of its suppliers under any provision of this Agreement and your exclusive remedy for all of the foregoing shall be limited to the amount actually paid by You for the Application or through the Application or 100 USD if You haven't purchased anything through the Application.

To the maximum extent permitted by applicable law, in no event shall the Company or its suppliers be liable for any special, incidental, indirect, or consequential damages whatsoever (including, but not limited to, damages for loss of profits, loss of data or other information, for business interruption, for personal injury, loss of privacy arising out of or in any way related to the use of or inability to use the Application, third-party software and/or third-party hardware used with the Application, or otherwise in connection with any provision of this Agreement), even if the Company or any supplier has been advised of the possibility of such damages and even if the remedy fails of its essential purpose.

Some states/jurisdictions do not allow the exclusion or limitation of incidental or consequential damages, so the above limitation or exclusion may not apply to You.

You expressly understand and agree that the Application Store, its subsidiaries and affiliates, and its licensors shall not be liable to You under any theory of liability for any direct, indirect, incidental, special consequential or exemplary damages that may be incurred by You, including any loss of data, whether or not the Application Store or its representatives have been advised of or should have been aware of the possibility of any such losses arising.

Severability and Waiver

Severability

If any provision of this Agreement is held to be unenforceable or invalid, such provision will be changed and interpreted to accomplish the objectives of such provision to the greatest extent possible under applicable law and the remaining provisions will continue in full force and effect.

Waiver

Except as provided herein, the failure to exercise a right or to require performance of an obligation under this Agreement shall not effect a party's ability to exercise such right or require such performance at any time thereafter nor shall the waiver of a breach constitute a waiver of any subsequent breach.
 
Product Claims

The Company does not make any warranties concerning the Application. To the extent You have any claim arising from or relating to your use of the Application, the Company, not the Application Store, is responsible for addressing any such claims, which may include, but not limited to: (i) any product liability claims; (ii) any claim that the Application fails to conform to any applicable legal or regulatory requirement; and (iii) any claim arising under consumer protection, or similar legislation.

United States Legal Compliance

You represent and warrant that (i) You are not located in a country that is subject to the United States government embargo, or that has been designated by the United States government as a "terrorist supporting" country, and (ii) You are not listed on any United States government list of prohibited or restricted parties.

Changes to this Agreement

The Company reserves the right, at its sole discretion, to modify or replace this Agreement at any time. If a revision is material we will provide at least 30 days' notice prior to any new terms taking effect. What constitutes a material change will be determined at the sole discretion of the Company.

By continuing to access or use the Application after any revisions become effective, You agree to be bound by the revised terms. If You do not agree to the new terms, You are no longer authorized to use the Application.

Governing Law

The laws of the Country, excluding its conflicts of law rules, shall govern this Agreement and your use of the Application. Your use of the Application may also be subject to other local, state, national, or international laws.

Entire Agreement

The Agreement constitutes the entire agreement between You and the Company regarding your use of the Application and supersedes all prior and contemporaneous written or oral agreements between You and the Company.

You may be subject to additional terms and conditions that apply when You use or purchase other Company's services, which the Company will provide to You at the time of such use or purchase.

Contact Us

If you have any questions about this Agreement, You can contact Us:
 
●	By visiting this page on our website: [WEBSITE_CONTACT_PAGE_URL]
●	By sending us an email: [WEBSITE_CONTACT_EMAIL]
      </div>
      <div class="modal-footer">
        <button class="import-excel-btn" type="button" class="btn btn-default" data-dismiss="modal" onclick="acceptTerms()">Accept</button>
      </div>
      
    </div>
  </div>
</div>

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
  //email checking & errors
$(document).ready(function() {
    $('#email').on('focusout', function() {
        var email = $(this).val();
        var errorContainer = $('#error-message');
        var successContainer = $('#success-message');

        var email = $("#email").val();
        if(email == null || email == ''){ 
          $("#email").on('keyup', function() {
              var email = $(this).val();
                if (email != null && email !== '') {
                  // Hide the error message when there is input
                  $(this).next('.input_error').hide();
                }
                });
              $("#email").next('.input_error').text('please enter email').show();
              return false;
            }else{
                var regex =  /^\b[A-Z0-9._%-]+@[A-Z0-9.-]+\.[A-Z]{2,4}\b$/i;
                if (!regex.test(email)) {
                  $("#email").next('.input_error').text('invalid email').show();
                  successContainer.text('');
                  errorContainer.text('');
                  return false;
                }
                else{
                  $("#email").next('.input_error').hide();
                    if(email !='invalid email'){
                    $.ajax({
                        type: 'GET',
                        url: "{{url('/check-email')}}",
                        data: { email: email },
                        success: function(response) {
                          if (response.exists) {
                                    errorContainer.text('This email already exists.');
                                    successContainer.text(''); // Clear success message
                                    $('.mybutton').attr('disabled',true);
                                }
                           else {
                                    errorContainer.text('');
                                    successContainer.text('This email is available.');
                                    $('.mybutton').attr('disabled',false);
                                }
                        },
                        error: function() {
                            errorContainer.text('An error occurred while checking the email.');
                        }
                    });
                } else {
                  errorContainer.text('');
                        successContainer.text('');
                }
            
                }
                $("#email").next('.input_error').hide();
              }
            });
        });
</script>
<script>
   function acceptTerms() {
    // Check the checkbox when the user accepts the terms
    document.getElementById("termsCheckbox").checked = true;

    // Close the modal
    $('#myModal').modal('hide');
  }

     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>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.0/jquery.validate.min.js"></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 type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.4.4.min.js"></script>
    <script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.7/jquery.validate.min.js"></script>

    <script>
      //form Validations 
      $(document).ready(function () {
      $('.input_error').hide();
        $(".mybutton").click(function(){
          //Name
          var name = $("#name").val();
          if(name == null || name == ''){
            $("#name").on('keyup', function() {
              var name = $(this).val();
                if (name != null && name !== '') {
                  // Hide the error message when there is input
                  $(this).next('.input_error').hide();
                }
                });
            $("#name").next('.input_error').text('please enter name').show();
            return false;
          }
          else{
            $("#name").next('.input_error').hide();
            }

          //Company
          var company_name=$("#company_name").val();
          if(company_name == null || company_name == ''){
            $("#company_name").on('keyup', function() {
              var company_name = $(this).val();
                if (company_name != null && company_name !== '') {
                  // Hide the error message when there is input
                  $(this).next('.input_error').hide();
                }
                });
            $("#company_name").next('.input_error').text('please enter company name').show();
            return false;
          }else{
            $("#company_name").next('.input_error').hide();
            }

          //Emirates drop down
          var countryDropdown=$("#countryDropdown").val();
          $("#countryDropdown").on('keyup', function() {
              var countryDropdown = $(this).val();
                if (countryDropdown != null && countryDropdown !== '') {
                  // Hide the error message when there is input
                  $(this).next('.input_error').hide();
                }
                });
          if(countryDropdown == 0 || countryDropdown == ''){ 
            $("#countryDropdown").next('.input_error').text('please select Emirates').show();
            return false;
          }else{
            $("#countryDropdown").next('.input_error').hide();
            }
      
          //Mobile
          var phoneNumberInput=$("#phoneNumberInput").val();
            if(phoneNumberInput == null || phoneNumberInput == ''){
              $("#phoneNumberInput").on('keyup', function() {
              var phoneNumberInput = $(this).val();
                if (phoneNumberInput != null && phoneNumberInput !== '') {
                  // Hide the error message when there is input
                  $(this).next('.input_error').hide();
                }
                });
               $("#phoneNumberInput").next('.input_error').text('please enter mobile number').show();
               return false;
            }else{
              var regex=/^[5]{1}[0-9()]*$/;
                if (!regex.test(phoneNumberInput)) {
                  $("#mobile-number-error").text("Mobile Number must start with 5 and allow numbers only.");
                  return false;
                }else{
                $("#phoneNumberInput").next('.input_error').hide();
                }
              }

          //password    
          var password=$("#password").val();
            if(password == null || password == ''){
              $("#password").on('keyup', function() {
              var password = $(this).val();
                if (password != null && password !== '') {
                  // Hide the error message when there is input
                  $(this).parent().parent().next('.input_error').hide();
                }
                });
              $("#password").parent().parent().next('.input_error').text('please enter password').show();
              return false;
            }else{
              $("#password").parent().parent().next('.input_error').hide();
              }

          //confirm password
          var password_confirm=$("#password_confirm").val();
            if(password_confirm == null || password_confirm == ''){
              $("#password_confirm").on('keyup', function() {
              var password_confirm = $(this).val();
                if (password_confirm != null && password_confirm !== '') {
                  // Hide the error message when there is input
                  $(this).parent().parent().next('.input_error').hide();
                }
                });
              $("#password_confirm").parent().parent().next('.input_error').text('please confirm password').show();
              return false;
            }else{
              $("#password_confirm").parent().parent().next('.input_error').hide();
              }
        });


        //
        $("#phoneNumberInput").on("input", function() {
      var input = $(this).val();
      var regex=/^[5]{1}[0-9()]*$/;
    
      if (!regex.test(input)) {
                $(this).val(input.slice(0, -1)); // Remove the last character if it doesn't match the pattern
                $("#mobile-number-error").text("Mobile Number must start with 5 and allow numbers only.");
            } else {
                $("#mobile-number-error").text(""); // Clear the error message if the input is valid
            }
    });
    var name = $("#countryCodeInput").val();
      if(name == null || name == ''){
        $("#name").next('.input_error').show();
        return false;
      }
      else{
        $("#name").next('.input_error').hide();
      }
      });
  </script>
  <script>
    $(document).ready(function () {
        $("#password").on("input", function() {
            var input = $(this).val();
            var regex = /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[@$!%*?&])[A-Za-z\d@$!%*?&]{8,}$/;
            
            if (!regex.test(input)) {
                $("#password-error").text("Password must contain at least one lowercase letter, one uppercase letter, one numeric character, and one special character. Minimum length: 8");
            } else {
                $("#password-error").text("");
            }
        });

        $("#password_confirm").on("input", function() {
            var input = $(this).val();
            var password = $("#password").val();
            
            if (input !== password) {
              $('.mybutton').attr('disabled',true);
                $("#password-confirm-error").text("Passwords do not match.");
            } else {
              $('.mybutton').attr('disabled',false);
                $("#password-confirm-error").text("");
            }
        });
    });
</script>
   <script>
  const passwordInput = document.getElementById('password');
  const passwordConfirmInput = document.getElementById('password_confirm');
  const minLength = 8; // Minimum password length

  function handlePasswordInput() {
    const mobileValue =phoneNumberInput.value;
    const passwordValue = passwordInput.value;
    const passwordConfirmValue = passwordConfirmInput.value;

    // if (passwordValue.length < minLength) {
    //   passwordInput.classList.add('is-invalid');
    //   // document.getElementById('password-error').textContent = 'Password must be at least 8 characters long.';
    // } else {
    //   passwordInput.classList.remove('is-invalid');
    //   // document.getElementById('password-error').textContent = '';
    // }

    // if (mobileValue.length < minLength) {
    //   phoneNumberInput.classList.add('is-invalid');
    //   document.getElementById('password-error').textContent = 'Password must be at least 8 characters long.';
    // } else {
    //   passwordInput.classList.remove('is-invalid');
    //   document.getElementById('password-error').textContent = '';
    // }

    if (passwordConfirmValue !== passwordValue) {
      passwordConfirmInput.classList.add('is-invalid');
      document.getElementById('password-confirm-error').textContent = 'Passwords do not match.';
    } else {
      passwordConfirmInput.classList.remove('is-invalid');
      document.getElementById('password-confirm-error').textContent = '';
    }
  }

  passwordInput.addEventListener('keyup', handlePasswordInput);
  passwordConfirmInput.addEventListener('keyup', handlePasswordInput);


    // 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");
      if (dropdown.value === '0') {
            dropdown.setCustomValidity("Please select an option other than 'Select Emirates'.");
        } else {
            dropdown.setCustomValidity("");
        }
    
   // 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;
      }

      phoneNumberInput.value = ""; // Clear phone number input
    }
    document.querySelector("form").addEventListener("reset", function() {
        dropdown.setCustomValidity("");
    });
  </script>

  <style>
    .error {
      color: red;
    }
  </style>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
  $(document).ready(function() {
    $('#countryName').change(function() {
      var countryName = $(this).val();
      if (countryName !== '') {
        $.ajax({
          url: "{{ route('getCountryCode', ['countryName' => '']) }}/" + countryName,
          type: 'GET',
          success: function(response) {
            if (response.code) {
              $('#countryCode').val(response.code);
            } else {
              $('#countryCode').val('');
              console.error(response.error);
            }
          },
          error: function(xhr, status, error) {
            console.error(error);
          }
        });
      } else {
        $('#countryCode').val('');
      }
    });
  });
</script>
<script>
const togglePasswordButtons = document.querySelectorAll('.toggle-password');
        const passwordInputs = document.querySelectorAll('input[type="password"]');

        togglePasswordButtons.forEach((button, index) => {
            button.addEventListener('click', () => {
                if (passwordInputs[index].type === 'password') {
                    passwordInputs[index].type = 'text';
                    button.classList.remove('fa-eye');
                    button.classList.add('fa-eye-slash');
                } else {
                    passwordInputs[index].type = 'password';
                    button.classList.remove('fa-eye-slash');
                    button.classList.add('fa-eye');
                }
            });
        });
    </script>
</body>

    </script>


@endsection