$(function() {
    var $countryEl = $("#id_country");
    var $areaEl = $("#id_administrative_area");

    function loadAreas(countryCode, selectedValue) {

        $areaEl.empty().append($('<option>', { value: "", text: "" }));

        if (!countryCode) return;

        $.ajax({
          url: "/profile/account/admin-areas/" + encodeURIComponent(countryCode) + "/",
          dataType: "json",
          success: function (data) {
            if (Array.isArray(data.areas)) {
              $.each(data.areas, function (i, area) {
                var val = area[0], label = area[1];
                var $opt = $("<option>", { value: val, text: label });
                if (selectedValue && selectedValue === val) {
                  $opt.attr("selected", "selected");
                }
                $areaEl.append($opt);
              });
            }
          },
          error: function () {
            $areaEl.empty().append($('<option>', { value: "", text: "" }));
            console.error("Failed to load areas");
          }
        });
    }
    if ($countryEl.length) {
        var initialCountry = $countryEl.val();
        var initialArea = $areaEl.val();
        loadAreas(initialCountry, initialArea);

        $countryEl.on("change", function () {
          loadAreas($(this).val(), null);
        });
    }
});