<?php $this->include('rs/utils.php')?>
<?= $this->extend('rs/template-user'); ?>
<?= $this->section('content'); ?>

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />

   <link href="https://cdn.jsdelivr.net/npm/bootstrap-icons/font/bootstrap-icons.css" rel="stylesheet">

   <style>
        /* .dashboard-card:hover {
            transform: scale(1.02);
            transition: transform 0.2s ease-in-out;
        } */

        .dashboard-card .card-body ul li {
            padding: 5px 0;
            border-bottom: 1px solid #f1f1f1;
        }
        .dashboard-card .card-body ul li:last-child {
            border-bottom: none;
        }
        .dashboard-card .badge {
            animation: pulse 1s ease-in-out infinite;
        }

        @keyframes pulse {
            0% {
                transform: scale(1);
            }
            50% {
                transform: scale(1.1);
            }
            100% {
                transform: scale(1);
            }
        }
        .card.dashboard-card {
            min-height: unset !important; /* Remove any min-height constraints */
        }
        .card.dashboard-card .card-body {
            min-height: unset !important; /* Remove any min-height constraints */
        }
   </style>

<script src="https://code.jquery.com/jquery-3.6.0.js"></script>

  
	<div class="card shadow mb-4">
		<div class="card-header py-3">
			<h4 class="m-0 font-weight-bold text-primary">Dashboard</h4>
		</div>
		<div class="card-body">
        <div class="row row-cols-1 row-cols-md-1 row-cols-xl-3 g-3">
            <!-- My Cars Card -->
            <div class="col mb-4">
                <div class="card dashboard-card h-auto border-0 shadow-sm">
                    <div class="card-header pl-3 bg-primary text-white d-flex align-items-center">
                        <h5 class="m-0">Cars</h5>
                    </div>
                    <div class="card-body">
                        <ul class="ml-2 list-unstyled">
                            <li class="mb-2 d-flex justify-content-between"><strong>Cars published all time</strong> <span class="text-muted mr-2"><?= (isset($cars_published_all_time['cnt']) ? $cars_published_all_time['cnt'] : 0) ?></span></li>
                            <li class="mb-2 d-flex justify-content-between"><strong>Cars published now</strong> <span class="text-muted mr-2"><?= (isset($cars_published_now['cnt']) ? $cars_published_now['cnt'] : 0) ?></span></li>
                            <li class="mb-2 d-flex justify-content-between"><strong>Cars in transaction</strong> <span class="text-muted mr-2"><?= (isset($cars_in_transaction['cnt']) ? $cars_in_transaction['cnt'] : 0) ?></span></li>
                            <li class="mb-2 d-flex justify-content-between"><strong>Cars to receive payment from buyers</strong> <span class="text-muted mr-2"><?= (isset($cars_to_receive_payment_from_buyers['cnt']) ? $cars_to_receive_payment_from_buyers['cnt'] : 0) ?></span></li>
                            <li class="mb-2 d-flex justify-content-between"><strong>Cars to receive from sellers</strong> <span class="text-muted mr-2"><?= (isset($cars_to_receive_from_sellers['cnt']) ? $cars_to_receive_from_sellers['cnt'] : 0) ?></span></li>
                            <li class="mb-2 d-flex justify-content-between"><strong>Cars to be paid to sellers</strong> <span class="text-muted mr-2"><?= (isset($total_to_be_paid_to_sellers['cnt']) ? $total_to_be_paid_to_sellers['cnt'] : 0) ?></span></li>
                            <li class="d-flex justify-content-between"><strong>Total cars sold</strong> <span class="text-muted mr-2"><?= (isset($total_sold_cars['cnt']) ? $total_sold_cars['cnt'] : 0) ?></span></li>
                        </ul>
                    </div>
                </div>
            </div>
            <!-- Transactions Card -->
            <div class="col mb-4">
                <div class="card dashboard-card h-auto border-0 shadow-sm">
                    <div class="card-header pl-3 bg-primary text-white d-flex align-items-center">
                        <h5 class="m-0">Transactions</h5>
                    </div>
                    <div class="card-body">
                        <ul class="ml-2 list-unstyled">
                            <li class="mb-2 d-flex justify-content-between"><strong>Active transactions</strong> <span class="text-muted mr-2"><?= $active_transactions['cnt'] ?></span></li>
                            <li class="d-flex justify-content-between"><strong>Concluded transactions</strong> <span class="text-muted mr-2"><?= $concluded_transactions['cnt'] ?></span></li>
                        </ul>
                    </div>
                </div>
            </div>
            <!-- Messages Card -->
            <div class="col mb-4">
                <div class="card dashboard-card h-auto border-0 shadow-sm">
                    <div class="card-header pl-3 bg-primary text-white d-flex align-items-center">
                        <h5 class="m-0">Messages</h5>
                        <?php if ($messages_from_sellers > 0 || $messages_from_buyers > 0): ?>
                            <span class="badge rounded-pill bg-danger ml-2 float-end">New</span>
                        <?php endif; ?>
                    </div>
                    <div class="card-body">
                        <ul class="ml-2 list-unstyled">
                            <li class="mb-2 d-flex justify-content-between"><strong>Messages from sellers</strong> <span class="text-muted mr-2"><?= $messages_from_sellers ?></span></li>
                            <li class="d-flex justify-content-between"><strong>Messages from buyers</strong> <span class="text-muted mr-2"><?= $messages_from_buyers ?></span></li>
                        </ul>
                    </div>
                </div>
            </div>
            <!-- Users Card -->
            <div class="col mb-4">
                <div class="card dashboard-card h-auto border-0 shadow-sm">
                    <div class="card-header pl-3 bg-primary text-white d-flex align-items-center">
                        <h5 class="m-0">Users</h5>
                    </div>
                    <div class="card-body">
                        <ul class="ml-2 list-unstyled">
                            <li class="mb-2 d-flex justify-content-between"><strong>Active users</strong> <span class="text-muted mr-2"><?= (isset($active_users['cnt']) ? $active_users['cnt'] : 0) ?></span></li>
                            <li class="mb-2 d-flex justify-content-between"><strong>Active sellers</strong> <span class="text-muted mr-2"><?= (isset($active_sellers['cnt']) ? $active_sellers['cnt'] : 0) ?></span></li>
                            <li class="mb-2 d-flex justify-content-between"><strong>Active buyers</strong> <span class="text-muted mr-2"><?= (isset($active_buyers['cnt']) ? $active_buyers['cnt'] : 0) ?></span></li>
                            <li class="mb-2 d-flex justify-content-between"><strong>Active clients</strong> <span class="text-muted mr-2"><?= (isset($active_clients['cnt']) ? $active_clients['cnt'] : 0) ?></span></li>
                            <li class="mb-2 d-flex justify-content-between"><strong>Approval pending users</strong> <span class="text-muted mr-2"><?= (isset($approval_pending_users['cnt']) ? $approval_pending_users['cnt'] : 0) ?></span></li>
                            <li class="d-flex justify-content-between"><strong>Blocked users</strong> <span class="text-muted mr-2"><?= (isset($blocked_users['cnt']) ? $blocked_users['cnt'] : 0) ?></span></li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
        </div>
    </div>



<?= $this->endsection(); ?>
