@extends('layouts/backendTemplate')

@section('content')
    <div class="app-main flex-column flex-row-fluid" id="kt_app_main">

        <div class="d-flex flex-column flex-column-fluid">

            <div id="kt_app_toolbar" class="app-toolbar py-3 py-lg-6">

                <div id="kt_app_toolbar_container" class="app-container container-xxl d-flex flex-stack">

                    <div class="page-title d-flex flex-column justify-content-center flex-wrap me-3">

                        <h1 class="page-heading d-flex text-dark fw-bold fs-3 flex-column justify-content-center my-3">
                            Dashboard
                        </h1>

                        <ul class="breadcrumb breadcrumb-separatorless fw-semibold fs-7 my-0 pt-1">

                            <li class="breadcrumb-item text-muted">
                                <a href="{{ url('') }}" class="text-muted text-hover-primary">
                                    Dashboard
                                </a>
                            </li>
                        </ul>

                    </div>

                </div>

            </div>


            <div id="kt_app_content" class="app-content flex-column-fluid">
                <!--begin::Content container-->
                <div id="kt_app_content_container" class="app-container container-xxl">
                    <!--begin::Row-->

                    @if ($itemView['sub_category_no_where_else'])
                        <h1>CHIANG MAI AND NOWHERE ELSE</h1>
                        <div class="row gy-5 g-xl-10">
                            @foreach ($itemView['sub_category_no_where_else'] as $item)
                                <div class="col-sm-6 col-xl-2 mb-xl-10">
                                    <div class="card h-lg-100">
                                        <div class="card-body d-flex justify-content-between align-items-start flex-column">

                                            <div class="m-0">
                                                <span class="svg-icon svg-icon-2hx svg-icon-gray-600">
                                                    <svg width="24" height="24" viewBox="0 0 24 24" fill="none"
                                                        xmlns="http://www.w3.org/2000/svg">
                                                        <path opacity="0.3"
                                                            d="M14 3V21H10V3C10 2.4 10.4 2 11 2H13C13.6 2 14 2.4 14 3ZM7 14H5C4.4 14 4 14.4 4 15V21H8V15C8 14.4 7.6 14 7 14Z"
                                                            fill="currentColor"></path>
                                                        <path
                                                            d="M21 20H20V8C20 7.4 19.6 7 19 7H17C16.4 7 16 7.4 16 8V20H3C2.4 20 2 20.4 2 21C2 21.6 2.4 22 3 22H21C21.6 22 22 21.6 22 21C22 20.4 21.6 20 21 20Z"
                                                            fill="currentColor"></path>
                                                    </svg>
                                                </span>
                                            </div>

                                            <div class="d-flex flex-column my-7">

                                                <span class="fw-semibold fs-3x text-gray-800 lh-1 ls-n2">
                                                    {{ number_format($item['article_count'], 0) }}
                                                </span>

                                                <div class="m-0">
                                                    <span class="fw-semibold fs-6 text-gray-400">
                                                        {{ $item['name'] ?? '-' }}
                                                    </span>
                                                </div>
                                            </div>

                                        </div>
                                    </div>
                                </div>
                            @endforeach
                        </div>
                    @endif


                    @if ($itemView['sub_category_where_else'])
                        <h1>WHERE ELSE</h1>
                        <div class="row gy-5 g-xl-10">
                            @foreach ($itemView['sub_category_where_else'] as $item)
                                <div class="col-sm-6 col-xl-2 mb-xl-10">
                                    <div class="card h-lg-100">
                                        <div class="card-body d-flex justify-content-between align-items-start flex-column">

                                            <div class="m-0">
                                                <span class="svg-icon svg-icon-2hx svg-icon-gray-600">
                                                    <svg width="24" height="24" viewBox="0 0 24 24" fill="none"
                                                        xmlns="http://www.w3.org/2000/svg">
                                                        <path opacity="0.3"
                                                            d="M14 3V21H10V3C10 2.4 10.4 2 11 2H13C13.6 2 14 2.4 14 3ZM7 14H5C4.4 14 4 14.4 4 15V21H8V15C8 14.4 7.6 14 7 14Z"
                                                            fill="currentColor"></path>
                                                        <path
                                                            d="M21 20H20V8C20 7.4 19.6 7 19 7H17C16.4 7 16 7.4 16 8V20H3C2.4 20 2 20.4 2 21C2 21.6 2.4 22 3 22H21C21.6 22 22 21.6 22 21C22 20.4 21.6 20 21 20Z"
                                                            fill="currentColor"></path>
                                                    </svg>
                                                </span>
                                            </div>

                                            <div class="d-flex flex-column my-7">

                                                <span class="fw-semibold fs-3x text-gray-800 lh-1 ls-n2">
                                                    {{ number_format($item['article_count'], 0) }}
                                                </span>

                                                <div class="m-0">
                                                    <span class="fw-semibold fs-6 text-gray-400">
                                                        {{ $item['name'] ?? '-' }}
                                                    </span>
                                                </div>
                                            </div>

                                        </div>
                                    </div>
                                </div>
                            @endforeach
                        </div>
                    @endif


                    <h1>FILES</h1>
                    <div class="row gy-5 g-xl-10">

                        <div class="col-sm-6 col-xl-2 mb-xl-10">
                            <!--begin::Card widget 2-->
                            <div class="card h-lg-100">
                                <!--begin::Body-->
                                <div class="card-body d-flex justify-content-between align-items-start flex-column">
                                    <!--begin::Icon-->
                                    <div class="m-0">
                                        <!--begin::Svg Icon | path: icons/duotune/graphs/gra001.svg-->
                                        <span class="svg-icon svg-icon-2hx svg-icon-gray-600">
                                            <svg width="24" height="24" viewBox="0 0 24 24" fill="none"
                                                xmlns="http://www.w3.org/2000/svg">
                                                <path opacity="0.3"
                                                    d="M14 3V21H10V3C10 2.4 10.4 2 11 2H13C13.6 2 14 2.4 14 3ZM7 14H5C4.4 14 4 14.4 4 15V21H8V15C8 14.4 7.6 14 7 14Z"
                                                    fill="currentColor"></path>
                                                <path
                                                    d="M21 20H20V8C20 7.4 19.6 7 19 7H17C16.4 7 16 7.4 16 8V20H3C2.4 20 2 20.4 2 21C2 21.6 2.4 22 3 22H21C21.6 22 22 21.6 22 21C22 20.4 21.6 20 21 20Z"
                                                    fill="currentColor"></path>
                                            </svg>
                                        </span>
                                        <!--end::Svg Icon-->
                                    </div>
                                    <!--end::Icon-->
                                    <!--begin::Section-->
                                    <div class="d-flex flex-column my-7">
                                        <!--begin::Number-->
                                        <span class="fw-semibold fs-3x text-gray-800 lh-1 ls-n2">
                                            {{ number_format($countVideoView, 0) }}
                                        </span>
                                        <!--end::Number-->
                                        <!--begin::Follower-->
                                        <div class="m-0">
                                            <span class="fw-semibold fs-6 text-gray-400">Video</span>
                                        </div>
                                        <!--end::Follower-->
                                    </div>

                                </div>
                                <!--end::Body-->
                            </div>
                            <!--end::Card widget 2-->
                        </div>

                        <div class="col-sm-6 col-xl-2 mb-xl-10">
                            <!--begin::Card widget 2-->
                            <div class="card h-lg-100">
                                <!--begin::Body-->
                                <div class="card-body d-flex justify-content-between align-items-start flex-column">
                                    <!--begin::Icon-->
                                    <div class="m-0">
                                        <!--begin::Svg Icon | path: icons/duotune/graphs/gra001.svg-->
                                        <span class="svg-icon svg-icon-2hx svg-icon-gray-600">
                                            <svg width="24" height="24" viewBox="0 0 24 24" fill="none"
                                                xmlns="http://www.w3.org/2000/svg">
                                                <path opacity="0.3"
                                                    d="M14 3V21H10V3C10 2.4 10.4 2 11 2H13C13.6 2 14 2.4 14 3ZM7 14H5C4.4 14 4 14.4 4 15V21H8V15C8 14.4 7.6 14 7 14Z"
                                                    fill="currentColor"></path>
                                                <path
                                                    d="M21 20H20V8C20 7.4 19.6 7 19 7H17C16.4 7 16 7.4 16 8V20H3C2.4 20 2 20.4 2 21C2 21.6 2.4 22 3 22H21C21.6 22 22 21.6 22 21C22 20.4 21.6 20 21 20Z"
                                                    fill="currentColor"></path>
                                            </svg>
                                        </span>
                                        <!--end::Svg Icon-->
                                    </div>
                                    <!--end::Icon-->
                                    <!--begin::Section-->
                                    <div class="d-flex flex-column my-7">
                                        <!--begin::Number-->
                                        <span class="fw-semibold fs-3x text-gray-800 lh-1 ls-n2">
                                            {{ number_format($countSoundView, 0) }}
                                        </span>
                                        <!--end::Number-->
                                        <!--begin::Follower-->
                                        <div class="m-0">
                                            <span class="fw-semibold fs-6 text-gray-400">Sound</span>
                                        </div>
                                        <!--end::Follower-->
                                    </div>
                                    <!--end::Section-->

                                </div>
                                <!--end::Body-->
                            </div>
                            <!--end::Card widget 2-->
                        </div>

                        <div class="col-sm-6 col-xl-2 mb-xl-10">
                            <!--begin::Card widget 2-->
                            <div class="card h-lg-100">
                                <!--begin::Body-->
                                <div class="card-body d-flex justify-content-between align-items-start flex-column">
                                    <!--begin::Icon-->
                                    <div class="m-0">
                                        <!--begin::Svg Icon | path: icons/duotune/graphs/gra001.svg-->
                                        <span class="svg-icon svg-icon-2hx svg-icon-gray-600">
                                            <svg width="24" height="24" viewBox="0 0 24 24" fill="none"
                                                xmlns="http://www.w3.org/2000/svg">
                                                <path opacity="0.3"
                                                    d="M14 3V21H10V3C10 2.4 10.4 2 11 2H13C13.6 2 14 2.4 14 3ZM7 14H5C4.4 14 4 14.4 4 15V21H8V15C8 14.4 7.6 14 7 14Z"
                                                    fill="currentColor"></path>
                                                <path
                                                    d="M21 20H20V8C20 7.4 19.6 7 19 7H17C16.4 7 16 7.4 16 8V20H3C2.4 20 2 20.4 2 21C2 21.6 2.4 22 3 22H21C21.6 22 22 21.6 22 21C22 20.4 21.6 20 21 20Z"
                                                    fill="currentColor"></path>
                                            </svg>
                                        </span>
                                        <!--end::Svg Icon-->
                                    </div>
                                    <!--end::Icon-->
                                    <!--begin::Section-->
                                    <div class="d-flex flex-column my-7">
                                        <!--begin::Number-->
                                        <span class="fw-semibold fs-3x text-gray-800 lh-1 ls-n2">
                                            {{ number_format($countImageView, 0) }}
                                        </span>
                                        <!--end::Number-->
                                        <!--begin::Follower-->
                                        <div class="m-0">
                                            <span class="fw-semibold fs-6 text-gray-400">Images</span>
                                        </div>
                                        <!--end::Follower-->
                                    </div>
                                    <!--end::Section-->

                                </div>
                                <!--end::Body-->
                            </div>
                            <!--end::Card widget 2-->
                        </div>


                        <div class="col-sm-6 col-xl-2 mb-xl-10">
                            <!--begin::Card widget 2-->
                            <div class="card h-lg-100">
                                <!--begin::Body-->
                                <div class="card-body d-flex justify-content-between align-items-start flex-column">
                                    <!--begin::Icon-->
                                    <div class="m-0">
                                        <!--begin::Svg Icon | path: icons/duotune/graphs/gra001.svg-->
                                        <span class="svg-icon svg-icon-2hx svg-icon-gray-600">
                                            <svg width="24" height="24" viewBox="0 0 24 24" fill="none"
                                                xmlns="http://www.w3.org/2000/svg">
                                                <path opacity="0.3"
                                                    d="M14 3V21H10V3C10 2.4 10.4 2 11 2H13C13.6 2 14 2.4 14 3ZM7 14H5C4.4 14 4 14.4 4 15V21H8V15C8 14.4 7.6 14 7 14Z"
                                                    fill="currentColor"></path>
                                                <path
                                                    d="M21 20H20V8C20 7.4 19.6 7 19 7H17C16.4 7 16 7.4 16 8V20H3C2.4 20 2 20.4 2 21C2 21.6 2.4 22 3 22H21C21.6 22 22 21.6 22 21C22 20.4 21.6 20 21 20Z"
                                                    fill="currentColor"></path>
                                            </svg>
                                        </span>
                                        <!--end::Svg Icon-->
                                    </div>
                                    <!--end::Icon-->
                                    <!--begin::Section-->
                                    <div class="d-flex flex-column my-7">
                                        <!--begin::Number-->
                                        <span class="fw-semibold fs-3x text-gray-800 lh-1 ls-n2">
                                            {{ number_format($countDocumentView, 0) }}
                                        </span>
                                        <!--end::Number-->
                                        <!--begin::Follower-->
                                        <div class="m-0">
                                            <span class="fw-semibold fs-6 text-gray-400">Documents</span>
                                        </div>
                                        <!--end::Follower-->
                                    </div>
                                    <!--end::Section-->

                                </div>
                                <!--end::Body-->
                            </div>
                            <!--end::Card widget 2-->
                        </div>


                    </div>

                </div>
                <!--end::Content container-->
            </div>

        </div>
    </div>
@endsection


@section('script')
    <script type="text/javascript">
        $(document).ready(function() {});
    </script>
@endsection
