<?php
$this->display_flash();

if ( ! empty( $urls ) ) {

    $event_statuses = UptimeRobot_DB::get_event_statuses();
	$current_gmt_time = time(); // timezone independent (=UTC).
    $hour = (int) date( 'H', $current_gmt_time + $log_gmt_offset * 60 * 60 );
    $hours = '';
    if ( 24 == $hour ) {
        for ( $i = 0; $i < $hour; $i++ ) {
            $hours .= '<div>' . $i . '</div>'; }
    } else {
        $begin_hour = $hour + 1;
        for ( $i = $begin_hour; $i < 24; $i++ ) {
            $hours .= '<div>' . $i . '</div>';
        }
        for ( $i = 0; $i <= $hour; $i++ ) {
            $hours .= '<div>' . $i . '</div>';
        }
    }

	if ( $total > MAINWP_AUM_API_LIMIT_PER_PAGE ) {
		$per_page = get_option('mainwp_aum_setting_monitors_per_page', 10);
		?>
		<form method="post" action="">
			<label><?php _e( 'Show', 'advanced-uptime-monitor-extension'); ?>
				<div class="aum-min-width" style="display: inline-block;">
						<select class="ui dropdown" id="aum_monitors_per_page" name="aum_monitors_per_page">
								<option value="10" <?php selected( $per_page, 10 ); ?>>10</option>
								<option value="20" <?php selected( $per_page, 20 ); ?>>20</option>
								<option value="30" <?php selected( $per_page, 30 ); ?>>30</option>
								<option value="40" <?php selected( $per_page, 40 ); ?>>40</option>
								<option value="50" <?php selected( $per_page, 50 ); ?>>50</option>
						</select> <?php _e( 'entries', 'advanced-uptime-monitor-extension'); ?>
					</div>
				</label>
		 </form>
	<?php } ?>

		<table id="mainwp-aum-monitors-table" class="aum-monitors-tbl ui single line table" style="width:100%">
			<thead>
				<tr>
			    <th class="collapsing no-sort check-column"><span class="ui checkbox"><input type="checkbox" name="checkall" class="url_checkall" id="url_checkall"></span></th>
					<th><?php _e( 'Monitor', 'advanced-uptime-monitor-extension'); ?></th>
			    <th><?php _e( 'Site', 'advanced-uptime-monitor-extension'); ?></th>
			    <th class="collapsing"><?php _e( 'Status', 'advanced-uptime-monitor-extension'); ?></th>
			    <th><?php _e( 'Type', 'advanced-uptime-monitor-extension'); ?></th>
			    <th><div class="stratch-hours"><?php echo $hours; ?></div></th>
			    <th><?php _e( 'Uptime Ratio', 'advanced-uptime-monitor-extension'); ?></th>
			    <th class="collapsing no-sort"><?php _e( '', 'advanced-uptime-monitor-extension'); ?></th>
				</tr>
			</thead>
      <tbody>
    	<?php foreach ( $urls as $url ) :

            $monitor_status = false;
            if (isset( $url->monitor_status )) {
                $monitor_status = $url->monitor_status;
            }



            ?>
        <tr>
            <td class="check-column"><span class="ui checkbox"><input type="checkbox" name="checkbox_url" class="checkbox_url"></span></td>
          <td><?php echo ( ! empty( $url->url_friendly_name ) ? $url->url_friendly_name : '' ); ?><span class="loading_status" style="display:none" class="aum_mainwp_monitor_actions_loading" ><i class="notched circle loading icon"></i> <?php _e( 'Please wait...', 'advanced-uptime-monitor-extension' ); ?></span></td>
					<td><?php echo ( ! empty( $url->url_address ) ? $url->url_address : '' ); ?></td>
					<td>
          <?php
          if ( $monitor_status !== false && isset( $url->monitor_alltimeuptimeratio ) ) {
            echo Advanced_Uptime_Monitor_Extension::get_install()->render_status_bar( $url->monitor_status, $url->monitor_alltimeuptimeratio );
          } else {
            echo 'N / A';
          }
          ?>
          </td>
          <td><?php echo Advanced_Uptime_Monitor_Extension::get_install()->monitor_types[ $url->url_monitor_type ] ?></td>
          <td class="aum_monitors_list">
          <?php
					$first = true;
					$status = '';
					if ( is_array( $stats ) ) {
            $total_events = ( isset( $stats[ $url->url_uptime_monitor_id ] ) && is_array( $stats[ $url->url_uptime_monitor_id ] ) ) ?  count( $stats[ $url->url_uptime_monitor_id ] ) : 0;
						$i = 0;
            if ( $total_events > 0 ) {
            if ( isset( $stats[ $url->url_uptime_monitor_id ] ) ) {
                foreach ( $stats[ $url->url_uptime_monitor_id ] as $event ) {
                    $i++;
                    if ( ! $first ) { // avoid display the beging status
                            $class = isset( $event_statuses[ $log_type ] ) ? $event_statuses[ $log_type ] : 'not_checked';
                        $style = '';
                        if ( $event->status_bar_length > 0 ) {
                            $style = 'style = "width: ' . $event->status_bar_length . '%"';
                        } else {
                            $style = 'style = "width: 1px"';
                        }
                        $last_event = '';
                        if ( $i == $total_events ) {
                            $last_event = ' last_event="' . $class . '"';
                            $class .= ' last_event';
                        }

                        $status = '<div class="event_fill ' . $class . '" ' . $style . $last_event . ' event-time="' . $event->event_datetime_gmt . '"></div>' . $status;
                    } else {
                        $first = false;
                    }
                    $log_type = $event->type;
                }
            	}
        		}
					}
					if ( empty( $status ) ) {
						$status = '<div class="event_fill" style = "width: 2px; margin-right: -2px;"></div>';
					}
					echo $status;
					//echo '<div class="aum_diagram_overlay"></div>';
					?>
          </td>
            <td>
            <?php

            if ( $monitor_status !== false && isset( $url->monitor_alltimeuptimeratio ) ) {
                echo Advanced_Uptime_Monitor_Extension::get_install()->render_ratio_bar( $monitor_status, $url->monitor_alltimeuptimeratio );
            } else {
                echo 'N / A';
            }


            ?>
            </td>
            <td class="url_actions" url_id="<?php echo $url->url_id ?>">
                <span onclick="urm_status_monitor_button(this, <?php echo $url->url_id ?>,event, '<?php echo wp_create_nonce( 'aum_nonce_url_sp' ); ?>')" class="ui mini icon button aum_action_link <?php  echo ( $monitor_status == false )? 'start' : 'pause'; ?>"><?php  echo ( $monitor_status == false ) ? '<i class="play icon"></i>' : '<i class="pause icon"></i>'; ?></span>
                <span onclick="urm_stats_monitor_button(<?php echo $url->url_id; ?>, '<?php echo wp_create_nonce( 'aum_nonce_statistics_table' ); ?>')" class="ui mini icon button aum_action_link stats_link"><i class="info icon"></i></span>
                <span onclick="urm_edit_monitor_button(this, <?php echo $url->url_id; ?>, '<?php echo wp_create_nonce( 'aum_nonce_update_url' ); ?>')" class="ui mini icon button aum_action_link url_edit_link"><i class="edit icon"></i></span>
                <span onclick="if (!confirm('Are you sure to delele selected item?')) return; urm_delete_monitor_button(jQuery(this), '<?php echo wp_create_nonce( 'aum_nonce_delete_monitor' ); ?>')" class="ui mini icon button aum_action_link url_delete_link"><i class="trash icon"></i></span>
            </td>
        </tr>
        <?php endforeach; ?>
    </tbody>
      <tfoot>
            <th><span class="ui checkbox"><input type="checkbox" name="checkall" class="url_checkall" id="url_checkall"></span></th>
            <th><?php _e( 'Monitor', 'advanced-uptime-monitor-extension'); ?></th>
            <th><?php _e( 'Site', 'advanced-uptime-monitor-extension'); ?></th>
            <th><?php _e( 'Status', 'advanced-uptime-monitor-extension'); ?></th>
            <th><?php _e( 'Type', 'advanced-uptime-monitor-extension'); ?></th>
            <th><div class="stratch-hours"><?php echo $hours; ?></div></th>
            <th><?php _e( 'Uptime Ratio', 'advanced-uptime-monitor-extension'); ?></th>
            <th class="collapsing no-sort"><?php _e( '', 'advanced-uptime-monitor-extension'); ?></th>
      </tfoot>
    </table>
<?php
	if ( $total > MAINWP_AUM_API_LIMIT_PER_PAGE ) {
		echo __( 'Total:', 'advanced-uptime-monitor-extension' ) . ' ' . $total . ' '. __( 'monitors', 'advanced-uptime-monitor-extension' ) . ' ';
		if ( $total > $per_page ) {

					$count_page = ceil( $total / $per_page );
					?>
					<label><?php echo __('Monitor pages', 'advanced-uptime-monitor-extension'); ?>
						<div class="aum-min-width" style="display: inline-block;">
							<select name="mainwp_aum_monitor_select_page" id="mainwp_aum_monitor_select_page" class="ui dropdown">
								<?php
								for ( $i = 1; $i <= $count_page; $i++ ) {
								?>
								<option <?php echo ($get_page == $i  ? 'selected="selected"' : ''); ?> value="<?php echo $i; ?>" ><?php echo $i; ?></option>
								<?php
								}
								?>
							</select>
						</div>
					</label>
					<?php
			}
		}
	}

	?>
	<script type="text/javascript">
		<?php if ( $total <= MAINWP_AUM_API_LIMIT_PER_PAGE ) { ?>
				jQuery( '#mainwp-aum-monitors-table' ).DataTable( {
					"columnDefs": [ { "orderable": false, "targets": "no-sort" } ],
					"order": [ [ 1, "asc" ] ],
					"drawCallback": function( settings ) {
						jQuery('#mainwp-aum-monitors-table .ui.checkbox').checkbox();
            // Check all checkboxes
            jQuery( '#mainwp-aum-monitors-table table th input[type="checkbox"]' ).change( function () {
              var checkboxes = jQuery( '#mainwp-aum-monitors-table' ).find( 'input:checkbox' );
          		if ( jQuery( this ).prop( 'checked' ) ) {
              	checkboxes.prop( 'checked', true );
              } else {
                checkboxes.prop( 'checked', false );
              }
          	} );
					},
          "stateSave": true,
          "stateDuration": 0, // forever
          "scrollX": true,
          "colReorder" : {
            fixedColumnsLeft: 1,
            fixedColumnsRight: 1
          },
					"language": { "emptyTable": "No monitors created yet." }
				});
		<?php } else { ?>
				jQuery("#aum_monitors_per_page").change(function() {
					jQuery(this).closest("form").submit();
				});
		<?php } ?>

		jQuery('#mainwp-aum-monitors-table .ui.checkbox').checkbox();

		jQuery('#mainwp-advanced-uptime-monitor-monitors .ui.dropdown').dropdown();

    jQuery( '#mainwp-aum-monitors-table table th input[type="checkbox"]' ).change( function () {
      var checkboxes = jQuery( '#mainwp-aum-monitors-table' ).find( 'input:checkbox' );
      if ( jQuery( this ).prop( 'checked' ) ) {
        checkboxes.prop( 'checked', true );
      } else {
        checkboxes.prop( 'checked', false );
      }
    } );

  </script>
