@extends('admin.app')
@section('content')
    <div class="app-content content">
        <div class="content-overlay"></div>
        <div class="header-navbar-shadow"></div>
        <div class="content-wrapper">
            <div class="content-header row">
            </div>
            <div class="content-body">
                @if($data['show'])
                <section id="dashboard-ecommerce">
                    <div class="row">
                        <div class="col-lg-2 col-sm-6 col-12">
                            <div class="card">
                                <div class="card-header d-flex flex-column align-items-start pb-0">
                                    <div class="avatar bg-rgba-primary p-50 m-0">
                                        <div class="avatar-content">
                                            <i class="feather icon-bar-chart text-primary font-medium-5"></i>
                                        </div>
                                    </div>
                                    <h2 class="text-bold-700 mt-1">{{$data['orders_this']}}₺</h2>
                                    <p class="mb-0">Bu Ay Toplam Satış</p>
                                </div>

                            </div>
                        </div>
                        <div class="col-lg-2 col-sm-6 col-12">
                            <div class="card">
                                <div class="card-header d-flex flex-column align-items-start pb-0">
                                    <div class="avatar bg-rgba-success p-50 m-0">
                                        <div class="avatar-content">
                                            <i class="feather icon-credit-card text-success font-medium-5"></i>
                                        </div>
                                    </div>
                                    <h2 class="text-bold-700 mt-1">{{@$data['daily_order_count']->count}}</h2>
                                    <p class="mb-0">Günlük Sipariş Sayısı</p>
                                </div>
                            </div>
                        </div>
                        <div class="col-lg-2 col-sm-6 col-12">
                            <div class="card">
                                <div class="card-header d-flex flex-column align-items-start pb-0">
                                    <div class="avatar bg-rgba-danger p-50 m-0">
                                        <div class="avatar-content">
                                            <i class="feather icon-shopping-cart text-danger font-medium-5"></i>
                                        </div>
                                    </div>

                                    <h2 class="text-bold-700 mt-1">{{$data['monthly_sales_dif'] > 0 ? '+'.$data['monthly_sales_dif'] : $data['monthly_sales_dif']}}</h2>
                                    <p class="mb-0">Geçen Aya Göre Satış Farkı</p>
                                </div>
                            </div>
                        </div>
                        <div class="col-lg-2 col-sm-6 col-12">
                            <div class="card">
                                <div class="card-header d-flex flex-column align-items-start pb-0">
                                    <div class="avatar bg-rgba-warning p-50 m-0">
                                        <div class="avatar-content">
                                            <i class="feather icon-package text-warning font-medium-5"></i>
                                        </div>
                                    </div>
                                    <h2 class="text-bold-700 mt-1">{{$data['orders_daily']}} ₺</h2>
                                    <p class="mb-0">Günlük Satış</p>
                                </div>
                            </div>
                        </div>
                        <div class="col-lg-2 col-sm-6 col-12">
                            <div class="card">
                                <div class="card-header d-flex flex-column align-items-start pb-0">
                                    <div class="avatar bg-rgba-primary p-50 m-0">
                                        <div class="avatar-content">
                                            <i class="feather icon-user text-primary font-medium-5"></i>
                                        </div>
                                    </div>
                                    <h2 class="text-bold-700 mt-1">{{$data['online_visitors']}}</h2>
                                    <p class="mb-0">Sitedeki Aktif Ziyaretçi Sayısı</p>
                                </div>
                            </div>
                        </div>
                        <div class="col-lg-2 col-sm-6 col-12">
                            <div class="card">
                                <div class="card-header d-flex flex-column align-items-start pb-0">
                                    <div class="avatar bg-rgba-success p-50 m-0">
                                        <div class="avatar-content">
                                            <i class="feather icon-user text-success font-medium-5"></i>
                                        </div>
                                    </div>
                                    <h2 class="text-bold-700 mt-1">{{$data['avarage_time']}} Dakika</h2>
                                    <p class="mb-0">Ortalama Sipariş Verme Süresi</p>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-lg-8 col-md-6 col-12">
                            <div class="card">
                                <div class="card-header d-flex justify-content-between align-items-end">
                                    <h4 class="card-title">Aylık Satış Grafiği</h4>
                                    <p class="font-medium-5 mb-0"><i class="feather icon-settings text-muted cursor-pointer"></i></p>
                                </div>
                                <div class="card-content">
                                    <div class="card-body pb-0">
                                        <div class="d-flex justify-content-start">
                                            <div class="mr-2">
                                                <p class="mb-50 text-bold-600">Bu Ay</p>
                                                <h2 class="text-bold-400">
                                                    <span class="text-success">{{$data['orders_this']}}</span>
                                                    <sup class="font-medium-1">₺</sup>
                                                </h2>
                                            </div>
                                            <div>
                                                <p class="mb-50 text-bold-600">Geçen Ay</p>
                                                <h2 class="text-bold-400">
                                                    <span class="text-success">{{$data['orders_last']}}</span>
                                                    <sup class="font-medium-1">₺</sup>
                                                </h2>
                                            </div>

                                        </div>
                                        <div id="revenue-chart"></div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-lg-4 col-md-6 col-12">
                            <div class="card">
                                <div class="card-header d-flex justify-content-between align-items-end">
                                    <h4 class="mb-0">Tamamlanan / Tamamlanmayan Siparişler</h4>
                                    <p class="font-medium-5 mb-0"><i class="feather icon-help-circle text-muted cursor-pointer"></i></p>
                                </div>
                                <div class="card-content">
                                    <div class="card-body px-0 pb-0">
                                        <div id="goal-overview-chart" class="mt-75"></div>
                                        <div class="row text-center mx-0">
                                            <div class="col-6 border-top border-right d-flex align-items-between flex-column py-1">
                                                <p class="mb-50">Tamamlanan</p>
                                                <p class="font-large-1 text-bold-700">{{$data['total_this_moth']}}</p>
                                            </div>
                                            <div class="col-6 border-top d-flex align-items-between flex-column py-1">
                                                <p class="mb-50">Tamamlanmayan</p>
                                                <p class="font-large-1 text-bold-700">{{$data['total_this_moth_fail']}}</p>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                </section>
                    @else
                    <h3>Yönetim Paneline Hoş Geldiniz</h3>
                @endif

            </div>
        </div>
    </div>

    @endsection
