<?php 
 class Petcare_Reservation_Form_Widget extends WP_Widget
 {
  public function __construct(){
    global $petcare_plugin_name;
   parent::__construct( 'badminton-reservation-form', 
      __('Petcare -  Reservation Form', $petcare_plugin_name),
      array(  'description' => __('Add reservation form',$petcare_plugin_name), 'class' => 'reservation_form'   ));
   }
   public function widget( $args , $instance ){
      global $petcare_plugin_name;
      wp_enqueue_script('js_widget_contact', constant(strtoupper($petcare_plugin_name).'_PLUGIN_URL').'js/widget_contact.js',array( 'jquery' ),'', true);
      $instance = wp_parse_args($instance , array(
            'button_text' => __('Mail Us',$petcare_plugin_name),
            'clear_button_text' => __('Clear',$petcare_plugin_name),
            'email_id' => 'yourdomain@gmail.com',
            'calendar_bg_color'=>'#ffffff',
            'calendar_text_color' =>'#000000',
            'animation_names' => '',
        ));
      echo $args['before_widget'];?>
        <script type="text/javascript">
          jQuery(document).ready(function() {
            jQuery('.res_date').datepicker({
              dateFormat : 'dd-mm-yy'
            });
         });
        </script>
        <style>
          .ui-datepicker-calendar tr, .ui-datepicker-header.ui-widget-header.ui-helper-clearfix.ui-corner-all{
          background:  <?php echo $instance['calendar_bg_color']; ?>!important;
          color: <?php echo $instance['calendar_text_color']; ?>!important;
          }
          .ui-datepicker-calendar,.ui-datepicker-calendar a{
          //background:<?php echo $instance['calendar_bg_color']; ?>!important;
          color:<?php echo $instance['calendar_text_color']; ?>!important;
          }
          .ui-datepicker-today, .ui-datepicker-today a{
          background:<?php echo $instance['calendar_text_color']; ?>!important;
          color:<?php echo $instance['calendar_bg_color']; ?>!important;
          }
        </style>
  <?php
      $reservation_form__animation = (trim($instance['animation_names'])) ? 'wow '.$instance['animation_names'].' ' : '';
      ?>
<div class="<?php echo $reservation_form__animation;?>"> 
  <form method="post" action="sendEmail.php" name="reservation-form" id="reservation-form">
    <div id="main">
      <div id="response" />
    </div>
        <input type="hidden" name="res_email_id" id="res_email_id" value="<?php echo $instance['email_id']; ?>" />
        <p class="one_half"><input type="text" name="res_name" id="res_name" size="23"  placeholder="<?php _e('Name',$petcare_plugin_name); ?>" /></p>
        <p class="one_half_last"><input type="text" name="res_email" placeholder="<?php _e('Email',$petcare_plugin_name); ?>" id="res_email" size="23" /></p>
        <p class="one_third"> <input type="text" name="res_phone" id="res_phone" size="23"  placeholder="<?php _e('Phone',$petcare_plugin_name); ?>"/></p>
        <p class="one_third"><input type="text" name="res_persons" id="res_persons" size="23"  placeholder="<?php _e('Number Of Persons',$petcare_plugin_name); ?>" /></p>
        <p class="one_third_last"><input type="text" class="res_date" name="res_date" id="res_date"  placeholder="<?php _e('Reservation On',$petcare_plugin_name); ?>" value=""/></p>
        <p class="one_third"><input type="text" name="res_time" placeholder="<?php _e('Time',$petcare_plugin_name); ?>" id="res_time" size="23" /></p>
        <p class="two_third_last"><input type="text" name="res_subject" placeholder="<?php _e('Subject',$petcare_plugin_name); ?>" id="res_subject" size="23" /></p>
        <p class="fullwidth"><textarea name="res_message" id="res_message" cols="30" rows="4" placeholder="<?php _e('Your Message',$petcare_plugin_name); ?>"></textarea></p>
        <p style="padding-bottom:0"><input  class="readmore readmore-1 readmore-1a" type="submit" name="submit" id="submit"    value="<?php echo $instance['button_text'] ?>" /> 
          <?php if(  $instance['clear_button_text'] ): ?>
          <input  class="readmore readmore-1 readmore-1a" type="reset" name="reset" id="reset" value="<?php echo $instance
          ['clear_button_text'] ?>" />
          <?php endif; ?>
        </p>
    </div>
  </form>
</div>
      <?php echo $args['after_widget']; 
   }
   public function form( $instance ){
    global $petcare_plugin_name;
    $instance = wp_parse_args($instance , array(
      'button_text' => __('Mail Us',$petcare_plugin_name),
      'clear_button_text' => __('Clear',$petcare_plugin_name),
      'email_id' => 'yourdomain@gmail.com',
      'calendar_bg_color'=>'#ffffff',
      'calendar_text_color' =>'#000000',
      'animation_names' => '',
    ));
  ?>
  <script type='text/javascript'>
    jQuery(document).ready(function($) {
      jQuery('.calendar_color_pickr').each(function(){
        jQuery(this).wpColorPicker();
      }); 
    });
  </script>
<div class="input-elements-wrapper">  
 <p>
      <label for="<?php echo $this->get_field_id('email_id'); ?>"> <?php _e('Email Id',$petcare_plugin_name) ?> </label>
      <input type="text" name="<?php echo $this->get_field_name('email_id') ?>" id="<?php echo $this->get_field_id('email_id') ?>" class="widefat" value="<?php echo $instance['email_id'] ?>" />
  </p>
  <p>
      <label for="<?php echo $this->get_field_id('button_text'); ?>"> <?php _e('Submit Button Text',$petcare_plugin_name) ?> </label>
      <input type="text" name="<?php echo $this->get_field_name('button_text') ?>" id="<?php echo $this->get_field_id('button_text') ?>" class="widefat" value="<?php echo esc_attr($instance['button_text']) ?>" />
  </p>
  <p>
      <label for="<?php echo $this->get_field_id('clear_button_text'); ?>"> <?php _e('Clear Button Text',$petcare_plugin_name) ?> </label>
      <input type="text" name="<?php echo $this->get_field_name('clear_button_text') ?>" id="<?php echo $this->get_field_id('clear_button_text') ?>" class="widefat" value="<?php echo esc_attr($instance['clear_button_text']) ?>" />
  </p>
</div> 
    <div class="input-elements-wrapper">
    <p class="one_fourth">
      <label for="<?php echo $this->get_field_id('calendar_bg_color') ?>"><?php _e('Calender BG Color',$petcare_plugin_name) ?></label>
      <input class="calendar_color_pickr" type="text" id="<?php echo $this->get_field_id('calendar_bg_color') ?>" name="<?php echo $this->get_field_name('calendar_bg_color') ?>" value="<?php echo esc_attr($instance['calendar_bg_color']) ?>">     
    </p>
    <p class="one_fourth">
      <label for="<?php echo $this->get_field_id('calendar_text_color') ?>"><?php _e('Calender Text Color',$petcare_plugin_name) ?></label>
      <input class="calendar_color_pickr" type="text" id="<?php echo $this->get_field_id('calendar_text_color') ?>" name="<?php echo $this->get_field_name('calendar_text_color') ?>" value="<?php echo esc_attr($instance['calendar_text_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('reservation-form', __FILE__);
  ?>