@extends('layouts.metronic', ['title' => 'Dashboard'])

@section('content')

<div id="kt_content_container" class="container-xxl">
    <div class="row gy-5 g-xl-10">
        <div class="col-md-12 col-lg-12 col-xl-12 col-xxl-6 mb-md-5 mb-xl-10">
            <div class="card card-flush h-md-50 mb-5 mb-xl-10">
                <div class="card-header pt-5">
                    <div class="card-title d-flex flex-column">
                        <div class="d-flex align-items-center">
                            <span class="fs-2hx fw-bolder text-dark me-2 lh-1">{{number_format($dash_data['total_products'])}}</span>
                        </div>
                        <span class="text-gray-400 pt-1 fw-bold fs-6">PRODUSE</span>
                    </div>
                </div>
                <div class="card-body pt-2 pb-4 d-flex align-items-center">
                    <div class="d-flex flex-center me-5 pt-2">
                        <div id="kt_card_widget_4_chart" style="min-width: 70px; min-height: 70px" data-kt-size="70" data-kt-line="11"></div>
                    </div>
                    <div class="d-flex flex-column content-justify-center w-100">
                        @foreach($dash_data['products'] as $product)
                        <div class="d-flex fs-6 fw-bold align-items-center">
                            <div class="bullet w-8px h-6px rounded-2 me-3" style="background-color: {{$product['color']}};"></div>
                            <div class="text-gray-500 flex-grow-1 me-4">{{$product['name']}}</div>
                            <div class="fw-boldest text-gray-700 text-xxl-end">{{number_format($product['value'])}}</div>
                        </div>
                        @endforeach
                    </div>
                </div>
            </div>

            <div class="card card-flush h-md-50 mb-xl-10">
                <div class="card-header pt-5">
                    <div class="card-title d-flex flex-column">
                        <div class="d-flex align-items-center">
                            <span class="fs-2hx fw-bolder text-dark me-2 lh-1">Atribute</span>
                        </div>                        
                    </div>
                </div>
                <div class="card-body d-flex align-items-end pt-0">
                    <div class="d-flex flex-column flex-grow-1 pe-8">
                        <div class="d-flex flex-wrap">
                            <div class="border border-gray-300 border-dashed rounded min-w-150px py-3 px-4 me-6 mb-3">
                                <div class="d-flex align-items-center">
                                    <span class="svg-icon svg-icon-3 svg-icon-success me-2">
                                            <svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" viewBox="0 0 512 512" fill="none">
                                                <path d="M482.8 29.23C521.7 68.21 521.7 131.4 482.8 170.4L381.2 271.9L390.6 281.4C403.1 293.9 403.1 314.1 390.6 326.6C378.1 339.1 357.9 339.1 345.4 326.6L185.4 166.6C172.9 154.1 172.9 133.9 185.4 121.4C197.9 108.9 218.1 108.9 230.6 121.4L240.1 130.8L341.6 29.23C380.6-9.744 443.8-9.744 482.8 29.23L482.8 29.23zM55.43 323.3L176.1 202.6L221.4 247.9L100.7 368.6C97.69 371.6 96 375.6 96 379.9V416H132.1C136.4 416 140.4 414.3 143.4 411.3L264.1 290.6L309.4 335.9L188.7 456.6C173.7 471.6 153.3 480 132.1 480H89.69L49.75 506.6C37.06 515.1 20.16 513.4 9.373 502.6C-1.413 491.8-3.086 474.9 5.375 462.2L32 422.3V379.9C32 358.7 40.43 338.3 55.43 323.3L55.43 323.3z"  fill="black"/>
                                            </svg>
                                    </span>
                                    <div class="fs-2 fw-bolder counted" data-kt-countup="true" data-kt-countup-value="4500" data-kt-countup-prefix="$">{{$dash_data['total_additives']}}</div>
                                </div>
                                <div class="fw-bold fs-6 text-gray-400">Aditivi</div>
                            </div>

                            <div class="border border-gray-300 border-dashed rounded min-w-150px py-3 px-4 me-6 mb-3">
                                <div class="d-flex align-items-center">
                                    <span class="svg-icon svg-icon-3 svg-icon-success me-2">
                                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 576 512" fill="none">
                                            <path d="M180.5 141.5C219.7 108.5 272.6 80 336 80C399.4 80 452.3 108.5 491.5 141.5C530.5 174.5 558.3 213.1 572.4 241.3C577.2 250.5 577.2 261.5 572.4 270.7C558.3 298 530.5 337.5 491.5 370.5C452.3 403.5 399.4 432 336 432C272.6 432 219.7 403.5 180.5 370.5C164.3 356.7 150 341.9 137.8 327.3L48.12 379.6C35.61 386.9 19.76 384.9 9.474 374.7C-.8133 364.5-2.97 348.7 4.216 336.1L50 256L4.216 175.9C-2.97 163.3-.8133 147.5 9.474 137.3C19.76 127.1 35.61 125.1 48.12 132.4L137.8 184.7C150 170.1 164.3 155.3 180.5 141.5L180.5 141.5zM416 224C398.3 224 384 238.3 384 256C384 273.7 398.3 288 416 288C433.7 288 448 273.7 448 256C448 238.3 433.7 224 416 224z" fill="black"/>
                                        </svg>    
                                    </span>
                                    <div class="fs-2 fw-bolder counted" data-kt-countup="true" data-kt-countup-value="4500" data-kt-countup-prefix="$">{{$dash_data['total_allergens']}}</div>
                                </div>
                                <div class="fw-bold fs-6 text-gray-400">Alergeni</div>
                            </div>

                            <div class="border border-gray-300 border-dashed rounded min-w-150px py-3 px-4 me-6 mb-3">
                                <div class="d-flex align-items-center">
                                    <span class="svg-icon svg-icon-3 svg-icon-success me-2">
                                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 448 512" fill="none">
                                            <path d="M336 128c-32 0-80.02 16.03-112 32.03c-32.01-16-79.1-32.02-111.1-32.03C32 128 .4134 210.5 .0033 288c-.5313 99.97 63.99 224 159.1 224c32 0 48-16 64-16c16 0 32 16 64 16c96 0 160.4-122.8 159.1-224C447.7 211.6 416 128 336 128zM320 32V0h-32C243.8 0 208 35.82 208 80v32h32C284.2 112 320 76.18 320 32z" fill="black"/>
                                        </svg>
                                    </span>
                                    <div class="fs-2 fw-bolder counted" data-kt-countup="true" data-kt-countup-value="4500" data-kt-countup-prefix="$">{{$dash_data['total_nutrients']}}</div>
                                </div>
                                <div class="fw-bold fs-6 text-gray-400">Nutrienti</div>
                            </div>
                            
                        </div>
                    </div>
                </div>
            </div>
        </div>
        
        <div class="col-xl-6 mb-5 mb-lg-10">
            <div class="card card-flush h-md-100">
                <div class="card-header pt-7">
                    <h3 class="card-title align-items-start flex-column">
                        <span class="card-label fw-bolder text-dark">PRODUSE</span>
                        <span class="text-gray-400 pt-2 fw-bold fs-6">Dupa tara de origine</span>
                    </h3>
                </div>
                <div class="card-body d-flex flex-center">
                    <div id="kt_maps_widget_1_map" class="w-100 h-350px">                        
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

