<%
   settings ||= query.chart_settings
   settings = settings['chart_settings'] if settings.key?('chart_settings')
   if settings['primary_renderer'].blank?
     settings['primary_renderer'] = 'line'
   end
   block_name ||= ''
   base_block_name = block_name
   if block_name.blank?
     period_zoom_name = 'period_zoom'
     block_name = 'chart_settings'
   else
     period_zoom_name = "#{block_name}[period_zoom]"
     block_name = "#{block_name}[chart_settings]"
   end
   page_module ||= nil
   date_columns = query.available_columns.select{|c| c.date? && query.available_filters.key?(c.name.to_s) }
%>
<div id="<%= modul_uniq_id %>_chart_options_container" class="tabular chart-options-container">
  <p class="chart-type-select">
    <%= label_tag modul_uniq_id + '_chart_primary_renderer_list', l(:label_page_module_chart_renderer_choice) %>
    <% %w(line bar pie).each do |type| %>
      <%= radio_button_tag "#{block_name}[primary_renderer]", type, settings['primary_renderer'] == type, :id => modul_uniq_id + '_chart_primary_renderer_'+type, :class => 'chart_primary_renderer_type serialize' %>
      <%= label_tag modul_uniq_id + '_chart_primary_renderer_'+type, l('label_page_module_chart_renderer.'+type), :class => 'inline' %>
    <% end %>
  </p>

  <div id="<%= modul_uniq_id %>_chart_primary_renderer_container">
    <p>
      <%= label_tag "#{block_name}[axis_x_column]", l(:label_page_module_chart_axis_x) %>
      <%= select_tag "#{block_name}[axis_x_column]", options_from_collection_for_select(query.groupable_columns, 'name', 'caption', settings['axis_x_column']), id: modul_uniq_id + 'chart_axis_x_column', disabled: query.grouped?, :class => 'serialize' %>
      <em id="<%= modul_uniq_id %>axis_x_disabled_label" style="<%= 'display: none' unless query.grouped? %>"><%= l(:text_chart_axis_x_disabled) %></em>
    </p>

    <p>
      <%= label_tag modul_uniq_id + '_chart_axis_y_type_sum', l(:label_page_module_chart_axis_y) %>

      <%= radio_button_tag "#{block_name}[axis_y_type]", 'count', settings['axis_y_type'] == 'count', :id => modul_uniq_id + '_chart_axis_y_type_count', :class => 'serialize' %>
      <%= label_tag modul_uniq_id + '_chart_axis_y_type_count', l(:label_page_module_chart_axis_y_count), :class => 'inline' %>
      <% if query.sumable_columns.present? %>
        <br />
        <%= radio_button_tag "#{block_name}[axis_y_type]", 'sum', settings['axis_y_type'] == 'sum' || settings['axis_y_type'].blank?, :id => modul_uniq_id + '_chart_axis_y_type_sum', :class => 'serialize' %>
        <%= label_tag modul_uniq_id + '_chart_axis_y_type_sum', l(:label_page_module_chart_axis_y_sum), :class => 'inline' %>
        <%= select_tag "#{block_name}[axis_y_column]", options_from_collection_for_select(query.sumable_columns, 'name', 'caption', settings['axis_y_column']), :class => 'serialize' %>
      <% end %>
    </p>

    <%= toggling_fieldset( l(:label_additional_options), :collapsed => false) do %>
      <p>
        <%= label_tag modul_uniq_id + '_chart_y_label', l(:label_page_module_chart_y_label) %>
        <%= text_field_tag "#{block_name}[y_label]", settings['y_label'], class: 'serialize' %>
      </p>

      <% if query.sumable_columns.present? %>
        <p>
          <%= label_tag modul_uniq_id + '_chart_secondary_axis_y_column', l(:label_page_module_chart_axis_y2) %>
          <%= select_tag "#{block_name}[secondary_axis_y_column]", options_from_collection_for_select(query.sumable_columns, 'name', 'caption', settings['secondary_axis_y_column']), class: 'serialize', prompt: '(' + l(:label_none) + ')' %>
        </p>
      <% end %>

      <% if date_columns.any? %>
        <p>
          <%= label_tag "#{block_name}[period_column]", l(:label_page_module_chart_time_window) %>
          <%= select_tag "#{block_name}[period_column]", options_from_collection_for_select(date_columns, 'name', 'caption', settings['period_column']), prompt: '('+ l(:label_page_module_chart_time_window_disabled)+')', id: modul_uniq_id + 'chart_period_column', disabled: query.chart_grouped_by_date_column?, :class => 'serialize' %>
          <em id="<%= modul_uniq_id %>chart_period_disabled_label" style="<%= 'display: none' unless query.chart_grouped_by_date_column? %>"><%= l(:text_chart_period_disabled) %></em>
        </p>
        <p class="chart-options--period-zoom" style="<%= 'display: none;' unless settings['period_column'].presence || date_columns.detect{|c| c.name.to_s == settings['axis_x_column']} %>">
          <%= label_tag period_zoom_name, l(:label_page_module_default_period) %>
          <%= select_tag period_zoom_name, options_for_select(query.all_periods.collect{|period| [query_period_zoom_name(period), period]}, query.period_zoom), :class => 'serialize' %>
        </p>
      <% end %>
      <% if query.sumable_columns.present? %>
      <div class="chart-bar-options" style="<%= 'display: none' if settings['primary_renderer'] != 'bar' %>">
        <p>
          <%= label_tag "#{block_name}[bar_direction]", l(:label_page_module_chart_bar_direction) %>
          <%= select_tag "#{block_name}[bar_direction]", options_for_select([[l(:label_page_module_chart_bar_direction_vertical), 'vertical'], [l(:label_page_module_chart_bar_direction_horizontal), 'horizontal']], settings['bar_direction']), :class => 'serialize' %>
        </p>
        <p>
          <%= label_tag "#{block_name}[bar_limit]", l(:label_page_module_chart_bar_limit) %>
          <%= text_field_tag "#{block_name}[bar_limit]", settings['bar_limit'].to_i, class: 'serialize' %>
        </p>
      </div>
      <% end %>

      <div id="<%= modul_uniq_id %>_chart_legend_container" style="<%= 'display: none' if settings['primary_renderer'] != 'pie' %>">
        <p>
          <%= label_tag "#{block_name}[legend_enabled]", l('label_legend_enabled', :scope => [:charts]) %>
          <%= hidden_field_tag "#{block_name}[legend_enabled]", '0', :id => nil %>
          <%= check_box_tag "#{block_name}[legend_enabled]", '1', settings['legend_enabled'] == '1', :onchange => "$('##{modul_uniq_id}_chart_legend').toggle()", :class => 'serialize' %>
        </p>

        <div id="<%= modul_uniq_id %>_chart_legend" style="<%= 'display: none' if settings['legend_enabled'] != '1' %>">
          <p>
            <%= label_tag "#{block_name}[legend][location]", l('label_legend_location', :scope => [:charts]) %>
            <%= select_tag "#{block_name}[legend][location]", options_for_select([
                                                                                   [l('nw', :scope => [:charts, :legend, :location]), 'nw'],
                                                                                   [l('ne', :scope => [:charts, :legend, :location]), 'ne'],
                                                                                   [l('e', :scope => [:charts, :legend, :location]), 'e'],
                                                                                   [l('s', :scope => [:charts, :legend, :location]), 's']
                                                                                 ], settings['legend'] && settings['legend']['location']), :class => 'serialize' %>
          </p>
        </div>
      </div>
    <% end #toggling_fieldset %>
