@php
$configData = Helper::appClasses();
@endphp

@extends('layouts/layoutMaster')

@section('title', 'Dashboard')

@section('vendor-style')
<link rel="stylesheet" href="{{asset('assets/vendor/libs/apex-charts/apex-charts.css')}}" />
@endsection

@section('vendor-script')
<script src="{{asset('assets/vendor/libs/apex-charts/apexcharts.js')}}"></script>
@endsection

@section('page-script')
<script src="{{asset('assets/js/dashboards-ecommerce.js')}}"></script>
@endsection

@section('content')

<style type="text/css">
  .dashboard-sub-item{
    width: fit-content;
  }
  .dashboard-sub-item:hover{
    transition: 0.5s;
    background-color: #00000008;
  }
</style>
<div class="row"  style="display:none">
  <!-- Gamification Card -->
  <div class="col-lg-9 col-md-9 col-12 mb-4">
    <div class="card h-100">
      <div class="card-header">
        <h3 class="card-title mb-2">Welcome {{ isset(auth()->user()->name)?auth()->user()->name:'John'}}!</h3>
        <span class="d-block mb-4 text-nowrap">This is where it all happens</span>
      </div> 
      <div class="card-body">
        <div class="row align-items-end">
          <div class="col-8">
            <h1 class="display-6 text-primary mb-2 pt-4 pb-1">We've been watching you</h1>
            <small class="d-block mb-3">Real clooooose.</small>

            <a href="javascript:;" class="btn btn-sm btn-primary">View Updates</a>
          </div>
          <div class="col-4">
            <img src="{{asset('assets/img/illustrations/prize-'.$configData['style'].'.png')}}" width="140" height="150" class="rounded-start" alt="View Sales" data-app-light-img="illustrations/prize-light.png" data-app-dark-img="illustrations/prize-dark.png">
          </div>
        </div>
      </div>
    </div>
  </div>
  <!--/ Gamification Card -->

  <!-- Multi Radial Chart -->
  <div class="col-lg-3 col-md-3 col-12 mb-4 sticky" >
    <div class="card">
      <div class="card-header d-flex justify-content-between align-items-center">
        <h5 class="card-title mb-0">Visits of 2022</h5>
        <div class="dropdown">
          <button class="btn p-0" type="button" id="visitsOptions" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
            <i class="bx bx-dots-vertical-rounded"></i>
          </button>
          <div class="dropdown-menu dropdown-menu-end" aria-labelledby="visitsOptions">
            <a class="dropdown-item" href="javascript:void(0);">Select All</a>
            <a class="dropdown-item" href="javascript:void(0);">Refresh</a>
            <a class="dropdown-item" href="javascript:void(0);">Share</a>
          </div>
        </div>
      </div>
      <div class="card-body">
        <div id="visitsRadialChart"></div>
          
      </div>

    </div>
  </div>
  <!--/ Multi Radial Chart -->

</div>
<div class="row"> 
 <!-- Gamification Card -->
   @foreach ($menuData[1]->menu as $menu)
   
 
     
      <div class="col-lg-12 col-md-12 col-12 mb-4">
        <div class="card h-100">
          <div class="card-header">
            <h3 class="card-title mb-2">{{ isset($menu->name) ? __($menu->name) : '' }}<hr></h3>

          </div>
          <div class="card-body">
            
              <div class="row align-items-end">
                 
                
                
                 
                  {{-- submenu --}}
                  @isset($menu->submenu)
                   @foreach($menu->submenu as $submenu)
                      <div class=" dashboard-sub-item">
                         
                           
                            
                            <a href="{{ isset($submenu->url)?$submenu->url:'/' }}" class="btn">
                              <span class="{{ $submenu->icon }}" style="    font-size: xx-large;"></span>&nbsp; {{ $submenu->name }}
                            </a>
                           
                          
                       </div>
                   @endforeach
                  
                  @endisset
     
                
                
              </div>
           
          </div>
          
        </div>
      </div>
 
   @endforeach
  <!--/ Gamification Card -->
   

 
</div>
@endsection