@extends('layouts.tabler')
@section('css')
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/intl-tel-input@18.2.1/build/css/intlTelInput.css">
  <style>
    .iti {
      width: 100%;
      display: block;
    }
  </style>
@endsection
@section('content')
  <div class="page-wrapper">

    <div class="d-flex justify-content-center mt-2">
      <div class="card card-md" style="border-radius:30px;border-color: #3478f6;width: 80%;;max-width: 90%;">

        <div class="card-body" style="padding-top: 10px;padding-bottom: 10px;">
          <form id="userForm" method="POST" action="{{ route('users.update', $user->id) }}" enctype="multipart/form-data">

            @csrf
            <input type="hidden" name="id" value="{{ $user->id }}">
            <input type="hidden" id="first_name" name="first_name" value="{{ $user->first_name }}">
            <input type="hidden" id="last_name" name="last_name" value="{{ $user->last_name }}">

            <div class="d-flex flex-column justify-content-around">
              <div>
                <h3 class="h2 d-flex justify-content-start">Tus Datos</h3>
              </div>
              <div>
                <hr
                  style="height:1px;border-width:0;background-color:#3478f6;opacity: 1;margin-top: 10px;margin-bottom: 10px;">
              </div>

              <div class="d-none d-md-block">
                <div class="d-flex flex-row justify-content-between align-items-center">
                  <div class="d-flex flex-row justify-content-start gap-3 align-items-center">
                    <!-- nueva imagen -->
                    <div>
                      <label
                        style="display: inline-block;
                        cursor: pointer;
                        width: 100%; height: 100%">
                        <div
                          style="width: 100px;height: 100px;
                                display: flex;
                                justify-content: center;
                                align-items: center;">
                          <img id="imageSelected" class="avatar avatar-lg rounded-circle"
                            style="background-image: url({{ $user->avatar == null ? asset('img/perfil.png') : (strpos($user->avatar, 'http') !== false ? $user->avatar : asset('users/' . $user->avatar)) }});position: relative;">
                        </div>
                        <input name="avatar" id="avatar" type='file' style="display: none;" />
                      </label>
                    </div>
                    <!-- fin de la imagen  -->

                    <div id="lname" class="d-flex">
                      <div>
                        <input id="first_name_1" type="text"
                          class="form-control validLetras @error('first_name') is-invalid @enderror rounded-4"
                          value="{{ $user->first_name }}" required autocomplete="first_name" autofocus
                          placeholder="Nombre" style="border-color: #3478f6;" onchange="firstName(this.value)">

                        @error('first_name')
                          <span class="invalid-feedback" role="alert">
                            <strong>{{ $message }}</strong>
                          </span>
                        @enderror
                      </div>
                      <div class="mx-2">
                        <input id="last_name_1" type="text"
                          class="form-control validLetras @error('last_name') is-invalid @enderror rounded-4"
                          value="{{ $user->last_name }}" required autocomplete="last_name" autofocus
                          placeholder="Apellido" style="border-color: #3478f6;" onchange="lastName(this.value)">

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

                    </div>
                  </div>
                </div>
              </div>

              <div class="d-block d-md-none">
                <div class="d-flex flex-column">
                  <div class="d-flex flex-row justify-content-start gap-3 align-items-center">
                    <div>
                      <label
                        style="display: inline-block;
                  cursor: pointer;
                  width: 100%; height: 100%">
                        <div
                          style="width: 100px;height: 100px;
                          display: flex;
                          justify-content: center;
                          align-items: center;">
                          <img id="imageSelected1" class="avatar avatar-lg rounded-circle"
                            style="background-image: url({{ $user->avatar == null ? asset('img/perfil.png') : (strpos($user->avatar, 'http') !== false ? $user->avatar : asset('users/' . $user->avatar)) }});position: relative;">
                        </div>
                        <input name="avatar1" id="avatar1" type='file' style="display: none;" />
                      </label>
                    </div>

                    <div id="lname" class="w-100">
                      <div>
                        <input id="first_name_2" type="text"
                          class="form-control @error('first_name') is-invalid @enderror rounded-4"
                          value="{{ $user->first_name }}" required autocomplete="first_name" autofocus
                          placeholder="Nombre" style="border-color: #3478f6;" onchange="firstName(this.value)">

                        @error('first_name')
                          <span class="invalid-feedback" role="alert">
                            <strong>{{ $message }}</strong>
                          </span>
                        @enderror
                      </div>
                      <div class="mt-2">
                        <input id="last_name_2" type="text"
                          class="form-control @error('last_name') is-invalid @enderror rounded-4"
                          value="{{ $user->last_name }}" required autocomplete="last_name" autofocus
                          placeholder="Apellido" style="border-color: #3478f6;" onchange="lastName(this.value)">

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


              <div>
                <hr
                  style="height:1px;border-width:0;background-color:#3478f6;opacity: 1;margin-top: 10px;margin-bottom: 10px;">
              </div>
              <div>
                <div class="card"
                  style="border-left-width: 0px;border-left-style: solid;border-right-width: 0px;border-right-style: solid;border-top-width: 0px;border-top-style: solid;border-bottom-width: 0px;border-bottom-style: solid;border-bottom-color: #3478f6;">
                  <div class="card-body">
                    <div class="divide-y">
                      <div>
                        <div class="d-flex justify-content-start align-items-center gap-2">
                          <div>
                            <strong>País:&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp</strong>
                          </div>
                          <div class="flex-fill">
                            <select id="countries" name="country_id" class="form-select rounded-4"
                              style="border-color: #3478f6;" onchange="countryChange(this)" required>
                              <option value="" disabled selected>seleccione un País</option>
                            </select>

                            @error('country_id')
                              <span class="invalid-feedback" role="alert">
                                <strong>{{ $message }}</strong>
                              </span>
                            @enderror
                          </div>
                        </div>
                      </div>
                      <div>
                        <div class="d-flex justify-content-start align-items-center gap-2">
                          <div>
                            <strong>Estado:&nbsp&nbsp&nbsp&nbsp&nbsp</strong>
                          </div>
                          <div class="flex-fill">
                            <select id="states" name="state_id" class="form-select rounded-4"
                              style="border-color: #3478f6;" onchange="stateChange(this)" required>
                              <option value="" disabled selected>seleccione un Estado</option>
                            </select>

                            @error('state_id')
                              <span class="invalid-feedback" role="alert">
                                <strong>{{ $message }}</strong>
                              </span>
                            @enderror
                          </div>
                        </div>
                      </div>
                      <div>
                        <div class="d-flex justify-content-start align-items-center gap-2">
                          <div>
                            <strong>Ciudad:&nbsp&nbsp&nbsp&nbsp&nbsp</strong>
                          </div>
                          <div class="flex-fill">
                            <select id="cities" name="city_id" class="form-select rounded-4"
                              style="border-color: #3478f6;" required>
                              <!-- <option value="">seleccione una Ciudad</option> -->
                            </select>

                            @error('city_id')
                              <span class="invalid-feedback" role="alert">
                                <strong>{{ $message }}</strong>
                              </span>
                            @enderror
                          </div>
                        </div>
                      </div>
                      <div>
                        <div class="d-flex justify-content-start align-items-center gap-2">
                          <div>
                            <strong>Barrio:</strong>
                          </div>
                          <div class="flex-fill">
                            <input id="neighborhood" type="text"
                              class="form-control @error('neighborhood') is-invalid @enderror rounded-4"
                              name="neighborhood" value="{{ $user->neighborhood }}" autocomplete="neighborhood"
                              autofocus placeholder="Barrio" style="border-color: #3478f6;" required>

                            @error('neighborhood')
                              <span class="invalid-feedback" role="alert">
                                <strong>{{ $message }}</strong>
                              </span>
                            @enderror
                          </div>
                        </div>
                      </div>
                      <div>
                        <div class="d-flex justify-content-start align-items-center gap-2">
                          <div>
                            <strong>Dirección:</strong>
                          </div>
                          <div class="flex-fill">
                            <input id="address" type="text"
                              class="form-control @error('address') is-invalid @enderror rounded-4" name="address"
                              value="{{ $user->address }}" autocomplete="address" autofocus placeholder="Dirección"
                              style="border-color: #3478f6;" required>

                            @error('address')
                              <span class="invalid-feedback" role="alert">
                                <strong>{{ $message }}</strong>
                              </span>
                            @enderror
                          </div>
                        </div>
                      </div>
                      <div>
                        <div class="d-flex justify-content-start align-items-center gap-2">
                          <div>
                            <strong>Código Postal:</strong>
                          </div>
                          <div class="flex-fill">
                            <input id="post_code" type="number"
                              class="form-control @error('post_code') is-invalid @enderror rounded-4" name="post_code"
                              value="{{ $user->post_code }}" autocomplete="post_code" autofocus
                              placeholder="Código Postal" style="border-color: #3478f6;" required>

                            @error('post_code')
                              <span class="invalid-feedback" role="alert">
                                <strong>{{ $message }}</strong>
                              </span>
                            @enderror
                          </div>
                        </div>
                      </div>
                      <div>
                        <div class="d-flex justify-content-start align-items-center gap-2">
                          <div>
                            <strong>Mail:&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp</strong>
                          </div>
                          <div class="flex-fill">
                            <input id="email" type="hidden"
                              class="form-control @error('email') is-invalid @enderror rounded-4" name="email"
                              value="{{ $user->email }}" required autocomplete="email"
                              placeholder="Correo Electrónico">
                            <input type="email" class="form-control @error('email') is-invalid @enderror rounded-4"
                              name="email" value="{{ $user->email }}" placeholder="Correo Electrónico" disabled
                              style="border-color: #3478f6;">
                            @error('email')
                              <span class="invalid-feedback" role="alert">
                                <strong>{{ $message }}</strong>
                              </span>
                            @enderror
                          </div>
                        </div>
                      </div>
                      <div>
                        <div class="d-flex justify-content-start align-items-center gap-2">
                          <div>
                            <strong>Teléfono&nbsp:</strong>
                          </div>
                          <div class="flex-fill">
                            <input id="phone_number" type="text"
                              class="form-control validNumeros @error('phone_number') is-invalid @enderror rounded-4"
                              name="phone_number" value="{{ $user->phone_number }}" required
                              autocomplete="phone_number" autofocus placeholder="Teléfono"
                              style="border-color: #3478f6;">

                            <div id="error-phone-number"></div>
                            @error('phone_number')
                              <span class="invalid-feedback" role="alert">
                                <strong>{{ $message }}</strong>
                              </span>
                            @enderror
                          </div>
                        </div>
                      </div>
                      <div>
                        <div class="d-flex justify-content-start align-items-center gap-2">
                          <div>
                            <strong>DNI:&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp</strong>
                          </div>
                          <div class="flex-fill">
                            <input id="dni" type="text"
                              class="form-control @error('dni') is-invalid @enderror rounded-4" name="dni"
                              value="{{ $user->dni }}" autocomplete="dni" onkeyup="validar(this.value)"
                              maxlength="14" autofocus placeholder="DNI/CUIT" style="border-color: #3478f6;" required>
                            <div id="error-dni"></div>


                            @error('dni')
                              <span class="invalid-feedback" role="alert">
                                <strong>{{ $message }}</strong>
                              </span>
                            @enderror
                          </div>
                        </div>
                      </div>
                      <div>
                        <div class="d-flex justify-content-start align-items-center gap-2">
                          <div>
                            <strong>Activar Facturación: </strong>
                          </div>
                          <div class="flex-fill d-flex flex-row gap-3">
                            <div>
                              <input type="radio" id="no" name="is_billing" value="0"
                                {{ $user->is_billing == 0 ? 'checked' : '' }} onchange="toggleBillingFields()">
                              <label for="no">No</label>
                            </div>
                            <div>
                              <input type="radio" id="si" name="is_billing" value="1"
                                {{ $user->is_billing == 1 ? 'checked' : '' }} onchange="toggleBillingFields()">
                              <label for="si">Sí</label>
                            </div>
                          </div>
                        </div>
                      </div>
                      <!-- Campos adicionales para facturación, ocultos por defecto -->
                      <div id="billing-fields" style="display: {{ $user->is_billing == 1 ? 'block' : 'none' }};">
                        <div>
                          <div class="d-flex justify-content-start align-items-center gap-2 mb-4">
                            <div>
                              <strong>Condición frente a IVA: </strong>
                            </div>
                            <div class="flex-fill">
                              <!-- Seleccionar Condición frente a IVA -->
                              <select id="tax_condition"
                                class="form-control @error('tax_condition') is-invalid @enderror rounded-4"
                                name="tax_condition" style="border-color: #3478f6;">
                                <option value="" disabled selected>Seleccione una condición</option>
                                @foreach ($responsibleTypes as $responsibleType)
                                  <option value="{{ $responsibleType->id }}"
                                    {{ old('tax_condition', $user->tax_condition) == $responsibleType->id ? 'selected' : '' }}>
                                    {{ $responsibleType->name }}
                                  </option>
                                @endforeach
                              </select>

                              @error('tax_condition')
                                <span class="invalid-feedback" role="alert">
                                  <strong>{{ $message }}</strong>
                                </span>
                              @enderror
                            </div>
                          </div>
                        </div>
                        <div>
                          <div class="d-flex justify-content-start align-items-center gap-2">
                            <div>
                              <strong>Tipo de Documento: </strong>
                            </div>
                            <div class="flex-fill">
                              <select id="document_type" name="document_type"
                                class="form-select @error('document_type') is-invalid @enderror rounded-4"
                                style="border-color: #3478f6;">
                                <option value="" disabled selected>Seleccione una opción</option>
                                <option value="dni"
                                  {{ old('document_type', $user->document_type) == 'dni' ? 'selected' : '' }}>DNI
                                </option>
                                <option value="cuit"
                                  {{ old('document_type', $user->document_type) == 'cuit' ? 'selected' : '' }}>CUIT
                                </option>
                                <option value="pasaporte"
                                  {{ old('document_type', $user->document_type) == 'pasaporte' ? 'selected' : '' }}>
                                  Pasaporte</option>
                                <option value="cdi"
                                  {{ old('document_type', $user->document_type) == 'cdi' ? 'selected' : '' }}>CDI
                                </option>
                                <option value="cuil"
                                  {{ old('document_type', $user->document_type) == 'cuil' ? 'selected' : '' }}>CUIL
                                </option>
                                <option value="otro"
                                  {{ old('document_type', $user->document_type) == 'otro' ? 'selected' : '' }}>Otro
                                </option>
                              </select>
                              @error('document_type')
                                <span class="invalid-feedback" role="alert">
                                  <strong>{{ $message }}</strong>
                                </span>
                              @enderror
                            </div>
                          </div>
                        </div>
                        <div>
                          <div class="d-flex justify-content-start align-items-center gap-2 mt-4">
                            <div>
                              <strong>Documento: </strong>
                            </div>
                            <div class="flex-fill">
                              <input id="cuit" type="text"
                                class="form-control @error('cuit') is-invalid @enderror rounded-4" name="cuit"
                                value="{{ old('cuit', $user->cuit) }}" autocomplete="cuit" placeholder="Documento"
                                style="border-color: #3478f6;">
                              @error('cuit')
                                <span class="invalid-feedback" role="alert">
                                  <strong>{{ $message }}</strong>
                                </span>
                              @enderror
                            </div>
                          </div>
                        </div>

                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>

            <div class="d-none d-md-block mt-4">
              <div class="row">
                <div class="col-12">
                  <button id="submitBtn" type="submit" class="btn btn-primary rounded-4"
                    style="border-color: #3478f6;">
                    GUARDAR CAMBIOS
                  </button>
                  <a href="{{ route('users.profile') }}" class="btn btn-danger rounded-4">Cancelar</a>
                  <div id="user" style="display: none">
                    {{ $user->city_id ?? '' }}
                  </div>
                </div>
              </div>
            </div>
            <div class="d-block d-md-none">
            <div class="row">
              <div class="col-12">
                <button id="submitBtn" type="submit" class="btn btn-primary rounded-4 w-100"
                  style="border-color: #3478f6;">
                  GUARDAR CAMBIOS
                </button>
              </div>
            </div>
          </div>
          </form>
        </div>

      </div>
    </div>
  </div>
  @include('layouts.popUpGoToEdit')
