@extends('layouts.app')
@section('title', 'تقييم جودة')
@section('page_title', 'تقييم جودة مكالمة')
@section('page_subtitle', $call ? 'المكالمة #' . $call->id . ' — ' . $call->phone_number : 'تقييم عام لموظف')

@section('content')
<form method="POST" action="{{ route('quality.store') }}">
    @csrf
    <input type="hidden" name="call_id" value="{{ $call?->id }}">

    @if ($errors->any())
        <div class="alert alert-danger">
            @foreach ($errors->all() as $error)<div>{{ $error }}</div>@endforeach
        </div>
    @endif

    <div class="card mb-3">
        <div class="card-body">
            <div class="row g-3">
                <div class="col-md-6">
                    <label class="form-label">الموظف <span class="text-danger">*</span></label>
                    <select name="agent_id" class="form-select" required>
                        <option value="">— اختر —</option>
                        @foreach ($agents as $agent)
                            <option value="{{ $agent->id }}" @selected($call && $call->agent_id === $agent->id)>{{ $agent->name }}</option>
                        @endforeach
                    </select>
                </div>
                <div class="col-md-6">
                    <label class="form-label">نموذج التقييم <span class="text-danger">*</span></label>
                    <select name="evaluation_form_id" id="formSelect" class="form-select" required>
                        @foreach ($forms as $form)
                            <option value="{{ $form->id }}">{{ $form->name }}</option>
                        @endforeach
                    </select>
                </div>
            </div>
        </div>
    </div>

    @if ($call && $call->recording_url)
        <div class="card mb-3">
            <div class="card-header">تسجيل المكالمة</div>
            <div class="card-body"><audio controls class="w-100" src="{{ $call->recording_url }}"></audio></div>
        </div>
    @endif

    @foreach ($forms as $form)
        <div class="card mb-3 form-block" data-form="{{ $form->id }}">
            <div class="card-header">{{ $form->name }} — درجة النجاح {{ $form->pass_score }}%</div>
            <div class="table-responsive">
                <table class="table table-sm mb-0">
                    <thead>
                        <tr><th>القسم</th><th>المعيار</th><th style="width:150px;">الدرجة</th><th>ملاحظة</th></tr>
                    </thead>
                    <tbody>
                    @foreach ($form->criteria as $criteria)
                        <tr>
                            <td>{{ $criteria->section }}</td>
                            <td>
                                {{ $criteria->title }}
                                @if ($criteria->is_auto_fail)
                                    <span class="badge bg-danger">مخالفة مُلغية</span>
                                @endif
                            </td>
                            <td>
                                <input type="number" step="0.5" min="0" max="{{ $criteria->max_score }}"
                                       name="answers[{{ $criteria->id }}]" class="form-control form-control-sm"
                                       value="{{ $criteria->max_score }}">
                                <small class="text-muted">من {{ $criteria->max_score }}</small>
                            </td>
                            <td><input type="text" name="comments[{{ $criteria->id }}]" class="form-control form-control-sm"></td>
                        </tr>
                    @endforeach
                    </tbody>
                </table>
            </div>
        </div>
    @endforeach

    <div class="card">
        <div class="card-body">
            <div class="row g-3">
                <div class="col-md-6">
                    <label class="form-label">ملاحظات المقيّم</label>
                    <textarea name="notes" class="form-control" rows="3"></textarea>
                </div>
                <div class="col-md-6">
                    <label class="form-label">خطة الإجراء / التدريب</label>
                    <textarea name="action_plan" class="form-control" rows="3"></textarea>
                </div>
            </div>
        </div>
        <div class="card-footer d-flex justify-content-between">
            <a href="{{ route('quality.index') }}" class="btn btn-light">إلغاء</a>
            <button class="btn btn-primary"><i class="bi bi-save"></i> حفظ التقييم</button>
        </div>
    </div>
</form>
@endsection

@push('scripts')
<script>
jQuery(function ($) {
    function toggleForms() {
        const id = $('#formSelect').val();
        $('.form-block').hide().find('input').prop('disabled', true);
        $('.form-block[data-form="' + id + '"]').show().find('input').prop('disabled', false);
    }
    $('#formSelect').on('change', toggleForms);
    toggleForms();
});
</script>
@endpush