{{ header }}{{ column_left }}
<div id="content"> 
  <div class="page-header">
    <div class="container-fluid">
      <div class="pull-right">
        <button type="submit" form="form-setting" data-toggle="tooltip" title="{{ button_save }}" class="btn btn-primary">
          <i class="fa fa-save"></i>
        </button>
        <a href="{{ cancel }}" data-toggle="tooltip" title="{{ button_cancel }}" class="btn btn-default">
          <i class="fa fa-reply"></i>
        </a>
      </div>
      <h1>{{ heading_title }}</h1>
      <ul class="breadcrumb">
        {% for breadcrumb in breadcrumbs %}
          <li>
            <a href="{{ breadcrumb.href }}">{{ breadcrumb.text }}</a>
          </li>
        {% endfor %}
      </ul>
    </div>
  </div>
  <div class="container-fluid">
    {% if error_warning %}
      <div class="alert alert-danger alert-dismissible">
        <i class="fa fa-exclamation-circle"></i>
        {{ error_warning }}
        <button type="button" class="close" data-dismiss="alert">&times;</button>
      </div>
    {% endif %}
    {% if success %}
      <script>
        usNotify('success', '{{ success }}');
      </script>
    {% endif %}
    <div class="panel panel-default">
      <div class="panel-heading">
        <h3 class="panel-title">
          <i class="fa fa-pencil"></i>
          {{ text_edit }}
        </h3>
      </div>
      <div class="panel-body">
        <ul class="nav nav-tabs">
          <li class="active">
            <a href="#tab-settings" data-toggle="tab">{{ tab_settings }}</a>
          </li>
          <li>
            <a href="#tab-email-templates" data-toggle="tab">{{ tab_email_templates }}</a>
          </li>
          <li>
            <a href="#tab-requests" data-toggle="tab">{{ tab_requests }}</a>
          </li>
          <li>
            <a href="#tab-logs" data-toggle="tab">{{ tab_logs }}</a>
          </li>
        </ul>
        <div class="tab-content">
          <div class="tab-pane active" id="tab-settings">
            <form action="{{ action }}" method="post" enctype="multipart/form-data" id="form-setting" class="form-horizontal">
              
              <div class="form-group">
                <div class="col-sm-12">
                  <label class="col-sm-2 control-label" for="oct_price_tracker_status">{{ entry_status }}</label>
                  <div class="col-sm-10">
                    <div class="toggle-group">
                      <input type="checkbox" name="oct_price_tracker_status" {% if oct_price_tracker_status %} checked="checked" {% endif %} id="oct_price_tracker_status" tabindex="1">
                      <label for="oct_price_tracker_status"></label>
                      <div class="onoffswitch pull-left" aria-hidden="true">
                        <div class="onoffswitch-label">
                          <div class="onoffswitch-inner"></div>
                          <div class="onoffswitch-switch"></div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>

              <div id="all_settings" {% if (oct_price_tracker_status is not defined or (oct_price_tracker_status is defined and not oct_price_tracker_status)) %} style="display:none" {% endif %}>
                
                <div class="form-group">
                  <div class="col-sm-12">
                    <label class="col-sm-2 control-label" for="customer_name_status">{{ entry_customer_name }}</label>
                    <div class="col-sm-10">
                      <div class="toggle-group">
                        <input type="checkbox" name="oct_price_tracker_data[customer_name]" {% if oct_price_tracker_data.customer_name %} checked="checked" {% endif %} id="customer_name_status" tabindex="1">
                        <label for="customer_name_status"></label>
                        <div class="onoffswitch pull-left" aria-hidden="true">
                          <div class="onoffswitch-label">
                            <div class="onoffswitch-inner"></div>
                            <div class="onoffswitch-switch"></div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>

                <div class="form-group">
                  <div class="col-sm-12">
                    <label class="col-sm-2 control-label" for="phone_status">{{ entry_phone }}</label>
                    <div class="col-sm-10">
                      <div class="toggle-group">
                        <input type="checkbox" name="oct_price_tracker_data[phone]" {% if oct_price_tracker_data.phone %} checked="checked" {% endif %} id="phone_status" tabindex="1">
                        <label for="phone_status"></label>
                        <div class="onoffswitch pull-left" aria-hidden="true">
                          <div class="onoffswitch-label">
                            <div class="onoffswitch-inner"></div>
                            <div class="onoffswitch-switch"></div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>

                <div class="form-group">
                  <div class="col-sm-12">
                    <label class="col-sm-2 control-label" for="notify_on_edit">{{ entry_notify_on_edit }}</label>
                    <div class="col-sm-10">
                      <div class="toggle-group">
                        <input type="checkbox" name="oct_price_tracker_data[notify_on_edit]" {% if oct_price_tracker_data.notify_on_edit %} checked="checked" {% endif %} id="notify_on_edit" tabindex="1">
                        <label for="notify_on_edit"></label>
                        <div class="onoffswitch pull-left" aria-hidden="true">
                          <div class="onoffswitch-label">
                            <div class="onoffswitch-inner"></div>
                            <div class="onoffswitch-switch"></div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>

                <div class="form-group">
                  <div class="col-sm-12">
                    <label class="col-sm-2 control-label" for="cron_secret">
                      <span data-toggle="tooltip" title="{{ help_cron_secret }}">{{ entry_cron_secret }}</span>
                    </label>
                    <div class="col-sm-10{% if error_message.cron_secret %}  has-error{% endif %}">
                      <input type="text" name="oct_price_tracker_data[cron_secret]" value="{{ oct_price_tracker_data.cron_secret }}" id="cron_secret" class="form-control"/>
                      {% if error_message.cron_secret %}
                        <div class="text-danger">{{ error_message.cron_secret }}</div>
                      {% endif %}
                    </div>
                  </div>
                </div>

                {% if cron_url %}
                  <div class="form-group">
                    <div class="col-sm-12">
                      <label class="col-sm-2 control-label" for="input-cron">
                        <span data-toggle="tooltip" title="{{ help_cron_url }}">{{ entry_cron_url }}</span>
                      </label>
                      <div class="col-sm-10">
                        <div class="input-group">
                          <input type="text" value="/usr/bin/wget -O - -q -t 1 '{{ cron_url }}'" id="input-cron" class="form-control" readonly="">
                          <span class="input-group-btn">
                            <button id="clipboard-button" class="btn btn-info" type="button" data-toggle="tooltip" title="" onclick="copyToClipboard('input-cron');" data-original-title="{{ text_copy }}">
                              <i class="fa fa-files-o" aria-hidden="true"></i>
                            </button>
                          </span>
                        </div>
                      </div>
                    </div>
                  </div>
                {% endif %}

              </div>
            </form>
          </div>

          <div class="tab-pane" id="tab-email-templates">
            <div class="form-group">
              <div class="col-sm-12">
                <label class="col-sm-2 control-label" for="custom_message">{{ entry_custom_template }}</label>
                <div class="col-sm-10">
                  <div class="toggle-group">
                    <input type="checkbox" name="oct_price_tracker_data[custom_message]" {% if oct_price_tracker_data.custom_message %} checked="checked" {% endif %} id="custom_message" tabindex="1" form="form-setting">
                    <label for="custom_message"></label>
                    <div class="onoffswitch pull-left" aria-hidden="true">
                      <div class="onoffswitch-label">
                        <div class="onoffswitch-inner"></div>
                        <div class="onoffswitch-switch"></div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <hr/>
            <div id="email-template-section" style="{% if not oct_price_tracker_data.custom_message %}display: none;{% endif %}">
              <fieldset>
                <legend>{{ text_email_heading }}</legend>
                <label class="col-sm-2 control-label" style="padding-top:80px;text-align:left;">
                  {{ text_shortcodes }}<br>
                  <small>
                    [product_name]<br>
                    [customer_name]<br>
                    [old_price]<br>
                    [new_price]<br>
                    [product_url]<br>
                    [store_name]
                  </small>
                </label>
                <div class="col-sm-10">
                  <div class="form-group" style="padding-top:0;padding-bottom:0;">
                    <ul class="nav nav-tabs" id="oct_price_tracker_email_template">
                      {% for language in languages %}
                        <li>
                          <a href="#oct_price_tracker_email_template{{ language.language_id }}" data-toggle="tab">
                            <img src="language/{{ language.code }}/{{ language.code }}.png" title="{{ language.name }}"/>
                            {{ language.name }}
                          </a>
                        </li>
                      {% endfor %}
                    </ul>
                  </div>
                  <div class="tab-content">
                    {% for language in languages %}
                      <div class="tab-pane" id="oct_price_tracker_email_template{{ language.language_id }}">
                        <div class="form-group">
                          <div class="input-group{% if (error_message.subject[language['language_id']] is defined) %} has-error{% endif %}">
                            <span class="input-group-addon">{{ text_subject }}</span>
                            <input type="text" name="oct_price_tracker_data[subject][{{ language['language_id'] }}]" value="{{ oct_price_tracker_data.subject[language.language_id] is defined ? oct_price_tracker_data.subject[language.language_id] : '' }}" placeholder="{{ text_subject }}" class="form-control" form="form-setting"/>
                          </div>
                          {% if (error_message.subject[language['language_id']] is defined) %}
                            <div class="text-danger">{{ error_message.subject[language['language_id']] }}</div>
                          {% endif %}
                        </div>
                        <div class="form-group">
                          <textarea id="oct_price_tracker_data_message_{{ language.language_id }}" data-toggle="summernote" data-lang="{{ summernote }}" name="oct_price_tracker_data[message][{{ language.language_id }}]" rows="5" placeholder="{{ text_message }}" class="form-control" form="form-setting">{{ oct_price_tracker_data.message[language.language_id] is defined ? oct_price_tracker_data.message[language.language_id] : '' }}</textarea>
                          {% if (error_message.message[language['language_id']] is defined) %}
                            <div class="text-danger">{{ error_message.message[language['language_id']] }}</div>
                          {% endif %}
                        </div>
                      </div>
                    {% endfor %}
                  </div>
                </div>
              </fieldset>
            </div>
          </div>

          <script>
          $('#custom_message').on('change', function() {
              if ($(this).is(':checked')) {
                  $('#email-template-section').show();
              } else {
                  $('#email-template-section').hide();
              }
          });
          </script>

          <div class="tab-pane" id="tab-requests">
            <div class="row">
              <div class="col-sm-12">
                <form action="{{ action }}" method="GET" id="filter-requests-form" class="form-horizontal">
                  <div class="form-group"></div>
                  <div class="form-group col-sm-6">
                    <label class="col-sm-4" for="filter_email">{{ text_filter_email }}</label>
                    <div class="col-sm-8">
                      <input type="text" name="filter_email" value="{{ filter_email }}" id="filter_email" class="form-control"/>
                    </div>
                  </div>

                  <div class="form-group col-sm-6">
                    <label class="col-sm-4" for="filter_product">{{ text_filter_product }}</label>
                    <div class="col-sm-8">
                      <input type="text" name="filter_product" value="{{ filter_product }}" id="filter_product" class="form-control"/>
                    </div>
                  </div>

                  <div class="form-group col-sm-6">
                    <label class="col-sm-4" for="filter_customer">{{ text_filter_customer }}</label>
                    <div class="col-sm-8">
                      <input type="text" name="filter_customer" value="{{ filter_customer }}" id="filter_customer" class="form-control"/>
                    </div>
                  </div>

                  <div class="form-group col-sm-6">
                    <label class="col-sm-4" for="filter_status">{{ text_filter_status }}</label>
                    <div class="col-sm-8">
                      <select name="filter_status" id="filter_status" class="form-control">
                        <option value="">{{ text_all }}</option>
                        <option value="pending" {{ filter_status == 'pending' ? 'selected="selected"' : '' }}>{{ text_status_pending }}</option>
                        <option value="sent" {{ filter_status == 'sent' ? 'selected="selected"' : '' }}>{{ text_status_sent }}</option>
                      </select>
                    </div>
                  </div>

                  <input type="hidden" name="user_token" value="{{ user_token }}"/>
                  <div class="form-group col-sm-6">
                    <button type="submit" class="btn btn-primary">{{ button_filter }}</button>
                  </div>
                </form>
              </div>
            </div>

            {% if requests %}
              <hr>
              <div class="btn-group">
                <button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown" aria-expanded="false" disabled id="deleteButton">
                  <i class="fa fa-trash-o"></i>
                  {{ button_delete_selected }}
                  <span class="caret"></span>
                </button>
                <ul class="dropdown-menu" role="menu">
                  <li>
                    <a onclick="deleteAllSelected();">{{ button_delete_selected }}</a>
                  </li>
                </ul>
              </div>
              <br/><br/>
              <div class="table-responsive" id="requests">
                <table class="table table-bordered table-hover">
                  <thead>
                    <tr>
                      <th class="text-center">
                        <input type="checkbox" onclick="$('input[name*=\'selected\']').prop('checked', this.checked);checkCheckBoxes();"/>
                      </th>
                      <th>{{ text_customer_info }}</th>
                      <th>{{ text_product_name }}</th>
                      <th>{{ text_current_price }}</th>
                      <th>{{ text_date_created }}</th>
                      <th>{{ text_status }}</th>
                      <th></th>
                    </tr>
                  </thead>
                  <tbody>
                    {% for request in requests %}
                      <tr {% if request.status == 'sent' %} style="background-color: #D5F4C7;" {% endif %}>
                        <td style="text-align: center;">
                          <input type="checkbox" name="selected[]" value="{{ request.request_id }}"/>
                        </td>
                        <td>
                          {% if request.user_link %}
                            <a href="{{ request.user_link }}" target="_blank">{{ request.customer_name_full ? request.customer_name_full : request.customer_name }}</a><br/>
                          {% else %}
                            {{ request.customer_name }}<br/>
                          {% endif %}
                          <p class="small">{{ request.email }}</p>
                          {% if request.phone %}
                            <p class="small">{{ request.phone }}</p>
                          {% endif %}
                        </td>
                        <td>
                          <a href="{{ request.product_link }}" target="_blank">{{ request.product_name }}</a>
                          <br/>
                          <small class="text-muted">
                            <span class="label label-info"> {{ text_language_request }}
                              <img src="language/{{ request.language_info.code }}/{{ request.language_info.code }}.png" alt="{{ request.language_info.name }}" style="width: 16px; height: 11px; margin-right: 3px;"/>
                              {{ request.language_info.name }}
                            </span>
                          </small>
                        </td>
                        <td>
                          {{ request.current_price_formatted }}
                          <br/>
                          <small class="text-muted">
                            <span class="label label-default"> {{ text_currency_request }}
                              {% if request.currency_info.symbol_left or request.currency_info.symbol_right %}
                                {{ request.currency_info.symbol_left }}{{ request.currency_info.symbol_right }} {{ request.currency_info.code }}
                              {% else %}
                                {{ request.currency_info.code }}
                              {% endif %}
                            </span>
                          </small>
                        </td>
                        <td>{{ request.date_created }}</td>
                        <td>
                          {% if request.status == 'sent' %}
                            <span class="label label-success">{{ text_status_sent }}</span>
                          {% else %}
                            <span class="label label-default">{{ text_status_pending }}</span>
                          {% endif %}
                        </td>
                        <td class="text-center">
                          <a onclick="deleteSelected({{ request.request_id }});" data-toggle="tooltip" title="" class="btn btn-warning" data-original-title="{{ button_delete }}">
                            <i class="fa fa-trash-o"></i>
                          </a>
                        </td>
                      </tr>
                    {% else %}
                      <tr>
                        <td colspan="7">{{ text_no_requests }}</td>
                      </tr>
                    {% endfor %}
                  </tbody>
                </table>
              </div>
            {% else %}
              <div class="alert alert-warning">
                <i class="fa fa-exclamation-circle"></i>
                {{ text_no_results }}
              </div>
            {% endif %}

            {% if pagination %}
              <div class="row">
                <div class="col-sm-6 text-left">
                  <div class="pagination">
                    <div class="links">{{ pagination }}</div>
                  </div>
                </div>
                <div class="col-sm-6 text-right">
                  <div class="results">{{ results }}</div>
                </div>
              </div>
            {% endif %}
          </div>

          <div class="tab-pane" id="tab-logs">
            <div class="row">
              <div class="col-sm-12">
                <form action="{{ action }}" method="GET" id="filter-logs-form" class="form-horizontal">
                  <div class="form-group"></div>
                  <div class="form-group col-sm-6">
                    <label class="col-sm-4" for="filter_log_email">{{ text_filter_email }}</label>
                    <div class="col-sm-8">
                      <input type="text" name="filter_log_email" value="{{ filter_log_email }}" id="filter_log_email" class="form-control"/>
                    </div>
                  </div>

                  <div class="form-group col-sm-6">
                    <label class="col-sm-4" for="filter_log_product">{{ text_filter_product }}</label>
                    <div class="col-sm-8">
                      <input type="text" name="filter_log_product" value="{{ filter_log_product }}" id="filter_log_product" class="form-control"/>
                    </div>
                  </div>

                  <div class="form-group col-sm-6">
                    <label class="col-sm-4" for="filter_log_status">{{ text_filter_log_status }}</label>
                    <div class="col-sm-8">
                      <select name="filter_log_status" id="filter_log_status" class="form-control">
                        <option value="">{{ text_all }}</option>
                        <option value="success" {{ filter_log_status == 'success' ? 'selected="selected"' : '' }}>{{ text_log_status_success }}</option>
                        <option value="failed" {{ filter_log_status == 'failed' ? 'selected="selected"' : '' }}>{{ text_log_status_failed }}</option>
                      </select>
                    </div>
                  </div>

                  <input type="hidden" name="user_token" value="{{ user_token }}"/>
                  <div class="form-group col-sm-6">
                    <button type="submit" class="btn btn-primary">{{ button_filter }}</button>
                  </div>
                </form>
              </div>
            </div>

            {% if logs %}
              <hr>
              <div class="table-responsive" id="logs">
                <table class="table table-bordered table-hover">
                  <thead>
                    <tr>
                      <th>{{ text_customer_info }}</th>
                      <th>{{ text_product_name }}</th>
                      <th>{{ text_old_price }}</th>
                      <th>{{ text_new_price }}</th>
                      <th>{{ text_price_change }}</th>
                      <th>{{ text_date_sent }}</th>
                      <th>{{ text_status }}</th>
                    </tr>
                  </thead>
                  <tbody>
                    {% for log in logs %}
                      <tr {% if log.status == 'failed' %} style="background-color: #f2dede;" {% endif %}>
                        <td>
                          {{ log.customer_name }}<br/>
                          <p class="small">{{ log.email }}</p>
                        </td>
                        <td><a href="{{ log.product_link }}" target="_blank">{{ log.product_name }}</a></td>
                        <td>{{ log.old_price_formatted }}</td>
                        <td>{{ log.new_price_formatted }}</td>
                        <td>
                          {% if log.price_change_percent > 0 %}
                            <span style="color: red;">{{ log.price_change_sign }}{{ log.price_change_formatted }} (+{{ log.price_change_percent }}%)</span>
                          {% elseif log.price_change_percent < 0 %}
                            <span style="color: green;">{{ log.price_change_formatted }} ({{ log.price_change_percent }}%)</span>
                          {% else %}
                            <span>{{ log.price_change_formatted }}</span>
                          {% endif %}
                        </td>
                        <td>{{ log.date_sent }}</td>
                        <td>
                          {% if log.status == 'success' %}
                            <span class="label label-success">{{ text_log_status_success }}</span>
                          {% else %}
                            <span class="label label-danger">{{ text_log_status_failed }}</span>
                          {% endif %}
                        </td>
                      </tr>
                    {% else %}
                      <tr>
                        <td colspan="7">{{ text_no_logs }}</td>
                      </tr>
                    {% endfor %}
                  </tbody>
                </table>
              </div>
            {% else %}
              <div class="alert alert-warning">
                <i class="fa fa-exclamation-circle"></i>
                {{ text_no_results }}
              </div>
            {% endif %}

            {% if log_pagination %}
              <div class="row">
                <div class="col-sm-6 text-left">
                  <div class="pagination">
                    <div class="links">{{ log_pagination }}</div>
                  </div>
                </div>
                <div class="col-sm-6 text-right">
                  <div class="results">{{ log_results }}</div>
                </div>
              </div>
            {% endif %}
          </div>

        </div>
      </div>
    </div>
  </div>