@endsection
@section('js')
  <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
  <script src="{{ asset('js/functions.js') }}"></script>
  <script>
    var pais_id = {{ $pais_id }}
    const form = document.getElementById('userForm');
    document.addEventListener("DOMContentLoaded", function() {
      document.getElementById("post_code").addEventListener("input", function() {
        let value = parseInt(this.value);
        if (value <= 0 || isNaN(value)) {
          this.setCustomValidity("El código postal debe ser un número positivo mayor que cero.");
        } else {
          this.setCustomValidity("");
        }
      });
    });
    // form.addEventListener( 'submit', function (event) {
    //     const dniInput = document.getElementById('dni').value;
    //     const formData = new FormData(form);
    //             const formDataObj = {};
    //             formData.forEach((value, key) => formDataObj[key] = value);
    //             console.log('Datos del formulario:', formDataObj);
    //     // const isValid = validar(dniInput);
    //   let not = 1
    //     // if (!isValid) {
    //       // console.log("isValid", isValid)
    //       document.getElementById('error-dni').innerHTML = `
  //       <span style="color: red; font-size: 12px; font-style: italic;" role="alert">
  //       <strong>Ingresa un DNI correcto</strong>
  //       </span>`;
    //       // const formData = new FormData(form);
    //       // const formDataObj = {};
    //       formData.forEach((value, key) => formDataObj[key] = value);
    //       console.log('Datos del formulario:', formDataObj);
    //       event.preventDefault(); // Evita el envío del formulario

    //             // Imprime los datos en la consola
    //         // console.log("isValid", isValid)
    //     // } 
    //     event.preventDefault(); // Evita el envío del formulario

    // })
    function validar(value) {

      //validadores del DNI (Arg, Chile, Brazil)
      let validator = pais_id == 1 ? validarDNI(value) : (pais_id == 2 ? validarRut(value) : (pais_id == 3 ? validarCPF(
        value) : true))
      console.log("validator", validator)
      if (!validator) {
        $("#error-dni").html(
          '<span style="color: red; font-size: 12px; font-style: italic;" role="alert"> \
                                <strong>Ingresa un DNI correcto</strong>\
                            </span>')
        $('#submitBtn').hide()
      } else {
        $("#error-dni").html('')
        $('#submitBtn').show()
      }

    }

    function firstName(value) {
      $('#first_name').val(value);
      $('#first_name_1').val(value);
      $('#first_name_2').val(value);
    }

    function lastName(value) {
      $('#last_name').val(value);
      $('#last_name_1').val(value);
      $('#last_name_2').val(value);
    }
  </script>
  <script src="https://cdn.jsdelivr.net/npm/intl-tel-input@18.2.1/build/js/intlTelInput.min.js"></script>
  <script>
    $("#avatar").change(function() {
      let reader = new FileReader();
      reader.onload = (e) => {
        $("#imageSelected").attr('src', e.target.result);
      }
      reader.readAsDataURL(this.files[0]);
    });
    $("#avatar1").change(function() {
      let reader1 = new FileReader();
      reader1.onload = (e) => {
        $("#imageSelected1").attr('src', e.target.result);
      }
      reader1.readAsDataURL(this.files[0]);
    });



    $(document).ready(function() {

      $("#userForm").submit(function(event) {
        $("#error-phone-number").html('')

        const isValid = iti.isValidNumber();

        if (!isValid) {
          // El número es inválido, muestra un mensaje de error
          $("#error-phone-number").html(
            '<span style="color: red; font-size: 12px; font-style: italic;" role="alert"> \
                                <strong>Ingresa un número de teléfono correcto</strong>\
                            </span>')
          event.preventDefault(); // Prevent default form submission
          return false;
        }

        // Numero valido
      });


    });

    let paises;
    let user = @json($user);

    const input = document.querySelector("#phone_number");
    const iti = window.intlTelInput(input, {
      utilsScript: "https://cdn.jsdelivr.net/npm/intl-tel-input@18.2.1/build/js/utils.js",
      autoInsertDialCode: true,
      nationalMode: false,
      // Filtrar los países disponibles
      preferredCountries: ['ar', 'br', 'cl'],
      initialCountry: "AR",
    });

    $(function() {

      const elementList = $("#countries");
      elementList.html('<option value="" disabled selected>seleccione un País</option>');

      $.ajax({
        url: '{{ route('paises') }}',
        type: "GET",
        data: {
          "_token": "{{ csrf_token() }}",
        },
        success: function(res) {
          paises = res.data;

          elementList.val('');
          if (Object.keys(paises).length > 0) {
            var data = `<option value="" disabled selected>seleccione un País</option>`;
            $.each(paises, function(index, element) {
              data += `<option value="${element.id}">${element.country_name}</option>`
            });
          } else {
            elementList.html('<option value="" disabled selected>seleccione un País</option>');
          }
          elementList.html(data);
          elementList.val(user.country_id).trigger('change');
          $('#states').val(user.state_id).trigger('change');
          $('#cities').val(user.city_id).trigger('change');
          //console.log(user.country_id);
        },
        error: function(error) {
          alert(`Error al obtener los datos`)
        }
      });
    });
    let cities;

    $(function() {
      $.ajax({
        url: '{{ route('cities') }}',
        type: "GET",
        data: {
          "_token": "{{ csrf_token() }}",
        },
        success: function(res) {
          cities = res;
          // console.log("cities1", cities)
        },
        error: function(error) {
          /*alert(`Error al obtener los datos`)*/
        }
      });

    });

    function countryChange(targetElement) {
      countries = paises;
      var country_index = $(targetElement).val();
      $('#states').html('');
      $('#states').append(`<option value="" disabled selected>seleccione un Estado</option>`);
      $('#cities').html('');
      $('#cities').append(`<option value="" disabled selected>seleccione una Ciudad</option>`);

      if (country_index != '') {
        var states = countries[country_index] ? countries[country_index]['states'] : {};


        /*if(states.length>0){

            htmlContent='';
            for(let i=0;i<states.length;i++){
                htmlContent+=`<option value="${states[i]['id']}">${states[i]['state_name']}</option>`;
            }
            $('#states').append(htmlContent);
        }*/
        if (Object.keys(states).length > 0) {
          htmlContent = '';
          Object.entries(states).forEach(([key, value]) => {
            htmlContent += `<option value="${key}">${value.state_name}</option>`;
          });
          $('#states').append(htmlContent);
        }
      }
    }

    function stateChange(targetElement) {
      countries = paises;
      ciudades = cities

      var country_index = @json($pais_id);
      var state_index = $(targetElement).find(':selected').val();
      var userElement = document.getElementById("user");
      var userValue = userElement.textContent || userElement.innerText;
      $('#cities').html('');
      $('#cities').append(`<option value="" disabled selected>seleccione una Ciudad</option>`);
      if (state_index !== '') {
        // var cities=countries[country_index]['states'][state_index]['cities'];
        var cities = countries[country_index]?.states[state_index]?.cities;
        // console.log("cities", cities)

        // console.log(country_index);
        // console.log(state_index);
        // console.log(countries);
        const userCityId = userElement.textContent.trim();
        // console.log("userCityId:", userCityId);
        var selectedCity = cities.find(city => city.id === Number(userCityId));
        if (selectedCity) {
          $('#cities').html('');
          $('#cities').append(`<option value="${Number(userValue)}">${selectedCity.city_name}</option>`);
        }
        if (cities.length > 0) {
          htmlContent = '';
          for (let i = 0; i < cities.length; i++) {
            htmlContent += `<option value="${cities[i]['id']}">${cities[i]['city_name']}</option>`;
          }
          $('#cities').append(htmlContent);
        }
      }
    }

    function toggleBillingFields() {
      const isBillingChecked = document.getElementById('si').checked;
      const billingFields = document.getElementById('billing-fields');

      // Agrega o elimina propiedad requerido de inputs dentro del contenedor billing-fields
      if (isBillingChecked) {
        $("#billing-fields input, #billing-fields select").attr("required", true);
      } else {
        $("#billing-fields input, #billing-fields select").removeAttr("required");
      }

      billingFields.style.display = isBillingChecked ? 'block' : 'none';
    }

    document.addEventListener('DOMContentLoaded', function() {
      toggleBillingFields();
    });


    document.addEventListener("DOMContentLoaded", function() {
      var hasMultipleIncompleteFields = {{ json_encode($pendingInfoError ? true : false) }};
      if (hasMultipleIncompleteFields) {
        var myModalUserEdit = new bootstrap.Modal(document.getElementById('myModalGoToEdit'));
        myModalUserEdit.show();
      }
    });
  </script>
@endsection