@extends('layouts.admin')

@section('content')
<div class="content-wrapper">

  <!-- Page header -->
  <div class="page-header page-header-light">
    <div class="page-header-content header-elements-md-inline">
      <div class="page-title d-flex">
        <h4><i class="icon-arrow-left52 mr-2"></i> <span class="font-weight-semibold">@lang('keyword.home')</span> - @lang('keyword.dashboard')</h4>
        <a href="#" class="header-elements-toggle text-default d-md-none"><i class="icon-more"></i></a>
      </div>

      <div class="header-elements d-none">
        <div class="d-flex justify-content-center">
          <a href="/admin/revenue" class="btn btn-link btn-float text-default"><i class="icon-bars-alt text-primary"></i><span>@lang('keyword.report')@lang('keyword.revenue')</span></a>
          <a href="/admin/laundry" class="btn btn-link btn-float text-default"><i class="icon-calculator text-primary"></i> <span>@lang('keyword.report')@lang('keyword.laundry')</span></a>
          <a href="/admin/merchants" class="btn btn-link btn-float text-default"><i class="icon-calendar5 text-primary"></i> <span>@lang('keyword.merchant')</span></a>
        </div>
      </div>
    </div>


  </div>
  <!-- /page header -->


  <!-- Content area -->
  <div class="content">
    <!-- Dashboard content -->
    <div class="row">
        <div class="col-lg-12">
            <div class="row">
                <div class="col-lg-3">
                    <!-- Members online -->
                    <div class="card bg-teal-400" onclick="location.href='{{ route('home.users') }}'" style="cursor:pointer">
                        <div class="card-body">
                            <div class="d-flex">
                                <h3 class="font-weight-semibold mb-0">{{$nTodayCustomer}}</h3>
                                <span class="badge bg-teal-800 badge-pill align-self-center ml-auto">{{$rateCustomerTd}}%</span>
                            </div>

                            <div>
                                @lang('keyword.customer')@lang('keyword.registered')@lang('keyword.today')
                                <div class="font-size-sm opacity-75">{{$nCustomer}} @lang('keyword.total')</div>
                            </div>
                        </div>

                        <div class="container-fluid">
                            <div id="members-online"></div>
                        </div>
                    </div>
                    <!-- /members online -->

                </div>

                <div class="col-lg-3">

                    <!-- Current server load -->
                    <div class="card bg-pink-400" onclick="location.href='{{ route('home.laundry') }}'" style="cursor:pointer">
                        <div class="card-body">
                            <div class="d-flex">
                                <h3 class="font-weight-semibold mb-0">{{$nTodayLaundry}}</h3>
                                <span class="badge bg-teal-800 badge-pill align-self-center ml-auto">{{$rateLaundryTd}}%</span>
                            </div>
                            <div>
                                @lang('keyword.laundry')@lang('keyword.today')
                                <div class="font-size-sm opacity-75">{{$nLaundry}} @lang('keyword.total')</div>
                            </div>
                        </div>

                        <div id="server-load"></div>
                    </div>
                    <!-- /current server load -->

                </div>

                <div class="col-lg-3">

                    <!-- Today's revenue -->
{{--                    <div class="card bg-blue-400" onclick="location.href='{{ route('home.revenue') }}'" style="cursor:pointer">--}}
{{--                        <div class="card-body">--}}
{{--                            <div class="d-flex">--}}
{{--                                <h3 class="font-weight-semibold mb-0">{{$tdRevenueUS}} + {{$tdRevenueKH}}</h3>--}}
{{--                                <div class="list-icons ml-auto">--}}
{{--                                    <a class="list-icons-item" data-action="reload"></a>--}}
{{--                                </div>--}}
{{--                            </div>--}}

{{--                            <div>--}}
{{--                                @lang('keyword.revenue')@lang('keyword.today')--}}
{{--                                <div class="font-size-sm opacity-75">{{ $avgRevenue }} @lang('keyword.avg')</div>--}}
{{--                            </div>--}}
{{--                        </div>--}}