</div>

<script>
$(document).ready(function() {
    let urlParams = new URLSearchParams(window.location.search);
    
    if(urlParams.get('tab') === 'requests' || urlParams.has('page')) {
        $('.nav-tabs li:eq(2) a').tab('show'); 
    } else if(urlParams.get('tab') === 'logs' || urlParams.has('log_page')) {
        $('.nav-tabs li:eq(3) a').tab('show');
    }
});

$('#oct_price_tracker_status').change(function() {
  let $input = $(this);

  if ($input.is(":checked")) {
    $("#all_settings").slideDown('slow');
  } else {
    $("#all_settings").slideUp('slow');
  }
});

$('#language a:first').tab('show');
$('#oct_price_tracker_email_template a:first').tab('show');

document.getElementById('filter-requests-form').addEventListener('submit', function(e) {
    e.preventDefault();

    let action = 'index.php?route=octemplates/module/oct_price_tracker&tab=requests&user_token={{ user_token }}';
    
    let email = encodeURIComponent(document.getElementById('filter_email').value);
    let product = encodeURIComponent(document.getElementById('filter_product').value);
    let customer = encodeURIComponent(document.getElementById('filter_customer').value);
    let status = encodeURIComponent(document.getElementById('filter_status').value);
    
    window.location.href = action + '&filter_email=' + email + '&filter_product=' + product + '&filter_customer=' + customer + '&filter_status=' + status;
});

