{% extends request.ajax ? 'layout_blank.html.twig' : 'layout_default.html.twig' %}

{% import 'macro_functions.html.twig' as mf %}
{% block meta_title %}{{ 'Email'|trans }}{% endblock %}

{% block breadcrumbs %}
    <ul class="breadcrumb">
        <li class="breadcrumb-item">
            <a href="{{ '/'|alink }}">
                <svg class="icon">
                    <use xlink:href="#home" />
                </svg>
            </a>
        </li>
        <li class="breadcrumb-item">
            <a href="{{ 'system'|alink }}">{{ 'Settings'|trans }}</a>
        </li>
        <li class="breadcrumb-item active" aria-current="page">{{ 'Email'|trans }}</li>
    </ul>
{% endblock %}

{% set active_menu = 'system' %}
{% block content %}
    {% set params = admin.extension_config_get({ 'ext': 'mod_email' }) %}
    <div class="card-tabs">

        <ul class="nav nav-tabs" role="tablist">
            <li class="nav-item" role="presentation">
                <a class="nav-link active" href="#tab-index" data-bs-toggle="tab">{{ 'Email templates'|trans }}</a>
            </li>
            <li class="nav-item" role="presentation">
                <a class="nav-link" href="#tab-new" data-bs-toggle="tab">
                    <svg class="icon me-2">
                        <use xlink:href="#plus" />
                    </svg>
                    {{ 'New template'|trans }}
                </a>
            </li>
            <li class="nav-item" role="presentation">
                <a class="nav-link" href="#tab-queue" data-bs-toggle="tab">{{ 'Email queue'|trans }}</a>
            </li>
            <li class="nav-item" role="presentation">
                <a class="nav-link" href="#tab-email" data-bs-toggle="tab">{{ 'Email settings'|trans }}</a>
            </li>
        </ul>
        <div class="card">
            <div class="tab-content">
                <div class="tab-pane fade show active" id="tab-index" role="tabpanel">

                    <div class="card-footer text-center">
                        <a href="{{ 'api/admin/email/batch_template_generate'|link }}" class="btn btn-primary api-link" data-api-reload="1">
                            <svg class="icon icon-tabler" width="24" height="24">
                                <use xlink:href="#mail" />
                            </svg>
                            <span>{{ 'Regenerate templates'|trans }}</span>
                        </a>
                        <a href="{{ 'api/admin/email/batch_template_enable'|link }}" class="btn btn-primary api-link" data-api-msg="{{ 'All email templates enabled'|trans }}">
                            <svg class="icon icon-tabler" width="24" height="24">
                                <use xlink:href="#play" />
                            </svg>
                            <span>{{ 'Enable all'|trans }}</span>
                        </a>
                        <a href="{{ 'api/admin/email/batch_template_disable'|link }}" class="btn btn-primary api-link" data-api-msg="{{ 'All email templates disabled'|trans }}">
                            <svg class="icon icon-tabler" width="24" height="24">
                                <use xlink:href="#close" />
                            </svg>
                            <span>{{ 'Disable all'|trans }}</span>
                        </a>
                    </div>
                    {{ include('partial_search.html.twig') }}
                    <div class="table-responsive">
                        <table class="table card-table table-vcenter table-striped text-nowrap sortable">
                            <thead>
                            <tr>
                                <th class="w-1">{{ 'Subject'|trans }}</th>
                                <th>{{ 'Extension'|trans }}</th>
                                <th>{{ 'Code'|trans }}</th>
                                <th>{{ 'Enabled'|trans }}</th>
                                <th class="w-1"></th>
                            </tr>
                            </thead>

                            <tbody>
                            {% set templates = admin.email_template_get_list({ 'per_page': 100, 'page': request.page }|merge(request)) %}
                            {% for i, template in templates.list %}
                                <tr>
                                    <td>
                                        <a href="{{ '/email/template'|alink }}/{{ template.id }}">{{ template.subject }}</a>
                                    </td>
                                    <td>{{ template.category }}</td>
                                    <td>{{ template.action_code }}</td>
                                    <td>
                                        {% if template.enabled == 1 %}
                                            <span class="badge bg-success me-1"></span>
                                        {% endif %}
                                        {% if template.enabled == 0 %}
                                            <span class="badge bg-danger me-1"></span>
                                        {% endif %}
                                        {{ mf.q(template.enabled) }}
                                    </td>
                                    <td>
                                        <a class="btn btn-icon" href="{{ '/email/template'|alink }}/{{ template.id }}"
                                           data-bs-toggle="tooltip" data-bs-title="{{ 'Edit'|trans }}">
                                            <svg class="icon">
                                                <use xlink:href="#edit" />
                                            </svg>
                                        </a>
                                        <a class="btn btn-icon api-link"
                                           href="{{ 'api/admin/email/template_delete'|link({ 'id': template.id }) }}"
                                           data-api-confirm="{{ 'Are you sure?'|trans }}"
                                           data-api-confirm-content="{{ 'Are you sure you want to delete this template?'|trans }}"
                                           data-api-type="danger"
                                           data-api-confirm-btn="{{ 'Delete'|trans }}"
                                           data-api-reload="1"
                                           data-bs-toggle="tooltip" data-bs-title="{{ 'Delete'|trans }}">
                                            <svg class="icon">
                                                <use xlink:href="#delete" />
                                            </svg>
                                        </a>
                                    </td>
                                </tr>
                            {% else %}
                                <tr>
                                    <td class="text-muted" colspan="5">{{ 'The list is empty. Depending on modules enabled email templates will be inserted after first event occurrence.'|trans }}</td>
                                </tr>
                            {% endfor %}
                            </tbody>
                        </table>
                    </div>
                </div>

                <div class="tab-pane fade" id="tab-new" role="tabpanel">
                    <form method="post" action="{{ 'api/admin/email/template_create'|link }}" class="api-form" data-api-reload="1">
                        <div class="card-body">
                            <h3 class="card-title">{{ 'Where I can use new email template?'|trans }}</h3>
                            <p class="card-subtitle">{{ 'Newly created email templates can be used in custom event hooks.'|trans }}</p>

                            <div class="mb-3 row">
                                <label class="col-md-3 form-label">{{ 'Enabled'|trans }}</label>
                                <div class="col-md-6">
                                    <div class="form-check form-check-inline">
                                        <input class="form-check-input" id="radioEnabledYes" type="radio" name="enabled" value="1">
                                        <label class="form-check-label" for="radioEnabledYes">{{ 'Yes'|trans }}</label>
                                    </div>
                                    <div class="form-check form-check-inline">
                                        <input class="form-check-input" id="radioEnabledNo" type="radio" name="enabled" value="0" checked>
                                        <label class="form-check-label" for="radioEnabledNo">{{ 'No'|trans }}</label>
                                    </div>
                                </div>
                            </div>
                            <div class="mb-3 row">
                                <label class="col-md-3 col-form-label">{{ 'Category'|trans }}</label>
                                <div class="col-md-6">
                                    <input class="form-control" type="text" name="category" value="{{ requests.category }}" required placeholder="General">
                                </div>
                            </div>
                            <div class="mb-3 row">
                                <label class="col-md-3 col-form-label">{{ 'Action code'|trans }}</label>
                                <div class="col-md-6">
                                    <input class="form-control" type="text" name="action_code" value="{{ requests.action_code }}" required>
                                </div>
                            </div>
                            <div class="mb-3 row">
                                <label class="col-md-3 col-form-label">{{ 'Subject'|trans }}</label>
                                <div class="col-md-6">
                                    <input class="form-control" type="text" name="subject" value="{{ requests.subject }}" required>
                                </div>
                            </div>
                            <div class="mb-3 row">
                                <label class="col-md-3 col-form-label">{{ 'Content'|trans }}</label>
                                <div class="col-md-6">
                                    <textarea class="form-control" name="content" rows="5">{{ requests.content }}</textarea>
                                </div>
                            </div>
                        </div>
                        <div class="card-footer text-end">
                            <input type="submit" value="{{ 'Create'|trans }}" class="btn btn-primary">
                        </div>
                    </form>
                </div>

                <div class="tab-pane fade show" id="tab-queue" role="tabpanel">
                    {{ include('partial_search.html.twig') }}
                    <div class="ms-1 mt-1 mb-1">
                        <p>{{ 'FOSSBilling queues emails to have them be sent via cron in the background. Here you may find the list of queued emails and how many times the system has tried to send them.'|trans }}</p>
                        <p>{{ 'Emails that have been sent or that failed to be sent will not be listed here.'|trans }}</p>
                    </div>
                    <div class="table-responsive">
                        <table class="table card-table table-vcenter table-striped text-nowrap sortable">
                            <thead>
                            <tr>
                                <th class="w-1">{{ 'Subject'|trans }}</th>
                                <th>{{ 'To'|trans }}</th>
                                <th>{{ 'To (Email)'|trans }}</th>
                                <th>{{ 'Status'|trans }}</th>
                                <th>{{ 'Tries'|trans }}</th>
                                <th>{{ 'Created at'|trans }}</th>
                                <th>{{ 'Updated at'|trans }}</th>
                            </tr>
                            </thead>
                            <tbody>
                            {% set queue = admin.email_get_queue({ 'per_page': 100, 'page': request.page }|merge(request)) %}
                            {% for i, queuedEmail in queue.list %}
                                <tr>
                                    <td>
                                        {{ queuedEmail.subject }}
                                    </td>
                                    <td>
                                        {{ queuedEmail.to_name }}
                                    </td>
                                    <td>
                                        <a href="mailto:{{ queuedEmail.recipient }}"> {{ queuedEmail.recipient }}</a>
                                    </td>
                                    <td>
                                        {% if queuedEmail.status == 'unsent' %}
                                            <span class="badge bg-danger me-1"></span>
                                        {% else %}
                                            <span class="badge bg-success me-1"></span>
                                        {% endif %}
                                        <span class="text-capitalize">{{ queuedEmail.status }}</span>
                                    </td>
                                    <td>
                                        {{ queuedEmail.tries }} / {{ params.cancel_after|default('5') }}
                                    </td>
                                    <td>
                                        {{ queuedEmail.created_at|format_date }}
                                    </td>
                                    <td>
                                        {{ queuedEmail.updated_at|format_date }}
                                    </td>
                                </tr>
                            {% else %}
                                <tr>
                                    <td class="text-muted" colspan="5">{{ 'The list is empty.'|trans }}</td>
                                </tr>
                            {% endfor %}
                            </tbody>
                        </table>
                    </div>
                </div>

                <div class="tab-pane fade" id="tab-email" role="tabpanel">
                    <form method="post" action="{{ 'api/admin/extension/config_save'|link }}" class="api-form" data-api-msg="{{ 'Email settings updated'|trans }}">
                        <div class="card-body">
                            <h3 class="card-title">{{ 'Configure email options'|trans }}</h3>
                            <p class="card-subtitle">{{ 'FOSSBilling sends emails using <em>sendmail</em> by default or you can configure your own SMTP server'|trans|raw }}</p>

                            <div class="mb-3 row">
                                <label class="col-md-3 col-form-label">{{ 'Queue options'|trans }}</label>
                                <div class="col-md-6">
                                    <div class="mb-2">
                                        <small class="form-hint">{{ 'Send emails per cron run (0 = unlimited)'|trans }}</small>
                                        <input class="form-control" type="text" name="queue_once" placeholder="0" value="{{ params.queue_once|default('0') }}">
                                    </div>
                                    <div class="mb-2">
                                        <small class="form-hint">{{ 'Max email sending time in minutes (0 = unlimited, default 5 min.)'|trans }}</small>
                                        <input class="form-control" type="text" name="time_limit" placeholder="5" value="{{ params.time_limit|default('5') }}">
                                    </div>
                                    <div class="mb-2">
                                        <small class="form-hint">{{ 'Cancel sending email after unsuccessful tries (0 = do not cancel)'|trans }}</small>
                                        <input class="form-control" type="text" name="cancel_after" placeholder="5" value="{{ params.cancel_after|default('5') }}">
                                    </div>
                                </div>
                            </div>
                            <div class="mb-3 row">
                                <label class="col-md-3 form-label">{{ 'Log sent emails to database'|trans }}</label>
                                <div class="col-md-6">
                                    <div class="form-check form-check-inline">
                                        <input class="form-check-input" id="radioLogEnabledYes" type="radio" name="log_enabled" value="1"{% if params.log_enabled %} checked{% endif %}>
                                        <label class="form-check-label" for="radioLogEnabledYes">{{ 'Yes'|trans }}</label>
                                    </div>
                                    <div class="form-check form-check-inline">
                                        <input class="form-check-input" id="radioLogEnabledNo" type="radio" name="log_enabled" value="0"{% if not params.log_enabled %} checked{% endif %}>
                                        <label class="form-check-label" for="radioLogEnabledNo">{{ 'No'|trans }}</label>
                                    </div>
                                </div>
                            </div>
                            <div class="mb-3 row">
                                <label class="col-md-3 form-label">{{ 'Email transport'|trans }}</label>
                                <div class="col-md-6" id="mailer">
                                    <div class="form-check form-check-inline">
                                        <input class="form-check-input" id="radioSendMail" type="radio" name="mailer" value="sendmail"{% if params.mailer == 'sendmail' or not params.mailer %} checked{% endif %}>
                                        <label class="form-check-label" for="radioSendMail">{{ 'SendMail'|trans }}</label>
                                    </div>
                                    <div class="form-check form-check-inline">
                                        <input class="form-check-input" id="radioSMTP" type="radio" name="mailer" value="smtp"{% if params.mailer == 'smtp' %} checked{% endif %}>
                                        <label class="form-check-label" for="radioSMTP">{{ 'SMTP'|trans }}</label>
                                    </div>
                                    <div class="form-check form-check-inline">
                                        <input class="form-check-input" id="radioSendGrid" type="radio" name="mailer" value="sendgrid"{% if params.mailer == 'sendgrid' %} checked{% endif %}>
                                        <label class="form-check-label" for="radioSendGrid">{{ 'SendGrid'|trans }}</label>
                                    </div>
                                    <div class="form-check form-check-inline">
                                        <input class="form-check-input" id="radioCustom" type="radio" name="mailer" value="custom"{% if params.mailer == 'custom' %} checked{% endif %}>
                                        <label class="form-check-label" for="radioCustom">{{ 'Custom'|trans }}</label>
                                    </div>
                                </div>
                            </div>

                            <fieldset class="smtp"{% if params.mailer != 'smtp' %} style="display:none;"{% endif %} >
                                <div class="mb-3 row">
                                    <label class="col-md-3 col-form-label">{{ 'SMTP Hostname'|trans }}</label>
                                    <div class="col-md-6">
                                        <input class="form-control" type="text" name="smtp_host" value="{{ params.smtp_host }}" placeholder="smtp.gmail.com">
                                    </div>
                                </div>
                                <div class="mb-3 row">
                                    <label class="col-md-3 col-form-label">{{ 'SMTP Port'|trans }}</label>
                                    <div class="col-md-6">
                                        <input class="form-control" type="text" name="smtp_port" value="{{ params.smtp_port }}" placeholder="587">
                                    </div>
                                </div>
                                <div class="mb-3 row">
                                    <label class="col-md-3 col-form-label">{{ 'SMTP Username'|trans }}</label>
                                    <div class="col-md-6">
                                        <input class="form-control" type="text" name="smtp_username" value="{{ params.smtp_username }}" placeholder="my.email@gmail.com">
                                    </div>
                                </div>
                                <div class="mb-3 row">
                                    <label class="col-md-3 col-form-label">{{ 'SMTP Password'|trans }}</label>
                                    <div class="col-md-6">
                                        <input class="form-control" type="password" name="smtp_password" value="{{ params.smtp_password }}">
                                    </div>
                                </div>
                            </fieldset>

                            <fieldset class="sendgrid"{% if params.mailer != 'sendgrid' %} style="display:none;"{% endif %} >
                                <div class="mb-3 row">
                                    <label class="col-md-3 col-form-label">{{ 'SendGrid API Key'|trans }}</label>
                                    <div class="col-md-6">
                                        <input class="form-control" type="text" name="sendgrid_key" value="{{ params.sendgrid_key }}">
                                    </div>
                                </div>
                            </fieldset>

                            <fieldset class="custom"{% if params.mailer != 'custom' %} style="display:none;"{% endif %} >
                                <div class="mb-3 row">
                                    <label class="col-md-3 col-form-label" for="custom_dsn">{{ 'Custom DSN'|trans }}</label>
                                    <div class="col-md-6">
                                        <p>{{"If none of the available options exactly meet your needs, you can define a custom DSN. Please keep in mind that usernames, passwords, and hostnames with special characters need to be URL-encoded."|trans}}</p>
                                        <p>{{"More information"|trans}}: <a href="https://symfony.com/doc/current/mailer.html#using-built-in-transports">{{"Symfony Documentation"}}</a></p>
                                        <p class="fw-light">{{"Example"|trans}}: smtp://user:pass@smtp.example.com?verify_peer=0</p>
                                        <input class="form-control" type="text" name="custom_dsn" value="{{ params.custom_dsn }}">
                                    </div>
                                </div>
                            </fieldset>
                        </div>

                        <input type="hidden" name="ext" value="mod_email">
                        <div class="card-footer d-flex justify-content-between">
                            <button class="btn btn-secondary" id="emailTest">
                                <svg class="icon">
                                    <use xlink:href="#wifi" />
                                </svg>
                                {{ 'Send a test email to yourself'|trans }}
                            </button>
                            <input type="submit" value="{{ 'Update email settings'|trans }}" class="btn btn-primary">
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
{% endblock %}

{% block js %}
<script>
$(function() {
    $('#emailTest').on('click', function() {
        API.admin.post('email/send_test', {}, function(result) {
            FOSSBilling.message("{{ 'Email was successfully sent'|trans }}");
        },
        function(result){
            FOSSBilling.message(result.message, 'error');
        });

        return false;
    });

    $("#mailer input").on('click', function() {
        if ($(this).val() == 'smtp') {
            $('fieldset.smtp').slideDown();
        } else {
            $('fieldset.smtp').slideUp();
        }

        if ($(this).val() == 'sendgrid') {
            $('fieldset.sendgrid').slideDown();
        } else {
            $('fieldset.sendgrid').slideUp();
        }

        if ($(this).val() == 'custom') {
            $('fieldset.custom').slideDown();
        } else {
            $('fieldset.custom').slideUp();
        }
    });
});
</script>
{% endblock %}
