{% extends "template.html.twig" %}

{% block content %}
{% cache 'product' ~ product.id %}
    <div class="table-responsive">
        <table class='table table-hover'>
            <tr>
                <td class="align-middle font-weight-bold h3"><a class="text-warning text-decoration-none"
                                                                href="{{ path('app_star', {'productId': product.id}) }}">{% if product.starred %}★{% else %} ☆ {% endif %}</a></td>
                <td><img src='{{ product.image }}&width=150' class='border rounded p-1' alt='{{ product.name }}'/></td>
                <td>
                    <a href='{{ path('app_product', {'productId': product.id}) }}' class="text-decoration-none">{{ product.name }}</a>
                    <span class="badge text-bg-light">{{ product.subTitle }}</span>
                </td>
                <td>
                    <nav aria-label="breadcrumb" style="--bs-breadcrumb-divider: '>';">
                        <ol class="breadcrumb">
                            {% for category in product.categories %}
                                <li class="breadcrumb-item" aria-current="page"><a class="breadcrumb-item text-decoration-none"
                                                                                   href="{{ path('app_category', {'category': category}) }}">{{ category }}</a></li>
                            {% endfor %}
                        </ol>
                    </nav>
                </td>
                <td><a href='https://pl.ryobitools.eu/{{ product.url }}'>link</a></td>
            </tr>
            <tr>
                <td colspan="5">
                    <div style="width: 800px;">
                        <canvas id="price"></canvas>
                    </div>
                </td>
            </tr>
            <tr>
                <td colspan="5">
                    <table class='table table-hover table-sm mb-0'>
                        <thead>
                        <tr>
                            <th>price</th>
                            <th>lowest product price in 30 days</th>
                            <th colspan='2'>standard price</th>
                            <th>Stock</th>
                        </tr>
                        </thead>
                        {% for price in product.price %}
                            <tr>
                                <td>{{ price.price | format_currency('GBP', {}, 'en') }}</td>
                                <td>{{ price.lowestProductPrice30Days | format_currency('GBP', {}, 'en') }}</td>
                                <td>{{ price.productStandardPrice | format_currency('PLN', {}, 'pl') }}</td>
                                <td>{{ price.created_at }}</td>
                                <td>{{ (product.stock | findByCreatedAtDate(price.created_at | slice(0,10))).stock ?? '' }}</td>
                            </tr>
                        {% endfor %}
                    </table>
                </td>
            </tr>
        </table>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>

    <script>
        const ctx = document.getElementById('price').getContext('2d');

        new Chart(ctx, {
            type: 'line',
            data: {
                labels: ['{{ price_dates|raw }}'],
                datasets: [
                    {
                        label: 'Price (PLN)',
                        data: {{ price_list|raw }},
                        yAxisID: 'yPrice',
                        tension: 0.1,
                        borderWidth: 1
                    },
                    {
                        label: 'Stock (units)',
                        data: {{ stock_list|raw }},
                        yAxisID: 'yStock',
                        tension: 0.1,
                        borderWidth: 1
                    }
                ]
            },
            options: {
                spanGaps: false,
                responsive: true,
                animation: false,
                scales: {
                    x: {
                        title: {
                            display: true,
                            text: 'Date'
                        }
                    },
                    yPrice: {
                        type: 'linear',
                        position: 'left',
                        beginAtZero: true,
                        title: {
                            display: true,
                            text: 'Price (PLN)'
                        },
                        grid: {
                            drawOnChartArea: false
                        }
                    },
                    yStock: {
                        type: 'linear',
                        position: 'right',
                        beginAtZero: true,
                        title: {
                            display: true,
                            text: 'Stock (units)'
                        },
                        grid: {
                            drawOnChartArea: false
                        }
                    }
                },
                plugins: {
                    legend: {
                        display: true,
                        position: 'top'
                    },
                    title: {
                        display: true,
                        text: 'Price and Stock in time'
                    },
                }
            }
        });
    </script>
{% endcache %}
{% endblock %}