@extends('layouts.app')
@section('title', 'التقارير')
@section('page_title', 'التقارير ومؤشرات الأداء')
@section('page_subtitle', 'مؤشرات الكول سنتر المعيارية: Answer Rate, AHT, ASA, Service Level, Conversion')

@section('content')
<div class="card mb-3">
    <div class="card-body">
        <div class="row g-2">
            <div class="col-md-2">
                <label class="form-label small">من</label>
                <input type="date" class="form-control form-control-sm" id="from" value="{{ $from }}">
            </div>
            <div class="col-md-2">
                <label class="form-label small">إلى</label>
                <input type="date" class="form-control form-control-sm" id="to" value="{{ $to }}">
            </div>
            <div class="col-md-2">
                <label class="form-label small">الموظف</label>
                <select class="form-select form-select-sm" id="agent">
                    <option value="">الكل</option>
                    @foreach ($agents as $agent)
                        <option value="{{ $agent->id }}">{{ $agent->name }}</option>
                    @endforeach
                </select>
            </div>
            <div class="col-md-2">
                <label class="form-label small">الفريق</label>
                <select class="form-select form-select-sm" id="team">
                    <option value="">الكل</option>
                    @foreach ($teams as $team)
                        <option value="{{ $team->id }}">{{ $team->name }}</option>
                    @endforeach
                </select>
            </div>
            <div class="col-md-2">
                <label class="form-label small">الحملة</label>
                <select class="form-select form-select-sm" id="campaign">
                    <option value="">الكل</option>
                    @foreach ($campaigns as $campaign)
                        <option value="{{ $campaign->id }}">{{ $campaign->name }}</option>
                    @endforeach
                </select>
            </div>
            <div class="col-md-2 d-flex align-items-end">
                <button class="btn btn-sm btn-primary w-100" id="btnApply"><i class="bi bi-funnel"></i> عرض</button>
            </div>
        </div>
    </div>
</div>

<div class="row g-3 mb-3" id="kpiCards">
    @php
        $kpis = [
            ['total_calls', 'إجمالي المكالمات'],
            ['answered', 'تم الرد'],
            ['answer_rate', 'نسبة الرد %'],
            ['abandon_rate', 'نسبة التخلي %'],
            ['aht', 'AHT'],
            ['att', 'ATT'],
            ['asa', 'ASA'],
            ['service_level', 'Service Level %'],
            ['conversion_rate', 'نسبة التحويل %'],
            ['total_talk', 'إجمالي زمن الكلام'],
        ];
    @endphp
    @foreach ($kpis as $kpi)
        <div class="col-6 col-lg-2">
            <div class="stat-card text-center">
                <div class="stat-value" data-kpi="{{ $kpi[0] }}">—</div>
                <div class="stat-label">{{ $kpi[1] }}</div>
            </div>
        </div>
    @endforeach
</div>

<div class="row g-3">
    <div class="col-lg-8">
        <div class="card mb-3">
            <div class="card-header">حركة المكالمات اليومية</div>
            <div class="card-body"><canvas id="dayChart" height="90"></canvas></div>
        </div>
        <div class="card mb-3">
            <div class="card-header">توزيع المكالمات على ساعات اليوم (Peak Hours)</div>
            <div class="card-body"><canvas id="hourChart" height="90"></canvas></div>
        </div>
        <div class="card">
            <div class="card-header d-flex justify-content-between align-items-center">
                <span>أداء الموظفين</span>
                <button class="btn btn-sm btn-outline-secondary" id="btnExportAgents"><i class="bi bi-download"></i> تصدير</button>
            </div>
            <div class="table-responsive">
                <table class="table table-sm mb-0" id="agentsTable">
                    <thead>
                        <tr><th>الموظف</th><th>المكالمات</th><th>تم الرد</th><th>نسبة الرد</th><th>زمن الكلام</th><th>متوسط الكلام</th><th>AHT</th></tr>
                    </thead>
                    <tbody></tbody>
                </table>
            </div>
        </div>
    </div>

    <div class="col-lg-4">
        <div class="card mb-3">
            <div class="card-header">نتائج الاتصال</div>
            <div class="card-body"><canvas id="dispChart" height="200"></canvas></div>
        </div>
        <div class="card">
            <div class="card-header">أداء الحملات</div>
            <div class="table-responsive">
                <table class="table table-sm mb-0" id="campaignsTable">
                    <thead><tr><th>الحملة</th><th>المكالمات</th><th>زمن الكلام</th></tr></thead>
                    <tbody></tbody>
                </table>
            </div>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script>