@section('css')
    <link rel="stylesheet" type="text/css" href="{{asset('app-assets/css/core/menu/menu-types/horizontal-menu.css')}}">
    <link rel="stylesheet" type="text/css" href="{{asset('app-assets/css/core/colors/palette-gradient.css')}}">
    <link rel="stylesheet" type="text/css" href="{{asset('app-assets/css/pages/dashboard-ecommerce.css')}}">
    <link rel="stylesheet" type="text/css" href="{{asset('app-assets/css/pages/card-analytics.css')}}">
    @endsection
@section('js')

    <!-- BEGIN: Page Vendor JS-->
    <script src="{{asset('app-assets/vendors/js/ui/jquery.sticky.js')}}"></script>
    <script src="{{asset('app-assets/vendors/js/charts/apexcharts.min.js')}}"></script>
    <script src="{{asset('app-assets/vendors/js/extensions/tether.min.js')}}"></script>
    <script src="{{asset('app-assets/vendors/js/extensions/shepherd.min.js')}}"></script>
    <!-- END: Page Vendor JS-->

    <!-- BEGIN: Page JS-->
    <script src="{{asset('app-assets/js/scripts/pages/dashboard-analytics.js')}}"></script>
<script>


    $(window).on("load", function () {

        var $primary = '#7367F0';
        var $success = '#28C76F';
        var $danger = '#EA5455';
        var $warning = '#FF9F43';
        var $info = '#00cfe8';
        var $primary_light = '#A9A2F6';
        var $danger_light = '#f29292';
        var $success_light = '#55DD92';
        var $warning_light = '#ffc085';
        var $info_light = '#1fcadb';
        var $strok_color = '#b9c3cd';
        var $label_color = '#e7e7e7';
        var $white = '#fff';

        // revenue-chart Chart
        // -----------------------------

        var revenueChartoptions = {
            chart: {
                height: 270,
                toolbar: { show: false },
                type: 'line',
            },
            stroke: {
                curve: 'smooth',
                dashArray: [0, 8],
                width: [4, 2],
            },
            grid: {
                borderColor: $label_color,
            },
            legend: {
                show: false,
            },
            colors: [$danger_light, $strok_color],

            fill: {
                type: 'gradient',
                gradient: {
                    shade: 'dark',
                    inverseColors: false,
                    gradientToColors: [$primary, $strok_color],
                    shadeIntensity: 1,
                    type: 'horizontal',
                    opacityFrom: 1,
                    opacityTo: 1,
                    stops: [0, 100, 100, 100]
                },
            },
            markers: {
                size: 0,
                hover: {
                    size: 5
                }
            },
            xaxis: {
                labels: {
                    style: {
                        colors: $strok_color,
                    }
                },
                axisTicks: {
                    show: false,
                },
                categories: ['1', '02', '03', '04', '05', '06', '07', '08','09','10','11','12','13','14','15','16','17','18','19','20','21','22','23','24','25','26','27','28','29','30','31'],
                axisBorder: {
                    show: false,
                },
                tickPlacement: 'on',
            },
            yaxis: {
                tickAmount: 5,
                labels: {
                    style: {
                        color: $strok_color,
                    },
                    formatter: function (val) {
                        return val > 999 ? (val / 1000).toFixed(1) + 'k' : val;
                    }
                }
            },
            tooltip: {
                x: { show: false }
            },
            series: [{
                name: "Bu Ay",
                data: {{$data['orders_this_daily']}}
            },
                {
                    name: "Geçen Ay",
                    data: {{$data['orders_last_daily']}}
                }
            ],

        };

        var revenueChart = new ApexCharts(
            document.querySelector("#revenue-chart"),
            revenueChartoptions
        );

        revenueChart.render();


        // Goal Overview  Chart
        // -----------------------------

        var goalChartoptions = {
            chart: {
                height: 250,
                type: 'radialBar',
                sparkline: {
                    enabled: true,
                },
                dropShadow: {
                    enabled: true,
                    blur: 3,
                    left: 1,
                    top: 1,
                    opacity: 0.1
                },
            },
            colors: [$success],
            plotOptions: {
                radialBar: {
                    size: 110,
                    startAngle: -150,
                    endAngle: 150,
                    hollow: {
                        size: '77%',
                    },
                    track: {
                        background: $strok_color,
                        strokeWidth: '50%',
                    },
                    dataLabels: {
                        name: {
                            show: false
                        },
                        value: {
                            offsetY: 18,
                            color: '#99a2ac',
                            fontSize: '4rem'
                        }
                    }
                }
            },
            fill: {
                type: 'gradient',
                gradient: {
                    shade: 'dark',
                    type: 'horizontal',
                    shadeIntensity: 0.5,
                    gradientToColors: ['#00b5b5'],
                    inverseColors: true,
                    opacityFrom: 1,
                    opacityTo: 1,
                    stops: [0, 100]
                },
            },
            series: [{{@round(($data['total_this_moth_fail'] * 100 / $data['total_this_moth']) - 100) < 0 ? @round(($data['total_this_moth_fail'] * 100 / $data['total_this_moth']) - 100) * -1 : @round(($data['total_this_moth_fail'] * 100 / $data['total_this_moth']) - 100)}}],
            stroke: {
                lineCap: 'round'
            },

        }

        var goalChart = new ApexCharts(
            document.querySelector("#goal-overview-chart"),
            goalChartoptions
        );

        goalChart.render();

        // Client Retention Chart
        // ----------------------------------

        var clientChartoptions = {
            chart: {
                stacked: true,
                type: 'bar',
                toolbar: { show: false },
                height: 300,
            },
            plotOptions: {
                bar: {
                    columnWidth: '10%'
                }
            },
            colors: [$primary, $danger],
            series: [{
                name: 'New Clients',
                data: [175, 125, 225, 175, 160, 189, 206, 134, 159, 216, 148, 123]
            }, {
                name: 'Retained Clients',
                data: [-144, -155, -141, -167, -122, -143, -158, -107, -126, -131, -140, -137]
            }],
            grid: {
                borderColor: $label_color,
                padding: {
                    left: 0,
                    right: 0
                }
            },
            legend: {
                show: true,
                position: 'top',
                horizontalAlign: 'left',
                offsetX: 0,
                fontSize: '14px',
                markers: {
                    radius: 50,
                    width: 10,
                    height: 10,
                }
            },
            dataLabels: {
                enabled: false
            },
            xaxis: {
                labels: {
                    style: {
                        colors: $strok_color,
                    }
                },
                axisTicks: {
                    show: false,
                },
                categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
                axisBorder: {
                    show: false,
                },
            },
            yaxis: {
                tickAmount: 5,
                labels: {
                    style: {
                        color: $strok_color,
                    }
                }
            },
            tooltip: {
                x: { show: false }
            },
        }

        var clientChart = new ApexCharts(
            document.querySelector("#client-retention-chart"),
            clientChartoptions
        );

        clientChart.render();

        // Session Chart
        // ----------------------------------

        var sessionChartoptions = {
            chart: {
                type: 'donut',
                height: 325,
                toolbar: {
                    show: false
                }
            },
            dataLabels: {
                enabled: false
            },
            series: [58.6, 34.9, 6.5],
            legend: { show: false },
            comparedResult: [2, -3, 8],
            labels: ['Desktop', 'Mobile', 'Tablet'],
            stroke: { width: 0 },
            colors: [$primary, $warning, $danger],
            fill: {
                type: 'gradient',
                gradient: {
                    gradientToColors: [$primary_light, $warning_light, $danger_light]
                }
            }
        }

        var sessionChart = new ApexCharts(
            document.querySelector("#session-chart"),
            sessionChartoptions
        );

        sessionChart.render();

        // Customer Chart
        // -----------------------------

        var customerChartoptions = {
            chart: {
                type: 'pie',
                height: 330,
                dropShadow: {
                    enabled: false,
                    blur: 5,
                    left: 1,
                    top: 1,
                    opacity: 0.2
                },
                toolbar: {
                    show: false
                }
            },
            labels: ['New', 'Returning', 'Referrals'],
            series: [690, 258, 149],
            dataLabels: {
                enabled: false
            },
            legend: { show: false },
            stroke: {
                width: 5
            },
            colors: [$primary, $warning, $danger],
            fill: {
                type: 'gradient',
                gradient: {
                    gradientToColors: [$primary_light, $warning_light, $danger_light]
                }
            }
        }

        var customerChart = new ApexCharts(
            document.querySelector("#customer-chart"),
            customerChartoptions
        );

        customerChart.render();

    });


    // Chat Application
    (function ($) {
        "use strict";
        // Chat area
        if ($('.chat-application .user-chats').length > 0) {
            var chat_user = new PerfectScrollbar(".user-chats", { wheelPropagation: false });
        }

    })(jQuery);


</script>
    @endsection