</div>
</div>

<% if page_module %>
  <%# render :partial => 'easy_queries/easy_query_chart', :locals => {:easy_query => query, :block_name => block_name, :settings => settings, :page_module => page_module, :autostart_chart_rendering => false} %>
<% end %>

<script type="text/javascript">
  $(function () {
    var date_columns = JSON.parse('<%= raw date_columns.collect{|c| c.name.to_s}.to_json %>');
    $("#<%= modul_uniq_id %>_chart_options_container input.chart_primary_renderer_type").change(function () {
      var el = $("#<%= modul_uniq_id %>_chart_options_container .chart-bar-options");
      el.toggle($(this).is(':checked') && $(this).val() === 'bar');
      var el = $("#<%= modul_uniq_id %>_chart_legend_container");
      el.toggle($(this).is(':checked') && $(this).val() === 'pie');

      $(document).trigger('erui_interface_change_vertical');
    });

    function set_axis_x_value(table_on, $group_by) {
      $axis_x_column = $('#<%= modul_uniq_id %>chart_axis_x_column');
      $disabled_notice = $('#<%= modul_uniq_id %>axis_x_disabled_label');
      if( table_on && $group_by.easymultiselect('getValue')[0] ) {
        $axis_x_column.prop('disabled', true);
        $axis_x_column.val( $group_by.easymultiselect('getValue')[0] );
        $disabled_notice.show();
        set_period_column_value( $group_by.easymultiselect('getValue')[0] );
      } else {
        $axis_x_column.prop('disabled', false);
        $disabled_notice.hide();
        set_period_column_value( $axis_x_column.val() );
      }
    };

    function set_period_column_value(axis_x_value) {
      $period_column = $('#<%= modul_uniq_id %>chart_period_column');
      $period_zoom = $('#<%= modul_uniq_id %>_chart_options_container .chart-options--period-zoom');
      $disabled_notice = $('#<%= modul_uniq_id %>chart_period_disabled_label');
      if( date_columns.indexOf( axis_x_value ) > -1 ) {
        $period_column.val( axis_x_value );
        $period_column.prop('disabled', true);
        $disabled_notice.show();
        $period_zoom.show();
      } else {
        if( $period_column.prop('disabled') ) {
          $period_column.val( '' );
          $period_zoom.hide();
        }
        $period_column.prop('disabled', false);
        $disabled_notice.hide();
      }
    }

    $('#<%= modul_uniq_id %>group_by').change(function(){
      set_axis_x_value( $("#<%= modul_uniq_id %>outputs_select .output_switch[value='list']").is(':checked'), $(this).find('input[type="text"]') );
    });
    $("#<%= modul_uniq_id %>outputs_select .output_switch[value='list']").change(function(){
      set_axis_x_value( $(this).is(':checked'), $('#<%= modul_uniq_id %>group_by input[type="text"]') );
    });
    $('#<%= modul_uniq_id %>chart_axis_x_column').change(function(evt){
      set_period_column_value( $(this).val() );
    });
    $('#<%= modul_uniq_id %>chart_period_column').change(function(evt){
      $('#<%= modul_uniq_id %>_chart_options_container .chart-options--period-zoom').toggle( $(this).val() !== '' );
    });
  });

</script>
