@extends('owner.layouts.master')
@section('content')
    <div class="card no-shadow bg-transparent no-border rm-borders mb-3">
        <div class="card">
            <div class="no-gutters row">
                <div class="col-md-12 col-lg-4">
                    <ul class="list-group list-group-flush">
                        <li class="bg-transparent list-group-item">
                            <div class="widget-content p-0">
                                <div class="widget-content-outer">
                                    <div class="widget-content-wrapper">
                                        <div class="widget-content-left">
                                            <div class="widget-heading">Total Customers
                                            </div>

                                        </div>
                                        <div class="widget-content-right">
                                            <div class="widget-numbers text-success">
                                                @if(isset($customers))
                                                {{$customers->count()}}
                                                @else
                                                0
                                                @endif

                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </li>
                        <li class="bg-transparent list-group-item">
                            <div class="widget-content p-0">
                                <div class="widget-content-outer">
                                    <div class="widget-content-wrapper">
                                        <div class="widget-content-left">
                                            <div class="widget-heading">Logins</div>
                                            <div class="widget-subheading">Total Logins
                                            </div>
                                        </div>
                                        <div class="widget-content-right">
                                            <div class="widget-numbers text-primary">
                                                @if(isset($totalLogins))
                                                {{$totalLogins}}
                                                @else
                                                0
                                                @endif
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </li>
                    </ul>
                </div>
                <div class="col-md-12 col-lg-4">
                    <ul class="list-group list-group-flush">
                        <li class="bg-transparent list-group-item">
                            <div class="widget-content p-0">
                                <div class="widget-content-outer">
                                    <div class="widget-content-wrapper">
                                        <div class="widget-content-left">
                                            <div class="widget-heading">Training Levels</div>
                                            <div class="widget-subheading">Total Levels Completed
                                            </div>
                                        </div>
                                        <div class="widget-content-right">
                                            <div class="widget-numbers text-danger">
                                                @if(isset($totalTrainingLevels))
                                                {{$totalTrainingLevels}}
                                                @else
                                                0
                                                @endif
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </li>
                        <li class="bg-transparent list-group-item">
                            <div class="widget-content p-0">
                                <div class="widget-content-outer">
                                    <div class="widget-content-wrapper">
                                        <div class="widget-content-left">
                                            <div class="widget-heading">Products Sold
                                            </div>
                                            <div class="widget-subheading">Total revenue
                                                streams
                                            </div>
                                        </div>
                                        <div class="widget-content-right">
                                            <div class="widget-numbers text-warning">
                                                $3M
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </li>
                    </ul>
                </div>
                <div class="col-md-12 col-lg-4">
                    <ul class="list-group list-group-flush">
                        <li class="bg-transparent list-group-item">
                            <div class="widget-content p-0">
                                <div class="widget-content-outer">
                                    <div class="widget-content-wrapper">
                                        <div class="widget-content-left">
                                            <div class="widget-heading">Total Orders
                                            </div>
                                            <div class="widget-subheading">Last year
                                                expenses
                                            </div>
                                        </div>
                                        <div class="widget-content-right">
                                            <div class="widget-numbers text-success">
                                                1896
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </li>
                        <li class="bg-transparent list-group-item">
                            <div class="widget-content p-0">
                                <div class="widget-content-outer">
                                    <div class="widget-content-wrapper">
                                        <div class="widget-content-left">
                                            <div class="widget-heading">Clients</div>
                                            <div class="widget-subheading">Total Clients
                                                Profit
                                            </div>
                                        </div>
                                        <div class="widget-content-right">
                                            <div class="widget-numbers text-primary">
                                                $12.6k
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
    <div class="card mb-3">
        <div class="card-header-tab card-header">
            <div class="card-header-title font-size-lg text-capitalize font-weight-normal">
                <i class="header-icon lnr-laptop-phone mr-3 text-muted opacity-6"> </i>Customer Data
            </div>

        </div>
        <div class="card-body">
            <table style="width: 100%;" id="example" class="table table-hover table-striped table-bordered">
                <thead>
                    <tr>
                        <th>@lang('admin.Name')</th>
                        <th>@lang('admin.Country')</th>
                        <th>@lang('admin.Office')</th>
                        <th>@lang('admin.Job Role')</th>

                    </tr>
                </thead>
                <tbody>
                    @if(isset($customers))
                    @foreach($customers as $customer)
                    <tr>
                        <td>{{ $customer->first_name.' '.$customer->last_name }}</td>
                        <td>{{$customer->profile->country->name}}</td>
                        @if(isset($customer->profile->location))
                            <td>{{$customer->profile->location->name}}</td>
                        @else
                            <td>Location Not Set</td>
                        @endif
                        @if(isset($customer->profile->job_role))
                            <td>{{$customer->profile->job_role->name}}</td>
                        @else
                            <td>job_role Not Set</td>
                        @endif

                    </tr>
                    @endforeach
                    @endif
                </tbody>

            </table>
        </div>
        <div class="mb-3 card">
            <div class="card-header-tab card-header">
                <div class="card-header-title font-size-lg text-capitalize font-weight-normal">
                    <i class="header-icon lnr-cloud-download icon-gradient bg-happy-itmeo"> </i>
                    User Traffic
                </div>

            </div>
           <div class="p-1 slick-slider-sm mx-auto">
            <div class="slick-slider">
                <div class="widget-chart-content widget-chart-content-lg pb-0">
                    <div class="widget-chart-flex">
                        <div class="widget-title opacity-5 text-muted text-uppercase">
                            Yearly Traffic
                        </div>
                    </div>
                    <div class="widget-numbers">
                        <div class="widget-chart-flex">
                            <div>
                                <small class="opacity-3 pr-1">

                                </small>

                                <span class="text-primary pl-3">

                                </span>
                            </div>
                        </div>
                    </div>
                    <div id=yearlyTraffic></div>
                </div>



                <div class="widget-chart-content widget-chart-content-lg pb-0">
                    <div class="widget-chart-flex">
                        <div class="widget-title opacity-5 text-muted text-uppercase">
                            Yearly Traffic
                        </div>
                    </div>
                    <div class="widget-numbers">
                        <div class="widget-chart-flex">
                            <div>
                                <small class="opacity-3 pr-1">

                                </small>

                                <span class="text-primary pl-3">

                                </span>
                            </div>
                        </div>
                    </div>
                    <div id=monthlyTraffic></div>
                </div>

                <div class="widget-chart-content widget-chart-content-lg pb-0">
                    <div class="widget-chart-flex">
                        <div class="widget-title opacity-5 text-muted text-uppercase">
                            Weekly Traffic
                        </div>
                    </div>
                    <div class="widget-numbers">
                        <div class="widget-chart-flex">
                            <div>
                                <small class="opacity-3 pr-1">

                                </small>

                                <span class="text-primary pl-3">

                                </span>
                            </div>
                        </div>
                    </div>
                    <div id=weeklyTraffic></div>
                </div>




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

    </div>
    @push('script')
    <script type="text/javascript" src="{{ asset('js/app.js') }}"></script>
    <script src="{{asset('assets_admin/js/apexcharts.js')}}"></script>
    <script type="text/javascript">
        var monthly = {
        chart: {
            type: 'area',
            height: 152,
            sparkline: {
                enabled: true
            },
        },
        colors: ['#3ac47d'],
        stroke: {
            width: 3,
            curve: 'smooth'
        },

        markers: {
            size: 0
        },
        tooltip: {
            fixed: {
                enabled: true
            },
            x: {
                show: true,

            },
            y: {
                title: {
                    formatter: function () {
                        return '';
                    }
                }
            },
            marker: {
                show: false
            }
        },
        fill: {
            type: 'gradient',
            gradient: {
                shadeIntensity: 1,
                opacityFrom: 0.7,
                opacityTo: 0.9,
                stops: [0, 90, 100]
            }
        },
        series: [{
            data: []
        }],
        yaxis: [{
            labels: {
                formatter: function (val) {
                    return val.toFixed(0) + " Visits"
                }
            },
            min: 0
        }],
        xaxis:{
            categories: [],
        }


    };

    var monthlyChart = new ApexCharts(document.querySelector("#monthlyTraffic"), monthly);
    monthlyChart.render();

    var monthlyTrafficURL = '{{ route("owner.dashboard.getMonthlyTraffic") }}';

    $.getJSON(monthlyTrafficURL, function(response) {
                var labels = response.map(function(obj) {return obj.day;});
                var series = response.map(function(obj) {return obj.traffic;});
                console.log(series);
                monthlyChart.updateOptions(
                    {
                    xaxis:{
                            categories: labels,
                            }
                        })
                monthlyChart.updateSeries([{
                    data: series
                    }])

        });



    var yearly = {
        chart: {
            type: 'area',
            height: 152,
            sparkline: {
                enabled: true
            },
        },
        colors: ['#3ac47d'],
        stroke: {
            width: 3,
            curve: 'smooth'
        },

        markers: {
            size: 0
        },
        tooltip: {
            fixed: {
                enabled: false
            },
            x: {
                show: true
            },
            y: {
                title: {
                    formatter: function () {
                        return '';
                    }
                }

            },
            marker: {
                show: false
            }
        },
        fill: {
            type: 'gradient',
            gradient: {
                shadeIntensity: 1,
                opacityFrom: 0.7,
                opacityTo: 0.9,
                stops: [0, 90, 1000]
            }
        },
        series: [{
            data: []
        }],
        yaxis: [{
            labels: {
                formatter: function (val) {
                    return val.toFixed(0) + " Visits"
                }
            },
            min: 0
        }],
        xaxis:{
            categories: ["January", "February", "March", "April", "May", "June", "July" , "August" , "September", "October" , "November", "December"],
        }


    };

    var yearlyChart = new ApexCharts(document.querySelector("#yearlyTraffic"), yearly);
    yearlyChart.render();

    var yearlyTrafficURL = '{{ route("owner.dashboard.getYearlyTraffic") }}';

    $.getJSON(yearlyTrafficURL, function(response) {
                var labels = response.map(function(obj) {return obj.month;});
                var series = response.map(function(obj) {return obj.traffic;});
                console.log(series);
                yearlyChart.updateSeries([{
                    data: series
                    }])
        });


    var locationDonut = {
        series: [],
        chart: {
        width: 380,
        type: 'donut',
    },
    plotOptions: {
        pie: {
        startAngle: -45
        }
    },
    dataLabels: {
        enabled: false
    },
    fill: {
        type: 'gradient',
    },
    legend: {
        formatter: function(val, opts) {
        return val + " - " + opts.w.globals.series[opts.seriesIndex]
        }
    },
    title: {
        text: 'Customers by Office Location'
    },
    noData: {
        text: 'Loading...'
    },
    responsive: [{
        breakpoint: 480,
        options: {
        chart: {
            width: 200
        },
        legend: {
            position: 'bottom'
        }
        }
    }]
    };

    var donutChart = new ApexCharts(document.querySelector("#locationDonut"), locationDonut);
    donutChart.render();

    var locationURL = '{{ route("owner.dashboard.getLocationData") }}';

    var countryID = null;

    function setCountry(){
                countryID = document.getElementById("country").value;

                }

            $.getJSON(locationURL, function(response) {
                var labels = response.map(function(obj) {return obj.name;});
                var series = response.map(function(obj) {return obj.data;});
                donutChart.updateOptions(
                    {
                    labels: labels,
                    series: series,
                    })
        });

    function filter(){

        $.getJSON(locationURL, {country:countryID}, function(response) {
        var labels = response.map(function(obj) {return obj.name;});
        var series = response.map(function(obj) {return obj.data;});
            donutChart.updateOptions(
                {
                labels: labels,
                series: series,
                }
                )
            });


        }



    </script>


    @endpush



















