@extends('layouts.app')

@section('content')
<div class="container-fluid">
    <div class="page-header d-flex justify-content-between align-items-center mb-4">
        <div>
            <h1 class="h3 mb-1">Call Analytics</h1>
            <p class="text-muted mb-0">Comprehensive call statistics and trends</p>
        </div>
        <div class="d-flex gap-2">
            <a href="{{ route('dect.calls.index') }}" class="btn btn-secondary btn-sm">
                <i class="fas fa-arrow-left"></i> Back to Calls
            </a>
        </div>
    </div>

    <!-- Call Statistics Overview -->
    <div class="row mb-4">
        <div class="col-lg-3 col-md-6 mb-3">
            <div class="card border-0 shadow-sm">
                <div class="card-body">
                    <div class="d-flex align-items-center">
                        <div class="bg-primary bg-opacity-10 rounded p-3">
                            <i class="fas fa-calendar-day text-primary fs-4"></i>
                        </div>
                        <div class="ms-3">
                            <h6 class="text-muted mb-1">Today</h6>
                            <h4 class="mb-0">{{ $callsToday }}</h4>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-lg-3 col-md-6 mb-3">
            <div class="card border-0 shadow-sm">
                <div class="card-body">
                    <div class="d-flex align-items-center">
                        <div class="bg-success bg-opacity-10 rounded p-3">
                            <i class="fas fa-calendar-week text-success fs-4"></i>
                        </div>
                        <div class="ms-3">
                            <h6 class="text-muted mb-1">This Week</h6>
                            <h4 class="mb-0">{{ $callsThisWeek }}</h4>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-lg-3 col-md-6 mb-3">
            <div class="card border-0 shadow-sm">
                <div class="card-body">
                    <div class="d-flex align-items-center">
                        <div class="bg-info bg-opacity-10 rounded p-3">
                            <i class="fas fa-calendar text-info fs-4"></i>
                        </div>
                        <div class="ms-3">
                            <h6 class="text-muted mb-1">This Month</h6>
                            <h4 class="mb-0">{{ $callsThisMonth }}</h4>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-lg-3 col-md-6 mb-3">
            <div class="card border-0 shadow-sm">
                <div class="card-body">
                    <div class="d-flex align-items-center">
                        <div class="bg-warning bg-opacity-10 rounded p-3">
                            <i class="fas fa-percentage text-warning fs-4"></i>
                        </div>
                        <div class="ms-3">
                            <h6 class="text-muted mb-1">Success Rate</h6>
                            <h4 class="mb-0">{{ $successRate }}%</h4>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Performance Metrics -->
    <div class="row mb-4">
        <div class="col-lg-6 mb-3">
            <div class="card border-0 shadow-sm">
                <div class="card-header bg-white border-bottom">
                    <h5 class="card-title mb-0">Performance Metrics</h5>
                </div>
                <div class="card-body">
                    <div class="row">
                        <div class="col-md-6">
                            <div class="text-center mb-3">
                                <h3 class="text-primary">{{ gmdate('i:s', $avgDuration ?? 0) }}</h3>
                                <small class="text-muted">Average Duration</small>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="text-center mb-3">
                                <h3 class="text-info">{{ round($avgQuality ?? 0, 1) }}/5.0</h3>
                                <small class="text-muted">Average Quality</small>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-6">
                            <div class="text-center">
                                <h3 class="text-danger">{{ $missedCalls }}</h3>
                                <small class="text-muted">Missed Calls Today</small>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="text-center">
                                <h3 class="text-success">{{ $callsToday - $missedCalls }}</h3>
                                <small class="text-muted">Completed Calls Today</small>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        
        <div class="col-lg-6 mb-3">
            <div class="card border-0 shadow-sm">
                <div class="card-header bg-white border-bottom">
                    <h5 class="card-title mb-0">Top Handsets by Call Volume</h5>
                </div>
                <div class="card-body">
                    @if($topHandsets->count() > 0)
                        @foreach($topHandsets as $handset)
                        <div class="d-flex justify-content-between align-items-center mb-2">
                            <span>{{ $handset->handset->name ?? 'Unknown' }}</span>
                            <span class="badge bg-primary">{{ $handset->call_count }} calls</span>
                        </div>
                        @endforeach
                    @else
                        <div class="text-center py-3">
                            <p class="text-muted mb-0">No call data available</p>
                        </div>
                    @endif
                </div>
            </div>
        </div>
    </div>

    <!-- Hourly Call Distribution -->
    <div class="card border-0 shadow-sm">
        <div class="card-header bg-white border-bottom">
            <h5 class="card-title mb-0">Hourly Call Distribution</h5>
        </div>
        <div class="card-body">
            <canvas id="hourlyCallsChart" style="max-height: 400px;"></canvas>
        </div>
    </div>
</div>

<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
document.addEventListener('DOMContentLoaded', function() {
    const ctx = document.getElementById('hourlyCallsChart').getContext('2d');
    
    const hourlyData = @json($hourlyCalls);
    
    new Chart(ctx, {
        type: 'bar',
        data: {
            labels: hourlyData.map(item => item.hour + ':00'),
            datasets: [{
                label: 'Number of Calls',
                data: hourlyData.map(item => item.count),
                backgroundColor: 'rgba(59, 130, 246, 0.8)',
                borderColor: 'rgb(59, 130, 246)',
                borderWidth: 1
            }]
        },
        options: {
            responsive: true,
            maintainAspectRatio: false,
            scales: {
                y: {
                    beginAtZero: true,
                    ticks: {
                        stepSize: 1
                    }
                }
            },
            plugins: {
                legend: {
                    display: false
                }
            }
        }
    });
});
</script>
@endsection