@extends('layouts.app')
@section('title', 'المتابعة اللحظية')
@section('page_title', 'المتابعة اللحظية')
@section('page_subtitle', 'حالة الموظفين والطوابير والمكالمات لحظة بلحظة — وكل تدخل مسجّل في سجل المراجعة')

@section('page_actions')
    <span class="badge bg-dark" id="liveClock">--:--:--</span>
    <button class="btn btn-outline-secondary btn-sm" id="btnRefresh"><i class="bi bi-arrow-clockwise"></i> تحديث</button>
@endsection

@section('content')
<div class="row g-3 mb-3" id="summaryCards">
    @php
        $tiles = [
            ['available', 'متاح', 'success'],
            ['on_call', 'في مكالمة', 'primary'],
            ['acw', 'تسجيل نتيجة', 'warning'],
            ['break', 'بريك', 'purple'],
            ['offline', 'خارج النظام', 'secondary'],
            ['total_calls', 'مكالمات اليوم', 'dark'],
        ];
    @endphp
    @foreach ($tiles as $tile)
        <div class="col-6 col-lg-2">
            <div class="stat-card text-center">
                <div class="stat-value" data-summary="{{ $tile[0] }}">0</div>
                <div class="stat-label">{{ $tile[1] }}</div>
            </div>
        </div>
    @endforeach
</div>

<div class="row g-3">
    <div class="col-lg-8">
        <div class="card">
            <div class="card-header d-flex justify-content-between align-items-center">
                <span>حالة الموظفين</span>
                <select class="form-select form-select-sm w-auto" id="filterTeam">
                    <option value="">كل الفرق</option>
                    @foreach ($teams as $team)
                        <option value="{{ $team->id }}">{{ $team->name }}</option>
                    @endforeach
                </select>
            </div>
            <div class="table-responsive">
                <table class="table table-sm table-hover mb-0">
                    <thead>
                        <tr>
                            <th>الموظف</th>
                            <th>الداخلي</th>
                            <th>الفريق</th>
                            <th>الحالة</th>
                            <th>المدة</th>
                            <th>المكالمة الحالية</th>
                            <th>مكالمات اليوم</th>
                            <th>تدخل</th>
                        </tr>
                    </thead>
                    <tbody id="agentsBody">
                        <tr><td colspan="8" class="text-muted">جاري التحميل...</td></tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>

    <div class="col-lg-4">
        <div class="card mb-3">
            <div class="card-header d-flex justify-content-between">
                <span>المكالمات المنتظرة</span>
                <span class="badge bg-danger" id="longestWait">0s</span>
            </div>
            <ul class="list-group list-group-flush" id="waitingList">
                <li class="list-group-item text-muted">لا توجد مكالمات منتظرة</li>
            </ul>
        </div>

        <div class="card">
            <div class="card-header">مؤشرات اليوم</div>
            <div class="card-body">
                <div class="d-flex justify-content-between py-1">
                    <span>تم الرد</span><span class="fw-bold" data-summary="answered">0</span>
                </div>
                <div class="d-flex justify-content-between py-1">
                    <span>مفقودة</span><span class="fw-bold text-danger" data-summary="missed">0</span>
                </div>
                <div class="d-flex justify-content-between py-1">
                    <span>متوسط زمن الكلام</span><span class="fw-bold" id="avgTalk">00:00:00</span>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="modal fade" id="interveneModal" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <form id="interveneForm" data-url="" data-method="POST">
                <div class="modal-header">
                    <h5 class="modal-title">التدخل في المكالمة</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body">
                    <label class="form-label">الإجراء <span class="text-danger">*</span></label>
                    <select name="action" class="form-select" required>
                        <option value="listen">استماع صامت</option>
                        <option value="whisper">توجيه للموظف (Whisper)</option>
                        <option value="barge">الانضمام للمكالمة</option>
                        <option value="transfer">تحويل</option>
                        <option value="escalate">تصعيد</option>
                        <option value="hangup">إنهاء المكالمة</option>
                    </select>
                    <label class="form-label mt-3">السبب</label>
                    <input type="text" name="reason" class="form-control" placeholder="سبب التدخل (يُحفظ في سجل المراجعة)">
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-light" data-bs-dismiss="modal">إلغاء</button>
                    <button type="submit" class="btn btn-primary">تنفيذ</button>
                </div>
            </form>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script>
jQuery(function ($) {
    const canIntervene = {{ auth()->user()->hasPermission('monitoring.intervene') ? 'true' : 'false' }};

    function statusBadge(status, label) {
        return '<span class="status-dot status-' + status + '"></span> ' + label;
    }

    function load() {
        $.getJSON('{{ route('monitoring.live') }}', { team_id: $('#filterTeam').val() }, function (res) {
            $('#liveClock').text(res.time);
            $('#avgTalk').text(MR.seconds(res.summary.avg_talk));
            $('#longestWait').text(res.summary.longest_wait + 's');

            $.each(res.summary, function (key, value) {
                $('[data-summary="' + key + '"]').text(value);
            });

            const $body = $('#agentsBody').empty();
            if (!res.agents.length) {
                $body.append('<tr><td colspan="8" class="text-muted">لا يوجد موظفون</td></tr>');
            }

            res.agents.forEach(function (agent) {
                const call = agent.call
                    ? '<span dir="ltr">' + agent.call.phone + '</span> <span class="badge bg-primary">' + MR.seconds(agent.call.seconds) + '</span>'
                    : '<span class="text-muted">—</span>';

                const btn = (canIntervene && agent.call)
                    ? '<button class="btn btn-sm btn-outline-danger" data-intervene="' + agent.call.id + '"><i class="bi bi-headset"></i></button>'
                    : '';

                $body.append(
                    '<tr>' +
                    '<td>' + agent.name + '</td>' +
                    '<td dir="ltr">' + (agent.extension || '—') + '</td>' +
                    '<td>' + (agent.team || '—') + '</td>' +
                    '<td>' + statusBadge(agent.status, agent.status_label) + '</td>' +
                    '<td dir="ltr">' + MR.seconds(agent.seconds) + '</td>' +
                    '<td>' + call + '</td>' +
                    '<td>' + agent.calls_today + '</td>' +
                    '<td>' + btn + '</td>' +
                    '</tr>'
                );
            });

            const $waiting = $('#waitingList').empty();
            if (!res.waiting.length) {
                $waiting.append('<li class="list-group-item text-muted">لا توجد مكالمات منتظرة</li>');
            }
            res.waiting.forEach(function (item) {
                const cls = item.waiting > 60 ? 'text-danger fw-bold' : '';
                $waiting.append(
                    '<li class="list-group-item d-flex justify-content-between">' +
                    '<span dir="ltr">' + item.phone + '</span>' +
                    '<span class="' + cls + '">' + (item.queue || '—') + ' · ' + MR.seconds(item.waiting) + '</span></li>'
                );
            });
        });
    }

    load();
    setInterval(load, 10000);

    $('#btnRefresh').on('click', load);
    $('#filterTeam').on('change', load);

    $(document).on('click', '[data-intervene]', function () {
        $('#interveneForm').data('url', '{{ url('monitoring/calls') }}/' + $(this).data('intervene') + '/intervene');
        $('#interveneModal').modal('show');
    });

    $('#interveneForm').on('submit', function (e) {
        e.preventDefault();
        MR.submit(this, { done: function () { $('#interveneModal').modal('hide'); load(); } });
    });
});
</script>
@endpush