$(document).ready(function () {
  // Initialize Country and State dropdowns using DropdownManager
  DropdownManager.initializeCountryState("Country", "State", {
    userSelected: $("#Country").data("user-selected"),
    systemDefault: $("#Country").data("system-default"),
    stateOptionDivId: "stateOptionDiv",
    stateInputDivId: "stateInputDiv",
    stateTextboxId: "StateTextbox",
  });

  // Update state type field when state dropdown visibility changes
  $(document).on("change", "#State", function () {
    const stateSelect = $("#State");
    if (stateSelect.find("option").length > 1) {
      $("#stateType").val("dropDown");
    } else {
      $("#stateType").val("input");
    }
  });

  // Initialize phone mask toggles FIRST, before applying masks globally
  // This ensures phone fields with "No format" checked don't get masked
  if (window.CRM.formUtils && window.CRM.formUtils.initializeAllPhoneMaskToggles) {
    window.CRM.formUtils.initializeAllPhoneMaskToggles();
  }

  // Apply inputmask to non-phone fields (fields without a "No format" checkbox)
  $("[data-mask]").inputmask();

  // Add Family Member Row functionality
  if (window.CRM.initialFamilyMemberCount !== undefined) {
    let rowCount = window.CRM.initialFamilyMemberCount;

    $("#addFamilyMemberRow").click(function () {
      rowCount++;

      // Build role options
      let roleOptions = '<option value="0">' + window.CRM.i18n.selectRole + "</option>";
      window.CRM.familyRoles.forEach(function (role) {
        roleOptions += '<option value="' + role.id + '">' + role.name + "</option>";
      });

      // Build month options
      let monthOptions = '<option value="0">' + window.CRM.i18n.unknown + "</option>";
      for (let m = 1; m <= 12; m++) {
        let monthVal = m < 10 ? "0" + m : m;
        monthOptions += '<option value="' + monthVal + '">' + window.CRM.i18n.months[m - 1] + "</option>";
      }

      // Build day options
      let dayOptions = '<option value="0">' + window.CRM.i18n.unknown + "</option>";
      for (let d = 1; d <= 31; d++) {
        let dayVal = d < 10 ? "0" + d : d;
        dayOptions += '<option value="' + dayVal + '">' + d + "</option>";
      }

      // Build classification options
      let classOptions = '<option value="0">' + window.CRM.i18n.unassigned + "</option>";
      classOptions += '<option value="" disabled>-----------------------</option>';
      window.CRM.classifications.forEach(function (cls) {
        classOptions += '<option value="' + cls.id + '">' + cls.name + "</option>";
      });

      let newRow = `
                <tr>
                    <td>
                        <input type="hidden" name="PersonID${rowCount}" value="">
                        <input name="FirstName${rowCount}" type="text" value="" class="form-control form-control-sm">
                    </td>
                    <td><input name="MiddleName${rowCount}" type="text" value="" class="form-control form-control-sm"></td>
                    <td><input name="LastName${rowCount}" type="text" value="" class="form-control form-control-sm"></td>
                    <td><input name="Suffix${rowCount}" type="text" value="" class="form-control form-control-sm" style="width: 60px;"></td>
                    <td>
                        <select name="Gender${rowCount}" class="form-control form-control-sm">
                            <option value="0">${window.CRM.i18n.selectGender}</option>
                            <option value="1">${window.CRM.i18n.male}</option>
                            <option value="2">${window.CRM.i18n.female}</option>
                        </select>
                    </td>
                    <td><select name="Role${rowCount}" class="form-control form-control-sm">${roleOptions}</select></td>
                    <td><select name="BirthMonth${rowCount}" class="form-control form-control-sm">${monthOptions}</select></td>
                    <td><select name="BirthDay${rowCount}" class="form-control form-control-sm">${dayOptions}</select></td>
                    <td><input name="BirthYear${rowCount}" type="text" value="" class="form-control form-control-sm" style="width: 70px;" maxlength="4"></td>
                    <td><select name="Classification${rowCount}" class="form-control form-control-sm">${classOptions}</select></td>
                </tr>
            `;

      $("#familyMembersTbody").append(newRow);

      // Update FamCount hidden field
      $("input[name='FamCount']").val(rowCount);
    });
  }
});