{{--                        <div id="today-revenue"></div>--}}
{{--                    </div>--}}

                    <div class="card bg-blue-400" onclick="location.href='{{ route('home.revenue') }}'" style="cursor:pointer">
                        <div class="card-body">
                            <div class="d-flex">
                                <h3 class="font-weight-semibold mb-0">{{$tdRevenueKH}}</h3>
                                <div class="list-icons ml-auto">
                                    <a class="list-icons-item" data-action="reload"></a>
                                </div>
                            </div>

                            <div>
                                @lang('keyword.revenue')@lang('keyword.today')
                                <div class="font-size-sm opacity-75">{{ $avgRevenue }} @lang('keyword.avg')</div>
                            </div>
                        </div>

                        <div id="today-revenue"></div>
                    </div>

                    <!-- /today's revenue -->
                </div>

                <div class="col-lg-3">

                    <!-- Today's Sale (Order) -->
                    <div class="card bg-blue-400" onclick="location.href='{{ route('admin.orders') }}'" style="cursor:pointer">
                        <div class="card-body">
                            <div class="d-flex">
                                <h3 class="font-weight-semibold mb-0">{{ $todayOrdersTotalUS }}</h3>
                                <div class="list-icons ml-auto">
                                    <a class="list-icons-item" data-action="reload"></a>
                                </div>
                            </div>

                            <div>
                                ការបញ្ជាទិញ
                            </div>
                        </div>

                        <div id="today-revenue"></div>
                    </div>
                    <!-- /today's revenue -->
                </div>

            </div>
        </div>

      <div class="col-xl-8">
                <!-- Daily Laundry -->
                <div class="card">
                  <div class="card-header header-elements-inline">
                    <h6 class="card-title">របាយការណ៏ប្រចាំខេត្ត</h6>
                    <div class="row form-group m-1 ml-3">
                      <label for="" class="col-form-label">@lang('keyword.date-range'):&nbsp; </label>
                      <div id="reportrange" class="btn" style="background: #fff; cursor: pointer; padding: 5px 10px; border: 1px solid #ccc">
                        <i class="icon-calendar5"></i>&nbsp;
                        <span></span> <i class="fa fa-caret-down"></i>
                      </div>
                    </div>

                    <hr>
                  </div>

                  <div class="card-body">
                    <div class="chart" id="sales-heatmap"></div>
                  </div>
                  <div class="table-responsive">
                    <table class="table text-nowrap" id="province_table">
                      <thead>
                        <tr>
                          <th class="">@lang('keyword.province')</th>
                          <th>ចំនួន@lang('keyword.merchant')@lang('keyword.total')</th>
                          <th>ចំនួន@lang('keyword.laundry')@lang('keyword.total')</th>
                          <th>@lang('keyword.revenue') (@lang('keyword.usd'))</th>
                          <th>@lang('keyword.revenue') (@lang('keyword.khr'))</th>
                        </tr>
                      </thead>
                    </table>
                  </div>
                </div>
                <!-- /daily financials -->

      </div>

      <div class="col-xl-4">

        <!-- Progress counters -->
{{--        <div class="row">--}}
{{--          <div class="col-sm-6">--}}

{{--            <!-- Available hours -->--}}
{{--            <div class="card text-center">--}}
{{--              <div class="card-body">--}}

{{--                        <!-- Progress counter -->--}}
{{--                <div class="svg-center position-relative" id="hours-available-progress"></div>--}}
{{--                <!-- /progress counter -->--}}


{{--                <!-- Bars -->--}}
{{--                <div id="hours-available-bars"></div>--}}
{{--                <!-- /bars -->--}}

{{--              </div>--}}
{{--            </div>--}}
{{--            <!-- /available hours -->--}}

{{--          </div>--}}

{{--          <div class="col-sm-6">--}}

{{--            <!-- Productivity goal -->--}}
{{--            <div class="card text-center">--}}
{{--              <div class="card-body">--}}

{{--                <!-- Progress counter -->--}}
{{--                <div class="svg-center position-relative" id="goal-progress"></div>--}}
{{--                <!-- /progress counter -->--}}

{{--                <!-- Bars -->--}}
{{--                <div id="goal-bars"></div>--}}
{{--                <!-- /bars -->--}}

{{--              </div>--}}
{{--            </div>--}}
{{--            <!-- /productivity goal -->--}}

