The selector does not display in the city field in billing and shipping

Hello, I am trying to create a plugin that adapts to WooCommerce where it shows me a selector in the city field and shows me the cities I have, can you please help me.

this is my code: 

<?php

if ( ! defined( 'ABSPATH' ) ) exit; // Exit if accessed directly

// Check if WooCommerce is active

if ( in_array( 'woocommerce/woocommerce.php', apply_filters( 'active_plugins', get_option( 'active_plugins' ) ) ) ) {

? ? class WC_City_Select {

? ? ? ? // plugin version

? ? ? ? const VERSION = '1.0.3';

? ? ? ? private $plugin_path;

? ? ? ? private $plugin_url;

? ? ? ? private $cities;

? ? ? ? public function __construct() {

? ? ? ? ? ? add_filter( 'woocommerce_billing_fields', array( $this, 'billing_fields' ), 10, 2 );

? ? ? ? ? ? add_filter( 'woocommerce_shipping_fields', array( $this, 'shipping_fields' ), 10, 2 );

? ? ? ? ? ? add_filter( 'woocommerce_form_field_city', array( $this, 'form_field_city' ), 10, 4 );

? ? ? ? ? ? //js scripts

? ? ? ? ? ? add_action( 'wp_enqueue_scripts', array( $this, 'load_scripts' ) );

? ? ? ? }

? ? ? ? public function billing_fields( $fields, $country ) {

? ? ? ? ? ? $fields['billing_city']['type'] = 'city';

? ? ? ? ? ? return $fields;

? ? ? ? }

? ? ? ? public function shipping_fields( $fields, $country ) { ?

? ? ? ? ? ? $fields['shipping_city']['type'] = 'city';

? ? ? ? ? ? return $fields;

? ? ? ? }

? ? ? ? public function get_cities( $cc = null ) {

? ? ? ? ? ? if ( empty( $this->cities ) ) {

? ? ? ? ? ? ? ? $this->load_country_cities();

? ? ? ? ? ? }

? ? ? ? ? ? if ( ! is_null( $cc ) ) {

? ? ? ? ? ? ? ? return isset( $this->cities[ $cc ] ) ? $this->cities[ $cc ] : false;

? ? ? ? ? ? } else {

? ? ? ? ? ? ? ? return $this->cities;

? ? ? ? ? ? }

? ? ? ? }

? ? ? ? public function load_country_cities() {

? ? ? ? ? ? global $cities;

? ? ? ? ? ? // Load only the city files the shop owner wants/needs.

? ? ? ? ? ? $allowed = array_merge( WC()->countries->get_allowed_countries(), WC()->countries->get_shipping_countries() );

? ? ? ? ? ? if ( $allowed ) {

? ? ? ? ? ? ? ? foreach ( $allowed as $code => $country ) {

? ? ? ? ? ? ? ? ? ? if ( ! isset( $cities[ $code ] ) && file_exists( $this->get_plugin_path() . '/cities/' . $code . '.php' ) ) {

? ? ? ? ? ? ? ? ? ? ? ? include( $this->get_plugin_path() . '/cities/' . $code . '.php' );

? ? ? ? ? ? ? ? ? ? }

? ? ? ? ? ? ? ? }

? ? ? ? ? ? }

? ? ? ? ? ? $this->cities = apply_filters( 'wc_city_select_cities', $cities );

? ? ? ? }

? ? ? ? public function form_field_city( $field, $key, $args, $value ) {

? ? ? ? ? ? // Do we need a clear div?

? ? ? ? ? ? if ( ( ! empty( $args['clear'] ) ) ) {

? ? ? ? ? ? ? ? $after = '<div class="clear"></div>';

? ? ? ? ? ? } else {

? ? ? ? ? ? ? ? $after = '';

? ? ? ? ? ? }

? ? ? ? ? ? // Required markup

? ? ? ? ? ? if ( $args['required'] ) {

? ? ? ? ? ? ? ? $args['class'][] = 'validate-required';

? ? ? ? ? ? ? ? $required = ' <abbr class="required" title="' . esc_attr__( 'required', 'woocommerce' ?) . '">*</abbr>';

? ? ? ? ? ? } else {

? ? ? ? ? ? ? ? $required = '';

? ? ? ? ? ? }

? ? ? ? ? ? // Custom attribute handling

? ? ? ? ? ? $custom_attributes = array();

? ? ? ? ? ? if ( ! empty( $args['custom_attributes'] ) && is_array( $args['custom_attributes'] ) ) {

? ? ? ? ? ? ? ? foreach ( $args['custom_attributes'] as $attribute => $attribute_value ) {

? ? ? ? ? ? ? ? ? ? $custom_attributes[] = esc_attr( $attribute ) . '="' . esc_attr( $attribute_value ) . '"';

? ? ? ? ? ? ? ? }

? ? ? ? ? ? }

? ? ? ? ? ? // Validate classes

? ? ? ? ? ? if ( ! empty( $args['validate'] ) ) {

? ? ? ? ? ? ? ? foreach( $args['validate'] as $validate ) {

? ? ? ? ? ? ? ? ? ? $args['class'][] = 'validate-' . $validate;

? ? ? ? ? ? ? ? }

? ? ? ? ? ? }

? ? ? ? ? ? // field p and label

? ? ? ? ? ? $field ?= '<p class="form-row ' . esc_attr( implode( ' ', $args['class'] ) ) .'" id="' . esc_attr( $args['id'] ) . '_field">';

? ? ? ? ? ? if ( $args['label'] ) {

? ? ? ? ? ? ? ? $field .= '<label for="' . esc_attr( $args['id'] ) . '" class="' . esc_attr( implode( ' ', $args['label_class'] ) ) .'">' . $args['label']. $required . '</label>';

? ? ? ? ? ? }

? ? ? ? ? ? // Get Country

? ? ? ? ? ? $country_key = $key == 'billing_city' ? 'billing_country' : 'shipping_country';

? ? ? ? ? ? $current_cc ?= WC()->checkout->get_value( $country_key );

? ? ? ? ? ? $state_key = $key == 'billing_city' ? 'billing_state' : 'shipping_state';

? ? ? ? ? ? $current_sc ?= WC()->checkout->get_value( $state_key );

? ? ? ? ? ? // Get country cities

? ? ? ? ? ? $cities = $this->get_cities( $current_cc );

? ? ? ? ? ? if ( is_array( $cities ) ) {

? ? ? ? ? ? ? ? $field .= '<select name="' . esc_attr( $key ) . '" id="' . esc_attr( $args['id'] ) . '" class="city_select ' . esc_attr( implode( ' ', $args['input_class'] ) ) .'" ' . implode( ' ', $custom_attributes ) . ' placeholder="' . esc_attr( $args['placeholder'] ) . '">

? ? ? ? ? ? ? ? ? ? <option value="">'. __( 'Select an option&hellip;', 'woocommerce' ) .'</option>';

? ? ? ? ? ? ? ? if ( $current_sc && $cities[ $current_sc ] ) {

? ? ? ? ? ? ? ? ? ? $dropdown_cities = $cities[ $current_sc ];

? ? ? ? ? ? ? ? } else if ( is_array( reset($cities) ) ) {

? ? ? ? ? ? ? ? ? ? $dropdown_cities = array_reduce( $cities, 'array_merge', array() );

? ? ? ? ? ? ? ? ? ? sort( $dropdown_cities );

? ? ? ? ? ? ? ? } else {

? ? ? ? ? ? ? ? ? ? $dropdown_cities = $cities;

? ? ? ? ? ? ? ? }

? ? ? ? ? ? ? ? foreach ( $dropdown_cities as $city_name ) {

? ? ? ? ? ? ? ? ? ? $field .= '<option value="' . esc_attr( $city_name ) . '" '.selected( $value, $city_name, false ) . '>' . $city_name .'</option>';

? ? ? ? ? ? ? ? }

? ? ? ? ? ? ? ? $field .= '</select>';

? ? ? ? ? ? } else {

? ? ? ? ? ? ? ? $field .= '<input type="text" class="input-text ' . esc_attr( implode( ' ', $args['input_class'] ) ) .'" value="' . esc_attr( $value ) . '" ?placeholder="' . esc_attr( $args['placeholder'] ) . '" name="' . esc_attr( $key ) . '" id="' . esc_attr( $args['id'] ) . '" ' . implode( ' ', $custom_attributes ) . ' />';

? ? ? ? ? ? }

? ? ? ? ? ? // field description and close wrapper

? ? ? ? ? ? if ( $args['description'] ) {

? ? ? ? ? ? ? ? $field .= '<span class="description">' . esc_attr( $args['description'] ) . '</span>';

? ? ? ? ? ? }

? ? ? ? ? ? $field .= '</p>' . $after;

? ? ? ? ? ? return $field;

? ? ? ? }

? ? ? ? public function load_scripts() {

? ? ? ? ? ? if ( is_cart() || is_checkout() || is_wc_endpoint_url( 'edit-address' ) ) {

? ? ? ? ? ? ? ? $city_select_path = $this->get_plugin_url() . 'assets/js/city-select.js';

? ? ? ? ? ? ? ? wp_enqueue_script( 'wc-city-select', $city_select_path, array( 'jquery', 'woocommerce' ), self::VERSION, true );

? ? ? ? ? ? ? ? $cities = json_encode( $this->get_cities() );

? ? ? ? ? ? ? ? wp_localize_script( 'wc-city-select', 'wc_city_select_params', array(

? ? ? ? ? ? ? ? ? ? 'cities' => $cities,

? ? ? ? ? ? ? ? ? ? 'i18n_select_city_text' => esc_attr__( 'Select an option&hellip;', 'woocommerce' )

? ? ? ? ? ? ? ? ) );

? ? ? ? ? ? }

? ? ? ? }

? ? ? ? public function get_plugin_path() {

? ? ? ? ? ? if ( $this->plugin_path ) {

? ? ? ? ? ? ? ? return $this->plugin_path;

? ? ? ? ? ? }

? ? ? ? ? ? return $this->plugin_path = plugin_dir_path( __FILE__ );

? ? ? ? }

? ? ? ? public function get_plugin_url() {

? ? ? ? ? ? if ( $this->plugin_url ) {

? ? ? ? ? ? ? ? return $this->plugin_url;

? ? ? ? ? ? }

? ? ? ? ? ? return $this->plugin_url = plugin_dir_url( __FILE__ );

? ? ? ? }

? ? }

? ? $GLOBALS['wc_city_select'] = new WC_City_Select();

}
?>