@extends('layouts.app')
@section('title', 'الجودة')
@section('page_title', 'الجودة وتقييم المكالمات')
@section('page_subtitle', 'تقييم مبني على الدليل: عينة مكالمات + نموذج معايير + خطة إجراء')

@section('page_actions')
    @if (auth()->user()->hasPermission('quality.create'))
        <a class="btn btn-primary" href="{{ route('quality.create') }}"><i class="bi bi-plus-lg"></i> تقييم جديد</a>
    @endif
@endsection

@section('content')
<div class="card mb-3">
    <div class="card-body">
        <div class="row g-2">
            <div class="col-md-3">
                <select class="form-select form-select-sm" id="filterAgent">
                    <option value="">كل الموظفين</option>
                    @foreach ($agents as $agent)
                        <option value="{{ $agent->id }}">{{ $agent->name }}</option>
                    @endforeach
                </select>
            </div>
            <div class="col-md-3">
                <select class="form-select form-select-sm" id="filterStatus">
                    <option value="">كل الحالات</option>
                    @foreach (\App\Models\Evaluation::STATUSES as $key => $label)
                        <option value="{{ $key }}">{{ $label }}</option>
                    @endforeach
                </select>
            </div>
        </div>
    </div>
</div>

<div class="card">
    <div class="card-body table-responsive">
        <table class="table table-hover w-100" id="qaTable">
            <thead>
                <tr>
                    <th>#</th>
                    <th>الموظف</th>
                    <th>النموذج</th>
                    <th>المقيّم</th>
                    <th>الدرجة</th>
                    <th>الحالة</th>
                    <th>التاريخ</th>
                    <th>إجراءات</th>
                </tr>
            </thead>
        </table>
    </div>
</div>
@endsection

@push('scripts')
<script>
jQuery(function ($) {
    const table = MR.table('#qaTable', '{{ route('quality.data') }}', [
        { data: 'id', name: 'id' },
        { data: 'agent_label', orderable: false },
        { data: 'form_label', orderable: false },
        { data: 'evaluator_label', orderable: false },
        { data: 'score_label', name: 'percentage' },
        { data: 'status_badge', orderable: false, searchable: false },
        { data: 'created', name: 'created_at' },
        { data: 'actions', orderable: false, searchable: false }
    ], {
        filters: function () {
            return { agent_id: $('#filterAgent').val(), status: $('#filterStatus').val() };
        }
    });

    $('#filterAgent, #filterStatus').on('change', function () { table.ajax.reload(); });

    $('#qaTable').on('click', '[data-action=approve]', function () {
        MR.post($(this).data('url'), {}, function () { table.ajax.reload(null, false); });
    });
});
</script>
@endpush