@extends('layouts.app')
@section('title', 'تفاصيل المكالمة')
@section('page_title', 'تفاصيل المكالمة #' . $call->id)
@section('page_subtitle', 'المعرّف الخارجي: ' . ($call->external_id ?? '—'))

@section('page_actions')
    @if (auth()->user()->hasPermission('quality.create'))
        <a class="btn btn-outline-primary" href="{{ route('quality.create', ['call_id' => $call->id]) }}">
            <i class="bi bi-patch-check"></i> تقييم جودة
        </a>
    @endif
    @if (! $call->is_closed && auth()->user()->hasPermission('calls.edit'))
        <button class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#closeModal">
            <i class="bi bi-check2-circle"></i> إغلاق وتسجيل النتيجة
        </button>
    @endif
@endsection

@section('content')
<div class="row g-3">
    <div class="col-lg-8">
        <div class="card mb-3">
            <div class="card-header">بيانات المكالمة</div>
            <div class="card-body">
                <div class="row">
                    <div class="col-md-6">
                        <table class="table table-sm">
                            <tr><th style="width:140px;">الاتجاه</th><td>{{ $call->directionLabel() }}</td></tr>
                            <tr><th>الرقم</th><td dir="ltr">{{ $call->phone_number }}</td></tr>
                            <tr>
                                <th>العميل</th>
                                <td>
                                    @if ($call->customer)
                                        <a href="{{ route('customers.show', $call->customer_id) }}">{{ $call->customer->name }}</a>
                                    @else
                                        غير مسجل
                                    @endif
                                </td>
                            </tr>
                            <tr><th>الموظف</th><td>{{ $call->agent?->name ?? '—' }}</td></tr>
                            <tr><th>الحملة</th><td>{{ $call->campaign?->name ?? '—' }}</td></tr>
                            <tr><th>الطابور</th><td>{{ $call->queue?->name ?? '—' }}</td></tr>
                        </table>
                    </div>
                    <div class="col-md-6">
                        <table class="table table-sm">
                            <tr><th style="width:140px;">الحالة</th><td><span class="badge bg-{{ $call->statusColor() }}">{{ $call->statusLabel() }}</span></td></tr>
                            <tr><th>البداية</th><td>{{ $call->started_at?->format('Y-m-d H:i:s') ?? '—' }}</td></tr>
                            <tr><th>وقت الرد</th><td>{{ $call->answered_at?->format('Y-m-d H:i:s') ?? '—' }}</td></tr>
                            <tr><th>النهاية</th><td>{{ $call->ended_at?->format('Y-m-d H:i:s') ?? '—' }}</td></tr>
                            <tr><th>الانتظار / الكلام</th><td dir="ltr">{{ gmdate('H:i:s', (int) $call->wait_time) }} / {{ gmdate('H:i:s', (int) $call->talk_time) }}</td></tr>
                            <tr><th>المدة الكلية</th><td dir="ltr">{{ gmdate('H:i:s', (int) $call->duration) }}</td></tr>
                        </table>
                    </div>
                </div>

                <hr>

                <div class="row">
                    <div class="col-md-6">
                        <h6>نتيجة الاتصال</h6>
                        @if ($call->disposition)
                            <span class="badge" style="background: {{ $call->disposition->color }}">{{ $call->disposition->name }}</span>
                            @if ($call->subDisposition)
                                <span class="badge bg-light text-dark border">{{ $call->subDisposition->name }}</span>
                            @endif
                        @else
                            <span class="text-danger">لم يتم تسجيل نتيجة بعد</span>
                        @endif
                    </div>
                    <div class="col-md-6">
                        <h6>موعد المتابعة</h6>
                        {{ $call->follow_up_at?->format('Y-m-d H:i') ?? '—' }}
                    </div>
                    <div class="col-12 mt-3">
                        <h6>ملخص المكالمة</h6>
                        <p class="mb-2">{!! nl2br(e($call->summary ?? '—')) !!}</p>
                        <h6>ملاحظات داخلية</h6>
                        <p class="mb-0 text-muted">{!! nl2br(e($call->notes ?? '—')) !!}</p>
                    </div>
                </div>

                @if ($call->recording_url && auth()->user()->hasPermission('recordings.listen'))
                    <hr>
                    <h6>التسجيل</h6>
                    <audio controls class="w-100" src="{{ $call->recording_url }}"></audio>
                @endif
            </div>
        </div>
    </div>

    <div class="col-lg-4">
        @include('calls.partials.timeline')
        @include('calls.partials.related')
    </div>
</div>

@include('calls.partials.close-modal')
@endsection