{{-- Charts HTML --}}
{{-- <div class="col-md-6 col-xl-3">
    <div class="card mb-3 widget-chart widget-chart2 text-left card-btm-border card-shadow-warning border-warning">
        <div class="widget-chat-wrapper-outer">
            <div class="widget-chart-content pt-3 pl-3 pb-1">
                <div class="widget-chart-flex">
                    <div class="widget-numbers">
                        <div class="widget-chart-flex">
                            <div class="fsize-4">

                                <span>1286</span></div>
                        </div>
                    </div>
                </div>
                <h6 class="widget-subheading mb-0 opacity-5">Yearly Visitors</h6>
            </div>
            <div class="no-gutters widget-chart-wrapper mt-3 mb-3 pl-2 he-auto row">
                <div class="col-md-9">
                    <div id="YearlyTraffic"></div>
                </div>
            </div>
        </div>
    </div>
</div> --}}


{{-- Charts Scripts --}}
{{-- <script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>
<script>
    var daysInMonth = {!! json_encode($daysInMonth, JSON_HEX_TAG) !!};
</script>
<script>
    $(document).ready(function() {

        var options = {
        chart: {
            type: 'line',
            height: 100,
            sparkline: {
                enabled: true
            },
        },
        colors: ['#f7b924'],
        stroke: {
            width: 3,
            curve: 'smooth'
        },

        markers: {
            size: 0
        },
        tooltip: {
            fixed: {
                enabled: false
            },
            x: {
                show: true
            },
            y: {
                title: {
                    formatter: function (seriesName) {
                        return 'Daily Visits';
                    }
                }
            },
            marker: {
                show: false
            }
        },
        series: [{
            data: [47, 45, 54, 38, 56, 24, 65, 31, 37, 39, 62, 51, 35, 41, 35, 27, 93, 53, 61, 27, 54, 43, 19, 46]
        }],
        yaxis: {
            min: 0
        },
        xaxis: {
            categories: daysInMonth

        },
    };

var chart = new ApexCharts(document.querySelector("#YearlyTraffic"), options);

chart.render();
    })


</script> --}}



@endsection