@extends('admin.layouts.main')

@section('title', 'Dashboard')

@section('menu', 'Dashboard')

@section('breadcrumb')
<div class="toolbar" id="kt_toolbar">
    <div id="kt_toolbar_container" class="container-fluid d-flex justify-content-end flex-stack">
        <ol class="breadcrumb text-muted fs-6 fw-bold">
            {{-- <li class="breadcrumb-item pe-3"><a href="{{}}" class="pe-3">Home</a></li>
            <li class="breadcrumb-item pe-3"><a href="#" class="pe-3">Library</a></li> --}}
            <li class="breadcrumb-item px-3 text-muted">Dashboard</li>
        </ol>
    </div>
</div>
@endsection

@section('content')
<!--begin::Container-->
<div id="kt_content_container" class="app-container container-fluid">
    <div class="card card-flush h-xl-100">
        <!--begin::Heading-->
        <div class="card-header rounded bgi-no-repeat bgi-size-cover bgi-position-y-top bgi-position-x-center align-items-start h-250px" style="background-image:url('/assets/metronic/media/svg/shapes/top-green.png" data-theme="light">
            <!--begin::Title-->
            <h3 class="card-title align-items-start flex-column text-white pt-15">
                <span class="fw-bold fs-2x mb-3">Selamat Datang</span>
                <div class="fs-4 text-white">
                    <span class="opacity-75">{{ auth()->user()->name }} ^_^</span>
                </div>
            </h3>
            <!--end::Title-->
        </div>
        <!--end::Heading-->
        <!--begin::Body-->
        <div class="card-body mt-n20">
            <!--begin::Stats-->
            <div class="mt-n20 position-relative">
                <!--begin::Row-->
                <div class="row g-3 g-lg-6">
                    <!--begin::Col-->
                    <div class="col-lg-3 col-md-6 col-sm-12">
                        <!--begin::Items-->
                        <div class="bg-gray-100 bg-opacity-70 rounded-2 px-6 py-5">
                            <!--begin::Symbol-->
                            <div class="symbol symbol-30px me-5 mb-8">
                                <span class="symbol-label">
                                    <!--begin::Svg Icon | path: icons/duotune/medicine/med005.svg-->
                                    <span class="svg-icon svg-icon-1 svg-icon-primary">
                                        <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                                            <path opacity="0.3" fill-rule="evenodd" clip-rule="evenodd" d="M2 4.63158C2 3.1782 3.1782 2 4.63158 2H13.47C14.0155 2 14.278 2.66919 13.8778 3.04006L12.4556 4.35821C11.9009 4.87228 11.1726 5.15789 10.4163 5.15789H7.1579C6.05333 5.15789 5.15789 6.05333 5.15789 7.1579V16.8421C5.15789 17.9467 6.05333 18.8421 7.1579 18.8421H16.8421C17.9467 18.8421 18.8421 17.9467 18.8421 16.8421V13.7518C18.8421 12.927 19.1817 12.1387 19.7809 11.572L20.9878 10.4308C21.3703 10.0691 22 10.3403 22 10.8668V19.3684C22 20.8218 20.8218 22 19.3684 22H4.63158C3.1782 22 2 20.8218 2 19.3684V4.63158Z" fill="currentColor"/>
                                            <path d="M10.9256 11.1882C10.5351 10.7977 10.5351 10.1645 10.9256 9.77397L18.0669 2.6327C18.8479 1.85165 20.1143 1.85165 20.8953 2.6327L21.3665 3.10391C22.1476 3.88496 22.1476 5.15129 21.3665 5.93234L14.2252 13.0736C13.8347 13.4641 13.2016 13.4641 12.811 13.0736L10.9256 11.1882Z" fill="currentColor"/>
                                            <path d="M8.82343 12.0064L8.08852 14.3348C7.8655 15.0414 8.46151 15.7366 9.19388 15.6242L11.8974 15.2092C12.4642 15.1222 12.6916 14.4278 12.2861 14.0223L9.98595 11.7221C9.61452 11.3507 8.98154 11.5055 8.82343 12.0064Z" fill="currentColor"/>
                                        </svg>
                                    </span>
                                    <!--end::Svg Icon-->
                                </span>
                            </div>
                            <!--end::Symbol-->
                            <!--begin::Stats-->
                            <div class="m-0">
                                <!--begin::Number-->
                                <span class="text-gray-700 fw-bolder d-block fs-2qx lh-1 ls-n1 mb-1">{{ number_format($data['numberOfPosts'], 0, ',', '.') }}</span>
                                <!--end::Number-->
                                <!--begin::Desc-->
                                <span class="text-gray-500 fw-semibold fs-6">Post</span>
                                <!--end::Desc-->
                            </div>
                            <!--end::Stats-->
                        </div>
                        <!--end::Items-->
                    </div>
                    <!--end::Col-->
                    <!--begin::Col-->
                    <div class="col-lg-3 col-md-6 col-sm-12">
                        <!--begin::Items-->
                        <div class="bg-gray-100 bg-opacity-70 rounded-2 px-6 py-5">
                            <!--begin::Symbol-->
                            <div class="symbol symbol-30px me-5 mb-8">
                                <span class="symbol-label">
                                    <!--begin::Svg Icon | path: icons/duotune/finance/fin001.svg-->
                                    <span class="svg-icon svg-icon-1 svg-icon-primary">
                                        <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                                            <rect opacity="0.5" x="7" y="2" width="14" height="16" rx="3" fill="currentColor"/>
                                            <rect x="3" y="6" width="14" height="16" rx="3" fill="currentColor"/>
                                        </svg>
                                    </span>
                                    <!--end::Svg Icon-->
                                </span>
                            </div>
                            <!--end::Symbol-->
                            <!--begin::Stats-->
                            <div class="m-0">
                                <!--begin::Number-->
                                <span class="text-gray-700 fw-bolder d-block fs-2qx lh-1 ls-n1 mb-1">{{ number_format($data['numberOfPages'], 0, ',', '.') }}</span>
                                <!--end::Number-->
                                <!--begin::Desc-->
                                <span class="text-gray-500 fw-semibold fs-6">Pages</span>
                                <!--end::Desc-->
                            </div>
                            <!--end::Stats-->
                        </div>
                        <!--end::Items-->
                    </div>
                    <!--end::Col-->
                    <!--begin::Col-->
                    <div class="col-lg-3 col-md-6 col-sm-12">
                        <!--begin::Items-->
                        <div class="bg-gray-100 bg-opacity-70 rounded-2 px-6 py-5">
                            <!--begin::Symbol-->
                            <div class="symbol symbol-30px me-5 mb-8">
                                <span class="symbol-label">
                                    <!--begin::Svg Icon | path: icons/duotune/general/gen020.svg-->
                                    <span class="svg-icon svg-icon-1 svg-icon-primary">
                                        <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                                            <path opacity="0.3" d="M22 5V19C22 19.6 21.6 20 21 20H19.5L11.9 12.4C11.5 12 10.9 12 10.5 12.4L3 20C2.5 20 2 19.5 2 19V5C2 4.4 2.4 4 3 4H21C21.6 4 22 4.4 22 5ZM7.5 7C6.7 7 6 7.7 6 8.5C6 9.3 6.7 10 7.5 10C8.3 10 9 9.3 9 8.5C9 7.7 8.3 7 7.5 7Z" fill="currentColor"/>
                                            <path d="M19.1 10C18.7 9.60001 18.1 9.60001 17.7 10L10.7 17H2V19C2 19.6 2.4 20 3 20H21C21.6 20 22 19.6 22 19V12.9L19.1 10Z" fill="currentColor"/>
                                        </svg>
                                    </span>
                                    <!--end::Svg Icon-->
                                </span>
                            </div>
                            <!--end::Symbol-->
                            <!--begin::Stats-->
                            <div class="m-0">
                                <!--begin::Number-->
                                <span class="text-gray-700 fw-bolder d-block fs-2qx lh-1 ls-n1 mb-1">{{ number_format($data['numberOfVideos'], 0, ',', '.') }}</span>
                                <!--end::Number-->
                                <!--begin::Desc-->
                                <span class="text-gray-500 fw-semibold fs-6">Video</span>
                                <!--end::Desc-->
                            </div>
                            <!--end::Stats-->
                        </div>
                        <!--end::Items-->
                    </div>
                    <!--end::Col-->
                    <!--begin::Col-->
                    <div class="col-lg-3 col-md-6 col-sm-12">
                        <!--begin::Items-->
                        <div class="bg-gray-100 bg-opacity-70 rounded-2 px-6 py-5">
                            <!--begin::Symbol-->
                            <div class="symbol symbol-30px me-5 mb-8">
                                <span class="symbol-label">
                                    <!--begin::Svg Icon | path: icons/duotune/general/gen013.svg-->
                                    <span class="svg-icon svg-icon-1 svg-icon-primary">
                                        <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                                            <path d="M17.5 11H6.5C4 11 2 9 2 6.5C2 4 4 2 6.5 2H17.5C20 2 22 4 22 6.5C22 9 20 11 17.5 11ZM15 6.5C15 7.9 16.1 9 17.5 9C18.9 9 20 7.9 20 6.5C20 5.1 18.9 4 17.5 4C16.1 4 15 5.1 15 6.5Z" fill="currentColor"/>
                                            <path opacity="0.3" d="M17.5 22H6.5C4 22 2 20 2 17.5C2 15 4 13 6.5 13H17.5C20 13 22 15 22 17.5C22 20 20 22 17.5 22ZM4 17.5C4 18.9 5.1 20 6.5 20C7.9 20 9 18.9 9 17.5C9 16.1 7.9 15 6.5 15C5.1 15 4 16.1 4 17.5Z" fill="currentColor"/>
                                        </svg>
                                    </span>
                                    <!--end::Svg Icon-->
                                </span>
                            </div>
                            <!--end::Symbol-->
                            <!--begin::Stats-->
                            <div class="m-0">
                                <!--begin::Number-->
                                <span class="text-gray-700 fw-bolder d-block fs-2qx lh-1 ls-n1 mb-1">{{ number_format($data['numberOfMenus'], 0, ',', '.') }}</span>
                                <!--end::Number-->
                                <!--begin::Desc-->
                                <span class="text-gray-500 fw-semibold fs-6">Menu</span>
                                <!--end::Desc-->
                            </div>
                            <!--end::Stats-->
                        </div>
                        <!--end::Items-->
                    </div>
                    <!--end::Col-->
                </div>
                <!--end::Row-->
            </div>
            <!--end::Stats-->
        </div>
        <!--end::Body-->
    </div>
</div>
<!--end::Container-->
@endsection

@push('js')
<!-- Main Script -->
<script>
    $(document).ready( function () {
        /* Set Nav-Link Active */
        $('#menu-link-dashboard').addClass('active');
    });

    /* Toast Init */
    const Toast = Swal.mixin({
        toast: true,
        position: 'top-end',
        showConfirmButton: false,
        timer: 3000,
        timerProgressBar: true,
            didOpen: (toast) => {
                toast.addEventListener('mouseenter', Swal.stopTimer)
                toast.addEventListener('mouseleave', Swal.resumeTimer)
            }
    });
</script>
@if($message = Session::get('welcome'))
    <script>
        $(document).ready(function(){
            Toast.fire({
                icon: 'success',
                title: '{{ $message }}'
            })
        });
    </script>
@endif
@endpush