{% extends 'base.html.twig' %}
{% block title %}{% trans %}Printer Detail{% endtrans %}{% endblock %}

{% block body %}
    <div class="container">

        <div class="row">
            <div class="col-12">
                <div class="card">
                    <div class="card-header">
                        <h5>Printer Information</h5>
                    </div>
                    <div class="card-body">
                        <div class="row">
                            <div class="col-lg-9">
                                <dl class="row">
                                    <dt class="col-sm-2">ID</dt>
                                    <dd class="col-sm-4">{{ printer.id }} <a href="{{ path('printer_edit', {'id': printer.id}) }}" class="link-unstyled" title="{% trans %}Edit{% endtrans %}"> <i class="fas fa-edit"></i></a></dd>
                                    <dt class="col-sm-2">{% trans %}IP{% endtrans %}</dt>
                                    <dd class="col-sm-4">{{ printer.ip }} <a href="https://{{ printer.ip }}" class="link-unstyled" target="_blank" title="{% trans %}Open Web Interface{% endtrans %}"> <i class="fas fa-link"></i></a></dd>

                                    {% if snipeItInfo is not null %}
                                    <dt class="col-sm-2">{% trans %}AssetName{% endtrans %}</dt>
                                    <dd class="col-sm-4">{{ snipeItInfo.assetName }}</dd>
                                    <dt class="col-sm-2">{% trans %}AssetID{% endtrans %}</dt>
                                    <dd class="col-sm-4">{{ snipeItInfo.assetTag }} <a href="{{ snipeItUrl }}hardware/{{ snipeItInfo.assetId }}" class="link-unstyled" target="_blank" title="{% trans %}Open SnipeIT{% endtrans %}"> <i class="fas fa-link"></i></a></dd>
                                    {% endif %}

                                    <dt class="col-sm-2">{% trans %}Name{% endtrans %}</dt>
                                    <dd class="col-sm-4">{{ printer.name }}</dd>
                                    <dt class="col-sm-2">{% trans %}SerialNumber{% endtrans %}</dt>
                                    <dd class="col-sm-4">{{ printer.serialNumber }}</dd>

                                    <dt class="col-sm-2">{% trans %}Location{% endtrans %}</dt>
                                    <dd class="col-sm-4">{{ printer.location }}</dd>
                                    <dt class="col-sm-2">{% trans %}LastCheck{% endtrans %}</dt>
                                    <dd class="col-sm-4">{{ printer.lastCheck|date("d.m.Y H:i:s") }}</dd>

                                    <dt class="col-sm-2">{% trans %}Type{% endtrans %}</dt>
                                    <dd class="col-sm-4">{{ printer.type }}</dd>
                                    <dt class="col-sm-2">{% trans %}ColorPrinter{% endtrans %}</dt>
                                    <dd class="col-sm-4">{% if printer.isColorPrinter %}{% trans %}yes{% endtrans %}{% else %}{% trans %}no{% endtrans %}{% endif %}</dd>

                                    <dt class="col-sm-2">{% trans %}TotalPages{% endtrans %}</dt>
                                    <dd class="col-sm-10">{{ printer.totalPages }}</dd>

                                    <dt class="col-sm-2">{% trans %}Toner{% endtrans %}</dt>
                                    <dd class="col-sm-4">
                                        <span data-toggle="tooltip" title="{{ printer.tonerBlackDescription }}">
                                            <div class="progress mb-1" style="height: 20px;">
                                                <div class="progress-bar bg-black" role="progressbar" style="width: {{ printer.tonerblack }}%" aria-valuenow="{{ printer.tonerblack }}" aria-valuemin="0" aria-valuemax="100">
                                                    {{ printer.tonerblack }} %
                                                </div>
                                            </div>
                                        </span>
                                        {% if printer.iscolorprinter %}
                                        <span data-toggle="tooltip" title="{{ printer.tonerYellowDescription }}">
                                            <div class="progress mb-1">
                                                <div class="progress-bar bg-yellow" role="progressbar" style="width: {{ printer.toneryellow }}%" aria-valuenow="{{ printer.toneryellow }}" aria-valuemin="0" aria-valuemax="100">
                                                    {{ printer.toneryellow }} %
                                                </div>
                                            </div>
                                        </span>
                                        <span data-toggle="tooltip" title="{{ printer.tonerMagentaDescription }}">
                                            <div class="progress mb-1">
                                                <div class="progress-bar bg-magenta" role="progressbar" style="width: {{ printer.tonermagenta }}%" aria-valuenow="{{ printer.tonermagenta }}" aria-valuemin="0" aria-valuemax="100">
                                                    {{ printer.tonermagenta }} %
                                                </div>
                                            </div>
                                        </span>
                                        <span data-toggle="tooltip" title="{{ printer.tonerCyanDescription }}">
                                            <div class="progress">
                                                <div class="progress-bar bg-cyan" role="progressbar" style="width: {{ printer.tonercyan }}%" aria-valuenow="{{ printer.tonercyan }}" aria-valuemin="0" aria-valuemax="100">
                                                    {{ printer.tonercyan }} %
                                                </div>
                                            </div>
                                        </span>
                                        {% endif %}
                                    </dd>
                                    <dd class="col-sm-6"></dd>

                                    {% if printer.unreachableCount != 0 %}
                                    <dt class="col-sm-2">{% trans %}Unreachable{% endtrans %}</dt>
                                    <dd class="col-sm-10 text-danger">{% trans with  {'%c%': printer.unreachableCount} %}%c% times{% endtrans %}</dd>
                                    {% endif %}
                                </dl>
                            </div>
                            <div class="col-lg-3">
                                {{ getPrinterImage(printer.type)|raw }}
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="row mt-3">
            <div class="col-8">
                <div class="card h-100">
                    <div class="card-header">
                        <h5>{% trans %}Statistics{% endtrans %}</h5>
                    </div>
                    <div class="card-body">
                        <dl class="row">
                            <dt class="col-sm-3">{% trans %}Avg Pages per Day*:{% endtrans %}</dt>
                            <dd class="col-sm-3">{{ printerStatistic.avg30daysPages }}</dd>

                            <dt class="col-sm-3">{% trans %}Avg Black Usage*:{% endtrans %}</dt>
                            <dd class="col-sm-3">{{ printerStatistic.avg30daysBlackUsage|number_format(3) }}%</dd>
                        {% if printer.isColorPrinter %}
                            <dt class="col-sm-3 offset-6">{% trans %}Avg Yellow*:{% endtrans %}</dt>
                            <dd class="col-sm-3">{{ printerStatistic.avg30daysYellowUsage|number_format(3) }}%</dd>

                            <dt class="col-sm-3 offset-6">{% trans %}Avg Magenta*:{% endtrans %}</dt>
                            <dd class="col-sm-3">{{ printerStatistic.avg30daysMagentaUsage|number_format(3) }}%</dd>

                            <dt class="col-sm-3 offset-6">{% trans %}Avg Cyan*:{% endtrans %}</dt>
                            <dd class="col-sm-3">{{ printerStatistic.avg30daysCyanUsage|number_format(3) }}%</dd>
                        {% endif %}
                        </dl>

                        <small class="text-muted">{% trans %}* Notice - values based on 30 Days average.{% endtrans %}</small>
                    </div>
                </div>
            </div>
            <div class="col-4">
                <div class="card h-100">
                    <div class="card-header">
                        <h5>{{ 'Display'|trans }}</h5>
                    </div>
                    <div class="card-body">
                        <div class="pl-3 pr-3 pt-4 pb-4 bg-light text-muted">
                            <samp id="consoleDisplay">{{ printer.consoleDisplay }}</samp>
                        </div>
                        <a href="javascript:void(0)" id="getLiveDisplayBuffer" class="btn btn-default btn-block mt-3">
                            <i class="fas fa-sync"></i> {{ 'refresh'|trans }}
                        </a>
                        <div class="text-danger text-center" id="errorMessage"></div>
                    </div>
                </div>
            </div>
        </div>

        <!--{% if snipeItInfo is not null %}
        <div class="row mt-3">
            <div class="col-12">
                <div class="card">
                    <div class="card-header">
                        <h5>{% trans %}Asset Information{% endtrans %}</h5>
                    </div>
                    <div class="card-body">
                        xxx
                    </div>
                </div>
            </div>
        </div>
        {% endif %}-->

        <div class="row mt-3">
            <div class="col-12">
                <div class="card">
                    <div class="card-header">
                        <h5>{% trans %}Toner History{% endtrans %}</h5>
                    </div>
                    <div class="card-body">
                        <div class="col12">
                            <canvas id="chartToner" width="400" height="100"></canvas>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="row mt-3">
            <div class="col-12">
                <div class="card">
                    <div class="card-header">
                        <h5>{% trans %}TotalPage History{% endtrans %}</h5>
                    </div>
                    <div class="card-body">
                        <div class="col12">
                            <canvas id="chartPages" width="400" height="100"></canvas>
                        </div>
                    </div>
                </div>
            </div>
        </div>

    </div>
{% endblock %}

