@php
    $locale = app()->getLocale() != 'vi' ? 'en' : 'vi';	
    $dateFormat = config('datetime.' . $locale . '.format');
    $dateFormatUpperCase = strtoupper($dateFormat);
    $startsAt = !empty($args->starts_at ?? '') ? Common::date($args->starts_at) : '';
    $endsAt = !empty($args->ends_at ?? '') ? Common::date($args->ends_at) : '';

    $totalOrder = $report->total_order ?? 0;
    $totalRevenue = $report->total_revenue ?? 0;
    $promotion = $report->promotion ?? new stdClass;
    $avergrate = $report->avergrate ?? new stdClass;
    $orders = $report->orders ?? [];
@endphp
@extends('shared.admin')
@section('content')
    <div class="container-fluid">
        <h2 class="mt-30 page-title">Dashboard</h2>
        <ol class="breadcrumb mb-30">
            <li class="breadcrumb-item active">Dashboard</li>
        </ol>
        <div class="row justify-content-md-end mb-4">
            <div class="col-lg-6">
                <form class="form" action="{{route('admin.home')}}" method="get">
                    <div class="form-group row">
                        <div class="col-md-3">
                            <a href="{{route('admin.home',['num'=>7])}}" class="btn btn-info btn-block ml-0">Báo cáo 7
                                ngày</a>
                        </div>
                        <div class="col-md-3">
                            <a href="{{route('admin.home',['num'=>30])}}" class="btn btn-info btn-block ml-0">Báo cáo 30
                                ngày</a>
                        </div>
                        <div class="col-md-6">
                            <div class="row">
                                <div class="col-md-4">
                                    <input class="form-control datepicker" id="starts_at" name="starts_at" type="text"
                                           placeholder="{{$dateFormatUpperCase}}"
                                           value="{{old('starts_at', $startsAt)}}"
                                           autocomplete="off"
                                           data-date-format="{{$dateFormat}}"
                                           data-fv-date-format="{{$dateFormatUpperCase}}"
                                           data-fv-date="true"
                                           data-fv-date-max="ends_at"
                                           data-fv-date-message="{{trans('admin::message.date.starts_at.invalid')}}"
                                           data-fv-container=".rangeDateError"
                                    >
                                </div>
                                <div class="col-md-4">
                                    <input class="form-control datepicker" id="ends_at" name="ends_at" type="text"
                                           placeholder="{{$dateFormatUpperCase}}"
                                           value="{{old('ends_at', $endsAt)}}"
                                           autocomplete="off"
                                           data-date-format="{{$dateFormat}}"
                                           data-fv-date-format="{{$dateFormatUpperCase}}"
                                           data-fv-date="true"
                                           data-fv-date-min="starts_at"
                                           data-fv-date-message="{{trans('admin::message.date.ends_at.invalid')}}"
                                           data-fv-container=".rangeDateError"
                                    >
                                </div>
                                <div class="col-md-4">
                                    <button class="btn btn-primary btn-block ml-0" type="submit">Xem chart</button>
                                </div>
                            </div>
                        </div>
                    </div>
                </form>
            </div>
        </div>
        <div class="row" style="justify-content: space-between">
            @foreach(config('status.order') as $k=>$v)
                @php
                    $statusBg = config('status.order_bg.' . $k);
                    $statusIcon = config('status.order_icon.' . $k);
                    $statusCount = $orders[$k] ?? 0;
                @endphp
                <div style="min-width: 200px">
                    <a href="{{ route('order.status',['status'=>$v]) }}">
                        <div class="dashboard-report-card {{$statusBg}}">
                            <div class="card-content">
                                <span class="card-title" style="line-height:58px; width:100%;">
                                    {{trans('admin::message.status.' . $v)}}
                                </span>
                                <span class="card-count pb-3">
                                    {{Common::numberFormat($statusCount)}}@if($totalOrder > 0)
                                        / {{Common::numberFormat($totalOrder)}}
                                        <br/> {{round(($statusCount/$totalOrder)*100,1)}}% @endif
                                </span>
                            </div>
                            <div class="card-media">
                                <i class="{{$statusIcon}}"></i>
                            </div>
                        </div>
                    </a>
                </div>
            @endforeach


        </div>
        <div class="row">
            <div class="col-xl-4 col-md-6">
                <div class="dashboard-report-card success">
                    <div class="card-content">
                        <span class="card-title" style="line-height:58px; width:100%;">Total Revenue</span>
                        <span class="card-count">{{ Common::numberFormat($totalRevenue) }}</span>
                    </div>
                    <div class="card-media">
                        <i class="fas fa-money-bill rpt_icon"></i>
                    </div>
                </div>
            </div>
            <div class="col-xl-4 col-md-6">
                <div class="dashboard-report-card info">
                    <div class="card-content">
                        <span class="card-title" style="line-height:58px; width:100%;">Khuyến mãi/ giảm giá</span>
                        <span class="card-count">
                            {{ Common::numberFormat($promotion->amount ?? 0) }}<sup>đ</sup>
                            @if(($promotion->count ?? 0) > 0)
                                (
                                {{Common::numberFormat($promotion->count ?? 0)}}
                                @if($totalOrder > 0)/ {{Common::numberFormat($totalOrder)}}
                                ~ {{round(($promotion->count/$totalOrder)*100,1)}}%
                                @endif
                            @endif
                        </span>
                    </div>
                    <div class="card-media">
                        <i class="fas fa-ad rpt_icon"></i>
                    </div>
                </div>
            </div>
            <div class="col-xl-4 col-md-6">
                <div class="dashboard-report-card bg-primary">
                    <div class="card-content">
                            <span class="card-title"
                                  style="line-height:58px; width:100%;">Thời gian xử lý đơn hàng</span>
                        <span class="card-count">
                            {{ gmdate('H:i:s', $avergrate->time ?? 0) }}
                            @if(($avergrate->count ?? 0) > 0)
                                / {{Common::numberFormat($avergrate->count ?? 0)}} H.Đ
                            @endif
                        </span>
                    </div>
                    <div class="card-media">
                        <i class="fas fa-clock rpt_icon"></i>
                    </div>
                </div>
            </div>
        </div>
        <h3>Tiki Order Status</h3>
        <div class="row" style="justify-content: space-between; padding: 0 15px; margin-bottom: 30px;">
            <div class="card" style="width: 230px; text-align: center">
                <a href="{{ route('order.tiki.index') }}">
                    <div class="card-body">
                        <h5 class="card-title">Tất cả ({{ $orderCountAll }})</h5>
                    </div>
                </a>
            </div>
            <div class="card" style="width: 230px; text-align: center">
                <a href="{{ route('order.tiki.index') }}">
                    <div class="card-body">
                        <h5 class="card-title">Chờ xác nhận ({{ $orderCount->awaiting_confirmation->total_order }})</h5>
                        <span style="color: rgba(0,0,0,.45)">
                            {{ $customOrderCount->miss_confirm_order_available_sla }} đơn quá hạn XN
                        </span>
                    </div>
                </a>
            </div>
            <div class="card" style="width: 230px; text-align: center">
                <a href="{{ route('order.tiki.index') }}">
                    <div class="card-body">
                        <h5 class="card-title">Đang xử lý ({{ $orderCount->processing->total_order }})</h5>
                    </div>
                </a>
            </div>
            <div class="card" style="width: 230px; text-align: center">
                <a href="{{ route('order.tiki.index') }}">
                    <div class="card-body">
                        <h5 class="card-title">Đang vận chuyển ({{ $orderCount->shipping->total_order }})</h5>
                    </div>
                </a>
            </div>
            <div class="card" style="width: 230px; text-align: center">
                <a href="{{ route('order.tiki.index') }}">
                    <div class="card-body">
                        <h5 class="card-title">Đã giao hàng ({{ $orderCount->delivered->total_order }})</h5>
                    </div>
                </a>
            </div>
            <div class="card" style="width: 230px; text-align: center">
                <a href="{{ route('order.tiki.index') }}">
                    <div class="card-body">
                        <h5 class="card-title">Đã huỷ ({{ $orderCount->canceled->total_order }})</h5>
                    </div>
                </a>
            </div>
        </div>
        <div class="row">
            <div class="col-xl-12 col-md-12">
                <div class="card card-static-1 mb-30">
                    <div class="card-body">
                        <div id="earningGraph"></div>
                    </div>
                </div>
            </div>
        </div>
        <div class="row">
            @if(count($report->products ?? []) > 0 )
                <div class="col-md-6">
                    <div class="card card-static-1 mb-30">
                        <div class="card-header">
                            <h3 class="card-title text-capitalize">Sản phẩm chốt đơn thành công</h3>
                        </div>
                        <div class="card-body">
                            <table class="table">
                                <thead>
                                <tr>
                                    <th>Sản phẩm</th>
                                    <th>Số lượng</th>
                                    <th>Thành tiền</th>
                                </tr>
                                </thead>
                                <tbody>
                                @foreach($report->products as $product)
                                    <tr>
                                        <td>{{$product->title}}</td>
                                        <td>{{Common::numberFormat($product->count ?? 0)}}</td>
                                        <td>{{Common::numberFormat($product->amount ?? 0)}}</td>
                                    </tr>
                                @endforeach
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            @endif
        </div>
    </div>
@endsection
@section('style')
    @parent
    <link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
    <link rel="stylesheet" href="{{config('domain.st.url')}}/js/plugins/datepicker/datepicker3.css">
    <link rel="stylesheet" href="{{config('domain.st.url')}}/css/admin/adminlte.min.css">
    <link rel="stylesheet" href="{{config('domain.st.url')}}/css/admin/pts.css?v={{config('domain.version')}}">
@endsection
@section('script')
    @parent
    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
    <script src="{{config('domain.st.url')}}/js/plugins/datepicker/bootstrap-datepicker.js"
            type="text/javascript"></script>
    <script src="{{ asset('vendor/chart/highcharts.js') }}"></script>
    <script src="{{ asset('vendor/chart/exporting.js') }}"></script>
    <script src="{{ asset('vendor/chart/export-data.js') }}"></script>
    <script src="{{ asset('vendor/chart/accessibility.js') }}"></script>
@endsection
@section('js-ext')
    @parent
    <script type="text/javascript">
      Highcharts.chart('earningGraph', {
        chart: {
          type: 'areaspline',
          borderWidth: 0,
          style: {
            fontFamily: 'Roboto',
            fontWeight: '500',
          }
        },
        title: {
          text: "{{date('Y')}} Revenue & Order Summary"
        },
        subtitle: {
          text: 'Show monthly wise income & order graph.'
        },
        legend: {
          layout: 'vertical',
          align: 'left',
          verticalAlign: 'top',
          x: 0,
          y: 0,
          floating: true,
          borderWidth: 1,
          backgroundColor: Highcharts.defaultOptions.legend.backgroundColor || '#FFFFFF'
        },
        xAxis: {
          categories: [{!! $categoryChart !!}],
          title: {
            text: 'Amount & Order',
            align: 'high'
          },
          labels: {
            overflow: 'justify'
          },
          tooltip: {
            pointFormat: '{series.name}: <b>{point.y}</b>'
          },
          plotOptions: {
            bar: {
              dataLabels: {
                enabled: true
              }
            },
            series: {
              cursor: 'pointer',
              point: {
                events: {
                  click: function (e) {
                    LoadDayWiseExpenseOrIncome(this.type, this.monthID, this.monthName, this.dayWiseData);
                  }
                }
              }
            }
          },
          legend: {
            layout: 'vertical',
            align: 'left',
            verticalAlign: 'top',
            x: 5,
            y: -10,
            floating: true,
            borderWidth: 1,
            backgroundColor: ((Highcharts.theme && Highcharts.theme.legendBackgroundColor) || '#FFFFFF'),
            shadow: true
          },
          credits: {
            enabled: false
          },
        },
        yAxis: {
          title: {
            text: 'Amount & Order'
          }
        },
        series: [
          {
            name: 'Income (Million)',
            data: [
                {!!  $incomeChart  !!}
            ],
            color: 'rgb(245,93,44)'
          },
          {
            name: 'Order',
            data: [
                {!!  $orderChart  !!}
            ],
            color: 'rgb(43,47,76)'
          }
        ]
      });
    </script>
@endsection