{{ 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_info }}
				<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-subscribers" data-toggle="tab">{{ tab_subscribers }}</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">
							<!-- Settings Form Here -->
							<div class="form-group">
								<div class="col-sm-12">
									<label class="col-sm-2 control-label" for="oct_stock_notifier_status">{{ entry_status }}</label>
									<div class="col-sm-10">
										<div class="toggle-group">
											<input type="checkbox" name="oct_stock_notifier_status" {% if oct_stock_notifier_status %} checked="checked" {% endif %} id="oct_stock_notifier_status" tabindex="1">
											<label for="oct_stock_notifier_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_stock_notifier_status is not defined or (oct_stock_notifier_status is defined and not oct_stock_notifier_status)) %} style="display:none" {% endif %}>
								<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_stock_notifier_data[notify_on_edit]" {% if oct_stock_notifier_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="admin_alert">{{ entry_admin_alert }}</label>
										<div class="col-sm-10">
											<div class="toggle-group">
												<input type="checkbox" name="oct_stock_notifier_data[admin_alert]" {% if oct_stock_notifier_data.admin_alert %} checked="checked" {% endif %} id="admin_alert" tabindex="1">
												<label for="admin_alert"></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="email">
											<span data-toggle="tooltip" title="{{ help_email }}">{{ entry_email }}</span>
										</label>
										<div class="col-sm-10{% if error_message.email %}  has-error{% endif %}">
											<input type="text" name="oct_stock_notifier_data[email]" value="{{ oct_stock_notifier_data.email }}" id="email" class="form-control"/>
											{% if error_message.email %}
												<div class="text-danger">{{ error_message.email }}</div>
											{% endif %}
										</div>
									</div>
								</div>
								<div class="form-group">
									<div class="col-sm-12">
										<label class="col-sm-2 control-label" for="input-name">{{ entry_name }}</label>
										<div class="col-sm-10">
											<select name="oct_stock_notifier_data[name]" id="input-name" class="form-control">
												{% if oct_stock_notifier_data.name == 1 %}
													<option value="1" selected="selected">{{ text_enabled }}</option>
													<option value="2">{{ text_enabled_required }}</option>
													<option value="0">{{ text_disabled }}</option>
												{% elseif oct_stock_notifier_data.name == 2 %}
													<option value="1">{{ text_enabled }}</option>
													<option value="2" selected="selected">{{ text_enabled_required }}</option>
													<option value="0">{{ text_disabled }}</option>
												{% else %}
													<option value="1">{{ text_enabled }}</option>
													<option value="2">{{ text_enabled_required }}</option>
													<option value="0" selected="selected">{{ text_disabled }}</option>
												{% endif %}
											</select>
										</div>
									</div>
								</div>
								<div class="form-group">
									<div class="col-sm-12">
										<label class="col-sm-2 control-label" for="input-phone">{{ entry_phone }}</label>
										<div class="col-sm-10">
											<select name="oct_stock_notifier_data[phone]" id="input-phone" class="form-control">
												{% if oct_stock_notifier_data.phone == 1 %}
													<option value="1" selected="selected">{{ text_enabled }}</option>
													<option value="2">{{ text_enabled_required }}</option>
													<option value="0">{{ text_disabled }}</option>
												{% elseif oct_stock_notifier_data.phone == 2 %}
													<option value="1">{{ text_enabled }}</option>
													<option value="2" selected="selected">{{ text_enabled_required }}</option>
													<option value="0">{{ text_disabled }}</option>
												{% else %}
													<option value="1">{{ text_enabled }}</option>
													<option value="2">{{ text_enabled_required }}</option>
													<option value="0" selected="selected">{{ text_disabled }}</option>
												{% endif %}
											</select>
										</div>
									</div>
								</div>
								<div class="form-group">
									<div class="col-sm-12">
										<label class="col-sm-2 control-label" for="input-mask">{{ entry_mask }}</label>
										<div class="col-sm-10">
											<input type="text" name="oct_stock_notifier_data[mask]" value="{{ oct_stock_notifier_data['mask'] }}" placeholder="{{ entry_mask_info }}" id="input-mask" class="form-control"/>
										</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="{{ entry_cron_secret }}">{{ entry_cron_secret }}</span>
										</label>
										<div class="col-sm-10">
											<input type="text" name="oct_stock_notifier_data[cron_secret]" value="{{ oct_stock_notifier_data.cron_secret }}" id="cron_secret" class="form-control"/>
										</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="{{ entry_cron_input }}">{{ entry_cron }}</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>
						</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_status }}</label>
									<div class="col-sm-10">
										<div class="toggle-group">
											<input type="checkbox" name="oct_stock_notifier_data[custom_message]" {% if oct_stock_notifier_data.custom_message %} checked="checked" {% endif %} id="custom_message" tabindex="1">
											<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/>
							<fieldset>
								<legend>{{ text_email_heading }}</legend>
								<label class="col-sm-2 control-label" style="padding-top:80px;text-align:left;">
									{{ entry_email_codes }}
								</label>
								<div class="col-sm-10">
									<div class="form-group" style="padding-top:0;padding-bottom:0;">
										<ul class="nav nav-tabs" id="oct_stock_notifier_email_template">
											{% for language in languages %}
												<li>
													<a href="#oct_stock_notifier_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_stock_notifier_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_notify_subject }}</span>
														<input type="text" name="oct_stock_notifier_data[subject][{{ language['language_id'] }}]" value="{{ oct_stock_notifier_data.subject[language.language_id] is defined ? oct_stock_notifier_data.subject[language.language_id] : '' }}" placeholder="{{ text_notify_subject }}" class="form-control"/>
													</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_stock_notifier_data_message_{{ language.language_id }}" data-toggle="summernote" data-lang="{{ summernote }}" name="oct_stock_notifier_data[message][{{ language.language_id }}]" rows="5" placeholder="{{ entry_product_dop_tab_text }}" class="form-control">{{ oct_stock_notifier_data.message[language.language_id] is defined ? oct_stock_notifier_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>
						</form>
					</div>
					<div class="tab-pane" id="tab-subscribers">
						<!-- Виводимо список підписників -->
						<div class="row">
							<div class="col-sm-12">
								<form action="{{ action }}" method="GET" id="filter-stock-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_phone">{{ text_filter_phone }}</label>
										<div class="col-sm-8">
											<input type="text" name="filter_phone" value="{{ filter_phone }}" id="filter_phone" 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="0" {{ filter_status == '0' ? 'selected="selected"' : '' }}>{{ text_status_pending }}</option>
												<option value="1" {{ filter_status == '1' ? 'selected="selected"' : '' }}>{{ text_status_processed }}</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 subscribers %}
							<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="subscribers">
								<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_email }}</th>
											<th>{{ text_phone }}</th>
											<th>{{ text_product_name }}</th>
											<th>{{ text_subscribed_date }}</th>
											<th>{{ text_notified_date }}</th>
											<th>{{ text_status }}</th>
											<th></th>
										</tr>
									</thead>
									<tbody>
										{% for subscriber in subscribers %}
											<tr {% if subscriber.status %} style="background-color: #D5F4C7;" {% endif %}>
												<td style="text-align: center;"><input type="checkbox" name="selected[]" value="{{ subscriber.subscription_id }}"/></td>
												<td>
													{% if subscriber.user_link %}
														<a href="{{ subscriber.user_link }}" target="_blank">{{ subscriber.customer_name }}</a><br/>
													{% else %}
														{{ subscriber.customer_name }}<br/>
													{% endif %}
													<p class="small">{{ subscriber.email }}</p>
												</td>
												<th>
													<p class="small">{{ subscriber.phone }}</p>
												</th>
												<td>
													<a href="{{ subscriber.product_link }}" target="_blank">{{ subscriber.product_name }}</a>
												</td>
												<td>{{ subscriber.subscribed_date }}</td>
												<td>{{ subscriber.notified_date }}</td>
												<td>{{ subscriber.status ? text_status_processed : text_status_pending }}</td>
												<td class="text-center">
													<a onclick="deleteSelected({{ subscriber.subscription_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="5">{{ text_no_subscribers }}</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>
			</div>
		</div>
	</div>
</div>

<script>
$(document).ready(function() {
    let urlParams = new URLSearchParams(window.location.search);
    
    if(urlParams.get('tab') === 'subscribers' || urlParams.has('page')) {
        $('.nav-tabs li:eq(2) a').tab('show'); 
    }
});
$('#oct_stock_notifier_status').change(function() {
	let $input = $(this);

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

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

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

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

const baseUrl = 'index.php?route=octemplates/module/oct_stock_notifier/';
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_stock_notifier&tab=subscribers&user_token=${userToken}`;
        },
        error: function(xhr, status, error) {
            console.error('AJAX Error:', status, error);
        }
    });
}

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

function deleteAllSelected() {
	if (confirm('{{ text_confirm }}')) {
		const checkedInputs = $('#subscribers 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);
}
$('#oct_stock_notifier_email_template a:first').tab('show');
</script>
{{ footer }}