<!doctype html>
<html lang="en" class="minimal-theme">

<head>
  <!-- Required meta tags -->
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <!-- Bootstrap CSS -->
  <link href="{{asset('admin/css/bootstrap.min.css')}}" type="text/css" rel="stylesheet" />
  <link href="{{asset('admin/css/bootstrap-extended.css')}}" type="text/css" rel="stylesheet" />
  <link href="{{asset('admin/css/style.css')}}" type="text/css" rel="stylesheet" />
  <link href="{{asset('admin/css/icons.css')}}" type="text/css" rel="stylesheet">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.5.0/font/bootstrap-icons.css">
  <!-- loader-->
	<link href="{{asset('admin/css/pace.min.css')}}" rel="stylesheet" />
  <!-- Google Font -->
  <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500&display=swap" rel="stylesheet">
  <!-- Favicon.io -->
  <link rel="icon" href="asset/iadmin/mages/favicon.ico" type="image/png" />
  <!-- Meta Taggs -->
  <title>SignIn &#8212; @if(isset($companyData->name)){{$companyData->name}}@else{{'website_title_here'}}@endif</title>
  <meta name="csrf-token" content="{{ csrf_token() }}">
  <meta name="author" content="SignIn &#8212; #website_title_here">
  <meta name="description" content="#website_meta_description_here">
  <meta name="keywords" content="#website_meta_keywords_here">
  <style type="text/css">
    .account_title {
        width: 50px;
        border: 1px solid #ced4da;
        border-top-left-radius: 4px;
        border-bottom-left-radius: 4px;
    }
    .intl-tel-input {
      width: 100%;
    }
    .swal2-popup {
      width: 35em !important;
    }
  </style>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/css/toastr.min.css">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/limonte-sweetalert2/11.1.9/sweetalert2.min.css" integrity="sha512-cyIcYOviYhF0bHIhzXWJQ/7xnaBuIIOecYoPZBgJHQKFPo+TOBA+BY1EnTpmM8yKDU4ZdI3UGccNGCEUdfbBqw==" crossorigin="anonymous" referrerpolicy="no-referrer" />
  <script src="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/2.0.2/js/toastr.min.js"></script>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/12.1.10/css/intlTelInput.css">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/limonte-sweetalert2/11.1.9/sweetalert2.min.css" integrity="sha512-cyIcYOviYhF0bHIhzXWJQ/7xnaBuIIOecYoPZBgJHQKFPo+TOBA+BY1EnTpmM8yKDU4ZdI3UGccNGCEUdfbBqw==" crossorigin="anonymous" referrerpolicy="no-referrer" />
  <link rel="stylesheet/less" type="text/css" href="{{ asset('admin/plugins/datepicker/less/datepicker.less') }}">
  <link href="{{ asset('admin/plugins/datepicker/css/datepicker.css')}}" rel="stylesheet" />
   <script src="https://cdn.jsdelivr.net/npm/sweetalert2@10/dist/sweetalert2.all.min.js"></script>
</head>

