{% extends 'admin/admin_base_new.html.twig' %}

{% block title %}Anasayfa{% endblock %}

{% block breadcrumb %}
    <div class="page-title d-flex flex-column justify-content-center flex-wrap me-3">
        <h1 class="page-heading d-flex text-gray-900 fw-bold fs-3 flex-column justify-content-center my-0">Anasayfa</h1>
    </div>
{% endblock %}

{% block body %}
    <div class="row g-5 gx-xl-10 mb-5 mb-xl-10">
        <div class="col-xl-12">
{#            <div id="kt_apexchart_stat" class="h-350px"></div>#}
            <div class="ajax-content h-100">
                <div class="ajax-counter" data-url="{{ path('admin_widget_counter') }}"></div>
            </div>
        </div>
{#        <div class="col-xl-4">#}
{#            <div class="ajax-content h-100">#}
{#                <div class="ajax-counter" data-url="{{ path('admin_widget_counter') }}"></div>#}
{#            </div>#}
{#        </div>#}
    </div>
{#    <div class="row g-5 gx-xl-10 mb-5 mb-xl-10">#}
{#        <div class="col-xl-4">#}
{#            <div class="card card-xl-stretch mb-5 mb-xl-8">#}
{#                <div class="card-header align-items-center mt-4">#}
{#                    <h3 class="card-title align-items-start flex-column">#}
{#                        <span class="fw-bold text-gray-900">Onay Bekleyen Yorumlar</span>#}
{#                    </h3>#}
{#                </div>#}
{#                <div class="card-body pt-3 overflow-y-auto h-400px">#}
{#                    <div class="ajax-pending-reviews" data-url="{{ path('admin_widget_pending_reviews') }}"></div>#}
{#                </div>#}
{#            </div>#}
{#        </div>#}
{#        <div class="col-xl-4">#}
{#            <div class="card card-xl-stretch mb-xl-8 new-customer-reviews">#}
{#                <div class="card-header mt-4">#}
{#                    <h3 class="card-title fw-bold text-gray-900">Yeni Üyeler</h3>#}
{#                </div>#}
{#                <div class="card-body pt-2 h-400px">#}
{#                    <div class="ajax-content overflow-y-auto h-100">#}
{#                        <div class="ajax-new-customers" data-url="{{ path('admin_widget_new_customers') }}"></div>#}
{#                    </div>#}
{#                </div>#}
{#            </div>#}
{#        </div>#}
{#        <div class="col-xl-4">#}
{#            <div class="card card-xl-stretch mb-xl-8">#}
{#                <div class="card-header align-items-center mt-4">#}
{#                    <h3 class="card-title align-items-start flex-column">#}
{#                        <span class="fw-bold mb-2 text-gray-900">Sipariş Geçmişi</span>#}
{#                    </h3>#}
{#                </div>#}
{#                <div class="card-body pt-0">#}
{#                    <div class="timeline-label h-400px overflow-y-auto">#}
{#                        <div class="ajax-order-history" data-url="{{ path('admin_widget_order_history') }}"></div>#}
{#                    </div>#}
{#                </div>#}
{#            </div>#}
{#        </div>#}
{#    </div>#}
{% endblock %}

{% block javascripts %}
    <script>
        let element = document.getElementById('kt_apexchart_stat');

        let height = parseInt(KTUtil.css(element, 'height'));
        let labelColor = KTUtil.getCssVariableValue('--kt-gray-500');
        let borderColor = KTUtil.getCssVariableValue('--kt-gray-200');
        let baseColor = KTUtil.getCssVariableValue('--kt-info');
        let lightColor = KTUtil.getCssVariableValue('--kt-info-light');

        console.log(labelColor);
        console.log(borderColor);
        console.log(baseColor);
        console.log(lightColor);

        let options = {
            series: [{
                name: 'Net Profit',
                data: [30, 40, 40, 90, 90, 70, 70]
            }],
            chart: {
                fontFamily: 'inherit',
                type: 'area',
                height: height,
                toolbar: {
                    show: false
                }
            },
            plotOptions: {

            },
            legend: {
                show: false
            },
            dataLabels: {
                enabled: false
            },
            fill: {
                type: 'solid',
                opacity: 1
            },
            stroke: {
                curve: 'smooth',
                show: true,
                width: 3,
                colors: [baseColor]
            },
            xaxis: {
                categories: ['Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug'],
                axisBorder: {
                    show: false,
                },
                axisTicks: {
                    show: false
                },
                labels: {
                    style: {
                        colors: labelColor,
                        fontSize: '12px'
                    }
                },
                crosshairs: {
                    position: 'front',
                    stroke: {
                        color: baseColor,
                        width: 1,
                        dashArray: 3
                    }
                },
                tooltip: {
                    enabled: true,
                    formatter: undefined,
                    offsetY: 0,
                    style: {
                        fontSize: '12px'
                    }
                }
            },
            yaxis: {
                labels: {
                    style: {
                        colors: labelColor,
                        fontSize: '12px'
                    }
                }
            },
            states: {
                normal: {
                    filter: {
                        type: 'none',
                        value: 0
                    }
                },
                hover: {
                    filter: {
                        type: 'none',
                        value: 0
                    }
                },
                active: {
                    allowMultipleDataPointsSelection: false,
                    filter: {
                        type: 'none',
                        value: 0
                    }
                }
            },
            tooltip: {
                style: {
                    fontSize: '12px'
                },
                y: {
                    formatter: function (val) {
                        return '$' + val + ' thousands'
                    }
                }
            },
            colors: [lightColor],
            grid: {
                borderColor: borderColor,
                strokeDashArray: 4,
                yaxis: {
                    lines: {
                        show: true
                    }
                }
            },
            markers: {
                strokeColor: baseColor,
                strokeWidth: 3
            }
        };

        if (element) {
            const chart = new ApexCharts(element, options);
            chart.render();
        }
    </script>
{% endblock %}