@extends('layouts.admin_main')

@section('title')
    @lang('admin_lang.dashboard')
@endsection
@section('css')
    <!--begin::Page Vendors Styles(used by this page) -->
    <link href="//www.amcharts.com/lib/3/plugins/export/export.css" rel="stylesheet" type="text/css" />
    <!--end::Page Vendors Styles -->
    @endsection
@section('content')

    <!-- end:: Header -->
    <div class="kt-content  kt-grid__item kt-grid__item--fluid kt-grid kt-grid--hor" id="kt_content">
        <div class="kt-subheader  kt-grid__item" id="kt_subheader">
            <div class="kt-container  kt-container--fluid ">
                <div class="kt-subheader__main">
                    <h3 class="kt-subheader__title">Dashboard</h3>
                    <span class="kt-subheader__separator kt-subheader__separator--v"></span>
                </div>
                <div class="kt-subheader__toolbar">
                    <div class="kt-subheader__wrapper">
                        <button type="button" id="enter_password" class="btn kt-subheader__btn-primary">Password</button>
                    </div>
                </div>
            </div>
        </div>

        <!-- begin:: Content -->
        <div class="kt-container  kt-container--fluid  kt-grid__item kt-grid__item--fluid">
            <div class="row" id="dashboard_div">

                <div class="col-12 d-none chart-hide-div">
                    <!--begin::Portlet-->
                    <div class="kt-portlet" id="kt_blockui_2_portlet">
                        <div class="kt-portlet__head">
                            <div class="kt-portlet__head-label">
                                <div class="row">
                                    <div class="col-md-9 col-sm-6">
                                        <span class="kt-portlet__head-icon kt-hidden">
                                            <i class="la la-gear"></i>
                                        </span>
                                        <h3 class="kt-portlet__head-title" style="margin: 10px 0;">
                                            Category Wise Sales <span style="color: #909090; font-weight: normal;">(Figure in &#163;)</span>
                                        </h3>
                                    </div>
                                    <div class="col-md-3 col-sm-6">
                                        <input type='text' class="form-control" id="kt_daterangepicker_1" value="{{ changeDateFormatNew(\Carbon\Carbon::now()->subDays(30)).' - '.changeDateFormatNew(\Carbon\Carbon::now()) }}" readonly placeholder="Select time" type="text"/>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="kt-portlet__body">
                            <div id="kt_amcharts_12" style="height: 500px;"></div>
                        </div>
                    </div>
                    <!--end::Portlet-->
                </div>
                <div class="col-12 col-md-6 d-none chart-hide-div">
                    <div class="kt-portlet kt-portlet--height-fluid">
                        <div class="kt-widget14">
                            <div class="kt-widget14__header kt-margin-b-30">
                                <h3 class="kt-widget14__title">
                                    Weekly Comparison
                                </h3>
                            </div>
                            <div id="weekly_comparison_chart">
                            </div>
                        </div>
                    </div>
                </div>

                <div class="col-12 col-md-6 d-none chart-hide-div">
                    <div class="kt-portlet kt-portlet--height-fluid">
                        <div class="kt-widget14">
                            <div class="kt-widget14__header kt-margin-b-30">
                                <h3 class="kt-widget14__title">
                                    Monthly Comparison
                                </h3>
                            </div>
                            <div id="monthly_comparison_chart">
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-12 col-md-6 d-none chart-hide-div">
                    <div class="kt-portlet kt-portlet--height-fluid">
                        <div class="kt-widget14">
                            <div class="kt-widget14__header kt-margin-b-30">
                                <h3 class="kt-widget14__title">
                                    Daily Sales
                                </h3>
                            </div>
                            <div class="kt-widget14__chart" style="height:120px;"><div class="chartjs-size-monitor"><div class="chartjs-size-monitor-expand"><div class=""></div></div><div class="chartjs-size-monitor-shrink"><div class=""></div></div></div>
                                <canvas id="kt_chart_daily_sales" style="display: block; width: 466px; height: 120px;" width="466" height="120" class="chartjs-render-monitor"></canvas>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- end:: Content -->
        </div>
@endsection

@section('js')
    <script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>
    <!--begin::Page Vendors(used by this page) -->
    <script src="//www.amcharts.com/lib/3/amcharts.js" type="text/javascript"></script>
    <script src="//www.amcharts.com/lib/3/serial.js" type="text/javascript"></script>
    <script src="//www.amcharts.com/lib/3/radar.js" type="text/javascript"></script>
    <script src="//www.amcharts.com/lib/3/pie.js" type="text/javascript"></script>
    <script src="//www.amcharts.com/lib/3/plugins/tools/polarScatter/polarScatter.min.js" type="text/javascript"></script>
    <script src="//www.amcharts.com/lib/3/plugins/animate/animate.min.js" type="text/javascript"></script>
    <script src="//www.amcharts.com/lib/3/plugins/export/export.min.js" type="text/javascript"></script>
    <script src="//www.amcharts.com/lib/3/themes/light.js" type="text/javascript"></script>
    <!--end::Page Vendors -->
    @include('admin.partial.notification')
    <script>

        $('#enter_password').click(() => {
            Swal.fire({
                title: 'Submit Dashboard password',
                input: 'password',
                inputAttributes: {
                    autocapitalize: 'off',
                },
                showCancelButton: true,
                confirmButtonText: 'Show Items',
                showLoaderOnConfirm: true,
                preConfirm: (login) => {

                    return $.post('{{ route('admin.dashboard.js-load') }}', {'_token': '{{ csrf_token() }}', 'password': login}, function (response) {
                        if (response.status === false)
                        {
                            Swal.showValidationMessage(
                                response.message
                            );
                        }else{
                            $('#enter_password').remove();
                            $('body').append(response.html)
                            $(document).find('.chart-hide-div').removeClass('d-none');
                            setTimeout(function () {
                                $(document).find('.amcharts-chart-div a').remove()
                            },500)
                            return true;
                        }
                    })
                },
                allowOutsideClick: () => !Swal.isLoading()
            }).then((result) => {
                if (result.isConfirmed) {
                    Swal.fire({
                        title: `${result.value.login}'s avatar`,
                        imageUrl: result.value.avatar_url
                    })
                }
            })
        });



        let topBoxes = function(){
            let formData = {'_token': '{{ csrf_token() }}'};
            let url = '{{ route('admin.dashboard.boxes') }}';
            $.post(url, formData, function (response) {
                $(document).find('.boxes-div').remove();
                $('#dashboard_div').prepend(response)
            })
        }

        topBoxes();


        // Class definition

var KTBootstrapDaterangepicker = function () {

 // Private functions
 var demos = function () {
  // minimum setup
  $('#kt_daterangepicker_1, #kt_daterangepicker_1_modal').daterangepicker({
      locale: {
          format: 'DD/M/YYYY'
      },
   buttonClasses: ' btn',
   applyClass: 'btn-primary',
   cancelClass: 'btn-secondary'
  });
}

 return {
  // public functions
  init: function() {
   demos();
  }
 };
}();

jQuery(document).ready(function() {
 KTBootstrapDaterangepicker.init();
});

    </script>
@endsection