@extends('denara::app')

@push('stack-script')
<script src="{{asset('assets/plugins/chart.js/Chart.min.js')}}"></script>
@endpush

@push('stack-head')
<link rel="stylesheet" href="{{ asset('assets/plugins/chart.js/Chart.min.css') }}">
@endpush

@section('container')
    {{-- <div class="card col-12">
        <div class="card-header">
            <ul class="nav nav-pills ">
                <li class="nav-item"><a href="#sales" class="nav-link active" data-toggle="tab" role="button"
                        aria-expanded="false">Dashboard Sales</a></li>
                <li class="nav-item"><a href="#showroom" class="nav-link" data-toggle="tab" role="button"
                        aria-expanded="false">Dashboard Showroom</a></li>
                <li class="nav-item"><a href="#product" class="nav-link" data-toggle="tab" role="button"
                        aria-expanded="false">Dashboard Product</a></li>
            </ul>
        </div>
    </div> --}}
    <div class="row">
        @foreach ($counter as $c)
            {!! $c->render() !!}
        @endforeach
    </div>
<script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>
    <div class="row">
        @foreach ($chart as $c)
        <div class="col-6">
            {!! $c->render() !!}
        </div>
        @endforeach
    </div>




    <div class="tab-content">
        <div class="tab-pane fade in active show" id="sales">
            @yield('dashboard-sales')
        </div>
        <div class="tab-pane fade" id="showroom">
            @yield('dashboard-showroom')
        </div>
        <div class="tab-pane fade" id="product">
            @yield('dashboard-product')
        </div>
    </div>
@endsection