{{ header }}{{ column_left }}
<div id="content">
  <div class="page-header">
    <div class="container-fluid">
      <div class="float-end">
        <button type="button" id="button-send" class="btn btn-primary"><i class="fa-solid fa-envelope"></i> {{ button_send }}</button></div>
      <h1>{{ heading_title }}</h1>
      <ol class="breadcrumb">
        {% for breadcrumb in breadcrumbs %}
          <li class="breadcrumb-item"><a href="{{ breadcrumb.href }}">{{ breadcrumb.text }}</a></li>
        {% endfor %}
      </ol>
    </div>
  </div>
  <div class="container-fluid">
    <div class="card">
      <div class="card-header"><i class="fa-solid fa-envelope"></i> {{ text_mail }}</div>
      <div class="card-body">
        <form>
          <div class="row mb-3">
            <label for="input-store" class="col-sm-2 col-form-label">{{ entry_store }}</label>
            <div class="col-sm-10">
              <select name="store_id" id="input-store" class="form-select">
                <option value="0">{{ text_default }}</option>
                {% for store in stores %}
                  <option value="{{ store.store_id }}">{{ store.name }}</option>
                {% endfor %}
              </select>
            </div>
          </div>
          <div class="row mb-3">
            <label for="input-to" class="col-sm-2 col-form-label">{{ entry_to }}</label>
            <div class="col-sm-10">
              <select name="to" id="input-to" class="form-select">
                <option value="newsletter">{{ text_newsletter }}</option>
                <option value="customer_all">{{ text_customer_all }}</option>
                <option value="customer_group">{{ text_customer_group }}</option>
                <option value="customer">{{ text_customer }}</option>
                <option value="affiliate_all">{{ text_affiliate_all }}</option>
                <option value="affiliate">{{ text_affiliate }}</option>
                <option value="product">{{ text_product }}</option>
              </select>
            </div>
          </div>
          <div class="row mb-3 to" id="to-customer-group">
            <label for="input-customer-group" class="col-sm-2 col-form-label">{{ entry_customer_group }}</label>
            <div class="col-sm-10">
              <select name="customer_group_id" id="input-customer-group" class="form-select">
                {% for customer_group in customer_groups %}
                  <option value="{{ customer_group.customer_group_id }}">{{ customer_group.name }}</option>
                {% endfor %}
              </select>
            </div>
          </div>
          <div class="row mb-3 to" id="to-customer">
            <label class="col-sm-2 col-form-label">{{ entry_customer }}</label>
            <div class="col-sm-10">
              <input type="text" name="customers" value="" placeholder="{{ entry_customer }}" id="input-customer" data-oc-target="autocomplete-customer" class="form-control" autocomplete="off"/>
              <ul id="autocomplete-customer" class="dropdown-menu"></ul>
              <div class="form-control p-0" style="height: 150px; overflow: auto;">
                <table id="mail-customer" class="table m-0">
                  <tbody></tbody>
                </table>
              </div>
              <div class="form-text">{{ help_customer }}</div>
            </div>
          </div>
          <div class="row mb-3 to" id="to-affiliate">
            <label class="col-sm-2 col-form-label">{{ entry_affiliate }}</label>
            <div class="col-sm-10">
              <input type="text" name="affiliates" value="" placeholder="{{ entry_affiliate }}" id="input-affiliate" data-oc-target="autocomplete-affiliate" class="form-control" autocomplete="off"/>
              <ul id="autocomplete-affiliate" class="dropdown-menu"></ul>
              <div class="form-control p-0" style="height: 150px; overflow: auto;">
                <table id="mail-affiliate" class="table m-0">
                  <tbody></tbody>
                </table>
              </div>
              <div class="form-text">{{ help_affiliate }}</div>
            </div>
          </div>
          <div class="row mb-3 to" id="to-product">
            <label class="col-sm-2 col-form-label">{{ entry_product }}</label>
            <div class="col-sm-10">
              <input type="text" name="products" value="" placeholder="{{ entry_product }}" id="input-product" data-oc-target="autocomplete-product" class="form-control" autocomplete="off"/>
              <ul id="autocomplete-product" class="dropdown-menu"></ul>
              <div class="form-control p-0" style="height: 150px; overflow: auto;">
                <table id="mail-product" class="table m-0">
                  <tbody></tbody>
                </table>
              </div>
              <div class="form-text">{{ help_product }}</div>
            </div>
          </div>
          <div class="row mb-3 required">
            <label for="input-subject" class="col-sm-2 col-form-label">{{ entry_subject }}</label>
            <div class="col-sm-10">
              <input type="text" name="subject" value="" placeholder="{{ entry_subject }}" id="input-subject" class="form-control"/>
              <div id="error-subject" class="invalid-feedback"></div>
            </div>
          </div>
          <div class="row mb-3 required">
            <label for="input-message" class="col-sm-2 col-form-label">{{ entry_message }}</label>
            <div class="col-sm-10">
              <div id="input-message">
                <textarea name="message" placeholder="{{ entry_message }}" data-oc-toggle="ckeditor" data-lang="{{ ckeditor }}" class="form-control"></textarea>
                <div id="error-message" class="invalid-feedback"></div>
              </div>
            </div>
          </div>
        </form>
      </div>
    </div>
  </div>
</div>
<script type="text/javascript"><!--
$('#input-to').on('change', function () {
    $('.to').hide();

    $('#to-' + this.value.replaceAll('_', '-')).show();
});

$('#input-to').trigger('change');

