@extends('layouts.app')

@section('content')
    {{--<div class="container">--}}
    {{--    <div class="row justify-content-center">--}}
    {{--        <div class="col-md-8">--}}
    {{--            <div class="card">--}}
    {{--                <div class="card-header">{{ __('Dashboard') }}</div>--}}

    {{--                <div class="card-body">--}}
    {{--                    @if (session('status'))--}}
    {{--                        <div class="alert alert-success" role="alert">--}}
    {{--                            {{ session('status') }}--}}
    {{--                        </div>--}}
    {{--                    @endif--}}

    {{--                    {{ __('You are logged in!') }}--}}
    {{--                </div>--}}
    {{--            </div>--}}
    {{--        </div>--}}
    {{--    </div>--}}
    {{--</div>--}}
          <!---Header--->
    <header class="navbar navbar-expand-md navbar-light d-none d-lg-flex d-print-none">
        <div class="container-xl">
            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbar-menu" aria-controls="navbar-menu" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="navbar-nav flex-row order-md-last">
                <div class="nav-item dropdown">
                    <a href="#" class="nav-link d-flex lh-1 text-reset p-0" data-bs-toggle="dropdown" aria-label="Open user menu">
                        <span class="avatar avatar-sm" style="background-image: url(/images/default-user.jpg)"></span>
                        <div class="d-none d-xl-block ps-2">
                            <div>{{ Auth::user()->name }}</div>
                        </div>
                    </a>
                    <div class="dropdown-menu dropdown-menu-end dropdown-menu-arrow">
                        <a href="{{route('user.edit', Auth::user()->id)}}" class="dropdown-item">Edit Profile</a>
                        <div class="dropdown-divider"></div>
                        <a class="dropdown-item" href="#"
                           onclick="event.preventDefault();
                         document.getElementById('logout-form').submit();">
                            {{ __('Logout') }}
                        </a>
                    </div>
                </div>
            </div>
            <div class="collapse navbar-collapse" id="navbar-menu">
                <div class="col">
                    <!-- Page pre-title -->
                    <div class="page-pretitle">
                        Overview
                    </div>
                    <h2 class="page-title">
                        Dashboard
                    </h2>
                </div>
            </div>
        </div>
    </header>

    <div class="page">
        <div class="page-wrapper">
            <!-- Page body -->
            <div class="page-body">
                <div class="container-xl">
                    <div class="row row-deck row-cards">
                        <div class="col-12">
                            <div class="row row-cards">
                                <div class="col-sm-6 col-lg-3">
                                    <div class="card">
                                        <div class="card-body">
                                            <div class="row align-items-center">
                                                <div class="col-auto">
                            <span class="bg-primary text-white avatar">
                              <lord-icon
                                  src="https://cdn.lordicon.com/pmegrqxm.json"
                                  trigger="hover"
                                  colors="primary:#ffffff"
                                  style="width:26px;height:26px">
                               </lord-icon>
                            </span>
                                                </div>
                                                <div class="col">
                                                    <div style="font-weight: bold">
                                                        Total Brands
                                                    </div>
                                                    <div class="text-muted">
                                                        {{ $totalBrands }} Active Brand's
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-sm-6 col-lg-3">
                                    <div class="card">
                                        <div class="card-body">
                                            <div class="row align-items-center">
                                                <div class="col-auto">
                            <span class="bg-info text-white avatar">
                                <lord-icon
                                    src="https://cdn.lordicon.com/dnoiydox.json"
                                    trigger="hover"
                                    colors="primary:#ffffff,secondary:#ffffff"
                                    stroke="80"
                                    style="width:32px;height:32px">
                                </lord-icon>
                            </span>
                                                </div>
                                                <div class="col">
                                                    <div style="font-weight: bold">
                                                        Total Deals
                                                    </div>
                                                    <div class="text-muted">
                                                        {{ $totalDeals }} Active Deal's
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-sm-6 col-lg-3">
                                    <div class="card">
                                        <div class="card-body">
                                            <div class="row align-items-center">
                                                <div class="col-auto">
                            <span class="bg-secondary text-white avatar">
                            <lord-icon
                                src="https://cdn.lordicon.com/dxjqoygy.json"
                                trigger="hover"
                                colors="primary:#ffffff,secondary:#ffffff"
                                stroke="100"
                                style="width:32px;height:32px">
                            </lord-icon>
                            </span>
                                                </div>
                                                <div class="col">
                                                    <div style="font-weight: bold">
                                                        Total Users
                                                    </div>
                                                    <div class="text-muted">
                                                        {{ $totalUsers }} Active User's
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-sm-6 col-lg-3">
                                    <div class="card">
                                        <div class="card-body">
                                            <div class="row align-items-center">
                                                <div class="col-auto">
                            <span class="bg-green text-white avatar">
                                <lord-icon
                                    src="https://cdn.lordicon.com/psnhyobz.json"
                                    trigger="hover"
                                    colors="primary:#ffffff"
                                    style="width:26px;height:26px">
                                </lord-icon>
                            </span>
                                                </div>
                                                <div class="col">
                                                    <div style="font-weight: bold">
                                                        Notifications
                                                    </div>
                                                    <div class="text-muted" style="font-size: 13px !important;">
                                                        {{ $pendingNotification }} Pending Notification
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="col-lg-6">
                            <div class="card" style="height: 28rem">
                                <div class="card-body card-body-scrollable card-body-scrollable-shadow">
                                    <h3 class="card-title" style="font-weight: bold">New Register User's</h3>
                                    <div class="divide-y">
                                        @foreach($users as $user)
                                            <div>
                                                <div class="row">
                                                    <div class="col-auto">
                                                        @if($user->image)
                                                            <span class="avatar" style="background-image: url({{ $user->image->url }})"></span>
                                                        @else
                                                            <span class="avatar" style="background-image: url(/images/default-user.jpg)"></span>
                                                        @endif
                                                    </div>
                                                    <div class="col">
                                                        <div class="text-truncate">
                                                            <strong>{{ $user->name }}</strong> created a profile.
                                                        </div>
                                                        <div class="text-muted">{{ $user->created_at }}</div>
                                                    </div>
                                                </div>
                                            </div>
                                        @endforeach
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection