@extends('layouts.app')
@section('title', 'القائمة السوداء')
@section('page_title', 'القائمة السوداء (DNC)')
@section('page_subtitle', 'أرقام ممنوع الاتصال بها ولا تُسند لأي موظف')

@section('page_actions')
    @if (auth()->user()->hasPermission('blacklist.manage'))
        <button class="btn btn-primary" id="btnAdd"><i class="bi bi-plus-lg"></i> إضافة رقم</button>
    @endif
@endsection

@section('content')
<div class="card">
    <div class="card-body table-responsive">
        <table class="table table-hover table-striped w-100" id="blTable">
            <thead>
                <tr>
                    <th>#</th>
                    <th>الرقم</th>
                    <th>السبب</th>
                    <th>أضافه</th>
                    <th>التاريخ</th>
                    <th>إجراءات</th>
                </tr>
            </thead>
        </table>
    </div>
</div>

<div class="modal fade" id="blModal" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <form id="blForm" data-url="{{ route('blacklist.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="phone" class="form-control" dir="ltr" required>
                    </div>
                    <div class="mb-3">
                        <label class="form-label">السبب</label>
                        <textarea name="reason" class="form-control" rows="2"></textarea>
                    </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 table = MR.table('#blTable', '{{ route('blacklist.data') }}', [
        { data: 'id', name: 'id' },
        { data: 'phone', name: 'phone' },
        { data: 'reason', defaultContent: '—' },
        { data: 'added_by_label', orderable: false },
        { data: 'created', name: 'created_at' },
        { data: 'actions', orderable: false, searchable: false }
    ]);

    const $modal = $('#blModal'), $form = $('#blForm');

    $('#btnAdd').on('click', function () { $form[0].reset(); $modal.modal('show'); });

    $('#blTable').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