<?php
class Petcare_Petcare_Details_Widget extends WP_Widget{
public function __construct(){
global $petcare_plugin_name;  
parent::__construct(  'kaya-petcare-details',
__('Petcare - Petcare Details',$petcare_plugin_name),
array( 'description' => __('Use this widget to add petcare details',$petcare_plugin_name) ,'class' => '' )
);
}
public function widget( $args , $instance ){
echo $args['before_widget'];
global $petcare_plugin_name; 
  $instance = wp_parse_args($instance, array(
  'petcare_details_values' => 'Name | Name, Breed | Breed Name',
  'petcare_title_color' => '#333333',
  'petcare_description_color' => '#333333',
   ) ); ?>
   <?php $explode_values =  kaya_explode_data(trim($instance['petcare_details_values']));
    $sting_vales = explode(',', trim($explode_values));
    echo '<div class="petcare_details_widget">';
    echo '<dl>';
    foreach ($sting_vales as $key => $string_values) {
      $petcare_data = explode("|", $string_values);
      $petcare_title_color = 'color:'.$instance['petcare_title_color'];
      $petcare_description_color = 'color:'.$instance['petcare_description_color'];
       echo '<dt  style="color:'.$instance['petcare_title_color'].'">'.$petcare_data[0].'</dt>';
        echo '<dd style="color:'.$instance['petcare_description_color'].'">'.$petcare_data[1].'</dd>';
       ?>
  <?php  }
    echo '</dl>';
    echo '</div>';
    ?>
  <?php  echo $args['after_widget']; ?>
<?php }

public function form( $instance ){
global $petcare_plugin_name;   
$instance = wp_parse_args( $instance, array(
'petcare_details_values' => 'Name | Name, Breed | Breed Name',
'petcare_title_color' => '#333333',
'petcare_description_color' => '#333333',
) );
?>
<script type='text/javascript'>
  jQuery(document).ready(function($) {
  jQuery('.petcare_details_color_pickr').each(function(){
  jQuery(this).wpColorPicker();
  });    
  });
</script>   
<div class="input-elements-wrapper">             
  <p>
    <label for="<?php echo $this->get_field_id('petcare_details_values'); ?>"><?php _e('Petcare Details',$petcare_plugin_name) ?>
    </label>
    <textarea class="widefat" id="<?php echo $this->get_field_id('petcare_details_values'); ?>" name="<?php echo $this->get_field_name('petcare_details_values') ?>" value="<?php echo esc_attr($instance['petcare_details_values']) ?>" ><?php echo esc_attr($instance['petcare_details_values']) ?></textarea>
  </p>
    <small> <?php _e( 'Divide values with linebreaks (Enter) </small>',$petcare_plugin_name) ?>

</div> 
<div class="input-elements-wrapper">  
  <p class="one_fourth">
    <label for="<?php echo $this->get_field_id('petcare_title_color') ?>"><?php _e('Petcare Title Color',$petcare_plugin_name)?>
    </label>
    <input type="text" class="petcare_details_color_pickr" id="<?php echo $this->get_field_id('petcare_title_color') ?>" name="<?php echo $this->get_field_name('petcare_title_color') ?>" value="<?php echo esc_attr($instance['petcare_title_color']); ?>" />
  </p>
  <p class="one_fourth">
    <label for="<?php echo $this->get_field_id('petcare_description_color') ?>"><?php _e('Petcare Description Color',$petcare_plugin_name)?></label>
    <input type="text" class="petcare_details_color_pickr" id="<?php echo $this->get_field_id('petcare_description_color') ?>" name="<?php echo $this->get_field_name('petcare_description_color') ?>" value="<?php echo esc_attr($instance['petcare_description_color']); ?>" />
  </p>
</div>            
<?php  }
}
   petcare_kaya_register_widgets('petcare-details', __FILE__);
?>