@extends('layouts.master')

@section('content')
<!-- Page-content -->
    <div class="group-data-[sidebar-size=lg]:ltr:md:ml-vertical-menu group-data-[sidebar-size=lg]:rtl:md:mr-vertical-menu group-data-[sidebar-size=md]:ltr:ml-vertical-menu-md group-data-[sidebar-size=md]:rtl:mr-vertical-menu-md group-data-[sidebar-size=sm]:ltr:ml-vertical-menu-sm group-data-[sidebar-size=sm]:rtl:mr-vertical-menu-sm pt-[calc(theme('spacing.header')_*_1)] pb-[calc(theme('spacing.header')_*_0.8)] px-4 group-data-[navbar=bordered]:pt-[calc(theme('spacing.header')_*_1.3)] group-data-[navbar=hidden]:pt-0 group-data-[layout=horizontal]:mx-auto group-data-[layout=horizontal]:max-w-screen-2xl group-data-[layout=horizontal]:px-0 group-data-[layout=horizontal]:group-data-[sidebar-size=lg]:ltr:md:ml-auto group-data-[layout=horizontal]:group-data-[sidebar-size=lg]:rtl:md:mr-auto group-data-[layout=horizontal]:md:pt-[calc(theme('spacing.header')_*_1.6)] group-data-[layout=horizontal]:px-3 group-data-[layout=horizontal]:group-data-[navbar=hidden]:pt-[calc(theme('spacing.header')_*_0.9)]">
        <div class="container-fluid group-data-[content=boxed]:max-w-boxed mx-auto">
            <div class="flex flex-col gap-2 py-4 md:flex-row md:items-center print:hidden">
                <div class="grow">
                    <h5 class="text-16">Sub Kreatif Indonesia</h5>
                </div>
                <ul class="flex items-center gap-2 text-sm font-normal shrink-0">
                    <li class="relative before:content-['\ea54'] before:font-remix ltr:before:-right-1 rtl:before:-left-1  before:absolute before:text-[18px] before:-top-[3px] ltr:pr-4 rtl:pl-4 before:text-slate-400 dark:text-zink-200">
                        <a href="#!" class="text-slate-400 dark:text-zink-200">Dashboards</a>
                    </li>
                    <li class="text-slate-700 dark:text-zink-100">Sub Kreatif Indonesia</li>
                </ul>
            </div>
            <div class="grid grid-cols-12 2xl:grid-cols-12 gap-x-5">
                <div class="col-span-12 md:order-1 xl:col-span-8 2xl:col-span-6">
                    <h5 class="mb-2">Selamat Datang {{ Session::get('name') }} 🎉</h5>
                    <p class="text-slate-500 dark:text-zink-200">Dashboard Running system</p>
                     <b class="mb-5 text-black dark:text-zink-200">{{ $name_comp }}</b>
                </div>
                <div class="col-span-12 md:order-2 xl:col-span-4 2xl:col-start-9 card">
                    <div class="p-4">
                        <div class="grid grid-cols-3">
                            <div class="px-4 text-center ltr:border-r rtl:border-l border-slate-200 dark:border-zink-500 ltr:last:border-r-0 rtl:last:border-l-0">
                                <h6 class="mb-1 font-bold"><span class="counter-value" data-target="{{$t_ps}}">0</span></h6>
                                <p class="text-slate-500 dark:text-zink-200">Peserta</p>
                            </div>
                            <div class="px-4 text-center ltr:border-r rtl:border-l border-slate-200 dark:border-zink-500 ltr:last:border-r-0 rtl:last:border-l-0">
                                <h6 class="mb-1 font-bold"><span class="counter-value" data-target="{{$paid}}">0</span></h6>
                                <p class="text-slate-500 dark:text-zink-200">Paid</p>
                            </div>
                            <div class="px-4 text-center ltr:border-r rtl:border-l border-slate-200 dark:border-zink-500 ltr:last:border-r-0 rtl:last:border-l-0">
                                <h6 class="mb-1 font-bold"><span class="counter-value" data-target="{{$exp}}">0</span></h6>
                                <p class="text-slate-500 dark:text-zink-200">Expired</p>
                            </div>
                        </div>
                    </div>
                </div>
                

                <div class="col-span-12 md:order-3 lg:col-span-12 2xl:col-span-12 card">
                    <div class="card-body">
                        <div class="grid grid-cols-12">
                            <div class="col-span-8 md:col-span-9">
                                <p class="text-slate-500 dark:text-slate-200">Total Peserta <b>{{$comp_ev[0]->event_name}}</b></p>
                                <h5 class="mt-3 mb-4"><span class="counter-value" data-target="{{($paid)}}">0</span></h5>
                            </div>
                            <div class="col-span-4 md:col-span-3">
                                <!-- <div id="totalEmployee" data-chart-colors='["bg-custom-500"]' dir="ltr" class="grow apex-charts"></div> -->
                                <p class="text-slate-500 dark:text-slate-200 grow">Pencapaian</p> <h2><span class="font-medium text-blue-500">{{number_format($tr_bw,2)}} %</span></h2>
                            </div>
                        </div>
                        <div class="flex items-center gap-3 mt-3">
                            <p class="text-slate-500 dark:text-slate-200 grow">Target<span class="font-medium text-green-500"> {{ number_format(count($total) > 0 ? $total[0]->total_kuota : 0) }}</span> Peserta</p>
                            <p class="text-slate-500 dark:text-slate-200"></p>
                        </div>
                    </div>
                </div>
                
             
              
              
               
            </div>
        </div>
        <!-- container-fluid -->
    </div>
<!-- End Page-content -->
@section('script')
    <script src="{{ URL::to('assets/js/pages/dashboards-hr.init.js') }}"></script>
@endsection
@endsection