<?php
// متغيرات: $stats, $agents, $period, $dateFrom, $dateTo, $callbacks
?>

<div class="content-wrapper">
<section class="content pt-3">
<div class="container-fluid pb-5">

    <!-- Header -->
    <div class="d-flex flex-wrap justify-content-between align-items-start gap-3 mb-4">
        <div>
            <h3 class="mb-1 fw-bold">
                <i class="bi bi-telephone-fill me-2 text-primary"></i>
                <?= __('calls.stats_title','Call Attempts Analytics') ?>
            </h3>
            <p class="text-muted mb-0 small"><?= __('calls.stats_subtitle','Track confirmation calls and agent performance') ?></p>
        </div>
        <div class="d-flex gap-2">
            <?php foreach (['7'=>'7 '.__('calls.days','days'),'30'=>'30 '.__('calls.days','days'),'90'=>'90 '.__('calls.days','days')] as $d=>$lbl): ?>
                <a href="?period=<?= $d ?>" class="btn btn-sm <?= ($period??'30') == $d ? 'btn-primary' : 'btn-outline-secondary' ?>">
                    <?= $lbl ?>
                </a>
            <?php endforeach; ?>
        </div>
    </div>

    <!-- KPI Cards -->
    <?php
    $kpis = [
        ['val'=>$stats['total_calls']??0,        'label'=>__('calls.total_calls','Total Calls'),        'icon'=>'bi-telephone',       'color'=>'primary',   'top'=>'#0d6efd'],
        ['val'=>$stats['orders_handled']??0,      'label'=>__('calls.orders_handled','Orders Handled'), 'icon'=>'bi-receipt',         'color'=>'info',      'top'=>'#0dcaf0'],
        ['val'=>($stats['confirm_rate']??0).'%',  'label'=>__('calls.confirm_rate','Confirm Rate'),    'icon'=>'bi-check-circle',    'color'=>'success',   'top'=>'#198754'],
        ['val'=>$stats['avg_calls_per_order']??0, 'label'=>__('calls.avg_calls','Avg Calls/Order'),    'icon'=>'bi-arrow-repeat',    'color'=>'warning',   'top'=>'#ffc107'],
        ['val'=>$stats['no_answer']??0,           'label'=>__('calls.no_answer','No Answer'),          'icon'=>'bi-telephone-x',     'color'=>'secondary', 'top'=>'#6c757d'],
        ['val'=>$stats['pending_callbacks']??0,   'label'=>__('calls.pending_callbacks','Callbacks Due'),'icon'=>'bi-clock-history',  'color'=>'danger',    'top'=>'#dc3545'],
    ];
    ?>
    <div class="row g-3 mb-4">
        <?php foreach ($kpis as $k): ?>
        <div class="col-6 col-md-2">
            <div class="card border-0 shadow-sm h-100" style="border-top:3px solid <?= $k['top'] ?> !important">
                <div class="card-body px-4 py-3">
                    <div class="d-flex justify-content-between align-items-start mb-2">
                        <div class="rounded-circle d-flex align-items-center justify-content-center bg-<?= $k['color'] ?>-subtle"
                             style="width:42px;height:42px">
                            <i class="bi <?= $k['icon'] ?> fs-5 text-<?= $k['color'] ?>"></i>
                        </div>
                    </div>
                    <div class="fw-bold fs-2 lh-1 mb-1"><?= $k['val'] ?></div>
                    <div class="text-muted small"><?= $k['label'] ?></div>
                </div>
            </div>
        </div>
        <?php endforeach; ?>
    </div>

    <div class="row g-4">

        <!-- Agents Performance -->
        <div class="col-lg-8">
            <div class="card border-0 shadow-sm">
                <div class="card-header bg-white border-bottom py-3">
                    <h6 class="mb-0 fw-semibold">
                        <i class="bi bi-people me-2 text-muted"></i>
                        <?= __('calls.agents_performance','Agent Performance') ?>
                    </h6>
                </div>
                <div class="card-body p-0">
                    <table class="table table-hover align-middle mb-0">
                        <thead class="table-light">
                            <tr>
                                <th class="ps-3"><?= __('calls.agent','Agent') ?></th>
                                <th class="text-center"><?= __('calls.total_calls','Calls') ?></th>
                                <th class="text-center"><?= __('calls.confirmed','Confirmed') ?></th>
                                <th class="text-center"><?= __('calls.no_answer','No Answer') ?></th>
                                <th class="text-center"><?= __('calls.callbacks','Callbacks') ?></th>
                                <th class="text-center"><?= __('calls.confirm_rate','Rate') ?></th>
                                <th class="text-center"><?= __('calls.avg_calls','Avg') ?></th>
                            </tr>
                        </thead>
                        <tbody>
                        <?php if (empty($agents)): ?>
                            <tr><td colspan="7" class="text-center text-muted py-4"><?= __('calls.no_data','No call data yet') ?></td></tr>
                        <?php else: ?>
                            <?php foreach ($agents as $ag): ?>
                            <tr>
                                <td class="ps-3">
                                    <div class="fw-semibold"><?= htmlspecialchars($ag['admin_name']) ?></div>
                                    <div class="text-muted smaller"><?= htmlspecialchars($ag['admin_role']) ?></div>
                                </td>
                                <td class="text-center fw-bold"><?= (int)$ag['total_calls'] ?></td>
                                <td class="text-center text-success fw-bold"><?= (int)$ag['confirmed'] ?></td>
                                <td class="text-center text-muted"><?= (int)$ag['no_answer'] ?></td>
                                <td class="text-center text-info"><?= (int)$ag['callbacks'] ?></td>
                                <td class="text-center">
                                    <?php $rate = (float)$ag['confirm_rate']; ?>
                                    <span class="badge bg-<?= $rate >= 50 ? 'success' : ($rate >= 30 ? 'warning' : 'danger') ?>">
                                        <?= $rate ?>%
                                    </span>
                                </td>
                                <td class="text-center text-muted small"><?= $ag['avg_calls_per_order'] ?></td>
                            </tr>
                            <?php endforeach; ?>
                        <?php endif; ?>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>

        <!-- Pending Callbacks -->
        <div class="col-lg-4">
            <div class="card border-0 shadow-sm">
                <div class="card-header bg-white border-bottom py-3 d-flex justify-content-between align-items-center">
                    <h6 class="mb-0 fw-semibold">
                        <i class="bi bi-clock-history me-2 text-warning"></i>
                        <?= __('calls.callbacks_due','Callbacks Due') ?>
                    </h6>
                    <?php if (!empty($callbacks)): ?>
                        <span class="badge bg-warning text-dark"><?= count($callbacks) ?></span>
                    <?php endif; ?>
                </div>
                <div class="card-body p-0" style="max-height:400px;overflow-y:auto">
                    <?php if (empty($callbacks)): ?>
                        <div class="text-center text-muted py-4 small">
                            <i class="bi bi-check-all fs-3 d-block mb-1 text-success"></i>
                            <?= __('calls.no_callbacks','No pending callbacks') ?>
                        </div>
                    <?php else: ?>
                        <?php foreach ($callbacks as $cb): ?>
                        <div class="d-flex align-items-start gap-2 p-3 border-bottom">
                            <div class="flex-grow-1">
                                <div class="fw-semibold small">
                                    <a href="/admin/orders/view/<?= (int)$cb['order_id'] ?>" class="text-decoration-none">
                                        #<?= (int)$cb['order_id'] ?>
                                    </a>
                                    — <?= htmlspecialchars($cb['full_name']) ?>
                                </div>
                                <div class="text-muted smaller">
                                    <i class="bi bi-telephone me-1"></i><?= htmlspecialchars($cb['phone']) ?>
                                </div>
                                <?php if (!empty($cb['note'])): ?>
                                    <div class="small text-info mt-1">
                                        <i class="bi bi-chat-left-text me-1"></i><?= htmlspecialchars($cb['note']) ?>
                                    </div>
                                <?php endif; ?>
                                <div class="smaller text-muted mt-1">
                                    <?= __('calls.by','By') ?>: <?= htmlspecialchars($cb['admin_name']) ?>
                                    · <?= date('d/m H:i', strtotime($cb['called_at'])) ?>
                                </div>
                            </div>
                            <a href="/admin/orders/view/<?= (int)$cb['order_id'] ?>"
                               class="btn btn-sm btn-outline-primary">
                                <i class="bi bi-telephone"></i>
                            </a>
                        </div>
                        <?php endforeach; ?>
                    <?php endif; ?>
                </div>
            </div>
        </div>

    </div>
</div>
</section>
</div>