document.getElementById('filter-logs-form').addEventListener('submit', function(e) {
    e.preventDefault();

    let action = 'index.php?route=octemplates/module/oct_price_tracker&tab=logs&user_token={{ user_token }}';
    
    let email = encodeURIComponent(document.getElementById('filter_log_email').value);
    let product = encodeURIComponent(document.getElementById('filter_log_product').value);
    let status = encodeURIComponent(document.getElementById('filter_log_status').value);
    
    window.location.href = action + '&filter_log_email=' + email + '&filter_log_product=' + product + '&filter_log_status=' + status;
});

const baseUrl = 'index.php?route=octemplates/module/oct_price_tracker/';
const userToken = '{{ user_token }}';

function sendRequest(type, action, data = {}) {
    $.ajax({
        type: type,
        url: `${baseUrl}${action}&user_token=${userToken}`,
        data: data,
        dataType: 'json',
        cache: false,
        success: function(json) {
           window.location.href = `index.php?route=octemplates/module/oct_price_tracker&tab=requests&user_token=${userToken}`;
        },
        error: function(xhr, status, error) {
            console.error('AJAX Error:', status, error);
        }
    });
}

function deleteSelected(request_id) {
  if (confirm('{{ text_confirm }}')) {
    sendRequest('post', `deleteSelected&delete=${request_id}`);
  }
}

function deleteAllSelected() {
  if (confirm('{{ text_confirm }}')) {
    const checkedInputs = $('#requests input[type=\'checkbox\']:checked');
    sendRequest('post', 'deleteAllSelected', checkedInputs);
  }
}

function checkCheckBoxes() {
    if ($('input[name="selected[]"]:checked').length > 0) {
        $('#deleteButton').removeAttr('disabled');
    } else {
        $('#deleteButton').attr('disabled', 'disabled');
    }
}

$('input[name="selected[]"]').change(function() {
    checkCheckBoxes();
});

function copyToClipboard(inputId) {
    let input = document.getElementById(inputId);
    input.select();
    document.execCommand('copy');

    let button = document.getElementById('clipboard-button');
    let icon = button.querySelector('i');

    changeButtonState(button, icon, '#5cb85c', 'fa-check', 'fa-files-o');

    setTimeout(() => {
        changeButtonState(button, icon, '', 'fa-files-o', 'fa-check');
    }, 5000);
}

function changeButtonState(button, icon, bgColor, addIconClass, removeIconClass) {
    button.style.backgroundColor = bgColor;
    icon.classList.remove(removeIconClass);
    icon.classList.add(addIconClass);
}
</script>
{{ footer }}