@extends("Backend.Layout.app")
@section('content')

    <div class="app-main flex-column flex-row-fluid" id="kt_app_main">
        <!--begin::Content wrapper-->
        <div class="d-flex flex-column flex-column-fluid">
            <!--begin::Toolbar-->

            <!--end::Toolbar-->
            <!--begin::Content-->
            <div id="kt_app_content" class="app-content flex-column-fluid">
                <!--begin::Content container-->
                <div id="kt_app_content_container" class="app-container container-fluid">
                    <!--begin::Row-->
                    <div class="row g-5 gx-xl-10 mb-5 mb-xl-10">
                        <!--begin::Col-->
                        <div class="col-md-6 col-lg-6 col-xl-6 col-xxl-3 mb-md-5 mb-xl-10">
                            <!--begin::Card widget 20-->
                            <div
                                class="card card-flush bgi-no-repeat bgi-size-contain bgi-position-x-end h-md-50 mb-5 mb-xl-10"
                                style="background-color: #F1416C;background-image:url('assets/media/patterns/vector-1.png')">
                                <!--begin::Header-->
                                <div class="card-header pt-5">
                                    <!--begin::Title-->
                                    <div class="card-title d-flex flex-column">
                                        <!--begin::Amount-->
                                        <span class="fs-2hx fw-bold text-white me-2 lh-1 ls-n2">{{$totalVisits}}</span>
                                        <!--end::Amount-->
                                        <!--begin::Subtitle-->
                                        <span
                                            class="text-white opacity-75 pt-1 fw-semibold fs-6">{{translate('Total Visits')}}</span>
                                        <!--end::Subtitle-->
                                    </div>
                                    <!--end::Title-->
                                </div>
                                <!--end::Header-->
                                <!--begin::Card body-->

                                <!--end::Card body-->
                            </div>

                        </div>
                        <!--end::Col-->
                        <!--begin::Col-->
                        <div class="col-md-6 col-lg-6 col-xl-6 col-xxl-3 mb-md-5 mb-xl-10">
                            <!--begin::Card widget 17-->

                            <!--end::Card widget 17-->
                            <!--begin::List widget 26-->
                            <div class="card card-flush ">
                                <!--begin::Header-->
                                <div class="card-header pt-5">
                                    <!--begin::Title-->
                                    <h3 class="card-title text-gray-800 fw-bold">{{translate('Pages')}}</h3>

                                </div>
                                <!--end::Header-->
                                <!--begin::Body-->
                                <div class="card-body pt-5 " style="overflow-y : scroll ; height: 25vh;">
                                    <!--begin::Item-->
                                    @foreach($topPages as $page)

                                        <div class="d-flex flex-stack">
                                            <!--begin::Section-->
                                            <a href="{{ $page->url }}" target="_blank"
                                               class="text-primary fw-semibold fs-6 me-2">{{ $page->url }} -
                                                ({{ $page->total }})</a>
                                            <!--end::Section-->
                                            <!--begin::Action-->
                                            <button type="button"
                                                    class="btn btn-icon btn-sm h-auto btn-color-gray-400 btn-active-color-primary justify-content-end">
                                                <i class="ki-duotone ki-exit-right-corner fs-2">
                                                    <span class="path1"></span>
                                                    <span class="path2"></span>
                                                </i>
                                            </button>
                                            <!--end::Action-->
                                        </div>
                                        <!--end::Item-->
                                        <!--begin::Separator-->
                                        <div class="separator separator-dashed my-3"></div>
                                        <!--end::Separator-->

                                    @endforeach

                                    <!--end::Action-->
                                </div>
                                <!--end::Item-->
                            </div>
                            <!--end::Body-->
                        </div>
                        <!--end::LIst widget 26-->
                    </div>

                    <!--end::Col-->
                </div>
            </div>
        </div>
    </div>

@endsection