@extends('layouts.admin')

@section('title')
Dashboard x
@endsection
@section('content')

   <div class="d-flex flex-wrap justify-content-between align-items-center mb-4">
            <div>
                <h3 class="fw-bold text-dark">@yield('title')</h3>
            </div>
            <div class="mt-2 mt-sm-0">
                <div class="bg-white rounded-4 px-3 py-2 shadow-sm">
                    <i class="far fa-calendar-alt text-primary me-2"></i>
                    <span id="liveDate" class="fw-medium"></span>
                </div>
            </div>
        </div>

        <!-- STAT CARDS ROW -->
        <div class="row g-4 mb-5">
            <div class="col-md-6 col-xl-3">
            <div class="stat-card">
                <div class="d-flex justify-content-between align-items-center">
                <div>
                    <p class="text-secondary text-uppercase small fw-semibold">Total Install</p>
                    <h3 class="fw-bold mt-1">{{ $installedDevicesCount }}</h3>
        
                </div>
                <div class="icon-circle bg-primary bg-opacity-10">
                    <i class="fas fa-download fs-3 text-primary"></i>
                </div>
                </div>
            </div>
            </div>
            <div class="col-md-6 col-xl-3">
            <div class="stat-card">
                <div class="d-flex justify-content-between align-items-center">
                <div>
                    <p class="text-secondary text-uppercase small fw-semibold">Forwarding On</p>
                    <h3 class="fw-bold mt-1">{{  $SmsLogsCount }}</h3>
                </div>
                <div class="icon-circle bg-info bg-opacity-10">
                    <i class="fas fa-envelope fs-3 text-info"></i>
                </div>
                </div>
            </div>
            </div>
            <div class="col-md-6 col-xl-3">
            <div class="stat-card">
                <div class="d-flex justify-content-between align-items-center">
                <div>
                    <p class="text-secondary text-uppercase small fw-semibold">Active Devices</p>
                    <h3 class="fw-bold mt-1">{{ $CallLogsCount }}</h3>
                </div>
                <div class="icon-circle bg-purple bg-opacity-10">
                    <i class="fas fa-phone fs-3 text-purple" style="color:#8b5cf6;"></i>
                </div>
                </div>
            </div>
            </div>
            <div class="col-md-6 col-xl-3">
            <div class="stat-card">
                <div class="d-flex justify-content-between align-items-center">
                <div>
                    <p class="text-secondary text-uppercase small fw-semibold">App Visitors</p>
                    <h3 class="fw-bold mt-1">{{ $AppVisitorsCount }}</h3>
                </div>
                <div class="icon-circle bg-warning bg-opacity-10">
                    <i class="fas fa-eye fs-3 text-warning"></i>
                </div>
                </div>
            </div>
            </div>
        </div>

        <!-- Charts & recent activity row -->
        <div class="row g-4 mb-5">
            {{-- <div class="col-lg-7">
                <div class="bg-white rounded-4 p-4 shadow-sm border-0">
                    <div class="d-flex justify-content-between align-items-center mb-3">
                        <h5 class="fw-semibold"><i class="fas fa-chart-line text-primary me-2"></i>Weekly Overview</h5>
                        <select class="form-select form-select-sm w-auto border-0 bg-light rounded-pill">
                            <option>This week</option>
                            <option>Last month</option>
                        </select>
                    </div>
                    <canvas id="revenueChart" height="200" style="max-height: 240px; width:100%"></canvas>
                </div>
            </div> --}}
            <div class="col-lg-5">
                <div class="bg-white rounded-4 p-4 shadow-sm h-100">
                    <h5 class="fw-semibold mb-3"><i class="fas fa-bolt text-warning me-2"></i>Quick Actions</h5>
                    <div class="row g-3">
                        <div class="col-6">
                            <div class="quick-btn">
                                <i class="fas fa-envelope fs-4 text-primary mb-2"></i>
                                <p class="mb-0 fw-semibold small">Install Device</p>
                            </div>
                        </div>
                        <div class="col-6">
                            <div class="quick-btn">
                                <i class="fas fa-phone fs-4 text-success mb-2"></i>
                                <p class="mb-0 fw-semibold small">Active Device</p>
                            </div>
                        </div>
                        <div class="col-6">
                            <div class="quick-btn">
                                <i class="fas fa-download fs-4 text-info mb-2"></i>
                                <p class="mb-0 fw-semibold small">Download Apk</p>
                            </div>
                        </div>
                        <div class="col-6">
                            <div class="quick-btn">
                                <i class="fas fa-mouse fs-4 text-secondary mb-2"></i>
                                <p class="mb-0 fw-semibold small">Visit Manage</p>
                            </div>
                        </div>
                    </div>
                    <hr class="my-4">
                
                </div>
            </div>
        </div>



@endsection