@extends('layouts.app')
@section('title', 'Ecommerce | KPI')

@section('extrastyles')
    <link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.2.0/css/all.css" >
    {{--    <link href="{{ asset('/plugins/datepicker/datepicker3.css') }}" rel="stylesheet">--}}
    <link rel="stylesheet" type="text/css" href="{{ asset('/plugins/dateRangePicker2/daterangepicker.css') }}">

    <style>
        .sarmad-loader {
        width: 48px;
        height: 48px;
        border-radius: 50%;
        position: relative;
        animation: rotate 1s linear infinite
      }
      .sarmad-loader::before , .sarmad-loader::after {
        content: "";
        box-sizing: border-box;
        position: absolute;
        inset: 0px;
        border-radius: 50%;
        border: 5px solid #FFF;
        animation: prixClipFix 2s linear infinite ;
      }
      .sarmad-loader::after{
        inset: 8px;
        transform: rotate3d(90, 90, 0, 180deg );
        border-color: #FF3D00;
      }

      @keyframes rotate {
        0%   {transform: rotate(0deg)}
        100%   {transform: rotate(360deg)}
      }

      @keyframes prixClipFix {
          0%   {clip-path:polygon(50% 50%,0 0,0 0,0 0,0 0,0 0)}
          50%  {clip-path:polygon(50% 50%,0 0,100% 0,100% 0,100% 0,100% 0)}
          75%, 100%  {clip-path:polygon(50% 50%,0 0,100% 0,100% 100%,100% 100%,100% 100%)}
      }
        body {
            font-family: "Roboto", sans-serif;
            background: #e5e5e5;
        }
        a {
            color: #F24D29;
        }
        a:hover {
            color: #48c4a0;
        }
        .main-layout {
            padding: 20px;
            width: 100%;
        }
        .dash-notice {
            height: 60px;
            border: 1px solid #a4e2d0;
            justify-content: start;
            padding: 15px 30px;
            display: flex;
            background: #fff;
        }
        .notice {
            padding-left: 10px;
        }
        h5.notice-heading {
            font-size: 12px;
            font-weight: 500;
            color: #979797;
            text-transform: uppercase;
            margin-bottom: 0;
        }
        p.notice-description {
            font-size: 12px;
            color: #979797;
        }
        .welcome-widget-head {
            background: #48c4a0;
            height: 60px;
        }
        .welcome-widget-head h2 {
            font-size: 18px;
            color: #fff;
            padding-top: 20px;
            padding-left: 40px;
        }
        .welcome-widget-body {
            background: #fff;
            padding: 30px 0;
        }
        .extra-widget-heading {
            display: flex;
            justify-content: space-between;
        }
        .link-url {
            color: #8e8e8e;
            padding-left: 5px;
            font-size: 14px;
        }
        .link-url:hover {
            color: #48c4a0;
        }
        .getting-started-links {
            display: flex;
            padding-left: 15px;
        }

        table.alt-table {
            border: 1px solid #eaeaea;
            width: 100%;
            margin-top: 20px;
            table-layout: fixed;
        }
        .alt-table tr {
            border-bottom: 1px solid #eaeaea !important;
            height: 35px;
        }

        .alt-table tr:nth-child(odd) {
            background: #fafbfb;
        }
        .extra-widget-heading h3 {
            font-size: 22px !important;
            font-weight: 400;
        }
        .extra-widget-heading a {
            font-size: 14px;
            text-decoration: underline;
        }
        .profile-heading {
            height: 112px;
            text-align: center;
            background-color: #48c4a0;
            padding: 30px 0;
            color: #fff;
        }
        .profile-body {
            text-align: center;
            border: 1px solid #eaeaea;
            background: #fff;
            padding-bottom: 30px;
        }
        .profile-image {
            margin-top: -40px;
            margin-bottom: 20px;
        }
        p.contact-support {
            font-size: 18px;
        }
        p.phone-number {
            font-size: 14px;
        }
        p.email {
            font-size: 14px;
        }
        i {
            color: #48c4a0;
        }
        span.phone-icon {
            margin-right: 5px;
        }
        span.mail-icon {
            margin-right: 5px;
        }
        section {
            margin-bottom: 30px;
        }
        .extra-widget {
            background: #fff;
            padding: 30px 30px;
        }
        .extra-widget td {
            font-size: 14px;
            color: #8e8e8e;
        }
        .table-link {
            color: #48c4a0;
            padding-left: 5px;
            font-size: 14px;
        }
        .table-link:hover {
            text-decoration: underline;
        }
        .filters {
            display: flex;
        }
        .input-group.date {
            position: relative;
        }
        span.input-group-addon {
            position: absolute;
            right: 10px;
            font-size: 20px;
            top: 3px;
        }
        .date input.form-control {
            border: 1px solid #c9ced6;
            border-radius: 0;
            color: #c9ced6;
            width: 240px;
            font-size: 12px;
            height: 35px;
        }
        .to-text {
            padding: 5px 20px;
            font-size: 13px;
        }
        .btn-primary {
            color: #fff;
            background-color: #48c4a0;
            border-color: #48c4a0;
            border-radius: 0 !important;
            padding: 10px 30px;
        }
        .extra-widget-body {
            padding-top: 20px;
        }
        .graph-stats {
            text-align: center;
        }
        .graph-stats h4 {
            font-size: 22px;
            font-weight: 400;
            color: #48c4a0;
            margin-top: 20px;
            margin-bottom: 0;
        }
        .blued h4 {
            color: #4888c4;
        }
        .oranged h4 {
            color: #eab93c;
        }
        .graph-stats p {
            color: #8e8e8e;
            font-size: 14px;
        }
        .traffic-sources-widget .graph-stats {
            border-right: 1px solid #eaeaea;
        }
        .alt-table thead {
            background: linear-gradient(
                90deg,
                rgba(250, 250, 251, 1) 0%,
                rgba(243, 243, 243, 1) 100%
            );
        }
        .alt-table th,
        .alt-table td {
            padding-left: 20px;
        }
        /* PAGINATIN */
        .pagination > .active > a,
        .pagination > .active > span,
        .pagination > .active > a:hover,
        .pagination > .active > span:hover,
        .pagination > .active > a:focus,
        .pagination > .active > span:focus {
            border-color: #dddddd;
            cursor: default;
            z-index: 2;
        }
        .pagination > li > a,
        .pagination > li > span {
            background-color: #ffffff;
            border: 1px solid #dddddd;
            color: inherit;
            float: left;
            line-height: 1.42857;
            margin-left: -1px;
            padding: 4px 10px;
            position: relative;
            text-decoration: none;
        }
        .page-item.active .page-link {
            background-color: #1ab394;
            border-color: #1ab394;
        }
        .page-link:focus {
            box-shadow: none;
        }
        .page-link:hover {
            color: #676a6c;
        }
        .pagination .footable-page.active a {
            background-color: #1ab394;
            border-color: #1ab394;
            color: white;
        }
        .pagi {
            margin-bottom: 30px;
            margin-top: 15px;
        }
        .pagination .footable-page.active a {
            background-color: #ecf9f5;
            border-color: #3dbca0;
            color: #000;
        }
        li.footable-page-arrow a {
            background-color: #3dbca0 !important;
            color: #fff;
        }
        #table_id_length {
            display: none;
        }
        #table_id_filter {
            display: none;
        }
        .dataTables_filter {
            display: flex;
            position: relative;
        }
        .dataTables_filter label {
            padding-top: 5px;
        }
        label {
            display: inline-block;
            margin-bottom: 0.5rem;
            color: #8e8e8e;
            font-size: 14px;
            padding-top: 5px;
        }
        th {
            color: #8e8e8e;
            font-size: 14px;
        }
        table.dataTable thead th {
            padding: 10px 18px;
            border-bottom: none;
        }
        table.dataTable,
        table.dataTable th,
        table.dataTable td {
            box-sizing: content-box;
            box-shadow: none;
        }
        .dataTables_wrapper .dataTables_length,
        .dataTables_wrapper .dataTables_filter,
        .dataTables_wrapper .dataTables_info,
        .dataTables_wrapper .dataTables_processing,
        .dataTables_wrapper .dataTables_paginate {
            color: #8e8e8e;
            font-size: 14px !important;
            margin-top: 20px;
        }
        .alt-table tr {
            border-bottom: 1px solid #eaeaea !important;
            height: 35px;
        }
        table.dataTable.no-footer {
            border-bottom: none !important;
        }
        .dataTables_wrapper .dataTables_paginate .paginate_button.disabled,
        .dataTables_wrapper .dataTables_paginate .paginate_button.disabled:hover,
        .dataTables_wrapper .dataTables_paginate .paginate_button.disabled:active {
            cursor: default;
            color: #fff !important;
            border: 1px solid transparent;
            background: transparent;
            box-shadow: none;
            background: #48c4a0;
        }
        a#table_id_next {
            background: #48c4a0;
            color: #fff !important;
        }
        .dataTables_wrapper .dataTables_paginate .paginate_button {
            box-sizing: border-box;
            display: inline-block;
            min-width: 1.5em;
            padding: 0.5em 1em;
            margin-left: 2px;
            text-align: center;
            text-decoration: none !important;
            cursor: pointer;
            border: 1px solid #c9ced6;
            border-radius: 2px;
            color: #8e8e8e !important;
        }
        .dataTables_wrapper .dataTables_paginate .paginate_button.current {
            color: #fff !important;
            border: 1px solid #c9ced6;
            background-color: 48c4a0;
            background: -webkit-gradient(
                linear,
                left top,
                left bottom,
                color-stop(0%, white),
                color-stop(100%, #dcdcdc)
            );
            background: -webkit-linear-gradient(top, white 0%, #dcdcdc 100%);
            background: -moz-linear-gradient(top, white 0%, #dcdcdc 100%);
            background: -ms-linear-gradient(top, white 0%, #dcdcdc 100%);
            background: -o-linear-gradient(top, white 0%, #dcdcdc 100%);
            background: #edfaf6;
        }
        .dataTables_wrapper .dataTables_paginate .paginate_button:hover {
            color: #fff !important;
            border: 1px solid #c9ced6;
            background-color: #48c4a0 !important;
            background: -webkit-gradient(
                linear,
                left top,
                left bottom,
                color-stop(0%, #585858),
                color-stop(100%, #111)
            );
            background: -webkit-linear-gradient(top, #585858 0%, #111 100%);
            background: -moz-linear-gradient(top, #585858 0%, #111 100%);
            background: -ms-linear-gradient(top, #585858 0%, #111 100%);
            background: -o-linear-gradient(top, #585858 0%, #111 100%);
            background: linear-gradient(to bottom, #585858 0%, #111 100%);
        }
        table.dataTable thead th,
        table.dataTable thead td {
            padding: 10px 18px;
            border-bottom: none !important;
        }
        td.center {
            text-align: center;
        }
        span.search-icon {
            position: absolute;
            right: 48px;
            top: 7px;
        }
        .dataTables_filter label {
            padding-top: 8px;
            margin-right: 15px;
        }
        input#smart-search {
            height: 35px;
            border-radius: 0;
            margin-right: 40px;
        }
        select#length_change {
            height: 35px;
            width: 70px;
            border: 1px solid #c9ced6;
            padding-left: 8px;
            font-size: 14px;
            color: #c9ced6;
        }
        select#lenght_change:after {
            content: "\f0dc";
            font-family: FontAwesome;
            color: #48c4a0;
            padding: 12px 8px;
            position: absolute;
            right: 0;
            top: 0;
            background: red;
            z-index: 1;
            text-align: center;
            width: 10%;
            height: 100%;
            pointer-events: none;
            box-sizing: border-box;
        }
        .filters label {
            margin-right: 10px;
        }

        @media (max-width: 767px) {
            .filters {
                display: block;
            }
            .extra-widget-heading {
                display: block;
            }
        }
    </style>

@endsection

@section('content')
    <section class="graph-widget">
        <div class="extra-widget">
            <div class="extra-widget-heading">
                <div class="row" style="flex-direction: column">
                    <h3 style="font-family: Newsreader; font-weight: 300;">eCommerce KPIs</h3>
                    <p style="font-size: 14px"><strong>Track, Measure, and Optimize Your Online Retail Store</strong></p>
                </div>
                <div class="filters">

                    <div class="to-date">
                        <div class="ibox-content">
                            <div class="form-group" id="data_1">
                                <div class="input-group date">
                                    <input type="text" class="form-control" name="daterange" value="{{ $start_date }} - {{ $end_date }}" />
                                    <span class="input-group-addon"
                                    ><i class="fal fa-calendar-alt"></i
                                        ></span>
                                    <input
                                        type="hidden"
                                        class="form-control dates"
                                        value="{{ $end_date }}"
                                        name="end_date"
                                        id="end_date"
                                    />
                                    <input
                                        type="hidden"
                                        class="form-control dates"
                                        value="{{ $start_date }}"
                                        name="start_date"
                                        id="start_date"
                                    />
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="row">
                <p>
                    {{$analyticsDescription}}
                </p>
            </div>
        </div>
    </section>

    <div id="ecommerceKpiCustomerRetention"></div>
    <div class="row">
        <div class="col-md-12">
            @component('Website::analytics.components._card', ['title' => 'Conversion Rate',  'position' => 'center'])
            <div id="crate-loader" style="display: flex; justify-content: center">

                <span class="sarmad-loader"></span>
            </div>

                <div class="lineChart" id="ecommerceKpiConversionRate" style="width: 100%; min-height: 400px"></div>
            @endcomponent

        </div>
    </div>
    <div class="row">
        <div class="col-md-6">

            @component('Website::analytics.components._card', ['title' => 'Average Order Value (AOV)',  'position' => 'center'])
                <div class="lineChart" id="ecommerceKpiAvgOrderValue" style="width: 100%; min-height: 400px"></div>
            @endcomponent
        </div>
        <div class="col-md-6">
            @component('Website::analytics.components._card', ['title' => 'Shopping Cart Abandonment Rate',  'position' => 'center'])
                <div class="lineChart" id="ecommerceKpiAbandonedRate" style="width: 100%; min-height: 400px"></div>
            @endcomponent
        </div>
    </div>
    <div class="row">
        @if(count($enrollments) > 0)
            @foreach($enrollments as $enrollment)
                @if($enrollment->sessionAny($start_date, $end_date))
                <div class="col-md-6">
                    @component('Website::analytics.components._card', ['title' => 'Abandoned Enrollment for '.$enrollment->title,  'position' => 'center'])
                        <div class="funnelFrom" id="funnelFrom{{ $enrollment->id }}" style="width: 100%; min-height: 400px"></div>
                    @endcomponent
                </div>
                @endif
            @endforeach
        @endif
    </div>

@endsection

@section('footer')
    @if($viewer_id)
        <script src="https://cdnjs.cloudflare.com/ajax/libs/echarts/5.4.3/echarts.min.js"></script>
        {{--        <script src="{{ asset('/plugins/datepicker/bootstrap-datepicker.js') }}"></script>--}}
        <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment.min.js"></script>
        <script type="text/javascript" src="{{ asset('plugins/dateRangePicker2/daterangepicker.min.js') }}"></script>
        <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
        <script>
            function loadPageAnalytics() {
                getEcommerceKpis();
                getEcomKpiAvgOrderValue();
                getEcomKpiAbandonedRate();
                getEcomKpiCustomerRetention();
            }
            @if(count($enrollments) > 0)
                @foreach($enrollments as $enrollment)
                  @if($enrollment->sessionAny($start_date, $end_date))
                    funnelForm('funnelFrom{{ $enrollment->id }}',[
                        { value: {{ $enrollment->sessionEnroller($start_date, $end_date) }}, name: 'Enroller' },
                        { value: {{ $enrollment->sessionEmail($start_date, $end_date) }}, name: 'Email' },
                        { value: {{ $enrollment->sessionSignup($start_date, $end_date) }}, name: 'Signup' },
                        { value: {{ $enrollment->sessionNoProducts($start_date, $end_date) }}, name: 'No Products' },
                        { value: {{ $enrollment->sessionProducts($start_date, $end_date) }}, name: 'Added Products' }
                    ]);
                    @endif
                @endforeach
            @endif

            function funnelForm(divId,data) {
                var option = {
                    tooltip: {
                        trigger: 'item',
                        formatter: '{b} : {c}'
                    },
                    toolbox: {
                        feature: {

                        }
                    },
                    series: [
                        {
                            name: 'Funnel',
                            type: 'funnel',
                            left: '10%',
                            top: 60,
                            bottom: 60,
                            width: '80%',
                            min: 0,
                            max: 100,
                            minSize: '0%',
                            maxSize: '100%',
                            sort: 'descending',
                            gap: 2,
                            label: {
                                position: 'left'
                            },
                            labelLine: {
                                length: 10,
                                lineStyle: {
                                    width: 1,
                                    type: 'solid'
                                }
                            },
                            itemStyle: {
                                borderColor: '#fff',
                                borderWidth: 1
                            },
                            emphasis: {
                                label: {
                                    fontSize: 20
                                }
                            },
                            data: data
                        }
                    ]
                };
                var chart = echarts.init(document.getElementById(divId));
                chart.setOption(option);
            }

        </script>
    @endif
    @include('Website::analytics._analytics_script')
@endsection