<?php $__env->startSection('title', 'Analytics'); ?>
<?php $__env->startSection('page-title', 'Analytics & Reports'); ?>

<?php $__env->startSection('content'); ?>
<!-- Period Selector -->
<div class="d-flex justify-content-between align-items-center mb-4">
    <h5 class="mb-0">Performance Overview</h5>
    <div class="btn-group">
        <a href="<?php echo e(route('dashboard.analytics', ['period' => '7days'])); ?>"
            class="btn btn-outline-primary <?php echo e($period == '7days' ? 'active' : ''); ?>">
            7 Days
        </a>
        <a href="<?php echo e(route('dashboard.analytics', ['period' => '30days'])); ?>"
            class="btn btn-outline-primary <?php echo e($period == '30days' ? 'active' : ''); ?>">
            30 Days
        </a>
        <a href="<?php echo e(route('dashboard.analytics', ['period' => '90days'])); ?>"
            class="btn btn-outline-primary <?php echo e($period == '90days' ? 'active' : ''); ?>">
            90 Days
        </a>
    </div>
</div>

<!-- Success Rate Card -->
<div class="row g-4 mb-4">
    <div class="col-md-4">
        <div class="stat-card success">
            <div class="d-flex justify-content-between align-items-center">
                <div>
                    <div class="value"><?php echo e($successRate); ?>%</div>
                    <div class="label">SMS Success Rate</div>
                </div>
                <div class="icon">
                    <i class="bi bi-graph-up-arrow"></i>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Charts -->
<div class="row g-4 mb-4">
    <div class="col-lg-6">
        <div class="chart-container">
            <h5 class="mb-3">Daily Calls</h5>
            <canvas id="dailyCallsChart" height="200"></canvas>
        </div>
    </div>

    <div class="col-lg-6">
        <div class="chart-container">
            <h5 class="mb-3">Daily SMS</h5>
            <canvas id="dailySmsChart" height="200"></canvas>
        </div>
    </div>
</div>

<!-- Top Users Table -->
<div class="table-container">
    <h5 class="mb-3">Top Users by Call Volume</h5>
    <div class="table-responsive">
        <table class="table table-hover">
            <thead>
                <tr>
                    <th>#</th>
                    <th>User</th>
                    <th>Email</th>
                    <th>Total Calls</th>
                    <th>Actions</th>
                </tr>
            </thead>
            <tbody>
                <?php $__currentLoopData = $topUsersByCalls; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $index => $user): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                <tr>
                    <td><?php echo e($index + 1); ?></td>
                    <td><?php echo e($user->name); ?></td>
                    <td><?php echo e($user->email); ?></td>
                    <td>
                        <span class="badge bg-primary"><?php echo e($user->call_logs_count); ?></span>
                    </td>
                    <td>
                        <a href="<?php echo e(route('dashboard.user-details', $user->id)); ?>"
                            class="btn btn-sm btn-outline-primary">
                            View Details
                        </a>
                    </td>
                </tr>
                <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
            </tbody>
        </table>
    </div>
</div>
<?php $__env->stopSection(); ?>

<?php $__env->startPush('scripts'); ?>
<script>
    // Prepare data for charts
    const dailyCallData = <?php echo json_encode($dailyCallStats, 15, 512) ?>;
    const dailySmsData = <?php echo json_encode($dailySmsStats, 15, 512) ?>;

    // Process daily calls data
    const callLabels = Object.keys(dailyCallData);
    const callDatasets = {
        incoming: [],
        outgoing: [],
        missed: []
    };

    callLabels.forEach(date => {
        const dayData = dailyCallData[date];
        callDatasets.incoming.push(dayData.find(d => d.call_type === 'incoming')?.count || 0);
        callDatasets.outgoing.push(dayData.find(d => d.call_type === 'outgoing')?.count || 0);
        callDatasets.missed.push(dayData.find(d => d.call_type === 'missed')?.count || 0);
    });

    // Daily Calls Chart
    new Chart(document.getElementById('dailyCallsChart'), {
        type: 'bar',
        data: {
            labels: callLabels,
            datasets: [{
                    label: 'Incoming',
                    data: callDatasets.incoming,
                    backgroundColor: '#28a745'
                },
                {
                    label: 'Outgoing',
                    data: callDatasets.outgoing,
                    backgroundColor: '#007bff'
                },
                {
                    label: 'Missed',
                    data: callDatasets.missed,
                    backgroundColor: '#dc3545'
                }
            ]
        },
        options: {
            responsive: true,
            scales: {
                x: {
                    stacked: true
                },
                y: {
                    stacked: true,
                    beginAtZero: true
                }
            }
        }
    });

    // Process daily SMS data
    const smsLabels = Object.keys(dailySmsData);
    const smsDatasets = {
        sent: [],
        failed: [],
        pending: []
    };

    smsLabels.forEach(date => {
        const dayData = dailySmsData[date];
        smsDatasets.sent.push(dayData.find(d => d.status === 'sent')?.count || 0);
        smsDatasets.failed.push(dayData.find(d => d.status === 'failed')?.count || 0);
        smsDatasets.pending.push(dayData.find(d => d.status === 'pending')?.count || 0);
    });

    // Daily SMS Chart
    new Chart(document.getElementById('dailySmsChart'), {
        type: 'bar',
        data: {
            labels: smsLabels,
            datasets: [{
                    label: 'Sent',
                    data: smsDatasets.sent,
                    backgroundColor: '#28a745'
                },
                {
                    label: 'Failed',
                    data: smsDatasets.failed,
                    backgroundColor: '#dc3545'
                },
                {
                    label: 'Pending',
                    data: smsDatasets.pending,
                    backgroundColor: '#ffc107'
                }
            ]
        },
        options: {
            responsive: true,
            scales: {
                x: {
                    stacked: true
                },
                y: {
                    stacked: true,
                    beginAtZero: true
                }
            }
        }
    });
</script>
<?php $__env->stopPush(); ?>
<?php echo $__env->make('layouts.dashboard', \Illuminate\Support\Arr::except(get_defined_vars(), ['__data', '__path']))->render(); ?><?php /**PATH /home/zwfgftjb/autopromix.byteengine.in/resources/views/dashboard/analytics.blade.php ENDPATH**/ ?>