```php id="1y7rtx"
@extends('layouts.master')

@section('css')
    <style>
        /* إخفاء أي مربع بحث داخلي خاص بـ DataTables */
        #approvedListTable_filter,
        .dataTables_filter,
        .dt-search,
        div.dataTables_filter,
        .dataTables_wrapper .dataTables_filter,
        .dt-container .dt-search {
            display: none !important;
        }

        /* إخفاء الصف العلوي الذي قد يحتوي على البحث أو length */
        #approvedListTable_wrapper .row:first-child,
        #approvedListTable_wrapper .dt-layout-row:first-child,
        #approvedListTable_wrapper .dt-layout-cell.dt-layout-start,
        #approvedListTable_wrapper .dt-layout-cell.dt-layout-end {
            display: none !important;
        }
    </style>
@endsection

@section('content')
    <div class="container-fluid">

        <div class="d-flex justify-content-between align-items-center mb-3">
            <h3 class="fw-bold mb-0">فهرس الاشتراكات</h3>

            <input id="q" class="form-control form-control-sm" style="width:320px"
                placeholder="بحث: اعتماد / فاتورة / عضو / خدمة / فرع">
        </div>

        <div class="card shadow-sm border-0">
            <div class="card-body">
                <table class="table table-bordered w-100 text-center" id="approvedListTable">
                    <thead>
                        <tr>
                            <th>مسلسل</th>
                            <th>رقم الاشتراك</th>
                            <th>اسم المشترك</th>
                            <th>رقم العضوية</th>
                            <th>الاشتراك</th>
                            <th>نهاية الاشتراك</th>
                        </tr>
                    </thead>
                    <tbody></tbody>
                </table>

                <div class="text-muted small mt-2">
                    اضغط على أي صف لفتح تفاصيل الاشتراك
                </div>
            </div>
        </div>

    </div>
@endsection

@section('js')
    <script>
        $(function() {
            const tableSelector = '#approvedListTable';

            if ($.fn.DataTable.isDataTable(tableSelector)) {
                $(tableSelector).DataTable().clear().destroy();
            }

            const table = $(tableSelector).DataTable({
                destroy: true,
                processing: true,
                serverSide: true,
                searching: false,
                bFilter: false,
                lengthChange: false,
                info: true,
                dom: 'rtip',
                order: [
                    [1, 'desc']
                ],
                ajax: {
                    url: "{{ route('subscriptions.approved.list.data') }}",
                    type: 'GET',
                    data: function(d) {
                        d.q = $('#q').val() || '';
                        d.search = {
                            value: '',
                            regex: false
                        };
                    }
                },
                columns: [{
                        data: 'DT_RowIndex',
                        name: '',
                        orderable: false,
                        searchable: false
                    },
                    {
                        data: 'subscription_no',
                        name: 'subscriptions.verification_code',
                        orderable: true,
                        searchable: false
                    },
                    {
                        data: 'member_name',
                        name: 'm.name',
                        orderable: true,
                        searchable: false
                    },
                    {
                        data: 'member_code',
                        name: 'm.member_code',
                        orderable: true,
                        searchable: false
                    },
                    {
                        data: 'subscription_desc',
                        name: 'subscriptions.item_name',
                        orderable: true,
                        searchable: false
                    },
                    {
                        data: 'end_date_fmt',
                        name: 'subscriptions.end_date',
                        orderable: true,
                        searchable: false
                    }
                ],
                rowCallback: function(row, data) {
                    $(row).css('cursor', 'pointer');
                    $(row).attr('data-token', data.token || '');
                },
                initComplete: function() {
                    $('#approvedListTable_filter').remove();
                    $('.dataTables_filter').remove();
                    $('.dt-search').remove();

                    $('#approvedListTable_wrapper')
                        .find('.dataTables_filter, .dt-search, [data-dt-search]')
                        .remove();
                }
            });

            $(document).on('click', '#approvedListTable tbody tr', function() {
                const token = $(this).attr('data-token');
                if (!token) return;

                window.location.href = "{{ url('approved-subscriptions/browser') }}/" + token;
            });

            let t = null;
            $('#q').on('input', function() {
                clearTimeout(t);
                t = setTimeout(() => table.draw(), 250);
            });
        });
    </script>
@endsection