<div class="wrap wpcsr-content">
	<h1 class="wp-heading-inline"><?php esc_html_e('User Group', 'wpcargo-shipment-rate' ); ?></h1>
	<div class="column-wrap">
		<div class="column one-third">
			<div class="wpcsr-form-section">
			<h4><?php esc_html_e('Add a new user group', 'wpcargo-shipment-rate' ); ?></h4>
				<form id="add-user-group-form" class="wpcsr-form">
					<table class="form-table wpcsr_add_table">
						<tr>
							<th><label><?php esc_html_e( 'Label', 'wpcargo-shipment-rate' ); ?></label></th>
							<td><input type="text" name="wpcsr_ug_label" id="wpcsr_ug_label" class="wpcsr_detail wpcsr_ug_label" value="" /></td>
						</tr>
						<tr>
							<th><label><?php esc_html_e('Description', 'wpcargo-shipment-rate' ); ?></label></th>
							<td><textarea rows="6" name="wpcsr_ug_desc" id="wpcsr_ug_desc" class="wpcsr_detail wpcsr_ug_desc" value=""></textarea></td>
						</tr>
						<tr>
							<th><label><?php esc_html_e('Users', 'wpcargo-shipment-rate' ); ?></label></th>
							<td>
								<select name="wpcsr_ug_users" id="wpcsr_ug_users" class="wpcsr_detail wpcsr_ug_users" multiple>
									<?php foreach( wpcfe_get_clients() as $user_id => $user_name ):?>
										<option value="<?php echo $user_id;?>" ><?php echo $user_name; ?></option>
									<?php endforeach;?>
								</select>
							</td>
						</tr>
						<tr>
							<td></td>
							<td><input type="submit" id="wpcsr_submit" class="wpcsr_ug_btn button button-primary button-large wpcsr_submit" value="<?php esc_html_e('Add User Group', 'wpcargo-shipment-rate' ); ?>" /></td>
						</tr>
					</table>
				</form>
			</div>
		</div>
		<div class="column two-thirds">
			<div class="wpcsr-table-section wpcsr-location-table" style="overflow-x: scroll;">
				<div class="wpcsr-search-section">
					<input type="text" class="wpcsr-search-table">
					<input type="button" class="wpcsr-search-button" value="Search">
				</div>
				<?php wpcsr_pagination( $pagelink, $page_count, $page ); ?>
				<a href="#" id="wpcsr_bulk_button" data-section="user-group" class="wpcsrate-bulk-delete delete-btn button button-medium"><?php esc_html_e('Delete', 'wpcargo-shipment-rate' ); ?></a>
				<table class="wpcsr-table list-table">
					<th class="tbl-head bulk-action"><input id="checkall" type="checkbox"></th>
					<th class="tbl-head"><?php esc_html_e( 'Label', 'wpcargo-shipment-rate' ); ?></th>
					<th class="tbl-head"><?php esc_html_e( 'Description', 'wpcargo-shipment-rate' ); ?></th>
					<th class="tbl-head"><?php esc_html_e( 'Users', 'wpcargo-shipment-rate' ); ?></th>
					<th class="tbl-head"><?php esc_html_e( 'Actions', 'wpcargo-shipment-rate' ); ?></th>
					<?php if( $wpcsr_user_group ): ?>
						<?php foreach( $wpcsr_user_group as $data ): ?>
							<?php
								$user_group_id = $data->user_group_id;
								$label = $data->label;
								$description = $data->description;
								$users = $data->users ? unserialize( $data->users ) : array();
								$user_name = array();
								if( !empty($users) ){
									foreach( $users as $user ){
										$user_name[] = $wpcargo->user_fullname( $user );
									}
								}							
							?>
							<tr class="tbl-data">
								<input type="hidden" >
								<td><input type="checkbox" class="bulk_id" name="rate_bulk_action[]" value="<?php echo $user_group_id;?>"></td>
								<td><?php echo $label; ?></td>
								<td><?php echo $description; ?></td>
								<td><?php echo join( ', ', $user_name ); ?></td>
								<td>
									<span class="dashicons dashicons-edit edit-user-group" data-section="user-group" data-id="<?php echo $user_group_id;?>"></span>
									<span class="dashicons dashicons-trash wpcsr-delete" data-section="user-group" data-id="<?php echo $user_group_id;?>" ></span>
								</td>
							</tr>
						<?php endforeach; ?>
					<?php endif; ?>
				</table>
				<a href="#" id="wpcsr_bulk_button" data-section="user-group" class="wpcsrate-bulk-delete delete-btn button button-medium"><?php esc_html_e('Delete', 'wpcargo-shipment-rate' ); ?></a>
				<?php wpcsr_pagination( $pagelink, $page_count, $page ); ?>
			</div>
		</div>
	</div>
</div>
<div id="user-group-edit" class="modal">
	<div class="modal-content">
		<div class="modal-title">
			<p><?php esc_html_e('Update User Group', 'wpcargo-shipment-rate' ); ?>
			<span class="close-btn">&times;</span></p>
		</div>
		<div class="modal-body">
			<form id="update-user-group" class="wpcsr-form">
			</form>
		</div>
	</div>
</div>