{% block stylesheets %}
    <style href="{{ asset('css/Chart.min.css') }}" rel="stylesheet"></style>
{% endblock %}
{% block javascripts %}
    <script src="{{ asset('js/Chart.bundle.min.js') }}" type="text/javascript"></script>

    <script type="text/javascript">
        $(document).ready(function () {
            $("[data-toggle=tooltip]").tooltip();
        });

        label = [];
        pagesData = [];
        tonerDataBlack = [];
        tonerDataYellow = [];
        tonerDataCyan = [];
        tonerDataMagenta = [];
        tonerDatasets = [];

        {%  for history in printerHistory %}
        label.push('{{ history.Timestamp|date("d.m.Y") }}');
        pagesData.push({{ history.TotalPages }});
        tonerDataBlack.push({{ history.TonerBlack }});
        {% if printer.isColorPrinter %}
        tonerDataCyan.push({{ history.TonerCyan }});
        tonerDataMagenta.push({{ history.TonerMagenta }});
        tonerDataYellow.push({{ history.TonerYellow }});
        {% endif %}
        {% endfor %}


        _black = {
            "label":"{% trans %}Black{% endtrans %}",
            "data":tonerDataBlack,
            "fill":false,
            "borderColor":"black",
            "lineTension":0.1
        };
        tonerDatasets.push(_black);

        {% if printer.isColorPrinter %}
        _yellow = {
            "label":"{% trans %}Yellow{% endtrans %}",
            "data":tonerDataYellow,
            "fill":false,
            "borderColor":"yellow",
            "lineTension":0.1
        };
        tonerDatasets.push(_yellow);
        _cyan = {
            "label":"{% trans %}Cyan{% endtrans %}",
            "data":tonerDataCyan,
            "fill":false,
            "borderColor":"cyan",
            "lineTension":0.1
        };
        tonerDatasets.push(_cyan);
        _magenta = {
            "label":"{% trans %}Magenta{% endtrans %}",
            "data":tonerDataMagenta,
            "fill":false,
            "borderColor":"magenta",
            "lineTension":0.1
        };
        tonerDatasets.push(_magenta);
        {% endif %}

        dataToner = {
            "labels": label.reverse(),
            "datasets": tonerDatasets
        };

        dataPages = {
            "labels":label.reverse(),
            "datasets":[
                {
                    "label":"{% trans %}Total Pages{% endtrans %}",
                    "data":pagesData,
                    "fill":false,
                    "borderColor":"black",
                    "lineTension":0.1
                }]
        };

        ctT = document.getElementById('chartToner').getContext('2d');
        chartToner = new Chart(ctT, {
            type: 'line',
            data: dataToner,
            options: {
                scales: {
                    yAxes:[{
                        ticks: {
                            min: 0,
                            max: 100,
                            stepSize: 10,
                        }
                    }]
                }
            }
        });

        ctP = document.getElementById('chartPages').getContext('2d');
        chartPages = new Chart(ctP, {
            type: 'line',
            data: dataPages,
            options: {legend: false}
        });

        $('#getLiveDisplayBuffer').click(function () {
            $('#consoleDisplay').html('<div class="text-center"><i class="fas fa-spinner fa-pulse"></i> {{'loading ...'|trans}}</div>');
            $('#errorMessage').html('');

            $.getJSON('{{ path('api_request_single_value', {'id': printer.id, 'value': 'consoleDisplayBuffer'}) }}', function (data) {
                $('#consoleDisplay').html( (data.status == 200) ? data.result : '{{ printer.consoleDisplay }}' );
                $('#errorMessage').html(data.errorMessage);
            }).fail(function () {
                $('#errorMessage').html( '{{ 'could not get information'|trans }}' );
            });
        });
    </script>
{% endblock %}