@extends('layouts.master')

@section('css')
    <style>
        .docs-toolbar .form-control,
        .docs-toolbar .form-select {
            min-height: 42px;
        }

        .docs-table td,
        .docs-table th {
            vertical-align: middle !important;
        }

        .bg-success-light {
            background-color: rgba(40, 167, 69, 0.1);
        }

        .soft-box {
            background: #f8f9fa;
            border-radius: 8px;
            min-height: 60px;
        }

        #docsTable .text-white {
            color: #212529 !important;
        }

        /* @media (prefers-color-scheme: dark) {
                #docsTable .text-white {
                    color: #ffffff !important;
                }
            } */
             
    </style>
@endsection

@section('content')
    <div class="container py-3">
        <div class="d-flex align-items-center justify-content-between mb-3">
            <h4 class="mb-0">الوثائق الثانوية</h4>
            <a href="{{ route('secondary_docs.index') }}" class="btn btn-success">
                <i class="fas fa-plus-circle mx-2"></i> انشاء طلب
            </a>
        </div>

        <div class="card mb-3">
            <div class="card-body docs-toolbar">
                <div class="row g-2">
                    <div class="col-md-3">
                        <label class="form-label">النوع</label>
                        <select id="filter_doc_type" class="form-select">
                            <option value="">الكل</option>
                            <option value="stop">إيقاف</option>
                            <option value="transfer">تنازل</option>
                        </select>
                    </div>

                    <div class="col-md-6">
                        <label class="form-label">بحث</label>
                        <input type="text" id="filter_q" class="form-control"
                            placeholder="رقم الوثيقة / رقم الاشتراك / اسم العضو / رقم العضو">
                    </div>

                    <div class="col-md-3 d-flex align-items-end gap-2">
                        <button type="button" id="btn_filter" class="btn btn-primary w-100">بحث</button>
                        <button type="button" id="btn_reset_filter" class="btn btn-outline-secondary w-100">إعادة</button>
                    </div>
                </div>
            </div>
        </div>

        <div class="card">
            <div class="card-body">
                <div class="table-responsive">
                    <table id="docsTable" class="table table-bordered table-hover align-middle docs-table w-100">
                        <thead>
                            <tr>
                                <th>#</th>
                                <th>رقم الوثيقة</th>
                                <th>النوع</th>
                                <th>رقم الاشتراك</th>
                                <th>المشترك</th>
                                <th>تاريخ الإنشاء</th>
                                <th>عرض</th>
                            </tr>
                        </thead>
                        <tbody></tbody>
                    </table>
                </div>

                <div class="small text-muted mt-3">
                    عند الضغط على زر <strong>عرض</strong> سيتم فتح الوثيقة داخل صفحة الإنشاء في وضع عرض فقط.
                </div>
            </div>
        </div>
    </div>
@endsection


@section('js')
    <script>
        const DOCS_DATA_URL = @json(route('secondary_docs.documents.data'));
        const SECONDARY_DOCS_INDEX_URL = @json(route('secondary_docs.index'));

        let docsTable = null;

        function buildReadonlyOpenUrl(id) {
            const url = new URL(SECONDARY_DOCS_INDEX_URL, window.location.origin);
            url.searchParams.set('mode', 'view');
            url.searchParams.set('document_id', id);
            return url.toString();
        }

        document.addEventListener('DOMContentLoaded', function() {
            docsTable = $('#docsTable').DataTable({
                processing: true,
                serverSide: true,
                searching: false,
                ajax: {
                    url: DOCS_DATA_URL,
                    data: function(d) {
                        d.doc_type = document.getElementById('filter_doc_type').value;
                        d.q = document.getElementById('filter_q').value;
                    }
                },
                columns: [{
                        data: 'id',
                        name: 'id'
                    },
                    {
                        data: 'qrn',
                        name: 'qrn'
                    },
                    {
                        data: 'doc_type_badge',
                        name: 'doc_type'
                    },
                    {
                        data: 'subscription_no',
                        name: 'subscription_no'
                    },
                    {
                        data: 'member_block',
                        name: 'member_name'
                    },
                    {
                        data: 'created_at_view',
                        name: 'created_at'
                    },
                    {
                        data: 'actions',
                        name: 'actions',
                        orderable: false,
                        searchable: false
                    }
                ],
                order: [
                    [0, 'desc']
                ],
                language: {
                    processing: 'جاري المعالجة...',
                    paginate: {
                        previous: 'السابق',
                        next: 'التالي'
                    },
                    emptyTable: 'لا توجد بيانات متاحة'
                }
            });

            document.getElementById('btn_filter').onclick = () => docsTable.ajax.reload();

            document.getElementById('btn_reset_filter').onclick = () => {
                document.getElementById('filter_doc_type').value = '';
                document.getElementById('filter_q').value = '';
                docsTable.ajax.reload();
            };

            document.addEventListener('click', function(e) {
                const btn = e.target.closest('.js-show-doc');
                if (!btn) return;

                e.preventDefault();

                const id = btn.dataset.id;
                if (!id) return;

                window.location.href = buildReadonlyOpenUrl(id);
            });
        });
    </script>
@endsection