@extends('layouts.app')
@section('title', 'Reports')
@section('page-title', 'Reports & Analytics')

@push('styles')
<style>
.metric-card {
    background: #fff; border: 1px solid #e2e8f0; border-radius: 12px;
    padding: 20px; text-align: center; transition: all .2s;
    box-shadow: 0 1px 3px rgba(0,0,0,.05);
}
.metric-card:hover { border-color: #38bdf8; transform: translateY(-2px); box-shadow: 0 4px 16px rgba(56,189,248,.15); }
.metric-val { font-size: 36px; font-weight: 800; color: #0f172a; line-height: 1; }
.metric-label { font-size: 11px; font-weight: 700; color: #64748b; text-transform: uppercase; letter-spacing: 1px; margin-top: 6px; }
.prog-track { height: 7px; background: #f1f5f9; border-radius: 4px; overflow: hidden; margin-top: 6px; }
.prog-fill { height: 100%; border-radius: 4px; transition: width 1.2s ease; }
</style>
@endpush

@section('content')
<div class="row g-3 mb-4">
    <div class="col-6 col-md-4 col-xl-2"><div class="metric-card"><div class="metric-val">{{ $total }}</div><div class="metric-label">Total Calls</div></div></div>
    <div class="col-6 col-md-4 col-xl-2"><div class="metric-card"><div class="metric-val" style="color:#15803d;">{{ $completed }}</div><div class="metric-label">Completed</div></div></div>
    <div class="col-6 col-md-4 col-xl-2"><div class="metric-card"><div class="metric-val" style="color:#b91c1c;">{{ $failed }}</div><div class="metric-label">Failed</div></div></div>
    <div class="col-6 col-md-4 col-xl-2"><div class="metric-card"><div class="metric-val" style="color:#0284c7;">{{ $successRate }}%</div><div class="metric-label">Success Rate</div></div></div>
    <div class="col-6 col-md-4 col-xl-2"><div class="metric-card"><div class="metric-val">{{ $avgDuration > 0 ? intdiv($avgDuration,60).'m' : '—' }}</div><div class="metric-label">Avg Duration</div></div></div>
    <div class="col-6 col-md-4 col-xl-2"><div class="metric-card"><div class="metric-val" style="color:#b45309;">{{ $neutral }}</div><div class="metric-label">Neutral</div></div></div>
</div>

<div class="row g-4">
    <div class="col-md-4">
        <div class="card h-100">
            <div class="card-header"><i class="bi bi-pie-chart-fill me-2" style="color:#38bdf8;"></i><strong>Sentiment Breakdown</strong></div>
            <div class="card-body">
                <canvas id="sentimentChart" style="max-height:200px;"></canvas>
                @php $st = max(1, $positive + $neutral + $negative); @endphp
                <div class="mt-4">
                    <div class="mb-3">
                        <div class="d-flex justify-content-between">
                            <span style="font-size:13px;font-weight:700;color:#15803d;">Positive</span>
                            <span style="font-size:13px;font-weight:700;">{{ $positive }} <span style="color:#64748b;">({{ round($positive/$st*100) }}%)</span></span>
                        </div>
                        <div class="prog-track"><div class="prog-fill" style="width:{{ round($positive/$st*100) }}%;background:#22c55e;"></div></div>
                    </div>
                    <div class="mb-3">
                        <div class="d-flex justify-content-between">
                            <span style="font-size:13px;font-weight:700;color:#0284c7;">Neutral</span>
                            <span style="font-size:13px;font-weight:700;">{{ $neutral }} <span style="color:#64748b;">({{ round($neutral/$st*100) }}%)</span></span>
                        </div>
                        <div class="prog-track"><div class="prog-fill" style="width:{{ round($neutral/$st*100) }}%;background:#38bdf8;"></div></div>
                    </div>
                    <div>
                        <div class="d-flex justify-content-between">
                            <span style="font-size:13px;font-weight:700;color:#b91c1c;">Negative</span>
                            <span style="font-size:13px;font-weight:700;">{{ $negative }} <span style="color:#64748b;">({{ round($negative/$st*100) }}%)</span></span>
                        </div>
                        <div class="prog-track"><div class="prog-fill" style="width:{{ round($negative/$st*100) }}%;background:#f87171;"></div></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="col-md-8">
        <div class="card h-100">
            <div class="card-header"><i class="bi bi-bar-chart-fill me-2" style="color:#38bdf8;"></i><strong>Daily Call Volume — Last 14 Days</strong></div>
            <div class="card-body"><canvas id="dailyChart" style="max-height:280px;"></canvas></div>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.2/dist/chart.umd.min.js"></script>
<script>
    Chart.defaults.color = '#64748b';
    Chart.defaults.borderColor = '#e2e8f0';
    Chart.defaults.font.family = "'Inter', sans-serif";

    new Chart(document.getElementById('sentimentChart'), {
        type: 'doughnut',
        data: {
            labels: ['Positive', 'Neutral', 'Negative'],
            datasets: [{ data: [{{ $positive }}, {{ $neutral }}, {{ $negative }}],
                backgroundColor: ['#22c55e','#38bdf8','#f87171'],
                borderColor: '#fff', borderWidth: 4 }]
        },
        options: { responsive: true, cutout: '65%', plugins: { legend: { position: 'bottom', labels: { padding: 16, font: { size: 12, weight: '700' } } } } }
    });

    @php
        $labels = []; $values = [];
        for ($i = 13; $i >= 0; $i--) {
            $d = now()->subDays($i)->format('Y-m-d');
            $labels[] = now()->subDays($i)->format('d M');
            $values[] = $dailyCalls[$d]->count ?? 0;
        }
    @endphp

    new Chart(document.getElementById('dailyChart'), {
        type: 'bar',
        data: {
            labels: {!! json_encode($labels) !!},
            datasets: [{ label: 'Calls', data: {!! json_encode($values) !!},
                backgroundColor: 'rgba(56,189,248,.2)', borderColor: '#38bdf8',
                borderWidth: 2, borderRadius: 6, borderSkipped: false }]
        },
        options: {
            responsive: true,
            scales: {
                y: { beginAtZero: true, grid: { color: '#f1f5f9' }, ticks: { stepSize: 1, font: { weight: '700' } } },
                x: { grid: { display: false }, ticks: { font: { weight: '700' } } }
            },
            plugins: { legend: { display: false } }
        }
    });
</script>
@endpush