@php
    $isMarketingAccountBillsPage = ($section['slug'] ?? null) === 'billing-transactions'
        && ($page['slug'] ?? null) === 'marketing-account-bills';
    $isMarketingAccountBalancePage = ($section['slug'] ?? null) === 'billing-transactions'
        && ($page['slug'] ?? null) === 'marketing-account-balance';
    $isStoreReceivingAccountsPage = ($section['slug'] ?? null) === 'fund-management'
        && ($page['slug'] ?? null) === 'store-receiving-accounts';
    $isSupplierWorkspace = in_array($section['slug'] ?? null, ['supplier-payables', 'supplier-payables-final'], true);
    $supplierWorkspaceSection = ($section['slug'] ?? null) === 'supplier-payables-final'
        ? collect(\App\Utilities\SidebarPermissions::navigationFor(user()))->firstWhere('slug', 'supplier-payables')
        : $section;
    $marketingAccountTabTitles = [
        'taobao-wechat' => '阿里巴巴账户',
        'jd-wallet' => '京东',
    ];
    $activeContentTitle = $activeTab['title'] ?? ($page['title'] ?? $section['title']);
    $directory = $page['directory'] ?? null;

    if ($isMarketingAccountBillsPage && isset($marketingAccountTabTitles[$activeTab['slug'] ?? null])) {
        $activeContentTitle = $marketingAccountTabTitles[$activeTab['slug']];
    }
@endphp

