@extends('layouts.app')
@section('title', 'الطوابير والأرقام')
@section('page_title', 'الطوابير وأرقام الاستقبال')
@section('page_subtitle', 'توزيع المكالمات الواردة حسب الطابور والفريق ومستوى الخدمة')

@section('page_actions')
    @if (auth()->user()->hasPermission('queues.manage'))
        <button class="btn btn-outline-primary" id="btnAddDid"><i class="bi bi-telephone-plus"></i> رقم استقبال</button>
        <button class="btn btn-primary" id="btnAdd"><i class="bi bi-plus-lg"></i> طابور جديد</button>
    @endif
@endsection

@section('content')
<div class="card mb-3">
    <div class="card-header">الطوابير</div>
    <div class="card-body table-responsive">
        <table class="table table-hover table-striped w-100" id="queuesTable">
            <thead>
                <tr>
                    <th>#</th>
                    <th>اسم الطابور</th>
                    <th>الرقم</th>
                    <th>الفريق</th>
                    <th>SLA (ثانية)</th>
                    <th>أقصى انتظار</th>
                    <th>المكالمات</th>
                    <th>الحالة</th>
                    <th>إجراءات</th>
                </tr>
            </thead>
        </table>
    </div>
</div>

<div class="card">
    <div class="card-header">أرقام الاستقبال (DID)</div>
    <div class="card-body table-responsive">
        <table class="table table-hover table-striped w-100" id="didsTable">
            <thead>
                <tr>
                    <th>#</th>
                    <th>الرقم</th>
                    <th>الوصف</th>
                    <th>الطابور</th>
                    <th>الحملة</th>
                    <th>الحالة</th>
                    <th>إجراءات</th>
                </tr>
            </thead>
        </table>
    </div>
</div>

<div class="modal fade" id="queueModal" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <form id="queueForm" data-url="" data-method="POST">
                <div class="modal-header">
                    <h5 class="modal-title" id="queueModalTitle">إضافة طابور</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body">
                    <div class="mb-3">
                        <label class="form-label">اسم الطابور <span class="text-danger">*</span></label>
                        <input type="text" name="name" class="form-control" required>
                    </div>
                    <div class="mb-3">
                        <label class="form-label">رقم الطابور</label>
                        <input type="text" name="queue_number" class="form-control" dir="ltr">
                    </div>
                    <div class="mb-3">
                        <label class="form-label">الفريق</label>
                        <select name="team_id" class="form-select">
                            <option value="">— بدون —</option>
                            @foreach ($teams as $team)
                                <option value="{{ $team->id }}">{{ $team->name }}</option>
                            @endforeach
                        </select>
                    </div>
                    <div class="mb-3">
                        <label class="form-label">قاعدة التوزيع</label>
                        <select name="strategy" class="form-select">
                            <option value="ringall">رنين للكل</option>
                            <option value="roundrobin">بالتناوب</option>
                            <option value="leastrecent">الأقل استقبالًا</option>
                            <option value="fewestcalls">الأقل مكالمات</option>
                            <option value="sticky">آخر موظف تعامل مع العميل</option>
                        </select>
                    </div>
                    <div class="row g-2">
                        <div class="col-6">
                            <label class="form-label">SLA (ثانية)</label>
                            <input type="number" name="sla_seconds" class="form-control" value="20" min="5">
                        </div>
                        <div class="col-6">
                            <label class="form-label">أقصى انتظار (ثانية)</label>
                            <input type="number" name="max_wait_seconds" class="form-control" value="120" min="10">
                        </div>
                    </div>
                    <input type="hidden" name="is_active" value="0">
                    <div class="form-check form-switch mt-3">
                        <input class="form-check-input" type="checkbox" name="is_active" value="1" id="queue_active" checked>
                        <label class="form-check-label" for="queue_active">طابور نشط</label>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-light" data-bs-dismiss="modal">إلغاء</button>
                    <button type="submit" class="btn btn-primary"><i class="bi bi-save"></i> حفظ</button>
                </div>
            </form>
        </div>
    </div>
