<?php
class Petcare_Opening_Hours_Widget extends WP_Widget{
    public function __construct(){
       global $petcare_plugin_name;
        parent::__construct('opening-hours-widget',
            __('Petcare -  Opening Hours',$petcare_plugin_name),
            array('description' => __('Displays time table',$petcare_plugin_name), 'class' => 'opening_hours')
        );
    }
     public function widget( $args, $instance ) {
       global $petcare_plugin_name;
      $instance = wp_parse_args( $instance, array(

            'timing_color' => '#242424',
            'weekdays_color' => '#21cdec',
            'table_content' => '<ul>
                                    <li><span>Monday</span> 8:00 - 16:00</li>
                                    <li><span>Tuesday</span> 10:00 - 16:00</li>
                                    <li><span>Wednesday</span> 8:00 - 16:00</li>
                                    <li><span>Thursday</span> 8:00 - 16:00</li>
                                    <li><span>Friday</span> 8:00 - 16:00</li>
                                    <li><span>Saturday</span> 12:00 - 16:00</li>
                                    <li><span>Sunday</span>CLOSED</li>
                                </ul>',
            'animation_names' => '',
            'border_bottom_color' => '',
        ));
      echo $args['before_widget'];
      $rand_colors = rand(1,100); ?>
        <style>
          .opening_hours_middle li span{
            color:<?php echo $instance['weekdays_color']; ?>;
          }
          .opening_hours_middle li{
            color:<?php echo $instance['timing_color']; ?>;
          }
          .opeing_hours_widget_wrapper li{
            border-bottom: 1px solid <?php echo $instance['border_bottom_color']?>
          }
        </style>
    <?php  //echo 'This is Opening hours Widget';
    $animation_class = trim( $instance['animation_names']  ) ? 'wow '.$instance['animation_names'] : '';
      echo '<div class="'.$animation_class.' opeing_hours_widget_wrapper">';

      echo '<div class="opening_hours_middle">';
       echo $instance['table_content'];
      echo '</div>';
      echo '</div>';
      echo $args['after_widget'];
    }
    public function form($instance){
       global $petcare_plugin_name;
            $instance = wp_parse_args( $instance, array(

             'animation_names' =>'',
            'timing_color' => '#242424',
            'weekdays_color' => '#21cdec',
            'border_bottom_color' => '',
            'table_content' => '<ul>
                                    <li><span>Monday</span> 8:00 - 16:00</li>
                                    <li><span>Tuesday</span> 10:00 - 16:00</li>
                                    <li><span>Wednesday</span> 8:00 - 16:00</li>
                                    <li><span>Thursday</span> 8:00 - 16:00</li>
                                    <li><span>Friday</span> 8:00 - 16:00</li>
                                    <li><span>Saturday</span> 12:00 - 16:00</li>
                                    <li><span>Sunday</span>CLOSED</li>
                                </ul>',
        ));
    ?>
<script type='text/javascript'>
  jQuery(document).ready(function($) {
  jQuery('.opening_hours_color_pickr').each(function(){
  jQuery(this).wpColorPicker();
  });
      
  });
</script>    
<div class="input-elements-wrapper"> 
  <p>
    <label for="<?php echo $this->get_field_id('table_content') ?>"> <?php _e('Table Content',$petcare_plugin_name)?></label>
    <textarea type="text" id="<?php echo $this->get_field_id('table_content') ?>" class="widefat" name="<?php echo $this
     ->get_field_name('table_content') ?>" value = "<?php echo esc_attr( $instance['table_content'] ) ?>" > <?php echo esc_attr( $instance['table_content'] ) ?>
    </textarea>
  </p>
  <p class="one_fourth"> 
    <label for="<?php echo $this->get_field_id('weekdays_color'); ?>"> <?php _e('Week Days Color',$petcare_plugin_name); ?> </label>
    <input type="text" id="<?php echo $this->get_field_id('weekdays_color') ?>" class="opening_hours_color_pickr" value="<?php echo esc_attr($instance['weekdays_color']) ?>" name="<?php echo $this->get_field_name('weekdays_color') ?>" />
  </p>
  <p class="one_fourth"> 
    <label for="<?php echo $this->get_field_id('timing_color'); ?>"> <?php _e('Timing Color',$petcare_plugin_name); ?> </label>
    <input type="text" id="<?php echo $this->get_field_id('timing_color') ?>" class="opening_hours_color_pickr" value="<?php echo esc_attr($instance['timing_color']) ?>" name="<?php echo $this->get_field_name('timing_color') ?>" />
  </p>
 <p class="one_fourth"> 
    <label for="<?php echo $this->get_field_id('border_bottom_color'); ?>"> <?php _e('Border Bottom Color',$petcare_plugin_name); ?> </label>
    <input type="text" id="<?php echo $this->get_field_id('border_bottom_color') ?>" class="opening_hours_color_pickr" value="<?php echo esc_attr($instance['border_bottom_color']) ?>" name="<?php echo $this->get_field_name('border_bottom_color') ?>" />
</p>
</div>
<p>
  <label for="<?php echo $this->get_field_id('animation_names') ?>">  <?php _e('Select Animation Effect',$petcare_plugin_name) ?> 
  </label>
  <?php animation_effects($this->get_field_name('animation_names'), $instance['animation_names'] ); ?>
<p> 
<?php   }
}
petcare_kaya_register_widgets('opening-hours', __FILE__);
?>