<x-layouts.admin>
    <x-slot name="title">
        {{ $activeContentTitle }}
    </x-slot>

    <x-slot name="content">
        <style>
            #main-body > .container {
                max-width: none;
                width: auto;
                margin-left: 1.5rem;
                margin-right: 1.5rem;
            }

            .business-tab-bar {
                display: flex;
                align-items: center;
                gap: 2.25rem;
                min-height: 5rem;
                padding: 0 2rem;
                overflow-x: auto;
                border: 1px solid #e5e7eb;
                border-radius: 1rem;
                background: #ffffff;
                box-shadow: 0 8px 24px rgba(31, 41, 55, 0.06);
            }

            .business-tab-link {
                position: relative;
                display: inline-flex;
                flex: 0 0 auto;
                align-items: center;
                gap: 0.65rem;
                min-height: 5rem;
                color: #4b5563;
                font-size: 1rem;
                font-weight: 600;
                white-space: nowrap;
                transition: color 150ms ease;
            }

            .business-tab-link:hover,
            .business-tab-link.is-active {
                color: var(--vip-content-accent);
            }

            .business-tab-link.is-active::after {
                position: absolute;
                right: 0;
                bottom: 0;
                left: 0;
                height: 3px;
                border-radius: 999px 999px 0 0;
                background: var(--vip-content-accent);
                content: '';
            }

            .business-page--marketing-account-bills .business-tab-bar {
                gap: 2rem;
                border-color: var(--vip-border);
                border-radius: 0.75rem;
                box-shadow: none;
            }

            .business-page--marketing-account-bills .business-tab-link {
                gap: 0.5rem;
                color: #595959;
                font-size: 0.875rem;
            }

            .business-page--marketing-account-bills .business-tab-link:hover,
            .business-page--marketing-account-bills .business-tab-link.is-active {
                color: var(--vip-content-accent-dark);
            }

            .business-page--marketing-account-bills .business-tab-link.is-active::after {
                background: var(--vip-content-accent);
            }

            .business-page--marketing-account-bills .business-tab-link:focus-visible {
                outline: 2px solid var(--vip-content-accent-dark);
                outline-offset: 3px;
            }

            .business-page--marketing-account-bills .business-content-section {
                border-color: var(--vip-border);
                border-radius: 0.75rem;
                box-shadow: none;
            }

            .biz-card {
                background: #ffffff;
                border: 1px solid #eef0f4;
                border-radius: 1rem;
                box-shadow: 0 6px 18px rgba(31, 41, 55, 0.04);
            }

            .biz-alert {
                margin-bottom: 1rem;
                padding: 0.75rem 1rem;
                border: 1px solid #bbf7d0;
                border-radius: 0.5rem;
                background: #f0fdf4;
                color: #166534;
                font-size: 0.875rem;
            }

            .biz-alert-error {
                border-color: #fecaca;
                background: #fef2f2;
                color: #991b1b;
            }

            .biz-import-form {
                display: flex;
                align-items: center;
                gap: 0.5rem;
            }

            .biz-import-input {
                max-width: 15rem;
                font-size: 0.75rem;
            }

            .biz-filter-bar {
                display: flex;
                align-items: flex-end;
                gap: 0.75rem;
                flex-wrap: wrap;
                padding: 0.9rem 1.5rem;
                border-bottom: 1px solid #f3f4f6;
                background: #fffdf8;
            }

            .biz-filter-field {
                display: flex;
                align-items: center;
                gap: 0.4rem;
            }

            .biz-filter-field label {
                color: #6b7280;
                font-size: 0.75rem;
                font-weight: 600;
                white-space: nowrap;
            }

            .biz-filter-input,
            .biz-filter-select {
                width: 10.5rem;
                height: 2.15rem;
                padding: 0.35rem 0.55rem;
                border: 1px solid #e5e7eb;
                border-radius: 0.45rem;
                background: #ffffff;
                color: #111827;
                font-size: 0.8125rem;
            }

            .biz-filter-select {
                width: 8.25rem;
            }

            .biz-filter-input:focus,
            .biz-filter-select:focus {
                border-color: #a67c3d;
                outline: 2px solid rgba(166, 124, 61, 0.18);
            }

            .biz-card + .biz-card {
                margin-top: 1.25rem;
            }

            .installation-filter-bar {
                display: grid;
                grid-template-columns: repeat(4, minmax(12rem, 1fr));
                gap: 0.65rem 1rem;
                padding: 1rem 1.5rem;
                border-bottom: 1px solid #f3f4f6;
                background: #fcfbf8;
            }

            .installation-filter-field {
                display: flex;
                align-items: center;
                gap: 0.4rem;
                min-width: 0;
                color: #595959;
                font-size: 0.75rem;
                white-space: nowrap;
            }

            .installation-filter-field span {
                flex: 0 0 auto;
            }

            .installation-filter-field input,
            .installation-filter-field select {
                min-width: 0;
                width: 100%;
                height: 2.1rem;
                padding: 0 0.5rem;
                border: 1px solid #d8d2c7;
                border-radius: 0.375rem;
                background: #ffffff;
                color: #171717;
                font-size: 0.75rem;
            }

            .installation-filter-actions {
                display: flex;
                align-items: center;
                gap: 0.5rem;
            }

            @media (max-width: 1100px) {
                .installation-filter-bar { grid-template-columns: repeat(2, minmax(14rem, 1fr)); }
            }
            @media (max-width: 650px) {
                .installation-filter-bar { grid-template-columns: minmax(0, 1fr); padding: 1rem; }
            }

            .biz-card-head {
                display: flex;
                align-items: center;
                justify-content: space-between;
                padding: 1rem 1.5rem;
                border-bottom: 1px solid #f3f4f6;
            }

            .biz-card-title {
                font-size: 1rem;
                font-weight: 700;
                color: #111827;
                display: flex;
                align-items: center;
                gap: 0.5rem;
            }

            .biz-card-actions {
                display: flex;
                align-items: center;
                gap: 0.5rem;
            }

            .biz-table-wrap {
                overflow-x: auto;
            }

            .biz-table {
                width: 100%;
                border-collapse: separate;
                border-spacing: 0;
                font-size: 0.875rem;
            }

            .biz-table thead th {
                position: sticky;
                top: 0;
                background: #f9fafb;
                color: #4b5563;
                font-weight: 600;
                text-align: left;
                padding: 0.75rem 1rem;
                border-bottom: 1px solid #e5e7eb;
                white-space: nowrap;
            }

            .biz-table tbody td {
                padding: 0.65rem 1rem;
                border-bottom: 1px solid #f3f4f6;
                color: #1f2937;
                white-space: nowrap;
            }

            .biz-table tbody tr:hover td {
                background: #f9fafb;
            }

            .installation-main-row {
                cursor: pointer;
            }

            .installation-expand {
                width: 2rem;
                height: 2rem;
                padding: 0;
                border: 1px solid #d8d2c7;
                border-radius: 0.375rem;
                background: #ffffff;
                color: #856632;
                cursor: pointer;
            }

            .installation-detail-row td {
                padding: 0.75rem 1rem 1rem 3rem;
                background: #fbfaf7;
            }

            .installation-detail-table {
                width: 100%;
                border-collapse: collapse;
                font-size: 0.75rem;
            }

            .installation-detail-table th,
            .installation-detail-table td {
                padding: 0.45rem 0.65rem;
                border: 1px solid #e5e0d7;
                white-space: nowrap;
                text-align: left;
            }

            .installation-detail-table th {
                background: #f3efe6;
                color: #595959;
                font-weight: 600;
            }

            .installation-detail-empty,
            .installation-detail-error {
                color: #595959;
                padding: 0.5rem 0;
            }

            .installation-detail-error {
                color: #b80000;
            }

            .biz-table .num {
                text-align: right;
                font-variant-numeric: tabular-nums;
                color: #111827;
            }

            .biz-table .actions-cell {
                white-space: nowrap;
                text-align: right;
            }

            .biz-empty {
                padding: 4rem 1rem;
                text-align: center;
                color: #6b7280;
            }

            .biz-empty .material-icons-outlined {
                font-size: 3rem;
                color: #d1d5db;
            }

            .biz-btn {
                display: inline-flex;
                align-items: center;
                gap: 0.35rem;
                padding: 0.4rem 0.85rem;
                border-radius: 0.5rem;
                font-size: 0.8125rem;
                font-weight: 600;
                transition: background 150ms ease, color 150ms ease;
                border: 1px solid transparent;
                cursor: pointer;
            }

            .biz-btn-primary {
                background: #4f46e5;
                color: #ffffff;
            }

            .biz-btn-primary:hover {
                background: #4338ca;
            }

            .biz-btn-ghost {
                background: transparent;
                color: #4b5563;
                border-color: #e5e7eb;
            }

            .biz-btn-ghost:hover {
                background: #f3f4f6;
            }

            .biz-btn-danger-ghost {
                background: transparent;
                color: #dc2626;
                border-color: #fecaca;
            }

            .biz-btn-danger-ghost:hover {
                background: #fef2f2;
            }

            .biz-badge {
                display: inline-block;
                padding: 0.15rem 0.55rem;
                border-radius: 999px;
                font-size: 0.75rem;
                font-weight: 600;
            }

            .biz-badge-yes { background: #dcfce7; color: #15803d; }
            .biz-badge-no  { background: #f3f4f6; color: #6b7280; }

            /* Modal */
            .biz-modal {
                position: fixed;
                inset: 0;
                background: rgba(15, 23, 42, 0.45);
                display: none;
                align-items: flex-start;
                justify-content: center;
                padding: 4rem 1rem;
                z-index: 60;
                overflow-y: auto;
            }

            .biz-modal.is-open {
                display: flex;
            }

            .biz-modal-card {
                background: #ffffff;
                border-radius: 1rem;
                box-shadow: 0 20px 60px rgba(15, 23, 42, 0.25);
                width: 100%;
                max-width: 720px;
                padding: 1.5rem;
            }

            .biz-modal-title {
                font-size: 1.125rem;
                font-weight: 700;
                color: #111827;
                margin-bottom: 1rem;
            }

            .biz-form-grid {
                display: grid;
                grid-template-columns: repeat(2, minmax(0, 1fr));
                gap: 0.85rem;
            }

            .biz-form-grid .full {
                grid-column: span 2;
            }

            .biz-field-label {
                display: block;
                font-size: 0.75rem;
                font-weight: 600;
                color: #6b7280;
                margin-bottom: 0.25rem;
            }

            .biz-field-input,
            .biz-field-select,
            .biz-field-textarea {
                width: 100%;
                border: 1px solid #e5e7eb;
                border-radius: 0.5rem;
                padding: 0.5rem 0.65rem;
                font-size: 0.875rem;
                color: #111827;
                background: #ffffff;
            }

            .biz-field-input:focus,
            .biz-field-select:focus,
            .biz-field-textarea:focus {
                border-color: #6366f1;
                outline: 2px solid rgba(99, 102, 241, 0.25);
            }

            .biz-modal-foot {
                display: flex;
                justify-content: flex-end;
                gap: 0.5rem;
                margin-top: 1.25rem;
            }

            .biz-pagination {
                display: flex;
                gap: 0.25rem;
                padding: 0.75rem 1.5rem;
                border-top: 1px solid #f3f4f6;
                color: #4b5563;
                font-size: 0.85rem;
                align-items: center;
                justify-content: space-between;
            }

            .biz-pagination a,
            .biz-pagination span {
                padding: 0.25rem 0.5rem;
                border-radius: 0.375rem;
            }

            .biz-pagination a:hover {
                background: #f3f4f6;
            }

            .business-content-section {
                margin-top: 1.5rem;
                padding: 1.5rem;
                border: 1px solid #eef0f4;
                border-radius: 1rem;
                background: #ffffff;
            }

            [v-cloak] {
                display: none;
            }

            @media (min-width: 1280px) {
                #main-body > .container {
                    margin-left: 2.5rem;
                    margin-right: 2.5rem;
                }
            }
        </style>

        <div
            @class([
                'my-6',
                'business-page--marketing-account-bills' => $isMarketingAccountBillsPage,
                'business-page--marketing-account-balance' => $isMarketingAccountBalancePage,
            ])
            @if ($isMarketingAccountBillsPage) data-marketing-account-bills-workspace @endif
            @if ($isSupplierWorkspace) data-supplier-workspace @endif
        >
            @if ($isMarketingAccountBillsPage)
                <p class="sr-only" role="status" aria-live="polite" data-marketing-account-bills-status></p>
                <div class="biz-alert biz-alert-error" role="alert" data-marketing-account-bills-navigation-error hidden>
                    <span>账单内容局部加载失败，当前页面内容已保留。</span>
                    <a href="{{ request()->fullUrl() }}" data-marketing-account-bills-retry data-marketing-account-bills-full-page>重新加载</a>
                </div>
            @endif
            @if (is_string(session('success')))
                <div class="biz-alert" role="status">{{ session('success') }}</div>
            @endif

            @if (is_string(session('error')))
                <div class="biz-alert biz-alert-error" role="alert">{{ session('error') }}</div>
            @endif

            @if ($errors->has('import'))
                <div class="biz-alert biz-alert-error" role="alert">{{ $errors->first('import') }}</div>
            @endif

            @if (!empty($upstreamError))
                <div class="biz-alert biz-alert-error" role="alert">{{ $upstreamError }}</div>
            @endif

            @if ($isSupplierWorkspace && $supplierWorkspaceSection)
                @include('business.pages.supplier-payables.navigation', ['section' => $supplierWorkspaceSection])
            @endif

            @if ($tabs->isNotEmpty())
                <nav class="business-tab-bar" aria-label="{{ $page['title'] }}">
                    @foreach ($tabs as $tab)
                        @php
                            $visibleTabTitle = $isMarketingAccountBillsPage
                                ? ($marketingAccountTabTitles[$tab['slug']] ?? $tab['title'])
                                : $tab['title'];
                        @endphp

                        <a
                            href="{{ route('business.pages.show', [
                                'section' => $section['slug'],
                                'page' => $page['slug'],
                                'tab' => $tab['slug'],
                            ]) }}"
                            @class([
                                'business-tab-link',
                                'is-active' => $activeTab['slug'] === $tab['slug'],
                            ])
                            @if ($activeTab['slug'] === $tab['slug']) aria-current="page" @endif
                        >
                            <span class="material-icons-outlined text-xl" aria-hidden="true">
                                {{ $tab['icon'] ?? 'description' }}
                            </span>
                            <span>{{ $visibleTabTitle }}</span>
                        </a>
                    @endforeach
                </nav>
            @endif

            @php
                $pageView = null;
                $sectionView = null;

                if ($page) {
                    $viewName = 'business.pages.' . $section['slug'] . '.' . $page['slug'];

                    if ($tabs->isNotEmpty()) {
                        $viewName .= '.' . ($activeTab['slug'] ?? '');
                    }

                    if (view()->exists($viewName)) {
                        $pageView = $viewName;
                    }
                } else {
                    $viewName = 'business.pages.' . $section['slug'] . '.index';

                    if (view()->exists($viewName)) {
                        $sectionView = $viewName;
                    }
                }
            @endphp

            @if (in_array($section['slug'], ['courier-payables', 'courier-payables-final'], true) && empty($page))
                @include('business.pages.courier-payables.final-workspace')
            @elseif ($sectionView)
                @include($sectionView)
            @elseif (!empty($content) && !empty($content['view']))
                <section class="business-content-section" aria-label="{{ $activeContentTitle }}">
                    @include($content['view'], $content)
                </section>
            @elseif ($directory)
                @include('business.pages.partials.directory-table', [
                    'directory' => $directory,
                    'section' => $section,
                    'page' => $page,
                    'rows' => $rows,
                    'upstreamError' => $upstreamError,
                    'inventoryWarehouseMappings' => $inventoryWarehouseMappings ?? collect(),
                ])
            @elseif ($pageView)
                @include($pageView)
            @elseif ($descriptor)
                <div class="biz-card mt-6">
                    @if ($page['slug'] === 'installation-details')
                        <form method="GET" action="{{ request()->url() }}" class="installation-filter-bar" aria-label="安装明细筛选查询栏">
                            @php
                                $filterFields = [
                                    ['name' => 'created_from', 'label' => '创建日期：', 'type' => 'date'], ['name' => 'created_to', 'label' => '至：', 'type' => 'date'],
                                    ['name' => 'customer_review_from', 'label' => '客服审核时间：', 'type' => 'date'], ['name' => 'customer_review_to', 'label' => '至：', 'type' => 'date'],
                                    ['name' => 'finance_review_from', 'label' => '财务审核时间：', 'type' => 'date'], ['name' => 'finance_review_to', 'label' => '至：', 'type' => 'date'],
                                    ['name' => 'push_status', 'label' => '推送状态：'], ['name' => 'order_no', 'label' => '订单编号：'],
                                    ['name' => 'customer_review', 'label' => '客服审核：', 'options' => ['0'=>'未审核','1'=>'已审核']], ['name' => 'finance_review', 'label' => '财务审核：', 'options' => ['0'=>'未审核','1'=>'已审核']],
                                    ['name' => 'quote_status', 'label' => '报价状态：'], ['name' => 'arranged_status', 'label' => '是否安排：', 'options' => ['0'=>'未安排','1'=>'已安排']],
                                    ['name' => 'fee_payer', 'label' => '安装费承担方：'], ['name' => 'completed_status', 'label' => '是否完工：', 'options' => ['0'=>'未完工','1'=>'已完工']],
                                    ['name' => 'shop_name', 'label' => '选择店铺：'], ['name' => 'delete_status', 'label' => '选择删除：', 'options' => ['0'=>'未删除','1'=>'已删除']],
                                    ['name' => 'installation_company', 'label' => '安装公司：'], ['name' => 'installation_no', 'label' => '安装单号：'],
                                    ['name' => 'order_type', 'label' => '订单类型：'], ['name' => 'product_id', 'label' => '商品ID：'],
                                ];
                            @endphp
                            @foreach ($filterFields as $filter)
                                <label class="installation-filter-field">
                                    <span>{{ $filter['label'] }}</span>
                                    @if (isset($filter['options']))
                                        <select name="{{ $filter['name'] }}"><option value="">全部</option>@foreach ($filter['options'] as $value => $label)<option value="{{ $value }}" @selected((string) request($filter['name']) === (string) $value)>{{ $label }}</option>@endforeach</select>
                                    @else
                                        <input type="{{ $filter['type'] ?? 'text' }}" name="{{ $filter['name'] }}" value="{{ request($filter['name']) }}" @if (($filter['type'] ?? '') !== 'date') placeholder="按原值精确查询" @endif>
                                    @endif
                                </label>
                            @endforeach
                            <div class="installation-filter-actions">
                                <button type="submit" class="biz-btn biz-btn-primary">查询</button>
                                <a href="{{ request()->url() }}" class="biz-btn biz-btn-ghost">清除</a>
                                <a href="{{ route('business.installation-details.export', request()->query()) }}" class="biz-btn biz-btn-ghost">导出</a>
                            </div>
                        </form>
                    @endif
                    <div class="biz-card-head">
                        <div class="biz-card-title">
                            <span class="material-icons-outlined" aria-hidden="true">table_view</span>
                            <span>{{ $activeTab['title'] ?? $page['title'] }} · 数据列表</span>
                            @if ($descriptor->readOnly)
                                <span class="biz-badge biz-badge-yes">工作平台数据库</span>
                            @endif
                        </div>
                        @unless ($descriptor->readOnly)
                            <div class="biz-card-actions">
                            @if ($isStoreReceivingAccountsPage)
                                <button type="button" class="biz-btn biz-btn-ghost" onclick="bizOpenImportModal()">
                                    <span class="material-icons-outlined" style="font-size:1.1rem">upload_file</span>
                                    <span>导入</span>
                                </button>
                            @else
                                <form
                                    class="biz-import-form"
                                    method="POST"
                                    enctype="multipart/form-data"
                                    action="{{ route('business.pages.import', [
                                        'section' => $section['slug'],
                                        'page' => $page['slug'],
                                        'tab' => $activeTab['slug'] ?? null,
                                    ]) }}"
                                >
                                    @csrf
                                    <input class="biz-import-input" type="file" name="import" accept=".xlsx,.xls,.csv" required>
                                    <button type="submit" class="biz-btn biz-btn-ghost" title="导入 Excel 或 CSV">
                                        <span class="material-icons-outlined" style="font-size:1.1rem">upload_file</span>
                                        <span>导入</span>
                                    </button>
                                </form>
                            @endif
                            <button type="button" class="biz-btn biz-btn-primary" onclick="bizOpenCreateModal()">
                                <span class="material-icons-outlined" style="font-size:1.1rem">add</span>
                                <span>新增</span>
                            </button>
                            </div>
                        @endunless
                    </div>

                    @if ($isStoreReceivingAccountsPage)
                        <form class="biz-filter-bar" method="GET" action="{{ route('business.pages.show', [
                            'section' => $section['slug'], 'page' => $page['slug'], 'tab' => $activeTab['slug'] ?? null,
                        ]) }}" aria-label="店铺收款账户筛选">
                            <div class="biz-filter-field">
                                <label for="filter-erp-store-name">ERP店铺名称</label>
                                <input id="filter-erp-store-name" class="biz-filter-input" type="search" name="erp_store_name" value="{{ request('erp_store_name') }}" placeholder="输入店铺名称">
                            </div>
                            <div class="biz-filter-field">
                                <label for="filter-shop-name">店铺名称</label>
                                <input id="filter-shop-name" class="biz-filter-input" type="search" name="shop_name" value="{{ request('shop_name') }}" placeholder="输入店铺名称">
                            </div>
                            <div class="biz-filter-field">
                                <label for="filter-store-status">店铺状态</label>
                                <select id="filter-store-status" class="biz-filter-select" name="store_status">
                                    <option value="">全部</option>
                                    @foreach (['正常', '关店中', '已关店'] as $statusOption)
                                        <option value="{{ $statusOption }}" @selected(request('store_status') === $statusOption)>{{ $statusOption }}</option>
                                    @endforeach
                                </select>
                            </div>
                            <button type="submit" class="biz-btn biz-btn-primary">筛选</button>
                            @if (request()->hasAny(['erp_store_name', 'shop_name', 'store_status']))
                                <a class="biz-btn biz-btn-ghost" href="{{ route('business.pages.show', [
                                    'section' => $section['slug'], 'page' => $page['slug'], 'tab' => $activeTab['slug'] ?? null,
                                ]) }}">重置</a>
                            @endif
                        </form>
                    @endif
                    <div class="biz-table-wrap">
                        <table class="biz-table">
                            <thead>
                                <tr>
                                    @if ($page['slug'] !== 'installation-details')<th>#</th>@endif
                                    @foreach ($descriptor->fields as $field)
                                        <th class="@if ($field['currency']) num @endif">{{ $field['label'] }}</th>
                                    @endforeach
                                    @unless ($descriptor->readOnly)
                                        <th class="actions-cell" data-finance-fixed="end">操作</th>
                                    @endunless
                                </tr>
                            </thead>
                            <tbody>
                                @forelse ($rows as $row)
                                    <tr @if ($page['slug'] === 'installation-details') class="installation-main-row" data-installation-row data-guid="{{ $row->related_guid ?? '' }}" tabindex="0" aria-label="查看安装商品明细" @endif>
                                        @if ($page['slug'] !== 'installation-details')<td>{{ $row->id }}</td>@endif
                                        @foreach ($descriptor->fields as $field)
                                            @php
                                                $val = $row->{$field['name']};
                                            @endphp
                                            <td class="@if ($field['currency']) num @endif">
                                                @if ($field['type'] === 'boolean')
                                                    @if ($val)
                                                        <span class="biz-badge biz-badge-yes">是</span>
                                                    @else
                                                        <span class="biz-badge biz-badge-no">否</span>
                                                    @endif
                                                @elseif ($field['type'] === 'date' && $val)
                                                    {{ \Illuminate\Support\Carbon::parse($val)->format('Y-m-d') }}
                                                @elseif ($field['currency'])
                                                    {{ number_format((float) $val, 2) }}
                                                @else
                                                    {{ $val }}
                                                @endif
                                            </td>
                                        @endforeach
                                        @unless ($descriptor->readOnly)
                                            <td class="actions-cell" data-finance-fixed="end">
                                            <button type="button" class="biz-btn biz-btn-ghost" title="编辑" onclick='bizOpenEditModal({{ json_encode($row->only(array_merge(['id'], array_map(fn($f) => $f['name'], $descriptor->fields)))) }})'>
                                                <span class="material-icons-outlined" style="font-size:1.1rem">edit</span>
                                            </button>
                                            <form method="POST" action="{{ route('business.pages.destroy', [
                                                'section' => $section['slug'],
                                                'page' => $page['slug'],
                                                'id' => $row->id,
                                                'tab' => $activeTab['slug'] ?? null,
                                            ]) }}" style="display:inline" onsubmit="return confirm('确认删除这条记录？')">
                                                @csrf
                                                @method('DELETE')
                                                <button type="submit" class="biz-btn biz-btn-danger-ghost">
                                                    <span class="material-icons-outlined" style="font-size:1.1rem">delete</span>
                                                </button>
                                            </form>
                                            </td>
                                        @endunless
                                    </tr>
                                @empty
                                    <tr>
                                        <td colspan="{{ count($descriptor->fields) + ($page['slug'] === 'installation-details' ? 0 : 1) + ($descriptor->readOnly ? 0 : 1) }}">
                                            <div class="biz-empty">
                                                <span class="material-icons-outlined" aria-hidden="true">inbox</span>
                                                <div>{{ $descriptor->readOnly ? '暂无工作平台数据' : '暂无数据，点击右上角"新增"开始录入' }}</div>
                                            </div>
                                        </td>
                                    </tr>
                                @endforelse
                            </tbody>
                        </table>
                    </div>

                    <div class="biz-pagination">
                        <span>共 {{ $rows->total() }} 条 · 第 {{ $rows->currentPage() }} / {{ $rows->lastPage() }} 页</span>
                        <span>
                            @if ($rows->onFirstPage())
                                <span>‹ 上一页</span>
                            @else
                                <a href="{{ $rows->previousPageUrl() }}">‹ 上一页</a>
                            @endif
                            @if ($rows->hasMorePages())
                                <a href="{{ $rows->nextPageUrl() }}">下一页 ›</a>
                            @else
                                <span>下一页 ›</span>
                            @endif
                        </span>
                    </div>

                    @if ($page['slug'] === 'installation-details')
                        <section class="installation-detail-panel" data-installation-detail-panel aria-label="明细子表">
                            <div class="biz-card-head"><div class="biz-card-title">明细子表</div></div>
                            <div class="biz-table-wrap" data-installation-detail-content>
                                <div class="installation-detail-empty">请点击上方主表记录查看商品明细</div>
                            </div>
                        </section>
                    @endif

                    @if ($page['slug'] === 'installation-details')
                        <script>
                            (() => {
                                const detailUrl = @json(route('business.installation-details.details', ['guid' => '__GUID__']));
                                const columns = [
                                    ['transaction_no', '交易单号'], ['product_id', '商品id'], ['id_owner', 'ID负责人'],
                                    ['department_owner', '部门负责人'], ['auxiliary_spu', '辅助码Spu'], ['product_store_code', '商品店铺编码'],
                                    ['item_no', '货号'], ['barcode', '条形码'], ['product_name', '商品名称'], ['supplier_name', '供应商名称'],
                                    ['detail_requested_amount', '申请明细金额'], ['detail_requested_quantity', '申请明细数量'],
                                    ['detail_settled_amount', '结算明细金额'], ['detail_received_amount', '收款明细金额'],
                                    ['change_reason', '变更原因'], ['source_created_at', '创建时间'], ['source_modified_at', '修改时间'],
                                ];
                                const escapeHtml = (value) => String(value ?? '').replace(/[&<>"']/g, (char) => ({'&':'&amp;','<':'&lt;','>':'&gt;','"':'&quot;',"'":'&#039;'}[char]));
                                const renderDetails = (items) => {
                                    if (!items.length) return '<div class="installation-detail-empty">暂无商品明细</div>';
                                    const head = columns.map(([, label]) => `<th>${escapeHtml(label)}</th>`).join('');
                                    const body = items.map((item) => `<tr>${columns.map(([key]) => `<td>${escapeHtml(item[key])}</td>`).join('')}</tr>`).join('');
                                    return `<table class="installation-detail-table"><thead><tr>${head}</tr></thead><tbody>${body}</tbody></table>`;
                                };
                                const detailPanel = document.querySelector('[data-installation-detail-panel]');
                                const detailContent = detailPanel?.querySelector('[data-installation-detail-content]');
                                let detailRequest = 0;
                                document.querySelectorAll('[data-installation-row]').forEach((row) => {
                                    row.addEventListener('keydown', (event) => {
                                        if (event.target === row && (event.key === 'Enter' || event.key === ' ')) { event.preventDefault(); row.click(); }
                                    });
                                    row.addEventListener('click', async () => {
                                        if (!detailContent) return;
                                        const requestId = ++detailRequest;
                                        detailContent.innerHTML = '<div>正在加载明细…</div>';
                                        try {
                                            const response = await fetch(detailUrl.replace('__GUID__', encodeURIComponent(row.dataset.guid)), {headers: {'Accept': 'application/json'}});
                                            if (!response.ok) throw new Error('明细加载失败');
                                            const payload = await response.json();
                                            if (requestId !== detailRequest) return;
                                            detailContent.innerHTML = renderDetails(payload.data || []);
                                            if (payload.has_more) detailContent.insertAdjacentHTML('beforeend', '<div class="installation-detail-empty">当前仅展示前 100 条商品明细，不代表全部。</div>');
                                        } catch (error) {
                                            if (requestId !== detailRequest) return;
                                            detailContent.innerHTML = '<div class="installation-detail-error">明细加载失败，请稍后重试</div>';
                                        }
                                    });
                                });
                            })();
                        </script>
                    @endif

                </div>

                @unless ($descriptor->readOnly)
                @if ($isStoreReceivingAccountsPage)
                <div id="biz-import-modal" class="biz-modal" onclick="if(event.target===this)bizCloseImportModal()">
                    <div class="biz-modal-card" style="max-width: 560px">
                        <div class="biz-modal-title">导入{{ $activeTab['title'] }}店铺收款账户</div>
                        <p style="margin:0 0 1rem;color:#6b7280;font-size:.8125rem">请上传当前页签格式的 Excel 文件；空 ERP 店铺名称的示例行会自动跳过。</p>
                        <form method="POST" enctype="multipart/form-data" action="{{ route('business.pages.import', [
                            'section' => $section['slug'], 'page' => $page['slug'], 'tab' => $activeTab['slug'],
                        ]) }}">
                            @csrf
                            <input class="biz-field-input" type="file" name="import" accept=".xlsx,.xls,.csv" required>
                            <div style="margin-top:.75rem">
                                <a class="biz-btn biz-btn-ghost" href="{{ route('business.pages.store-receiving-account-template', [
                                    'section' => $section['slug'], 'page' => $page['slug'], 'tab' => $activeTab['slug'],
                                ]) }}">
                                    <span class="material-icons-outlined" style="font-size:1rem">download</span>
                                    下载{{ $activeTab['title'] }}模板
                                </a>
                            </div>
                            <div class="biz-modal-foot">
                                <button type="button" class="biz-btn biz-btn-ghost" onclick="bizCloseImportModal()">取消</button>
                                <button type="submit" class="biz-btn biz-btn-primary">
                                    <span class="material-icons-outlined" style="font-size:1.1rem">upload_file</span>
                                    上传并导入
                                </button>
                            </div>
                        </form>
                    </div>
                </div>
                @endif
                {{-- Generic create/edit modal --}}
                <div id="biz-modal" class="biz-modal" onclick="if(event.target===this)bizCloseModal()">
                    <div class="biz-modal-card">
                        <div class="biz-modal-title" id="biz-modal-title">新增记录</div>
                        <form id="biz-form" method="POST" action="">
                            @csrf
                            <input type="hidden" name="_method" value="POST" id="biz-form-method">
                            <div class="biz-form-grid">
                                @foreach ($descriptor->fields as $field)
                                    <div class="{{ $field['type'] === 'textarea' ? 'full' : '' }}">
                                        <label class="biz-field-label">{{ $field['label'] }}</label>
                                        @switch($field['type'])
                                            @case('boolean')
                                                <select class="biz-field-select" name="{{ $field['name'] }}" data-default="">
                                                    <option value="0">否</option>
                                                    <option value="1">是</option>
                                                </select>
                                                @break
                                            @case('select')
                                                <select class="biz-field-select" name="{{ $field['name'] }}" data-default="">
                                                    <option value="">— 请选择 —</option>
                                                    @foreach ($field['options'] ?? [] as $opt)
                                                        <option value="{{ $opt }}">{{ $opt }}</option>
                                                    @endforeach
                                                </select>
                                                @break
                                            @case('date')
                                                <input type="date" class="biz-field-input" name="{{ $field['name'] }}" data-default="">
                                                @break
                                            @case('currency')
                                            @case('number')
                                                <input type="number" step="0.01" class="biz-field-input" name="{{ $field['name'] }}" data-default="">
                                                @break
                                            @case('textarea')
                                                <textarea class="biz-field-textarea" name="{{ $field['name'] }}" rows="3" data-default=""></textarea>
                                                @break
                                            @default
                                                <input type="text" class="biz-field-input" name="{{ $field['name'] }}" data-default="">
                                        @endswitch
                                    </div>
                                @endforeach
                            </div>
                            <div class="biz-modal-foot">
                                <button type="button" class="biz-btn biz-btn-ghost" onclick="bizCloseModal()">取消</button>
                                <button type="submit" class="biz-btn biz-btn-primary">
                                    <span class="material-icons-outlined" style="font-size:1.1rem">save</span>
                                    <span>保存</span>
                                </button>
                            </div>
                        </form>
                    </div>
                </div>

                <script>
                    window.__bizDescriptor = {
                        section: {!! json_encode($section['slug']) !!},
                        page: {!! json_encode($page['slug']) !!},
                        tab: {!! json_encode($activeTab['slug'] ?? null) !!},
                        storeUrl: "{{ route('business.pages.store', ['section' => $section['slug'], 'page' => $page['slug'], 'tab' => $activeTab['slug'] ?? null]) }}",
                        updateBase: "{{ route('business.pages.update', ['section' => $section['slug'], 'page' => $page['slug'], 'id' => '__ID__', 'tab' => $activeTab['slug'] ?? null]) }}".replace('__ID__', ''),
                        fields: {!! json_encode($descriptor->fields) !!}
                    };

                    function bizOpenModal() {
                        var m = document.getElementById('biz-modal');
                        m.classList.add('is-open');
                        document.body.style.overflow = 'hidden';
                    }

                    function bizCloseModal() {
                        var m = document.getElementById('biz-modal');
                        m.classList.remove('is-open');
                        document.body.style.overflow = '';
                    }

                    function bizOpenImportModal() {
                        var modal = document.getElementById('biz-import-modal');
                        if (!modal) return;
                        modal.classList.add('is-open');
                        document.body.style.overflow = 'hidden';
                    }

                    function bizCloseImportModal() {
                        var modal = document.getElementById('biz-import-modal');
                        if (!modal) return;
                        modal.classList.remove('is-open');
                        document.body.style.overflow = '';
                    }

                    function bizResetForm() {
                        var form = document.getElementById('biz-form');
                        form.querySelectorAll('[data-default]').forEach(function (el) {
                            el.value = el.getAttribute('data-default') || '';
                        });
                    }

                    function bizOpenCreateModal() {
                        document.getElementById('biz-modal-title').textContent = '新增记录';
                        var form = document.getElementById('biz-form');
                        form.action = window.__bizDescriptor.storeUrl;
                        document.getElementById('biz-form-method').value = 'POST';
                        bizResetForm();
                        bizOpenModal();
                    }

                    function bizOpenEditModal(rowData) {
                        document.getElementById('biz-modal-title').textContent = '编辑记录 # ' + rowData.id;
                        var form = document.getElementById('biz-form');
                        form.action = window.__bizDescriptor.updateBase + rowData.id;
                        document.getElementById('biz-form-method').value = 'PATCH';

                        form.querySelectorAll('[data-default]').forEach(function (el) {
                            var name = el.getAttribute('name');
                            var val = rowData[name] === null ? '' : rowData[name];
                            // Format dates to YYYY-MM-DD for the date input
                            if (el.type === 'date' && val) {
                                val = String(val).substr(0, 10);
                            }
                            // Booleans -> "1" / "0"
                            if (typeof val === 'boolean') {
                                val = val ? '1' : '0';
                            }
                            el.value = val;
                        });

                        bizOpenModal();
                    }

                    document.addEventListener('keydown', function (e) {
                        if (e.key === 'Escape') {
                            bizCloseModal();
                            bizCloseImportModal();
                        }
                    });
                </script>
                @endunless
            @elseif (($section['slug'] ?? null) === 'fund-management' && ($page['slug'] ?? null) === 'store-receiving-accounts')
                <section class="biz-card mt-6 business-blank-page" aria-label="店铺收款账户">
                    <div class="biz-empty">
                        <span class="material-icons-outlined" aria-hidden="true">inbox</span>
                        <div>店铺收款账户目录已清空，暂无页签和表格。</div>
                    </div>
                </section>
            @else
                <section
                    @class([
                        'biz-card mt-6',
                        'business-blank-page' => ($page['slug'] ?? null) === 'store-receiving-bills',
                    ])
                    @if (($page['slug'] ?? null) === 'store-receiving-bills') data-table-preferences-user="{{ user()->id }}" @endif
                    aria-label="{{ $activeTab['title'] ?? ($page['title'] ?? $section['title']) }}"
                >
                    <div class="biz-empty">
                        <span class="material-icons-outlined" aria-hidden="true">description</span>
                        <div>该页面暂未配置数据表，敬请期待。</div>
                    </div>
                </section>
            @endif
        </div>

        @include('business.pages.partials.finance-table-interactions')

        @if ($isMarketingAccountBillsPage)
            @push('scripts_start')
                <script src="{{ asset('public/js/business/marketing-account-bills.min.js') }}?id={{ md5_file(public_path('js/business/marketing-account-bills.min.js')) }}"></script>
            @endpush
        @elseif (($page['slug'] ?? null) === 'store-receiving-bills')
            @push('scripts_start')
                <script src="{{ asset('public/js/business/pages.min.js') }}?id={{ md5_file(public_path('js/business/pages.min.js')) }}"></script>
            @endpush
        @endif
    </x-slot>
</x-layouts.admin>