@extends('layouts.app')
@section('title', 'قوائم الاتصال')
@section('page_title', 'قوائم الاتصال (Lead Lists)')
@section('page_subtitle', 'استيراد الأرقام من CSV مع كشف التكرار وتنظيف الأرقام والتوزيع على الموظفين')

@section('page_actions')
    @if (auth()->user()->hasPermission('leads.import'))
        <button class="btn btn-primary" id="btnImport"><i class="bi bi-upload"></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 w-100" id="listsTable">
            <thead>
                <tr>
                    <th>#</th>
                    <th>اسم القائمة</th>
                    <th>الحملة</th>
                    <th>عدد الأرقام</th>
                    <th>ملخص الاستيراد</th>
                    <th>أنشأها</th>
                    <th>التاريخ</th>
                    <th>إجراءات</th>
                </tr>
            </thead>
        </table>
    </div>
</div>

<div class="card">
    <div class="card-header d-flex justify-content-between align-items-center">
        <span>الأرقام</span>
        <div class="d-flex gap-2">
            <select class="form-select form-select-sm" id="filterList">
                <option value="">كل القوائم</option>
                @foreach ($lists as $list)
                    <option value="{{ $list->id }}">{{ $list->name }}</option>
                @endforeach
            </select>
            <select class="form-select form-select-sm" id="filterLeadStatus">
                <option value="">كل الحالات</option>
                @foreach (\App\Models\Lead::STATUSES as $key => $label)
                    <option value="{{ $key }}">{{ $label }}</option>
                @endforeach
            </select>
        </div>
    </div>
    <div class="card-body table-responsive">
        <table class="table table-hover w-100" id="leadsTable">
            <thead>
                <tr>
                    <th>#</th>
                    <th>الاسم</th>
                    <th>الرقم</th>
                    <th>المدينة</th>
                    <th>القائمة</th>
                    <th>المسؤول</th>
                    <th>المحاولات</th>
                    <th>الحالة</th>
                    <th>اتصال</th>
                </tr>
            </thead>
        </table>
    </div>
</div>

@include('leads.partials.modals')
@endsection

@push('scripts')
<script>
jQuery(function ($) {
    const lists = MR.table('#listsTable', '{{ route('leads.lists.data') }}', [
        { data: 'id', name: 'id' },
        { data: 'name', name: 'name' },
        { data: 'campaign_label', orderable: false },
        { data: 'leads_count', name: 'leads_count', searchable: false },
        { data: 'summary', orderable: false, searchable: false },
        { data: 'creator_label', orderable: false },
        { data: 'created', name: 'created_at' },
        { data: 'actions', orderable: false, searchable: false }
    ]);

    const leads = MR.table('#leadsTable', '{{ route('leads.data') }}', [
        { data: 'id', name: 'id' },
        { data: 'name', defaultContent: '—' },
        { data: 'phone', name: 'phone' },
        { data: 'city', defaultContent: '—' },
        { data: 'list_label', orderable: false },
        { data: 'agent_label', orderable: false },
        { data: 'attempts', name: 'attempts', searchable: false },
        { data: 'status_badge', name: 'status' },
        { data: 'actions', orderable: false, searchable: false }
    ], {
        filters: function () {
            return { lead_list_id: $('#filterList').val(), status: $('#filterLeadStatus').val() };
        }
    });

    $('#filterList, #filterLeadStatus').on('change', function () { leads.ajax.reload(); });

    $('#btnImport').on('click', function () { $('#importForm')[0].reset(); $('#importModal').modal('show'); });

    $('#listsTable').on('click', '[data-action=view-leads]', function () {
        $('#filterList').val($(this).data('id'));
        leads.ajax.reload();
    });

    $('#listsTable').on('click', '[data-action=assign]', function () {
        $('#assignListId').val($(this).data('id'));
        $('#assignModal').modal('show');
    });

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

    $('#importForm').on('submit', function (e) {
        e.preventDefault();
        MR.submit(this, { done: function () { $('#importModal').modal('hide'); lists.ajax.reload(); leads.ajax.reload(); } });
    });

    $('#assignForm').on('submit', function (e) {
        e.preventDefault();
        MR.submit(this, { done: function () { $('#assignModal').modal('hide'); leads.ajax.reload(); } });
    });
});
</script>
@endpush