@extends('layouts.master')
@section('title', 'فهرس الاشتراكات المعتمدة')

@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" id="approvedListTable">
                    <thead>
                        <tr>
                            <th>#</th>
                            <th>رقم الاعتماد</th>
                            <th>رقم الفاتورة</th>
                            <th>اسم المشترك</th>
                            <th>الخدمة/العرض</th>
                            <th>النوع</th>
                            <th>التاريخ</th>
                        </tr>
                    </thead>
                </table>

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

    </div>
@endsection

@section('js')
    <script>
        $(function() {

            const table = $('#approvedListTable').DataTable({
                processing: true,
                serverSide: true,
                ajax: {
                    url: "{{ route('subscriptions.approved.list.data') }}",
                    data: function(d) {
                        d.q = $('#q').val();
                    }
                },
                columns: [{
                        data: 'DT_RowIndex',
                        orderable: false,
                        searchable: false
                    },
                    {
                        data: 'verification_code'
                    },
                    {
                        data: 'invoice_no'
                    },
                    {
                        data: 'member_name'
                    },
                    {
                        data: 'item_name'
                    },
                    {
                        data: 'type_badge',
                        orderable: false,
                        searchable: false
                    },
                    {
                        data: 'created_at'
                    }
                ],
                rowCallback: function(row, data) {
                    $(row).css('cursor', 'pointer');
                    $(row).attr('data-id', data.id);
                }
            });

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

            // ✅ click row => open your existing browser page
            $('#approvedListTable tbody').on('click', 'tr', function() {
                const id = $(this).attr('data-id');
                if (!id) return;

                // يفتح صفحة التصميم اللي عندك (approved_browser)
                window.location.href = "{{ route('subscriptions.approved.browser') }}" + "?id=" + id;
            });

        });
    </script>
@endsection