

<?php $__env->startSection('title', 'Dashboard'); ?>

<?php $__env->startSection('styles'); ?>
<style>
    .stat-mini { font-size: 0.75rem; color: #6c757d; }
    .channel-badge {
        display: inline-flex;
        align-items: center;
        gap: 4px;
        padding: 3px 8px;
        border-radius: 20px;
        font-size: 0.72rem;
        font-weight: 600;
    }
    .channel-sms { background: #e8f5e9; color: #2e7d32; }
    .channel-whatsapp { background: #e8f5e9; color: #128C7E; }
    .overview-card {
        border-radius: 12px;
        padding: 1.25rem;
        background: #fff;
        box-shadow: 0 2px 8px rgba(0,0,0,.04);
        border: 1px solid rgba(0,0,0,.06);
    }
    .overview-card .overview-icon {
        width: 44px;
        height: 44px;
        border-radius: 10px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1.2rem;
    }
    .overview-card .overview-value {
        font-size: 1.5rem;
        font-weight: 700;
        line-height: 1.2;
    }
    .overview-card .overview-label {
        font-size: 0.78rem;
        color: #6c757d;
        margin-top: 2px;
    }
    .service-indicator {
        width: 8px;
        height: 8px;
        border-radius: 50%;
        display: inline-block;
        margin-right: 6px;
    }
    .service-active { background-color: #28a745; }
    .service-inactive { background-color: #dc3545; }
    .top-user-rank {
        width: 26px;
        height: 26px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 0.72rem;
        font-weight: 700;
        color: #fff;
    }
    .rank-1 { background: linear-gradient(135deg, #f5af19, #f12711); }
    .rank-2 { background: linear-gradient(135deg, #bdc3c7, #2c3e50); }
    .rank-3 { background: linear-gradient(135deg, #b79891, #94716b); }
    .rank-default { background: #6c757d; }
</style>
<?php $__env->stopSection(); ?>

<?php $__env->startSection('content'); ?>

<div class="row g-3 mb-4">
    <div class="col-6 col-lg-3">
        <div class="overview-card">
            <div class="d-flex align-items-center gap-3">
                <div class="overview-icon bg-primary bg-opacity-10 text-primary">
                    <i class="bi bi-people-fill"></i>
                </div>
                <div>
                    <div class="overview-value"><?php echo e($stats['total_users']); ?></div>
                    <div class="overview-label">Total Users</div>
                    <div class="stat-mini">
                        <span class="text-success"><?php echo e($stats['active_users']); ?> active</span>
                        <?php if($stats['pending_users'] > 0): ?>
                            · <span class="text-warning"><?php echo e($stats['pending_users']); ?> pending</span>
                        <?php endif; ?>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="col-6 col-lg-3">
        <div class="overview-card">
            <div class="d-flex align-items-center gap-3">
                <div class="overview-icon bg-success bg-opacity-10 text-success">
                    <i class="bi bi-chat-dots-fill"></i>
                </div>
                <div>
                    <div class="overview-value"><?php echo e($stats['sms_today']); ?></div>
                    <div class="overview-label">SMS Today</div>
                    <div class="stat-mini"><?php echo e(number_format($stats['total_sms'])); ?> total sent</div>
                </div>
            </div>
        </div>
    </div>
    <div class="col-6 col-lg-3">
        <div class="overview-card">
            <div class="d-flex align-items-center gap-3">
                <div class="overview-icon" style="background: rgba(18,140,126,.1); color: #128C7E;">
                    <i class="bi bi-whatsapp"></i>
                </div>
                <div>
                    <div class="overview-value"><?php echo e($stats['whatsapp_today']); ?></div>
                    <div class="overview-label">WhatsApp Today</div>
                    <div class="stat-mini"><?php echo e(number_format($stats['total_whatsapp'])); ?> total sent</div>
                </div>
            </div>
        </div>
    </div>
    <div class="col-6 col-lg-3">
        <div class="overview-card">
            <div class="d-flex align-items-center gap-3">
                <div class="overview-icon bg-info bg-opacity-10 text-info">
                    <i class="bi bi-telephone-fill"></i>
                </div>
                <div>
                    <div class="overview-value"><?php echo e($stats['calls_today']); ?></div>
                    <div class="overview-label">Calls Today</div>
                    <div class="stat-mini"><?php echo e(number_format($stats['total_calls'])); ?> total calls</div>
                </div>
            </div>
        </div>
    </div>
</div>


<div class="row g-3 mb-4">
    <div class="col-6 col-lg-3">
        <div class="overview-card">
            <div class="d-flex align-items-center gap-3">
                <div class="overview-icon" style="background: rgba(111,66,193,.1); color: #6f42c1;">
                    <i class="bi bi-envelope-fill"></i>
                </div>
                <div>
                    <div class="overview-value"><?php echo e($stats['messages_today']); ?></div>
                    <div class="overview-label">All Messages Today</div>
                    <div class="stat-mini"><?php echo e(number_format($stats['total_messages'])); ?> lifetime</div>
                </div>
            </div>
        </div>
    </div>
    <div class="col-6 col-lg-3">
        <div class="overview-card">
            <div class="d-flex align-items-center gap-3">
                <div class="overview-icon bg-warning bg-opacity-10 text-warning">
                    <i class="bi bi-file-text-fill"></i>
                </div>
                <div>
                    <div class="overview-value"><?php echo e($stats['active_templates']); ?></div>
                    <div class="overview-label">Active Templates</div>
                    <div class="stat-mini"><?php echo e($stats['total_templates']); ?> total</div>
                </div>
            </div>
        </div>
    </div>
    <div class="col-6 col-lg-3">
        <div class="overview-card">
            <div class="d-flex align-items-center gap-3">
                <div class="overview-icon bg-danger bg-opacity-10 text-danger">
                    <i class="bi bi-telephone-x-fill"></i>
                </div>
                <div>
                    <div class="overview-value"><?php echo e($stats['missed_calls']); ?></div>
                    <div class="overview-label">Missed Calls</div>
                    <div class="stat-mini">
                        <?php echo e($stats['incoming_calls']); ?> in · <?php echo e($stats['outgoing_calls']); ?> out
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="col-6 col-lg-3">
        <div class="overview-card">
            <div class="d-flex align-items-center gap-3">
                <div class="overview-icon bg-secondary bg-opacity-10 text-secondary">
                    <i class="bi bi-person-badge-fill"></i>
                </div>
                <div>
                    <div class="overview-value"><?php echo e($stats['client_admins']); ?></div>
                    <div class="overview-label">Client Admins</div>
                    <div class="stat-mini"><?php echo e($stats['rejected_users']); ?> rejected users</div>
                </div>
            </div>
        </div>
    </div>
</div>


<div class="row g-3 mb-4">
    <div class="col-md-6 col-lg-4">
        <div class="overview-card h-100">
            <h6 class="text-muted mb-3"><i class="bi bi-credit-card me-2"></i>Subscription</h6>
            <div class="d-flex align-items-center gap-2 mb-3">
                <span class="badge bg-<?php echo e($subscriptionInfo['type'] === 'trial' ? 'warning' : ($subscriptionInfo['type'] === 'premium' ? 'danger' : 'primary')); ?> px-3 py-2">
                    <?php echo e(ucfirst($subscriptionInfo['type'])); ?>

                </span>
                <?php if($subscriptionInfo['is_active']): ?>
                    <span class="badge bg-success">Active</span>
                <?php else: ?>
                    <span class="badge bg-danger">Inactive</span>
                <?php endif; ?>
            </div>
            <div class="small text-muted">
                <div class="mb-1"><strong>Days Remaining:</strong>
                    <span class="<?php echo e($subscriptionInfo['days_remaining'] <= 7 ? 'text-danger fw-bold' : ''); ?>">
                        <?php echo e($subscriptionInfo['days_remaining']); ?>

                    </span>
                </div>
                <div><strong>Expires:</strong> <?php echo e($subscriptionInfo['ends_at'] ? $subscriptionInfo['ends_at']->format('M d, Y') : 'N/A'); ?></div>
            </div>
        </div>
    </div>

    <div class="col-md-6 col-lg-4">
        <div class="overview-card h-100">
            <h6 class="text-muted mb-3"><i class="bi bi-speedometer2 me-2"></i>Usage Limits</h6>
            <div class="mb-3">
                <div class="d-flex justify-content-between mb-1">
                    <small>Users</small>
                    <small class="<?php echo e($stats['total_users'] >= $client->max_users ? 'text-danger fw-bold' : ''); ?>">
                        <?php echo e($stats['total_users']); ?> / <?php echo e($client->max_users); ?>

                    </small>
                </div>
                <div class="progress" style="height: 8px;">
                    <?php $userPercent = $client->max_users > 0 ? ($stats['total_users'] / $client->max_users * 100) : 0 ?>
                    <div class="progress-bar <?php echo e($userPercent >= 90 ? 'bg-danger' : ($userPercent >= 70 ? 'bg-warning' : 'bg-primary')); ?>" style="width: <?php echo e(min($userPercent, 100)); ?>%"></div>
                </div>
            </div>
            <div class="mb-3">
                <div class="d-flex justify-content-between mb-1">
                    <small>Client Admins</small>
                    <small><?php echo e($stats['client_admins']); ?> / <?php echo e($client->max_client_admins); ?></small>
                </div>
                <div class="progress" style="height: 8px;">
                    <?php $adminPercent = $client->max_client_admins > 0 ? ($stats['client_admins'] / $client->max_client_admins * 100) : 0 ?>
                    <div class="progress-bar <?php echo e($adminPercent >= 90 ? 'bg-danger' : ($adminPercent >= 70 ? 'bg-warning' : 'bg-info')); ?>" style="width: <?php echo e(min($adminPercent, 100)); ?>%"></div>
                </div>
            </div>
        </div>
    </div>

    <div class="col-md-12 col-lg-4">
        <div class="overview-card h-100">
            <h6 class="text-muted mb-3"><i class="bi bi-lightning me-2"></i>Quick Actions</h6>
            <div class="d-grid gap-2">
                <a href="<?php echo e(route('client.users.create')); ?>" class="btn btn-outline-primary btn-sm">
                    <i class="bi bi-person-plus me-2"></i>Add New User
                </a>
                <a href="<?php echo e(route('client.templates')); ?>" class="btn btn-outline-secondary btn-sm">
                    <i class="bi bi-file-text me-2"></i>Manage Templates
                </a>
                <a href="<?php echo e(route('client.sms-logs')); ?>" class="btn btn-outline-success btn-sm">
                    <i class="bi bi-chat-dots me-2"></i>Message Logs
                </a>
                <a href="<?php echo e(route('client.call-logs')); ?>" class="btn btn-outline-info btn-sm">
                    <i class="bi bi-telephone me-2"></i>Call Logs
                </a>
            </div>
        </div>
    </div>
</div>


<div class="row g-3 mb-4">
    <div class="col-lg-8">
        <div class="table-card">
            <div class="card-header d-flex justify-content-between align-items-center">
                <h5 class="mb-0"><i class="bi bi-graph-up me-2"></i>Messaging Activity (7 Days)</h5>
                <div class="d-flex gap-2">
                    <span class="badge bg-success bg-opacity-10 text-success"><i class="bi bi-circle-fill me-1" style="font-size:.5rem"></i>SMS</span>
                    <span class="badge" style="background:rgba(18,140,126,.1);color:#128C7E"><i class="bi bi-circle-fill me-1" style="font-size:.5rem"></i>WhatsApp</span>
                </div>
            </div>
            <div class="card-body p-3">
                <canvas id="messageChart" height="180"></canvas>
            </div>
        </div>
    </div>
    <div class="col-lg-4">
        <div class="table-card">
            <div class="card-header">
                <h5 class="mb-0"><i class="bi bi-telephone me-2"></i>Call Activity (7 Days)</h5>
            </div>
            <div class="card-body p-3">
                <canvas id="callChart" height="180"></canvas>
            </div>
        </div>
    </div>
</div>


<div class="row g-3 mb-4">
    
    <div class="col-lg-5">
        <div class="table-card">
            <div class="card-header d-flex justify-content-between align-items-center">
                <h5 class="mb-0"><i class="bi bi-trophy me-2"></i>Top Active Users</h5>
                <a href="<?php echo e(route('client.users')); ?>" class="btn btn-sm btn-outline-primary">View All</a>
            </div>
            <div class="table-responsive">
                <table class="table table-sm mb-0">
                    <thead>
                        <tr>
                            <th style="width:40px">#</th>
                            <th>User</th>
                            <th class="text-center">SMS</th>
                            <th class="text-center">WA</th>
                            <th class="text-center">Calls</th>
                        </tr>
                    </thead>
                    <tbody>
                        <?php $__empty_1 = true; $__currentLoopData = $topUsers; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $index => $tUser): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); $__empty_1 = false; ?>
                        <tr>
                            <td>
                                <div class="top-user-rank <?php echo e($index < 3 ? 'rank-'.($index+1) : 'rank-default'); ?>">
                                    <?php echo e($index + 1); ?>

                                </div>
                            </td>
                            <td>
                                <div class="fw-semibold" style="font-size:.85rem"><?php echo e($tUser->name); ?></div>
                                <small class="text-muted"><?php echo e($tUser->phone); ?></small>
                            </td>
                            <td class="text-center">
                                <span class="fw-semibold"><?php echo e($tUser->sms_count); ?></span>
                            </td>
                            <td class="text-center">
                                <span class="fw-semibold"><?php echo e($tUser->whatsapp_count); ?></span>
                            </td>
                            <td class="text-center">
                                <span class="fw-semibold"><?php echo e($tUser->call_count); ?></span>
                            </td>
                        </tr>
                        <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); if ($__empty_1): ?>
                        <tr>
                            <td colspan="5" class="text-center text-muted py-4">No active users yet</td>
                        </tr>
                        <?php endif; ?>
                    </tbody>
                </table>
            </div>
        </div>
    </div>

    
    <div class="col-lg-7">
        <div class="table-card">
            <div class="card-header d-flex justify-content-between align-items-center">
                <h5 class="mb-0"><i class="bi bi-clock-history me-2"></i>Recent Messages</h5>
                <a href="<?php echo e(route('client.sms-logs')); ?>" class="btn btn-sm btn-outline-primary">View All</a>
            </div>
            <div class="table-responsive">
                <table class="table table-sm mb-0">
                    <thead>
                        <tr>
                            <th>User</th>
                            <th>Phone</th>
                            <th>Channel</th>
                            <th>Status</th>
                            <th>Time</th>
                        </tr>
                    </thead>
                    <tbody>
                        <?php $__empty_1 = true; $__currentLoopData = $recentMessages; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $msg): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); $__empty_1 = false; ?>
                        <tr>
                            <td>
                                <div style="font-size:.85rem"><?php echo e($msg->user->name ?? 'Unknown'); ?></div>
                            </td>
                            <td>
                                <small><?php echo e($msg->phone_number); ?></small>
                            </td>
                            <td>
                                <?php if($msg->channel === 'whatsapp'): ?>
                                    <span class="channel-badge channel-whatsapp">
                                        <i class="bi bi-whatsapp"></i> WhatsApp
                                    </span>
                                <?php else: ?>
                                    <span class="channel-badge channel-sms">
                                        <i class="bi bi-chat-dots"></i> SMS
                                    </span>
                                <?php endif; ?>
                            </td>
                            <td>
                                <?php if($msg->status === 'sent'): ?>
                                    <span class="badge bg-success bg-opacity-10 text-success">Sent</span>
                                <?php elseif($msg->status === 'pending'): ?>
                                    <span class="badge bg-warning bg-opacity-10 text-warning">Pending</span>
                                <?php else: ?>
                                    <span class="badge bg-danger bg-opacity-10 text-danger">Failed</span>
                                <?php endif; ?>
                            </td>
                            <td>
                                <small class="text-muted"><?php echo e($msg->created_at->diffForHumans()); ?></small>
                            </td>
                        </tr>
                        <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); if ($__empty_1): ?>
                        <tr>
                            <td colspan="5" class="text-center text-muted py-4">No messages yet</td>
                        </tr>
                        <?php endif; ?>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>


<div class="row g-3">
    <div class="col-12">
        <div class="table-card">
            <div class="card-header d-flex justify-content-between align-items-center">
                <h5 class="mb-0"><i class="bi bi-people me-2"></i>Recent Users</h5>
                <a href="<?php echo e(route('client.users')); ?>" class="btn btn-sm btn-outline-primary">View All</a>
            </div>
            <div class="table-responsive">
                <table class="table table-sm mb-0">
                    <thead>
                        <tr>
                            <th>Name</th>
                            <th>Phone</th>
                            <th>Status</th>
                            <th>Active</th>
                            <th>Created</th>
                        </tr>
                    </thead>
                    <tbody>
                        <?php $__empty_1 = true; $__currentLoopData = $recentUsers; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $user): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); $__empty_1 = false; ?>
                        <tr>
                            <td>
                                <div class="fw-semibold"><?php echo e($user->name); ?></div>
                                <small class="text-muted"><?php echo e($user->email); ?></small>
                            </td>
                            <td><small><?php echo e($user->phone); ?></small></td>
                            <td>
                                <?php if($user->approval_status === 'pending'): ?>
                                    <span class="badge badge-pending">Pending</span>
                                <?php elseif($user->approval_status === 'approved'): ?>
                                    <span class="badge badge-approved">Approved</span>
                                <?php else: ?>
                                    <span class="badge badge-rejected">Rejected</span>
                                <?php endif; ?>
                            </td>
                            <td>
                                <?php if($user->is_active): ?>
                                    <span class="service-indicator service-active"></span>Yes
                                <?php else: ?>
                                    <span class="service-indicator service-inactive"></span>No
                                <?php endif; ?>
                            </td>
                            <td>
                                <small class="text-muted"><?php echo e($user->created_at->diffForHumans()); ?></small>
                            </td>
                        </tr>
                        <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); if ($__empty_1): ?>
                        <tr>
                            <td colspan="5" class="text-center text-muted py-4">No users yet</td>
                        </tr>
                        <?php endif; ?>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>
<?php $__env->stopSection(); ?>

<?php $__env->startSection('scripts'); ?>
<script>
    // Combined Messaging Chart (SMS + WhatsApp)
    const msgCtx = document.getElementById('messageChart').getContext('2d');
    new Chart(msgCtx, {
        type: 'line',
        data: {
            labels: <?php echo json_encode($chartData['labels'], 15, 512) ?>,
            datasets: [
                {
                    label: 'SMS',
                    data: <?php echo json_encode($chartData['sms'], 15, 512) ?>,
                    borderColor: '#11998e',
                    backgroundColor: 'rgba(17, 153, 142, 0.08)',
                    fill: true,
                    tension: 0.4,
                    borderWidth: 2,
                    pointRadius: 3,
                    pointHoverRadius: 5
                },
                {
                    label: 'WhatsApp',
                    data: <?php echo json_encode($chartData['whatsapp'], 15, 512) ?>,
                    borderColor: '#128C7E',
                    backgroundColor: 'rgba(18, 140, 126, 0.08)',
                    fill: true,
                    tension: 0.4,
                    borderWidth: 2,
                    borderDash: [5, 3],
                    pointRadius: 3,
                    pointHoverRadius: 5
                }
            ]
        },
        options: {
            responsive: true,
            interaction: {
                mode: 'index',
                intersect: false
            },
            plugins: {
                legend: {
                    display: true,
                    position: 'bottom',
                    labels: {
                        usePointStyle: true,
                        padding: 20
                    }
                },
                tooltip: {
                    callbacks: {
                        footer: function(items) {
                            let total = items.reduce((sum, item) => sum + item.raw, 0);
                            return 'Total: ' + total;
                        }
                    }
                }
            },
            scales: {
                y: {
                    beginAtZero: true,
                    ticks: { precision: 0 }
                }
            }
        }
    });

    // Call Activity Chart
    const callCtx = document.getElementById('callChart').getContext('2d');
    new Chart(callCtx, {
        type: 'bar',
        data: {
            labels: <?php echo json_encode($chartData['labels'], 15, 512) ?>,
            datasets: [{
                label: 'Calls',
                data: <?php echo json_encode($chartData['calls'], 15, 512) ?>,
                backgroundColor: 'rgba(13, 202, 240, 0.3)',
                borderColor: '#0dcaf0',
                borderWidth: 1,
                borderRadius: 4
            }]
        },
        options: {
            responsive: true,
            plugins: {
                legend: { display: false }
            },
            scales: {
                y: {
                    beginAtZero: true,
                    ticks: { precision: 0 }
                }
            }
        }
    });
</script>
<?php $__env->stopSection(); ?>
<?php echo $__env->make('client.layouts.dashboard', \Illuminate\Support\Arr::except(get_defined_vars(), ['__data', '__path']))->render(); ?><?php /**PATH D:\xampp82\htdocs\AutoPromix\backend\resources\views/client/dashboard/index.blade.php ENDPATH**/ ?>