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

@section('content')
<form id="callForm" data-url="{{ route('calls.store') }}" data-method="POST">
<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 g-3">
                    <div class="col-md-3">
                        <label class="form-label">الاتجاه <span class="text-danger">*</span></label>
                        <select name="direction" class="form-select" required>
                            @foreach (\App\Models\Call::DIRECTIONS as $key => $label)
                                <option value="{{ $key }}" @selected($key === 'outbound')>{{ $label }}</option>
                            @endforeach
                        </select>
                    </div>
                    <div class="col-md-4">
                        <label class="form-label">رقم الهاتف <span class="text-danger">*</span></label>
                        <div class="input-group">
                            <input type="text" name="phone_number" id="phoneInput" class="form-control" dir="ltr"
                                   value="{{ $customer?->phone }}" required>
                            <button class="btn btn-outline-secondary" type="button" id="btnLookup">
                                <i class="bi bi-search"></i>
                            </button>
                        </div>
                        <div class="form-text" id="lookupResult"></div>
                    </div>
                    <div class="col-md-5">
                        <label class="form-label">العميل</label>
                        <div class="input-group">
                            <input type="hidden" name="customer_id" id="customerId" value="{{ $customer?->id }}">
                            <input type="text" class="form-control" id="customerName" value="{{ $customer?->name }}" readonly placeholder="غير مرتبط بعميل">
                            <a class="btn btn-outline-secondary" id="btnOpenCustomer" target="_blank"
                               href="{{ $customer ? route('customers.show', $customer->id) : '#' }}"><i class="bi bi-person-vcard"></i></a>
                        </div>
                    </div>

                    <div class="col-md-3">
                        <label class="form-label">الحملة</label>
                        <select name="campaign_id" id="campaignSelect" class="form-select">
                            <option value="">— بدون —</option>
                            @foreach ($campaigns as $campaign)
                                <option value="{{ $campaign->id }}">{{ $campaign->name }}</option>
                            @endforeach
                        </select>
                    </div>
                    <div class="col-md-3">
                        <label class="form-label">الطابور</label>
                        <select name="queue_id" class="form-select">
                            <option value="">— بدون —</option>
                            @foreach ($queues as $queue)
                                <option value="{{ $queue->id }}">{{ $queue->name }}</option>
                            @endforeach
                        </select>
                    </div>
                    <div class="col-md-3">
                        <label class="form-label">حالة المكالمة <span class="text-danger">*</span></label>
                        <select name="status" class="form-select" required>
                            @foreach (\App\Models\Call::STATUSES as $key => $label)
                                <option value="{{ $key }}" @selected($key === 'answered')>{{ $label }}</option>
                            @endforeach
                        </select>
                    </div>
                    <div class="col-md-3">
                        <label class="form-label">من أنهى المكالمة</label>
                        <select name="hangup_by" class="form-select">
                            <option value="">—</option>
                            <option value="agent">الموظف</option>
                            <option value="customer">العميل</option>
                            <option value="system">النظام</option>
                        </select>
                    </div>

                    <div class="col-md-4">
                        <label class="form-label">بداية المكالمة</label>
                        <input type="datetime-local" name="started_at" class="form-control" value="{{ now()->format('Y-m-d\TH:i') }}">
                    </div>
                    <div class="col-md-4">
                        <label class="form-label">وقت الرد</label>
                        <input type="datetime-local" name="answered_at" class="form-control" value="{{ now()->format('Y-m-d\TH:i') }}">
                    </div>
                    <div class="col-md-4">
                        <label class="form-label">نهاية المكالمة</label>
                        <input type="datetime-local" name="ended_at" class="form-control">
                    </div>
                </div>
            </div>
        </div>

        <div class="card">
            <div class="card-header">نتيجة الاتصال والإجراء التالي</div>
            <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="disposition_id" id="dispositionSelect" class="form-select" required>
                            <option value="">— اختر النتيجة —</option>
                            @foreach ($dispositions as $disposition)
                                <option value="{{ $disposition->id }}"
                                        data-note="{{ (int) $disposition->requires_note }}"
                                        data-followup="{{ (int) $disposition->requires_followup_date }}">{{ $disposition->name }}</option>
                            @endforeach
                        </select>
                    </div>
                    <div class="col-md-6">
                        <label class="form-label">تفصيل النتيجة</label>
                        <select name="sub_disposition_id" id="subDisposition" class="form-select">
                            <option value="">—</option>
                        </select>
                    </div>
                    <div class="col-12">
                        <label class="form-label">ملخص المكالمة <span class="text-danger d-none" id="summaryRequired">*</span></label>
                        <textarea name="summary" id="summaryInput" class="form-control" rows="3"
                                  placeholder="ماذا طلب العميل وماذا تم شرحه؟"></textarea>
                    </div>
                    <div class="col-md-6">
                        <label class="form-label">موعد المتابعة <span class="text-danger d-none" id="followupRequired">*</span></label>
                        <input type="datetime-local" name="follow_up_at" id="followUpInput" class="form-control">
                    </div>
                    <div class="col-md-6">
                        <label class="form-label">رابط التسجيل</label>
                        <input type="text" name="recording_url" class="form-control" dir="ltr">
                    </div>
                    <div class="col-12">
                        <label class="form-label">ملاحظات داخلية</label>
                        <textarea name="notes" class="form-control" rows="2"></textarea>
                    </div>
                    <div class="col-12">
                        <input type="hidden" name="is_closed" value="0">
                        <div class="form-check form-switch">
                            <input class="form-check-input" type="checkbox" name="is_closed" value="1" id="is_closed" checked>
                            <label class="form-check-label" for="is_closed">إغلاق بيانات المكالمة (شرط العودة إلى Ready)</label>
                        </div>
                    </div>
                </div>
            </div>
            <div class="card-footer d-flex justify-content-between">
                <a href="{{ route('calls.index') }}" class="btn btn-light">إلغاء</a>
                <button type="submit" class="btn btn-primary"><i class="bi bi-save"></i> حفظ المكالمة</button>
            </div>
        </div>
    </div>

    <div class="col-lg-4">
        <div class="card mb-3">
            <div class="card-header d-flex justify-content-between align-items-center">
                <span>مؤقت المكالمة</span>
                <span class="badge bg-danger" id="callTimer" dir="ltr">00:00:00</span>
            </div>
            <div class="card-body d-flex gap-2">
                <button type="button" class="btn btn-sm btn-outline-success flex-fill" id="timerStart">بدء</button>
                <button type="button" class="btn btn-sm btn-outline-warning flex-fill" id="timerStop">إيقاف</button>
                <button type="button" class="btn btn-sm btn-outline-secondary flex-fill" id="timerReset">تصفير</button>
            </div>
            <div class="card-footer small text-muted">
                مدة الـ Wrap-up المسموحة: {{ $wrapUp }} ثانية
            </div>
        </div>

        <div class="card mb-3">
            <div class="card-header">سجل العميل السابق</div>
            <div class="card-body p-0">
                <ul class="list-group list-group-flush" id="customerHistory">
                    <li class="list-group-item text-muted small">ابحث عن العميل لعرض سجله</li>
                </ul>
            </div>
        </div>

        <div class="card">
            <div class="card-header">البحث في قاعدة المعرفة</div>
            <div class="card-body">
                <input type="text" class="form-control form-control-sm mb-2" id="kbSearch" placeholder="اكتب للبحث...">
                <div id="kbResults" class="small"></div>
            </div>
        </div>
    </div>
