@extends('Dashboard.layouts.master')
@section('title','Dashboard')
@section('styles')
    <style>
        .main-box {
            box-shadow: 0 8px 16px #0a0e1d05, 0 8px 64px #77777714;
            border-radius: 10px 25px;
            background: #fff
        }
    </style>
@endsection
@section('content')
    <div class="app-main flex-column flex-row-fluid" id="kt_app_main">
        <div class="app-main flex-column flex-row-fluid" id="kt_app_main">
            <div class="d-flex flex-column flex-column-fluid">

{{--                <livewire:bread-crumb heading="{{__('translations.dashboard')}}" name_1="Home"--}}
{{--                                      name_2="{{__('translations.dashboard')}}" name_3="Statistics"/>--}}

                <div id="kt_app_content" class="app-content flex-column-fluid">
                    <div id="kt_app_content_container" class="app-container container-xxl">
                        <div class="col-12 p-3 row">

                            @can('members-read')
                                <div class="col-12 col-sm-6 col-lg-4 col-xl-3 col-xxl-2 px-2 my-2">
                                    <div class="col-12 px-0 py-1 d-flex main-box" style="border-radius: 10px 25px;background: #fff">
                                        <div style="width: 65px;" class="p-2">
                                            <div
                                                class="col-12 px-0 text-center d-flex align-items-center justify-content-center"
                                                style="background: #00aba9;color: #fff;border-radius: 50%;width: 55px;height:55px">
                                                <span class="fa fa-users font-5"></span>
                                            </div>
                                        </div>
                                        <div style="width: calc(100% - 80px)" class="px-2 py-2">
                                            <a class="font-1"
                                               href="{{Helper::handle_route('users.index')}}"
                                               style="color: #212529">
                                                Members
                                                <h6 class="font-3">{{\App\Models\User::count()}}</h6>
                                            </a>
                                        </div>
                                    </div>
                                </div>
                            @endcan
                            @can('posts-read')
                                <div class="col-12 col-sm-6 col-lg-4 col-xl-3 col-xxl-2 px-2 my-2">
                                    <div class="col-12 px-0 py-1 d-flex main-box" style="border-radius: 10px 25px;background: #fff">
                                        <div style="width: 65px;" class="p-2">
                                            <div
                                                class="col-12 px-0 text-center d-flex align-items-center justify-content-center"
                                                style="background: #00aba9;color: #fff;border-radius: 50%;width: 55px;height:55px">
                                                <span class="fa fa-book font-5"></span>
                                            </div>
                                        </div>
                                        <div style="width: calc(100% - 80px)" class="px-2 py-2">
                                            <a class="font-1"
                                               href="{{Helper::handle_route('posts.index')}}"
                                               style="color: #212529">
                                                Posts
                                                <h6 class="font-3">{{\App\Models\Post::count()}}</h6>
                                            </a>
                                        </div>
                                    </div>
                                </div>
                            @endcan
                                @can('booking-read')
                                    <div class="col-12 col-sm-6 col-lg-4 col-xl-3 col-xxl-2 px-2 my-2">
                                        <div class="col-12 px-0 py-1 d-flex main-box" style="
                                                                                         border-radius: 10px 25px;
                                                                                         background: #fff">
                                            <div style="width: 65px;" class="p-2">
                                                <div
                                                    class="col-12 px-0 text-center d-flex align-items-center justify-content-center"
                                                    style="background: #00aba9;color: #fff;border-radius: 50%;width: 55px;height:55px">
                                                    <span class="fa fa-book font-5"></span>
                                                </div>
                                            </div>
                                            <div style="width: calc(100% - 80px)" class="px-2 py-2">
                                                <a class="font-1"
                                                   href="{{Helper::handle_route('orders.index')}}"
                                                   style="color: #212529">
                                                    Orders
                                                    <h6 class="font-3">{{\App\Models\Order::count()}}</h6>
                                                </a>
                                            </div>
                                        </div>
                                    </div>
                                @endcan
                                <div class="col-12 px-2 py-2">
                                    <div style="height: 4px ;background: #00aba9;border-radius: 7px;transition: width .5s ease-in-out;width: 0%;" id="home-dashboard-divider"></div>
                                </div>

                                <livewire:dashboard-statistics />

                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection
@section('scripts')
    <script>
        document.addEventListener('DOMContentLoaded', function () {
            var timezone = Intl.DateTimeFormat().resolvedOptions().timeZone;

            fetch('{{route('set.timezone')}}', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'X-CSRF-TOKEN': '{{ csrf_token() }}',
                },
                body: JSON.stringify({ timezone: timezone }),
            });
        });
    </script>
@endsection