@extends('layouts.app')
@section('title', 'نتائج الاتصال')
@section('page_title', 'نتائج الاتصال (Dispositions)')
@section('page_subtitle', 'التصنيف: ناجحة / تحتاج متابعة / فاشلة — أساس دقة التقارير')

@section('page_actions')
    @if (auth()->user()->hasPermission('dispositions.manage'))
        <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-body">
        <select class="form-select form-select-sm w-auto" id="filterCategory">
            <option value="">كل التصنيفات</option>
            @foreach (\App\Models\Disposition::CATEGORIES as $key => $label)
                <option value="{{ $key }}">{{ $label }}</option>
            @endforeach
        </select>
    </div>
</div>

<div class="card">
    <div class="card-body table-responsive">
        <table class="table table-hover table-striped w-100" id="dispTable">
            <thead>
                <tr>
                    <th>#</th>
                    <th>النتيجة</th>
                    <th>التصنيف</th>
                    <th>الحملة</th>
                    <th>تابعة لـ</th>
                    <th>القواعد</th>
                    <th>الاستخدام</th>
                    <th>إجراءات</th>
                </tr>
            </thead>
        </table>
    </div>
</div>

@include('dispositions.partials.modal')
@endsection

@push('scripts')
<script>
jQuery(function ($) {
    const table = MR.table('#dispTable', '{{ route('dispositions.data') }}', [
        { data: 'id', name: 'id' },
        { data: 'name_label', name: 'name' },
        { data: 'category_label', name: 'category' },
        { data: 'campaign_label', orderable: false },
        { data: 'parent_label', orderable: false },
        { data: 'rules', orderable: false, searchable: false },
        { data: 'calls_count', name: 'calls_count', searchable: false },
        { data: 'actions', orderable: false, searchable: false }
    ], {
        order: [[0, 'asc']],
        filters: function () { return { category: $('#filterCategory').val() }; }
    });

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

    const $modal = $('#dispModal'), $form = $('#dispForm');

    $('#btnAdd').on('click', function () {
        $form[0].reset();
        $form.data('url', '{{ route('dispositions.store') }}').data('method', 'POST');
        $('#dispModalTitle').text('إضافة نتيجة');
        $modal.modal('show');
    });

    $('#dispTable').on('click', '[data-action=edit]', function () {
        const id = $(this).data('id');
        $.getJSON('{{ url('dispositions') }}/' + id, function (res) {
            $form[0].reset();
            MR.fill($form, res.disposition);
            $form.data('url', '{{ url('dispositions') }}/' + id).data('method', 'PUT');
            $('#dispModalTitle').text('تعديل نتيجة');
            $modal.modal('show');
        });
    });

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

    $form.on('submit', function (e) {
        e.preventDefault();
        MR.submit(this, { done: function () { $modal.modal('hide'); table.ajax.reload(null, false); } });
    });
});
</script>
@endpush