@endsection

@section('script')
<script src="https://cdn.amcharts.com/lib/5/index.js"></script>
<script src="https://cdn.amcharts.com/lib/5/map.js"></script>
<script src="https://cdn.amcharts.com/lib/5/geodata/worldLow.js"></script>
<script src="https://cdn.amcharts.com/lib/5/geodata/continentsLow.js"></script>
<script src="https://cdn.amcharts.com/lib/5/geodata/usaLow.js"></script>
<script src="https://cdn.amcharts.com/lib/5/geodata/worldTimeZonesLow.js"></script>
<script src="https://cdn.amcharts.com/lib/5/geodata/worldTimeZoneAreasLow.js"></script>
<script src="https://cdn.amcharts.com/lib/5/themes/Animated.js"></script>
<script src="https://cdn.amcharts.com/lib/5/xy.js"></script>
<script src="https://cdn.amcharts.com/lib/5/percent.js"></script>
<script src="https://cdn.amcharts.com/lib/5/radar.js"></script>
<script>
    
    var KTMapsWidget1 = {
    init: function () {
        !(function () {
            if ("undefined" != typeof am5) {
                var e = document.getElementById("kt_maps_widget_1_map");
                e &&
                    am5.ready(function () {
                        var t = am5.Root.new(e);
                        t.setThemes([am5themes_Animated.new(t)]);
                        var a = t.container.children.push(am5map.MapChart.new(t, { panX: "translateX", panY: "translateY", projection: am5map.geoMercator(), paddingLeft: 0, paddingrIGHT: 0, paddingBottom: 0 })),
                            r = a.series.push(am5map.MapPolygonSeries.new(t, { geoJSON: am5geodata_worldLow, exclude: ["AQ"] }));
                        r.mapPolygons.template.setAll({ tooltipText: "{name}", toggleKey: "active", interactive: !0, fill: am5.color(KTUtil.getCssVariableValue("--bs-gray-300")) }),
                            r.mapPolygons.template.states.create("hover", { fill: am5.color(KTUtil.getCssVariableValue("--bs-success")) }),
                            r.mapPolygons.template.states.create("active", { fill: am5.color(KTUtil.getCssVariableValue("--bs-success")) });
                        var i = a.series.push(am5map.MapPolygonSeries.new(t, { geoJSON: am5geodata_worldLow, include: ["RO"] }));
                        i.mapPolygons.template.setAll({ tooltipText: "{name}", toggleKey: "active", interactive: !0 }),
                            am5.ColorSet.new(t, {}),
                            i.mapPolygons.template.set("fill", am5.color(KTUtil.getCssVariableValue("--bs-primary"))),
                            i.mapPolygons.template.states.create("hover", { fill: t.interfaceColors.get("primaryButtonHover") }),
                            i.mapPolygons.template.states.create("active", { fill: t.interfaceColors.get("primaryButtonHover") }),
                            a.chartContainer.get("background").events.on("click", function () {
                                a.goHome();
                            }),
                            a.appear(1e3, 100);
                    });
            }
        })();
    },
};
"undefined" != typeof module && (module.exports = KTMapsWidget1),
    KTUtil.onDOMContentLoaded(function () {
        KTMapsWidget1.init();
    });

   

    CreateChart("kt_card_widget_4_chart", {!! json_encode($dash_data['products']) !!});
</script>
@endsection

@section('menuVariables')
<script>
    var menuItemName = "menuDashboard";
</script>
@endsection