@extends('layouts.app')

@section('content')
<div class="container-fluid">
    <div class="d-flex justify-content-between align-items-center flex-wrap gap-2 mb-3">
        <div>
            <h4 class="mb-1">Call Analytics</h4>
            <div class="text-secondary small">
                <a href="{{ route('reports.index') }}" class="text-decoration-none">Reports</a> &nbsp;›&nbsp; Call Analytics
            </div>
        </div>
    </div>

    {{-- Filters --}}
    <form method="GET" class="card mb-3">
        <div class="card-body py-3">
            @include('reports._date-presets')
            <div class="row g-2 align-items-end">
                <div class="col-6 col-md-3">
                    <label class="form-label small fw-semibold mb-1">From</label>
                    <input type="date" name="from" value="{{ $from }}" class="form-control form-control-sm">
                </div>
                <div class="col-6 col-md-3">
                    <label class="form-label small fw-semibold mb-1">To</label>
                    <input type="date" name="to" value="{{ $to }}" class="form-control form-control-sm">
                </div>
                <div class="col-8 col-md-4">
                    <label class="form-label small fw-semibold mb-1">Department</label>
                    <select name="department" class="form-select form-select-sm">
                        <option value="">All</option>
                        @foreach($departments as $d)
                            <option value="{{ $d->id }}" {{ (string)$department === (string)$d->id ? 'selected' : '' }}>{{ $d->name }}</option>
                        @endforeach
                    </select>
                </div>
                <div class="col-4 col-md-2">
                    <button class="btn btn-sm btn-primary w-100">Apply</button>
                </div>
            </div>
        </div>
    </form>

    {{-- KPI tiles --}}
    @php
        $tiles = [
            ['label' => 'Total Calls',  'value' => number_format($kpis['total']),    'color' => '#3b82f6'],
            ['label' => 'Answered',     'value' => number_format($kpis['answered']), 'color' => '#16a34a'],
            ['label' => 'Answer Rate',  'value' => $kpis['answer_rate'] . '%',       'color' => '#0e7490'],
            ['label' => 'No Answer',    'value' => number_format($kpis['noanswer']), 'color' => '#d97706'],
            ['label' => 'Total Talk',   'value' => $kpis['talk_human'],              'color' => '#7c3aed'],
            ['label' => 'Avg Talk',     'value' => $kpis['avg_talk'],                'color' => '#475569'],
        ];
    @endphp
    <div class="row g-3 mb-3">
        @foreach($tiles as $t)
        <div class="col-6 col-md-4 col-xl-2">
            <div class="card h-100">
                <div class="card-body py-3">
                    <div class="text-secondary small">{{ $t['label'] }}</div>
                    <div class="fw-bold" style="font-size:1.5rem;color:{{ $t['color'] }};">{{ $t['value'] }}</div>
                </div>
            </div>
        </div>
        @endforeach
    </div>

    <div class="row g-3">
        <div class="col-12 col-xl-8">
            <div class="card h-100">
                <div class="card-header bg-white py-2"><strong>Calls per day</strong></div>
                <div class="card-body"><canvas id="chartPerDay" height="110"></canvas></div>
            </div>
        </div>
        <div class="col-12 col-xl-4">
            <div class="card h-100">
                <div class="card-header bg-white py-2"><strong>Direction</strong></div>
                <div class="card-body"><canvas id="chartDirection" height="200"></canvas></div>
            </div>
        </div>
        <div class="col-12 col-xl-8">
            <div class="card h-100">
                <div class="card-header bg-white py-2"><strong>Busiest hours</strong></div>
                <div class="card-body"><canvas id="chartByHour" height="110"></canvas></div>
            </div>
        </div>
        <div class="col-12 col-xl-4">
            <div class="card h-100">
                <div class="card-header bg-white py-2"><strong>Top extensions</strong></div>
                <div class="card-body p-0">
                    <table class="table table-sm mb-0">
                        <thead><tr><th class="ps-3">Ext</th><th class="text-end">Calls</th><th class="text-end pe-3">Talk</th></tr></thead>
                        <tbody>
                            @forelse($topExt as $r)
                                <tr><td class="ps-3">{{ $r['ext'] }}</td><td class="text-end">{{ $r['calls'] }}</td><td class="text-end pe-3">{{ $r['talk'] }}</td></tr>
                            @empty
                                <tr><td colspan="3" class="text-center text-secondary py-3">No data for this period.</td></tr>
                            @endforelse
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script src="https://cdn.jsdelivr.net/npm/chart.js@4"></script>
<script>
(function () {
    const perDay    = @json($perDay);
    const byHour    = @json($byHour);
    const direction = @json($direction);
    const hourLabels = Array.from({length:24}, (_,h) => (h<10?'0':'')+h+':00');

    function ready(fn){ if(document.readyState!=='loading'){fn();} else {document.addEventListener('DOMContentLoaded',fn);} }
    ready(function () {
        if (typeof Chart === 'undefined') return;

        new Chart(document.getElementById('chartPerDay'), {
            type: 'line',
            data: { labels: perDay.labels, datasets: [
                { label: 'Total',    data: perDay.total,    borderColor:'#3b82f6', backgroundColor:'rgba(59,130,246,.1)', fill:true, tension:.3 },
                { label: 'Answered', data: perDay.answered, borderColor:'#16a34a', backgroundColor:'rgba(22,163,74,.08)', fill:true, tension:.3 },
            ]},
            options: { responsive:true, plugins:{legend:{position:'bottom'}}, scales:{y:{beginAtZero:true}} }
        });

        new Chart(document.getElementById('chartByHour'), {
            type: 'bar',
            data: { labels: hourLabels, datasets: [{ label:'Calls', data: byHour, backgroundColor:'#0e7490' }] },
            options: { responsive:true, plugins:{legend:{display:false}}, scales:{y:{beginAtZero:true}} }
        });

        new Chart(document.getElementById('chartDirection'), {
            type: 'doughnut',
            data: { labels:['Inbound','Outbound','Internal'], datasets:[{
                data:[direction.inbound, direction.outbound, direction.internal],
                backgroundColor:['#3b82f6','#16a34a','#94a3b8']
            }]},
            options: { responsive:true, plugins:{legend:{position:'bottom'}} }
        });
    });
})();
</script>
@endpush