@extends('layouts.dashboard')

@section('title', 'Analytics')
@section('page-title', 'Analytics & Reports')

@section('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="{{ route('dashboard.analytics', ['period' => '7days']) }}"
            class="btn btn-outline-primary {{ $period == '7days' ? 'active' : '' }}">
            7 Days
        </a>
        <a href="{{ route('dashboard.analytics', ['period' => '30days']) }}"
            class="btn btn-outline-primary {{ $period == '30days' ? 'active' : '' }}">
            30 Days
        </a>
        <a href="{{ route('dashboard.analytics', ['period' => '90days']) }}"
            class="btn btn-outline-primary {{ $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">{{ $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>
                @foreach($topUsersByCalls as $index => $user)
                <tr>
                    <td>{{ $index + 1 }}</td>
                    <td>{{ $user->name }}</td>
                    <td>{{ $user->email }}</td>
                    <td>
                        <span class="badge bg-primary">{{ $user->call_logs_count }}</span>
                    </td>
                    <td>
                        <a href="{{ route('dashboard.user-details', $user->id) }}"
                            class="btn btn-sm btn-outline-primary">
                            View Details
                        </a>
                    </td>
                </tr>
                @endforeach
            </tbody>
        </table>
    </div>
</div>
@endsection

@push('scripts')
<script>
    // Prepare data for charts
    const dailyCallData = @json($dailyCallStats);
    const dailySmsData = @json($dailySmsStats);

    // 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>
@endpush