jQuery(function ($) {
    let dayChart = null, hourChart = null, dispChart = null;

    function params() {
        return {
            from: $('#from').val(),
            to: $('#to').val(),
            agent_id: $('#agent').val(),
            team_id: $('#team').val(),
            campaign_id: $('#campaign').val()
        };
    }

    function loadKpis() {
        $.getJSON('{{ route('reports.kpis') }}', params(), function (res) {
            $.each(res, function (key, value) {
                $('[data-kpi="' + key + '"]').text(value);
            });
        });
    }

    function loadAgents() {
        $.getJSON('{{ route('reports.agents') }}', params(), function (res) {
            const $body = $('#agentsTable tbody').empty();
            if (!res.data.length) {
                $body.append('<tr><td colspan="7" class="text-muted">لا توجد بيانات</td></tr>');
                return;
            }
            res.data.forEach(function (row) {
                $body.append('<tr><td>' + row.name + '</td><td>' + row.total + '</td><td>' + row.answered +
                    '</td><td>' + row.answer_rate + '%</td><td dir="ltr">' + row.talk + '</td><td dir="ltr">' +
                    row.avg_talk + '</td><td dir="ltr">' + row.aht + '</td></tr>');
            });
        });
    }

    function loadCampaigns() {
        $.getJSON('{{ route('reports.campaigns') }}', params(), function (res) {
            const $body = $('#campaignsTable tbody').empty();
            if (!res.data.length) {
                $body.append('<tr><td colspan="3" class="text-muted">لا توجد بيانات</td></tr>');
                return;
            }
            res.data.forEach(function (row) {
                $body.append('<tr><td>' + row.name + '</td><td>' + row.total + '</td><td dir="ltr">' + row.talk + '</td></tr>');
            });
        });
    }

    function loadDays() {
        $.getJSON('{{ route('reports.days') }}', params(), function (res) {
            if (dayChart) { dayChart.destroy(); }
            dayChart = new Chart(document.getElementById('dayChart'), {
                type: 'line',
                data: {
                    labels: res.labels,
                    datasets: [
                        { label: 'إجمالي', data: res.totals, borderColor: '#b91c1c', tension: 0.3 },
                        { label: 'تم الرد', data: res.answered, borderColor: '#16a34a', tension: 0.3 }
                    ]
                },
                options: { plugins: { legend: { position: 'bottom' } } }
            });
        });
    }

    function loadHours() {
        $.getJSON('{{ route('reports.hours') }}', params(), function (res) {
            if (hourChart) { hourChart.destroy(); }
            hourChart = new Chart(document.getElementById('hourChart'), {
                type: 'bar',
                data: {
                    labels: Array.from({ length: 24 }, function (v, i) { return i + ':00'; }),
                    datasets: [{ label: 'مكالمات', data: res.data, backgroundColor: '#1f2937' }]
                },
                options: { plugins: { legend: { display: false } } }
            });
        });
    }

    function loadDispositions() {
        $.getJSON('{{ route('reports.dispositions') }}', params(), function (res) {
            if (dispChart) { dispChart.destroy(); }
            if (!res.data.length) { return; }
            dispChart = new Chart(document.getElementById('dispChart'), {
                type: 'doughnut',
                data: {
                    labels: res.data.map(function (r) { return r.name; }),
                    datasets: [{ data: res.data.map(function (r) { return r.total; }), backgroundColor: res.data.map(function (r) { return r.color; }) }]
                },
                options: { plugins: { legend: { position: 'bottom' } } }
            });
        });
    }

    function loadAll() {
        loadKpis(); loadAgents(); loadCampaigns(); loadDays(); loadHours(); loadDispositions();
    }

    $('#btnApply').on('click', loadAll);
    loadAll();

    $('#btnExportAgents').on('click', function () {
        let csv = 'الموظف,المكالمات,تم الرد,نسبة الرد,زمن الكلام,متوسط الكلام,AHT\n';
        $('#agentsTable tbody tr').each(function () {
            const cells = $(this).find('td').map(function () { return $(this).text(); }).get();
            csv += cells.join(',') + '\n';
        });
        const blob = new Blob(['\ufeff' + csv], { type: 'text/csv;charset=utf-8;' });
        const link = document.createElement('a');
        link.href = URL.createObjectURL(blob);
        link.download = 'agents-report.csv';
        link.click();
    });
});
</script>
@endpush