{% extends 'back.html.twig' %}

{% block title %} Email Log{% endblock %}

{% block stylesheets %}

{% endblock %}

{% block body %}

    <div class="app-content-header">
        <div class="container-fluid">
            <div class="row">
                <div class="col-sm-6"><h3 class="mb-0">Email Log</h3></div>
                <div class="col-sm-6">
                    <ol class="breadcrumb float-sm-end">
                        <li class="breadcrumb-item"><a href="{{ path('app_admin_dashboard') }}">Home</a></li>
                        <li class="breadcrumb-item active">Email Log</li>
                    </ol>
                </div>
            </div>
        </div>
    </div>

    <div class="app-content">
        <div class="container-fluid">
            <div class="row g-4">
                <div class="col-md-12">
                    <div class="card">
                        <div class="card-header with-border">
                            <h3 class="card-title" title="Email Log">Email Log (last 250 records)</h3>
                        </div>
                        <div class="card-body" style="overflow-x: auto;">
                            <table id="logs_table" class="table table-bordered table-striped">
                                <thead>
                                <tr>
                                    <th>Template</th>
                                    <th>Recipients</th>
                                    <th>Data</th>
                                    <th>Created Date</th>
                                    <th>Sent Date</th>
                                    <th>Status</th>
                                </tr>
                                </thead>
                                <tbody></tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>


{% endblock %}

{% block javascripts %}
    <script type="text/javascript">
        $('#logs_table').DataTable({
            "processing": true,
            "serverSide": false,
            "searching": false,
            "ajax": {
                url : '{{ path("api_logs_email") }}',
                type : 'post',
                data : function(data){}
            },
            "columns": [
                {
                    "data": "template",
                    "render": function ( data, type, full, meta ) {
                        var output =  full.template.replaceAll('_', ' ').toUpperCase();

                        return output;
                    }
                },
                {
                    "data": "recipients",
                    "render": function ( data, type, full, meta ) {
                        var output = "";

                        for (var i = 0; i < full.recipients.length; i++) {
                            output += '<div class="bd-callout bd-callout-info mb-3">';
                            output += '<p><code class="highlighter-rouge">Name:- </code>' + full.recipients[i].name + ' &nbsp;&nbsp;&nbsp; <code class="highlighter-rouge">Email:- </code>' + full.recipients[i].email + '</p>';
                            output += '</div>';
                        }

                        return output;
                    }
                },
                {
                    "data": "data",
                    "render": function ( data, type, full, meta ) {
                        var output = "";

                        for (const [key, value] of Object.entries(full.substitutions)) {
                            output += '<div class="bd-callout bd-callout-info mb-3">';
                            output += '<p><code class="highlighter-rouge">' + key + ':- </code>' + value + '</p>';
                            output += '</div>';
                        }

                        return output;
                    }
                },
                {
                    "data": "createdDate",
                    "render": function ( data, type, full, meta ) {
                        var output = full.addedOn;

                        return output;
                    }
                },
                {
                    "data": "sentDate",
                    "render": function ( data, type, full, meta ) {
                        var output = full.completedOn;

                        return output;
                    }
                },
                {
                    "data": "status",
                    "render": function ( data, type, full, meta ) {
                        var output = "NOT SENT";

                        if (full.status == true) {
                            output = "SENT";
                        }

                        return output;
                    }
                }
            ],
            error: function(xhr, status, error) {
                new Noty({
                    theme: 'metroui',
                    type: 'error',
                    text: "<strong>Error!</strong> Failed to Retrieve Invoice Data!",
                    timeout: 2000
                }).show();
            }
        });

    </script>
{% endblock %}