</div>

<div class="modal fade" id="didModal" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <form id="didForm" data-url="{{ route('dids.store') }}" 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">
                    <div class="mb-3">
                        <label class="form-label">الرقم <span class="text-danger">*</span></label>
                        <input type="text" name="number" class="form-control" dir="ltr" required>
                    </div>
                    <div class="mb-3">
                        <label class="form-label">الوصف</label>
                        <input type="text" name="label" class="form-control">
                    </div>
                    <div class="mb-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>
                    <input type="hidden" name="is_active" value="0">
                    <div class="form-check form-switch">
                        <input class="form-check-input" type="checkbox" name="is_active" value="1" id="did_active" checked>
                        <label class="form-check-label" for="did_active">نشط</label>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-light" data-bs-dismiss="modal">إلغاء</button>
                    <button type="submit" class="btn btn-primary"><i class="bi bi-save"></i> حفظ</button>
                </div>
            </form>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script>
jQuery(function ($) {
    const queues = MR.table('#queuesTable', '{{ route('queues.data') }}', [
        { data: 'id', name: 'id' },
        { data: 'name', name: 'name' },
        { data: 'queue_number', name: 'queue_number', defaultContent: '—' },
        { data: 'team_label', orderable: false },
        { data: 'sla_seconds', orderable: false, searchable: false },
        { data: 'max_wait_seconds', orderable: false, searchable: false },
        { data: 'calls_count', name: 'calls_count', searchable: false },
        { data: 'status_badge', orderable: false, searchable: false },
        { data: 'actions', orderable: false, searchable: false }
    ], { order: [[0, 'asc']] });

    const dids = MR.table('#didsTable', '{{ route('dids.data') }}', [
        { data: 'id', name: 'id' },
        { data: 'number', name: 'number' },
        { data: 'label', defaultContent: '—' },
        { data: 'queue_label', orderable: false },
        { data: 'campaign_label', orderable: false },
        { data: 'status_badge', orderable: false, searchable: false },
        { data: 'actions', orderable: false, searchable: false }
    ], { order: [[0, 'asc']] });

    const $qModal = $('#queueModal'), $qForm = $('#queueForm');

    $('#btnAdd').on('click', function () {
        $qForm[0].reset();
        $qForm.data('url', '{{ route('queues.store') }}').data('method', 'POST');
        $('#queueModalTitle').text('إضافة طابور');
        $qModal.modal('show');
    });

    $('#queuesTable').on('click', '[data-action=edit]', function () {
        const id = $(this).data('id');
        $.getJSON('{{ url('queues') }}/' + id, function (res) {
            $qForm[0].reset();
            MR.fill($qForm, res.queue);
            $qForm.data('url', '{{ url('queues') }}/' + id).data('method', 'PUT');
            $('#queueModalTitle').text('تعديل طابور');
            $qModal.modal('show');
        });
    });

    $('#queuesTable').on('click', '[data-action=delete]', function () {
        MR.remove($(this).data('url'), function () { queues.ajax.reload(null, false); });
    });

    $qForm.on('submit', function (e) {
        e.preventDefault();
        MR.submit(this, { done: function () { $qModal.modal('hide'); queues.ajax.reload(null, false); } });
    });

    const $dModal = $('#didModal'), $dForm = $('#didForm');
    $('#btnAddDid').on('click', function () { $dForm[0].reset(); $dModal.modal('show'); });
    $('#didsTable').on('click', '[data-action=delete]', function () {
        MR.remove($(this).data('url'), function () { dids.ajax.reload(null, false); });
    });
    $dForm.on('submit', function (e) {
        e.preventDefault();
        MR.submit(this, { done: function () { $dModal.modal('hide'); dids.ajax.reload(null, false); } });
    });
});
</script>
@endpush