@extends('layouts.master') {{-- If you have a base layout --}}
@section('title','Dashboard')
@section('content')

 <div class="container">
            <div class="d-md-flex d-block align-items-center justify-content-between my-3 page-header-breadcrumb">
                <div class="ms-0">
                    <nav>
                        <ol class="breadcrumb mb-0">
                            <li class="breadcrumb-item">MEETXY</li>
                            <li class="breadcrumb-item active" aria-current="page">Dashboard</li>
                        </ol>
                    </nav>
                </div>
            </div>
        </div>
<!--content part-->
       <div class="container section-content" >

            <div class="row align-items-start justify-content-center">

                <!--left-->
                <div class="col-lg-4 col-md-5">

                    <!--1-->
                    <div class="card custom-card1 overflow-hidden" style="background-color: rgba(var(--success-rgb), .1); color: #000;">
                        <div class="card-body">
                            <div class="d-flex align-items-center justify-content-between">
                                <div class="flex-fill ms-3">
                                    <div class="d-flex align-items-center justify-content-between flex-wrap">
                                        <div>
                                            <h2 class="fw-semibold mb-0">{{ $todayRegisteredUsers }}</h2>
                                            
                                        </div>
                                        <div class="text-end">
                                            <p class="mb-3 fs-6">Users Joined Today</p>
                                            <!-- <span class="bg-orange">Live count </span> -->
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!--1-->

                    <!--2-->
                    <div class="card custom-card1 overflow-hidden">
                        <div class="card-body">
                            <div class="d-flex align-items-top justify-content-between">
                                <div class="flex-fill ms-3">
                                    <div class="d-flex align-items-start justify-content-between flex-wrap">
                                        <div>
                                            <h2 class="fw-semibold mt-1 mb-2  mb-n">{{$totalcheckedincount}}</h2>
                                        </div>
                                        <div>
                                            <div class="text-end mt-1">
                                                <p class="text-muted mb-0 fs-6">Check-ins Across All Time</p>
                                            </div>
                                        </div>
                                    </div>
                                    <!-- <div class="d-flex align-items-center justify-content-between">
                                        <div>
                                            <p class="mb-0">IOS</p>
                                        </div>
                                        <div>
                                            <p class="mb-0"><b>385</b> </p>
                                        </div>
                                    </div> -->
                                    <!-- <div class="d-flex align-items-center justify-content-between">
                                        <div>
                                            <p class="mb-0">Android</p>
                                        </div>
                                        <div>
                                            <p class="mb-0"><b>422</b> </p>
                                        </div>
                                    </div> -->
                                </div>
                            </div>
                        </div>
                    </div>
                    <!--2-->

                    <!--3-->
                    <div class="card custom-card1 overflow-hidden">
                        <div class="card-body">
                            <div class="d-flex align-items-center justify-content-between">
                                <div class="flex-fill ms-3">
                                    <div class="d-flex align-items-center justify-content-between flex-wrap">
                                        <div>
                                            <h2 class="fw-semibold mb-0">{{ $feedbackCounts->userfeedbackcount; }}</h2>
                                            
                                        </div>
                                        <div class="text-end">
                                            <p class="text-muted mb-3 fs-6">User Feedback Count</p>
                                            <!-- <span class="bg-orange">in the last 24 hours</span> -->
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!--3-->

                    <!--3-->
                    <div class="card custom-card1 overflow-hidden">
                        <div class="card-body">
                            <div class="d-flex align-items-center justify-content-between">
                                <div class="flex-fill ms-3">
                                    <div class="d-flex align-items-center justify-content-between flex-wrap">
                                        <div>
                                            <h2 class="fw-semibold mb-0">{{ $feedbackCounts->venuefeedbackcount; }}</h2>
                                            
                                        </div>
                                        <div class="text-end">
                                            <p class="text-muted mb-3 fs-6">Venue Feedback Count</p>
                                            <!-- <span class="bg-orange">in the last 24 hours</span> -->
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!--3-->

                    <!--4-->
                    <div class="card custom-card1 lmenu-items" style="background-color: rgba(var(--secondary-rgb), .1) !important; color: #000 !important;">
                        <div class="card-body p-0">
                            <ul class="list-unstyled mb-0">
                                <li class="border-bottom p-3">
                                    <div class="d-flex align-items-start justify-content-between flex-wrap">
                                        <div>
                                            <div class="text-end mt-1">
                                                <p class="text-muted mb-0 fs-6">Total Registered Users</p>
                                            </div>
                                        </div>
                                        <div>
                                            <h2 class="fw-semibold mt-1 mb-2  mb-n">{{ $totalUsers }}</h2>
                                        </div>
                                    </div>
                                </li>
                                <li class="border-bottom p-3">
                                    <div class="d-flex align-items-start justify-content-between flex-wrap">
                                        <div>
                                            <div class="text-end mt-1">
                                                <p class="text-muted mb-0 fs-6">Total Connections</p>
                                            </div>
                                        </div>
                                        <div>
                                            <h2 class="fw-semibold mt-1 mb-2  mb-n">{{ $chatEnabledConnections }}</h2>
                                        </div>
                                    </div>
                                </li>
                                <li class="border-bottom p-3">
                                    <div class="d-flex align-items-start justify-content-between flex-wrap">
                                        <div>
                                            <div class="text-end mt-1">
                                                <p class="text-muted mb-0 fs-6">Banned Users</p>
                                            </div>
                                        </div>
                                        <div>
                                            <h2 class="fw-semibold mt-1 mb-2  mb-n">{{ $bannedUsers }}</h2>
                                        </div>
                                    </div>
                                </li>
                                <li class="border-bottom p-3">
                                    <div class="d-flex align-items-start justify-content-between flex-wrap">
                                        <div>
                                            <div class="text-end mt-1">
                                                <p class="text-muted mb-0 fs-6">Deactivated Users</p>
                                            </div>
                                        </div>
                                        <div>
                                            <h2 class="fw-semibold mt-1 mb-2  mb-n"> {{ $deactivatedUsers }}</h2>
                                        </div>
                                    </div>
                                </li>
                            </ul>
                        </div>
                    </div>
                    <!--4-->

                </div>
                <!--left-->

                <!--right-->
                <div class="col-lg-8 col-md-7">
                    
                    <div class="row">
                        <!--1-->
                        <div class="col-lg-6 col-md-12">
                            <div class="card custom-card1 overflow-hidden" style="background-color: rgba(var(--secondary-rgb), .1) !important; color: #000 !important;">
                                <div class="card-body">
                                    <div class="d-flex align-items-center justify-content-between">
                                        <div class="flex-fill ms-3">
                                            <div class="d-flex align-items-center justify-content-between flex-wrap">
                                                <div>
                                                    <h2 class="fw-semibold mb-0">{{ $venucount }}</h2>
                                                    
                                                </div>
                                                <div class="text-end">
                                                    <p class="mb-3 fs-6">Total venues</p>
                                                    <!-- <span class="bg-orange">Active</span> -->
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <!--1-->
                        <!--2-->
                        <div class="col-lg-6 col-md-12">
                            <div class="card custom-card1 overflow-hidden" style="background-color: rgba(var(--danger-rgb), .1); color: #000;">
                                <div class="card-body">
                                    <div class="d-flex align-items-center justify-content-between">
                                        <div class="flex-fill ms-3">
                                            <div class="d-flex align-items-center justify-content-between flex-wrap">
                                                <div>
                                                    <h2 class="fw-semibold mb-0">{{ $checkedincount }}</h2>
                                                    
                                                </div>
                                                <div class="text-end">
                                                    <p class="mb-3 fs-6">Checked-in</p>
                                                    <!-- <span class="bg-orange">Live</span> -->
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <!--2-->
                    </div>

                    
                    <div class="row">
                        <div class="col-md-12">
                            <div class="card custom-card1 overflow-hidden self-service">
                                <div class="card-header">
                                    <h2>Top 3 Most Visited Venues – {{ \Carbon\Carbon::now()->format('F Y') }}</h2>
                                </div>
                                <div class="card-body">
                                    <div class="d-flex align-items-center justify-content-between table-responsive">
                                       <table class="table table-hover">
                                            <thead>
                                                <tr>
                                                    <th>#</th>
                                                    <th>Venue Name</th>
                                                    <th>Total Check-ins</th>
                                                </tr>
                                            </thead>
                                            <tbody>
                                                @forelse($topVenues as $index => $venue)
                                                    <tr>
                                                        <td>{{ $index + 1 }}</td>
                                                        <td>{{ $venue->name }}</td>
                                                        <td>{{ $venue->total_checkins }}</td>
                                                    </tr>
                                                @empty
                                                    <tr>
                                                        <td colspan="3">No data available for this month.</td>
                                                    </tr>
                                                @endforelse
                                            </tbody>
                                        </table>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    

                    <!--1-->
                    <div class="row">
                        <div class="col-lg-12">
                            <div class="card custom-card1 add-ons">
                                <div class="card-header d-flex justify-content-between align-items-center">
                                    <div class="card-title">
                                       Most Recent 10 Active User Logins
                                    </div>
                                </div>
                                <div class="card-body table-responsive">
                                    <table class="table table-hover table-striped">
    <thead>
        <tr>
            <th>#</th>
            <th>User Name</th>
            <th>IP Address</th>
            <th>Platform</th>
            <!-- <th>Device</th> -->
            <th>Login Time</th>
            <!-- <th>Location</th> -->
        </tr>
    </thead>
    <tbody>
        @forelse($activeLogins as $index => $login)
            <tr>
                <td>{{ $index + 1 }}</td>
                <td>{{ $login['user_name'] }}</td>
                <td>{{ $login['ip_address'] }}</td>
                <!-- <td>{{ $login['platform'] }}</td> -->
                 <td>Android</td>
                <!-- <td>{{ $login['device'] }}</td> -->
                <td>{{ \Carbon\Carbon::parse($login['login_time'])->format('d-m-Y H:i') }}</td>
                <!-- <td>{{ $login['location'] }}</td> -->
            </tr>
        @empty
            <tr><td colspan="7" class="text-center">No login data available</td></tr>
        @endforelse
    </tbody>
</table>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!--1-->

                </div>
                <!--right-->

            </div>
        </div>
        <!--content part-->

@endsection