{{--          </div>--}}
{{--        </div>--}}
        <!-- /progress counters -->


        <!-- Recent Registered Customer -->
        <div class="card">

          <div class="card-header header-elements-inline">
            <h6 class="card-title">@lang('keyword.merchant')@lang('keyword.registered')@lang('keyword.recent')</h6>
            <div class="header-elements">
              <span class="badge bg-danger-400 badge-pill">5 @lang('keyword.merchant')@lang('keyword.latest')</span>
            </div>
          </div>

          <div class="card-body">
            <div class="chart mb-3" id="bullets"></div>

            <ul class="media-list">
              @foreach ($recMerchants as $recMerchant)
                <li class="media">
                  <div class="mr-3">
                    <a href="#" class="btn bg-transparent border-success text-success rounded-round border-2 btn-icon"><i class="icon-checkmark3"></i></a>
                  </div>

                  <div class="media-body">
                <span class="font-weight-semibold">  {{ $recMerchant->name }}</span> @lang('keyword.registered')
                    <div class="text-muted">@lang('keyword.brand_name'): {{ $recMerchant->brand_name}}</div>
                  </div>

                  <div class="ml-3 align-self-center">
                    <a href="#" class="list-icons-item"><i class="icon-more"></i></a>
                  </div>
                </li>
              @endforeach


            </ul>
          </div>
        </div>
        <!-- /daily sales -->

      </div>
    </div>
    <!-- /dashboard content -->

  </div>
  <!-- /content area -->




</div>
<script type="text/javascript">
  $(document).ready(function(){
    var start = moment().subtract(29, 'days');
    var end = moment();

    function cb(startDate, endDate) {
        $('#reportrange span').html(startDate.format('MMMM D, YYYY') + ' - ' + endDate.format('MMMM D, YYYY'));
        start = startDate;
        end = endDate;
        $(document).trigger('reDrawTable');

    }

    $('#reportrange').daterangepicker({
        startDate: start,
        endDate: end,
        locale: {
          "customRangeLabel": "@lang('keyword.custom-range')",
        },
        ranges: {
           '@lang('keyword.today')': [moment(), moment()],
           '@lang('keyword.yesterday')': [moment().subtract(1, 'days'), moment().subtract(1, 'days')],
           '@lang('keyword.last-7-days')': [moment().subtract(6, 'days'), moment()],
           '@lang('keyword.last-30-days')': [moment().subtract(29, 'days'), moment()],
           '@lang('keyword.this-month')': [moment().startOf('month'), moment().endOf('month')],
           '@lang('keyword.last-month')': [moment().subtract(1, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')]
        }
    }, cb);

    cb(start, end);
    $(document).on('reDrawTable',function(e){
      $('#province_table').DataTable().ajax.reload();
      e.preventDefault();
    });
    $('#province_table').DataTable({
      dom: '',
     'processing': true,
     'severSide': true,
     'paging': false,
     language: {
       "paginate": {
       "first":      "@lang('keyword.first')",
       "last":       "@lang('keyword.latest')",
       "next":       "@lang('keyword.next')",
       "previous":   "@lang('keyword.previous')"
     },
     "search": '@lang('keyword.search') : ',
     "zeroRecords":    "@lang('keyword.no-result')",
     "lengthMenu":     "បង្ហាញ  _MENU_  @lang('keyword.report')",
     "info":           "បង្ហាញ _START_ ទៅ _END_ នៃ _TOTAL_ @lang('keyword.report')",
     "infoEmpty":      "គ្មានទិន្នន័យ",
     },
     'ajax':{
       url: '/admin/province/data',
       dataSrc: 'data',
       method: 'post',
       data: function(d){
                 d.startDate = start.format('YYYY-MM-DD HH:mm:00');
                 d.endDate = end.format('YYYY-MM-DD HH:mm:00');
                 d._token = "{{ csrf_token() }}";
             }
     },
     'columns': [
       {
         data: 'province'
       },
       {
         data: 'merchant'
       },
       {
         data: 'total_laundry'
       },
       {
         data: 'revenueUS'
       },
       {
         data: 'revenueKH'
       }
     ],
     'order': [[1, 'desc']]
    });
  });
</script>
@endsection