// Customers
$('#input-customer').autocomplete({
    'source': function (request, response) {
        $.ajax({
            url: 'index.php?route=customer/customer.autocomplete&user_token={{ user_token }}&filter_name=' + encodeURIComponent(request),
            dataType: 'json',
            success: function (json) {
                response($.map(json, function (item) {
                    return {
                        label: item['name'],
                        value: item['customer_id']
                    }
                }));
            },
            error: function (xhr, ajaxOptions, thrownError) {
                console.log(thrownError + "\r\n" + xhr.statusText + "\r\n" + xhr.responseText);
            }
        });
    },
    'select': function (item) {
        $('#input-customer').val('');

        $('#mail-customer-' + item['value']).remove();

        html = '<tr id="mail-customer-' + item['value'] + '">';
        html += '  <td>' + item['label'] + '<input type="hidden" name="customer[]" value="' + item['value'] + '"/></td>';
        html += '  <td class="text-end"><button type="button" class="btn btn-danger"><i class="fa-solid fa-minus-circle"></i></button></td>';
        html += '</tr>';

        $('#mail-customer tbody').append(html);
    }
});

$('#mail-customer').on('click', '.btn', function () {
    $(this).parent().parent().remove();
});

// Affiliates
$('#input-affiliate').autocomplete({
    'source': function (request, response) {
        $.ajax({
            url: 'index.php?route=customer/customer.autocomplete&user_token={{ user_token }}&filter_name=' + encodeURIComponent(request) + '&filter_affiliate=1',
            dataType: 'json',
            success: function (json) {
                response($.map(json, function (item) {
                    return {
                        label: item['name'],
                        value: item['customer_id']
                    }
                }));
            },
            error: function (xhr, ajaxOptions, thrownError) {
                console.log(thrownError + "\r\n" + xhr.statusText + "\r\n" + xhr.responseText);
            }
        });
    },
    'select': function (item) {
        $('#input-affiliate').val('');

        $('#mail-affiliate-' + item['value']).remove();

        html = '<tr id="mail-affiliate-' + item['value'] + '">';
        html += '  <td>' + item['label'] + '<input type="hidden" name="affiliate[]" value="' + item['value'] + '"/></td>';
        html += '  <td class="text-end"><button type="button" class="btn btn-danger"><i class="fa-solid fa-minus-circle"></i></button></td>';
        html += '</tr>';

        $('#mail-affiliate tbody').append(html);
    }
});

$('#input-affiliate').on('click', '.btn', function () {
    $(this).parent().parent().remove();
});

// Products
$('#input-product').autocomplete({
    'source': function (request, response) {
        $.ajax({
            url: 'index.php?route=catalog/product.autocomplete&user_token={{ user_token }}&filter_name=' + encodeURIComponent(request),
            dataType: 'json',
            success: function (json) {
                response($.map(json, function (item) {
                    return {
                        label: item['name'],
                        value: item['product_id']
                    }
                }));
            },
            error: function (xhr, ajaxOptions, thrownError) {
                console.log(thrownError + "\r\n" + xhr.statusText + "\r\n" + xhr.responseText);
            }
        });
    },
    'select': function (item) {
        $('#input-product').val('');

        $('#mail-product-' + item['value']).remove();

        html = '<tr id="mail-product-' + item['value'] + '">';
        html += '  <td>' + item['label'] + '<input type="hidden" name="product[]" value="' + item['value'] + '"/></td>';
        html += '  <td class="text-end"><button type="button" class="btn btn-danger"><i class="fa-solid fa-minus-circle"></i></button></td>';
        html += '</tr>';

        $('#mail-product tbody').append(html);
    }
});

$('#mail-product').on('click', '.btn', function () {
    $(this).parent().parent().remove();
});

$('textarea[data-oc-toggle=\'ckeditor\']').ckeditor({
    language: '{{ ckeditor }}'
});

$('#button-send').on('click', function () {
    var element = this;

    $(element).button('loading');

    for (instance in CKEDITOR.instances) {
        CKEDITOR.instances[instance].updateElement();
    }

    var next = 'index.php?route=marketing/contact.send&user_token={{ user_token }}';

    var send = function () {
        return $.ajax({
            url: next,
            type: 'post',
            data: $('#content form').serialize(),
            dataType: 'json',
            success: function (json) {
                console.log(json);

                $('.invalid-feedback').removeClass('d-block');

                if (json['error']) {
                    if (json['error']['warning']) {
                        $('#alert').prepend('<div class="alert alert-danger alert-dismissible"><i class="fa-solid fa-circle-exclamation"></i> ' + json['error']['warning'] + ' <button type="button" class="btn-close" data-bs-dismiss="alert"></button></div>');
                    }

                    for (key in json['error']) {
                        $('#input-' + key.replaceAll('_', '-')).addClass('is-invalid').find('.form-control, .form-select, .form-check-input, .form-check-label').addClass('is-invalid');
                        $('#error-' + key.replaceAll('_', '-')).html(json['error'][key]).addClass('d-block');
                    }

                    $(element).button('reset');
                }

                if (json['text']) {
                    $('#alert').prepend('<div class="alert alert-success alert-dismissible"><i class="fa-solid fa-check-circle-circle"></i> ' + json['text'] + ' <button type="button" class="btn-close" data-bs-dismiss="alert"></button></div>');
                }

                if (json['success']) {
                    $('#alert').prepend('<div class="alert alert-success alert-dismissible"><i class="fa-solid fa-check-circle-circle"></i> ' + json['success'] + ' <button type="button" class="btn-close" data-bs-dismiss="alert"></button></div>');

                    $(element).button('reset');
                }

                if (json['next']) {
                    next = json['next'];

                    chain.attach(send);
                }
            },
            error: function (xhr, ajaxOptions, thrownError) {
                console.log(thrownError + "\r\n" + xhr.statusText + "\r\n" + xhr.responseText);

                $(element).button('reset');
            }
        });
    };

    chain.attach(send);
});
//--></script>
{{ footer }}