</div>
</form>
@endsection

@push('scripts')
<script>
jQuery(function ($) {
    /* ---- مؤقت المكالمة ---- */
    let seconds = 0, timer = null;
    function render() { $('#callTimer').text(MR.seconds(seconds)); }
    $('#timerStart').on('click', function () {
        if (timer) { return; }
        timer = setInterval(function () { seconds++; render(); }, 1000);
    });
    $('#timerStop').on('click', function () { clearInterval(timer); timer = null; });
    $('#timerReset').on('click', function () { clearInterval(timer); timer = null; seconds = 0; render(); });

    /* ---- البحث عن العميل بالرقم (Screen Pop) ---- */
    function lookup() {
        const phone = $('#phoneInput').val();
        if (!phone) { return; }
        $.getJSON('{{ route('customers.by_phone') }}', { phone: phone }, function (res) {
            if (res.blacklisted) {
                $('#lookupResult').html('<span class="text-danger fw-bold">تحذير: الرقم في القائمة السوداء</span>');
            } else {
                $('#lookupResult').html('');
            }
            if (res.found) {
                $('#customerId').val(res.customer.id);
                $('#customerName').val(res.customer.name);
                $('#btnOpenCustomer').attr('href', '{{ url('customers') }}/' + res.customer.id);
                loadHistory(res.customer.id);
            } else {
                $('#customerId').val('');
                $('#customerName').val('');
                $('#lookupResult').append(' <span class="text-muted">لا يوجد ملف عميل لهذا الرقم</span>');
                $('#customerHistory').html('<li class="list-group-item text-muted small">عميل جديد — لا يوجد سجل سابق</li>');
            }
        });
    }

    $('#btnLookup').on('click', lookup);
    $('#phoneInput').on('blur', lookup);

    function loadHistory(customerId) {
        $.getJSON('{{ route('calls.data') }}', { length: 5, start: 0, draw: 1 }, function (res) {
            const rows = res.data.filter(function (row) { return row.customer_id == customerId; });
            const $list = $('#customerHistory').empty();
            if (!rows.length) {
                $list.append('<li class="list-group-item text-muted small">لا توجد مكالمات سابقة</li>');
                return;
            }
            rows.forEach(function (row) {
                $list.append('<li class="list-group-item small">' + row.started + ' — ' + $(row.status_badge).text() + '</li>');
            });
        });
    }

    /* ---- قواعد النتيجة الإلزامية ---- */
    $('#dispositionSelect').on('change', function () {
        const opt = $(this).find('option:selected');
        const needNote = opt.data('note') === 1;
        const needFollow = opt.data('followup') === 1;

        $('#summaryRequired').toggleClass('d-none', !needNote);
        $('#summaryInput').prop('required', needNote);
        $('#followupRequired').toggleClass('d-none', !needFollow);
        $('#followUpInput').prop('required', needFollow);

        const id = $(this).val();
        $('#subDisposition').html('<option value="">—</option>');
        if (id) {
            $.getJSON('{{ url('dispositions') }}/' + id + '/children', function (res) {
                res.children.forEach(function (child) {
                    $('#subDisposition').append('<option value="' + child.id + '">' + child.name + '</option>');
                });
            });
        }
    });

    /* ---- قاعدة المعرفة ---- */
    let kbTimer = null;
    $('#kbSearch').on('keyup', function () {
        clearTimeout(kbTimer);
        const term = $(this).val();
        kbTimer = setTimeout(function () {
            $.getJSON('{{ route('knowledge.search') }}', { q: term }, function (res) {
                const $box = $('#kbResults').empty();
                if (!res.articles.length && !res.canned.length) {
                    $box.html('<span class="text-muted">لا توجد نتائج</span>');
                    return;
                }
                res.articles.forEach(function (a) {
                    $box.append('<div class="border-bottom py-1"><i class="bi bi-book"></i> ' + a.title + '</div>');
                });
                res.canned.forEach(function (c) {
                    $box.append('<div class="border-bottom py-1"><i class="bi bi-chat-quote"></i> ' + c.title + '</div>');
                });
            });
        }, 400);
    });

    $('#callForm').on('submit', function (e) {
        e.preventDefault();
        MR.submit(this, { done: function (res) { window.location = res.url; } });
    });
});
</script>
@endpush