<body>

  <!--start wrapper-->
  <div class="wrapper">
    
       <!--start content-->
       <main class="authentication-content">
        <div class="container-fluid">
          <div class="authentication-card">
            <div class="card bg-transparent shadow-none rounded-0 overflow-hidden">
              <div class="row align-items-center justify-content-center g-0">
                <!-- <div class="col-lg-7 d-flex align-items-center justify-content-center">
                  <img src="asset/iadmin/mages/login-img.svg" loading="lazy" class="img-fluid" alt="login image">
                </div> -->
                <div class="col-lg-7">
                  <div class="card-body bg-white rounded singin_card">
                    <!-- <h5 class="card-title">Sign In</h5>
                    <p class="card-text mb-3">See your growth and get consulting support!</p> -->
                    <img class="img-fluid d-block w-75 mx-auto" 
                    src="@if(isset($companyData->file_url) && $companyData->file_url != ''){{ $companyData->file_url }}
                    @else{{ 'https://metaminthealth.s3.ap-south-1.amazonaws.com/metamintassets/images/meta_mint_blue_small_logo.png' }}@endif" loading="lazy" style="height:70px" alt="logo">
                    @include('flash-message')
                    <div class="alert alert-success alert-dismissible fade show" role="alert" style="display:none">
                      <strong class="text-message"></strong>
                      <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
                    </div>
                    <div class="alert alert-danger alert-dismissible fade show" role="alert" style="display:none">
                      <strong class="danger-message"></strong>
                      <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
                    </div>
                    <form class="form-body" id="create_patient_form" class="user" action="{{ route('client-register-store') }}" method="POST">
                        @csrf
                      <!-- <div class="d-grid">
                        <a class="btn btn-white" href="javascript:;"><span class="d-flex justify-content-center align-items-center">
                            <img class="me-2" src="asset/iadmin/mages/search.svg" loading="lazy" width="16" height="16" alt="google">
                            <span>Sign in with Google</span>
                          </span>
                        </a>
                      </div> -->
                      <div class="login-separater text-center mb-4"> <span> @if(isset($companyData->name)){{ $companyData->name }}@else{{'COMPANY NAME PUT HERE'}}@endif</span>
                        <hr>
                      </div>
                      <div class="row g-3">
                          <div class="col-md-12">
                              <div>
                                  <label for="name" class="form-label">Client Name <span class="text-danger"><b>*</b></span></label>
                              </div>
                              <div class="input-group">
                                  <select class="account_titlPatient Registratione" name="account_title_id" style="width:70px;">
                                      <option value="">Title</option>
                                      @foreach($account_title as $list)
                                      <option value="{{ $list->id }}" {!! matchSelected(old('account_title_id'), $list->id) !!}>{{ $list->name }}</option>
                                      @endforeach
                                  </select>
                                  <input type="text" name="name" class="form-control" value="{!! old('name') !!}" placeholder="Enter Client Name">
                              </div>
                              <span class="text-danger error_name" style="display:none;">Client Name and Title is required.</span>
                          </div>
                          <div class="col-md-6 phone_no_col">
                              <div>
                                  <label class="form-label">Phone No <span class="text-danger"><b>*</b></span></label>
                              </div>
                              <div class="input-group">
                                  <input type="tel" class="form-control w-100" placeholder="Enter Phone No " id="phone_no" />
                                  <input type="hidden" name="phone_no">
                              </div>
                              <span class="text-danger error_phone" style="display:none;">This field is required.</span>
                          </div>

                          <div class="col-md-6">
                              <div>
                                  <label class="form-label">Client Date of birth </label>
                              </div>
                              <div class="input-group">
                                  <input type="text" class="form-control"  id="date_of_birth" autocomplete="off" placeholder="Date of birth" name="date_of_birth" />
                              </div>
                          </div>
                          <div class="col-md-6">
                              <label class="form-label">Country Name <span class="text-danger"><b>*</b></span></label>
                              <select class="single-select form-control" id="country" name="country_id" onchange="changecontry()" required>
                                  <option value=" "> Select Country</option>
                                  @foreach($country as $list)
                                  <option value="{{ $list->id}}" {!! matchSelected(old('country_id', $country_id), $list->id) !!}>{{$list->name}}</option>
                                  @endforeach
                              </select>
                          </div>
                         
                        
                          <div class="col-md-6">
                              <div>
                                  <label class="form-label">Email </label>
                              </div>
                              <div class="input-group">
                                  <input type="text" class="form-control" placeholder="Enter Email ID" name="email" />
                              </div>
                          </div>
                          <div class="col-md-4">
                              <label class="form-label">State Name</label>
                              <input type="hidden" value="{!! $state_id !!}" id="stateid">
                              <select class="single-select form-control" name="state_id" id="states" onchange="getcity()">
                              <option value=" ">--Select--</option>
                              </select>
                          </div>
                          <div class="col-md-4">
                              <label class="form-label">City Name</label>
                              <input type="hidden" value="{!! $city_id !!}" name="cityid">
                              <select class="single-select form-control" name="city_id" id="cities">
                              <option value=" ">--Select--</option>
                              </select>
                          </div>
                          <div class="col-md-4">
                              <div>
                                  <label class="form-label">PIN/ZIP Code </label>
                              </div>
                              <div class="input-group">
                                  <input type="text" class="form-control" placeholder="PIN/ZIP Code" name="postal_code" />
                              </div>
                          </div>
                          <div class="col-md-12">
                              <label class="form-label">Address </label>
                              <textarea name="address" class="form-control"></textarea>
                          </div>
                          <div class="col-12">
                            <div class="d-grid">
                              <button type="button" class="btn btn-primary radius-30 save_button">REGISTER NOW <i class="bx bx-log-in-circle"></i></button>
                            </div>
                          </div>
                          <div class="col-12" style="text-align: center">
                            <p>Don't have an account? <a href="{{url('/')}}"> Sign in</a></p>
                          </div>
                        </div>
                    </form>
                 </div>
                </div>
              </div>
            </div>
          </div>
        </div>
       </main>
       <!--end page main-->

      <footer class="copyright_signup pb-3 px-3 text-center">
        <p class="mb-0">Copyright © 2023  @if(isset($companyData->name)){{ $companyData->name }}@else{{'COMPANY NAME PUT HERE'}}@endif. All right reserved.</p>
      </footer>

  </div>
  <!--end wrapper-->


   <!-- Bootstrap bundle JS -->
   <script type="text/javascript" src="{{ asset('admin/js/bootstrap.bundle.min.js')}}"></script>
   <!--plugins-->
  <!--plugins-->
  <script type="text/javascript" src="{{ asset('admin/js/jquery.min.js')}}"></script>
  <script type="text/javascript" src="{{ asset('admin/js/script.js')}}"></script>
  <script src="https://code.jquery.com/ui/1.13.2/jquery-ui.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/12.1.10/js/intlTelInput.js"></script>
  <script type="text/javascript" src="{{ asset('admin/plugins/datepicker/js/bootstrap-datepicker.js')}}"></script>

  <script>
      $('#date_of_birth').datepicker();
      $('.details-toggle').hide();
      var toggle = true;

      var telInput = $('#phone_no , #whatsapp_no');
      telInput.intlTelInput({
          utilsScript: 'https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/17.0.13/js/utils.js', // Update the URL to the correct one
          initialCountry: '{!! "$country_code->code"??"us" !!}', // Set the new country code
          separateDialCode: true 
      });

      $("#phone_no").on('input', function() {
          const onlyNumbers = allNumeric($(this).val());
          $("#phone_no").val(onlyNumbers);
      });
      $("#whatsapp_no").on('input', function() {
          const onlyNumbers = allNumeric($(this).val());
          $("#whatsapp_no").val(onlyNumbers);
      });
      $("#alternative_no").on('input', function() {
          const onlyNumbers = allNumeric($(this).val());
          $("#alternative_no").val(onlyNumbers);
      });
      function allNumeric(inputtxt) {
          onlyNumbers = inputtxt.replace(/[^0-9]/g, '');
          if (onlyNumbers.length > 16) {
              onlyNumbers = onlyNumbers.substring(0, 16);
          }
          return onlyNumbers;
      }

      function changecontry()
      {
          let country = $('#country').val();

          $.ajaxSetup({
              headers : {
                  'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
              }
          });

          let stateid = $('#stateid').val();

          $.ajax({
              type: "POST",
              url: "{{ url('companies/getstate') }}",
              data: {country:country,stateid:stateid},
              success: function (data) {
                  $('#states').html(data);
                  $('#states').trigger('change');
              }
          });

          // GET COUNTRY CODE OF SELECTED COUNTRY
          $.ajax({
              type: "POST",
              url: "{{ url('companies/getcountrycode') }}", 
              data: {
                  country:country
              },
              success: function (countryCode) {
                var telInput = $('#phone_no');
                
                // Destroy the existing instances
                telInput.intlTelInput('destroy');

                // Reinitialize the input fields with the new country code
                telInput.intlTelInput({
                    utilsScript: 'https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/17.0.13/js/utils.js',
                    initialCountry: countryCode, // Set the received country code directly
                    separateDialCode: true 
                });
              }
          });
      }

      function getcity()
      {
          let states_id=$('#states').val();

          if (states_id != '' && states_id != null) {
              $.ajax({
                  type: "POST",
                  url: "{{ url('companies/getcity') }}",
                  data: {states_id:states_id},
                  success: function (data) {
                      $('#cities').html(data);
                  },
              });
          }
      }

      $(document).on('click', '.save_button', function(event){
        event.preventDefault();
        
        if ($('#phone_no').val().trim() != '') {
            var dailcode_title = $('.phone_no_col .selected-flag').attr('title');
            var dailcode_array = dailcode_title.split("+");
            $('input[name="phone_no"]').val("+" + dailcode_array[1] + $('#phone_no').val());
        }

        $('.error_name').hide();
        $('.error_email').hide();
        $('.error_phone').hide();
        $('.error_country_id').hide();
        var error = 0;

        if ($('input[name="name"]').val().trim() == '' || $('[name="account_title_id"]').val() == '') {
          $('.error_name').show();
          error = 1;
        }

        if ($('[name="country_id"]').val().trim() == '') {
          $('.error_country_id').show();
          error = 1;
        }

        if ($('input[name="phone_no"]').val().trim() == '') {
          $('.error_phone').show();
          error = 1;
        }

        if (error == 0) {
            let formdata = new FormData($('#create_patient_form')[0]);

            $.ajax({
                url: $('#create_patient_form').attr('action'),
                data: formdata,
                processData: false,
                contentType: false,
                type: 'POST',
                success: function (response) {
                    if (response.success === true) {
                        $('#create_patient_form')[0].reset();

                        var message = "Your Registration No is:  " + response.code;
                        message += "<br>Thank you for Registration.<br>Please note your Client Registration No for future reference.";

                        Swal.fire(
                          'Success!',
                          message,
                          'success'
                        )

                        // hide modal
                        $('#commonModal').modal('hide');
                        $('#commonModal').find('.modal-body').html('');
                    } else {
                        toastr.error(response.message, 'Error!');

                        Swal.fire(
                          'Error!',
                          response.message,
                          'error'
                        )
                    }
                }
            })
            .fail(function(jqXHR, textStatus, errorThrown) {
                console.log('AJAX request failed:', textStatus, errorThrown);
                toastr.error('An error occurred during the request.', 'Error!');
            });
        }

        error = 1;
      })
  </script>

  @if($country_id)
      <script>
          changecontry();
          getcity();
      </script>
  @endif

</body>

</html>