@php
    $hasStatus6 = $project->statuses->contains('status', 6);
@endphp
@if ($hasStatus6)
    <div class="doc-container mt-2">
        <div class="row gy-2 gx-2 align-items-center">
            <div class="col-auto">
                <label class="" for="inlineFormInputGroup">Consumer
                    No.</label>
                <input type="text" class="form-control w-auto consumer-input" id="property_input"
                    placeholder="Consumer No" value="{{ $docs->consumer_no ?? '' }}" />
            </div>

            @php
                $structureUse = $surveys->structure_use;
                $status = null;

                if ($structureUse == '1') {
                    $residential = $surveys->SurveyUserResidential->first();
                    $status = $residential?->updated_status;
                } elseif ($structureUse == '2') {
                    $commercial = $surveys->surveyUserCommercial->first();
                    $status = $commercial?->updated_status;
                } elseif ($structureUse == '3') {
                    $residential = $surveys->SurveyUserResidential->first();
                    $status = $residential?->updated_status;
                } elseif ($structureUse == '4') {
                    $other = $surveys->surveyUserOthers->first();
                    $status = $other?->updated_status;
                }
            @endphp
            @php
                $hasStatus6 = $project->statuses->contains('status', 6);
            @endphp

            @if ($status == 'pending' && $hasStatus6)
                <div class="col-auto">
                    <button class="btn btn-sm btn-primary fetch-property-btn" data-docid="{{ $docs->id }}">Fetch
                        Data</button>
                </div>
            @endif

        </div>
    </div>


    {{-- Consumer Input --}}

    <div class="mt-2 consumer-box" id="consumer-box-{{ $docs->id }}">

        @if ($docs->api_response)
            @php
                $savedData = json_decode($docs->api_response, true);
                $provider = $docs->provider ?? null;
                $keysToSkip = ['consumptions', 'internalNotes', 'extraData', 'rawJson'];
                $dataArray = [];
                $columns = [];

                if (is_array($savedData)) {
                    $dataArray = $savedData;
                    if ($provider === 'Property') {
                        $columns = array_keys(array_diff_key($dataArray[0] ?? [], array_flip($keysToSkip)));
                    } else {
                        $columns = array_keys($dataArray[0] ?? []);
                    }
                }
            @endphp

            @if (!empty($dataArray))
                <div class="result-box mt-3" id="property-result-box">
                    <div class="table-responsive mt-3" style="max-height: 300px; overflow: auto;">
                        <table class="table table-bordered table-striped table-sm">
                            <thead>
                                <tr>
                                    @foreach ($columns as $col)
                                        <th>{{ $col }}</th>
                                    @endforeach
                                </tr>
                            </thead>
                            <tbody>
                                @foreach ($dataArray as $row)
                                    <tr>
                                        @foreach ($columns as $col)
                                            @php
                                                $val = $row[$col] ?? '-';
                                                if (
                                                    $val === '9999-12-31' ||
                                                    $val === '1900-01-01T00:00:00' ||
                                                    $val === '9999-12-31T00:00:00Z'
                                                ) {
                                                    $val = '';
                                                }
                                            @endphp
                                            <td>{{ $val !== '' ? $val : '' }}
                                            </td>
                                        @endforeach
                                    </tr>
                                @endforeach
                            </tbody>
                        </table>
                    </div>
                </div>
            @else
                <div class="text-danger mt-3">No valid data to display.
                </div>
            @endif
        @else
            <div class="result-box mt-3" id="property-result-box"></div>
        @endif

        @php
            $display = 'display:none;';
            if (
                !is_null($docs->api_response)
                //  && is_null($docs->remarks)
            ) {
                $display = '';
            }
        @endphp

        @php
            $structureUse = $surveys->structure_use;
            $status = null;

            if ($structureUse == '1') {
                $residential = $surveys->SurveyUserResidential->first();
                $status = $residential?->updated_status;
            } elseif ($structureUse == '2') {
                $commercial = $surveys->surveyUserCommercial->first();
                $status = $commercial?->updated_status;
            } elseif ($structureUse == '3') {
                $residential = $surveys->SurveyUserResidential->first();
                $status = $residential?->updated_status;
            } elseif ($structureUse == '4') {
                $other = $surveys->surveyUserOthers->first();
                $status = $other?->updated_status;
            }
        @endphp
        @if ($status == 'pending')
            <div class="mt-3 action-section" id="property-verification-box" {{-- style="{{ $display }}" --}}>
                <label>Remarks <span class="text-danger">*</span>:</label>
                <textarea class="form-control remarks-input" id="property_remark" rows="2" placeholder="Enter remarks here...">{{ $docs->remarks }}</textarea>

                <div class="mt-2">
                    <button class="btn btn-success btn-sm accept-property-btn"
                        data-docId="{{ $docs->id }}">Accept</button>
                    <button class="btn btn-danger btn-sm reject-property-btn"
                        data-docId="{{ $docs->id }}">Reject</button>
                </div>
            </div>
        @endif

    </div>
@endif

@push('scripts')
    <script>
        const providersAPIs = {
            'Property': '{{ route('propertyApi') }}',
        };

        // 🚀 Main Fetch Handler
        $(document).on('click', '.fetch-property-btn', function() {
            let $_this = $(this);
            let consumerNo = $('#property_input').val().trim();
            let docId = $_this.data('docid');
            let resultArea = $('#property-result-box');

            if (!consumerNo) {
                alert('Please enter consumer number.');
                return;
            }

            const provider = 'Property'; // or dynamically set this

            const apiUrl = providersAPIs[provider];
            $_this.text('Fetching...').prop('disabled', true);

            $.ajax({
                url: apiUrl,
                method: 'POST',
                data: {
                    AccountNo: consumerNo,
                    docId: docId,
                    provider: provider,
                    _token: $('meta[name="csrf-token"]').attr('content')
                },
                success: function(response) {
                    console.log(response);

                    const html = renderProvidersTable(response, provider);
                    resultArea.html(html);
                    $('#property-verification-box').show();
                },
                error: function(xhr) {
                    let msg = 'Failed to fetch data';
                    if (xhr.responseJSON?.error) {
                        msg = xhr.responseJSON.error;
                    }
                    alert(msg);
                    console.error(xhr.responseText);
                },
                complete: function() {
                    $_this.text('Fetch Data').prop('disabled', false);
                }
            });

        });

        const rendersStrategies = {
            'Property': function(data) {
                const cleanedData = Array.isArray(data?.records) ? data.records : [];
                return generateTable(cleanedData, 'Property');
            },
        };

        function renderProvidersTable(data, provider) {
            const strategy = rendersStrategies[provider];

            if (typeof strategy === 'function') {
                return strategy(data); // Use specific render logic
            }

            // Default fallback for simple arrays
            if (!Array.isArray(data) || data.length === 0) {
                return '<div class="text-danger">No valid data to display.</div>';
            }

            return generateTable(data, provider); // Generic table render
        }

        function generateTable(dataArray, provider) {
            if (!Array.isArray(dataArray) || dataArray.length === 0) {
                return '<div class="text-danger">No valid data to display.</div>';
            }

            let keys = Object.keys(dataArray[0]);

            let html = `<div class="table-responsive mt-3" style="max-height:300px; overflow:auto;">
        <table class="table table-bordered table-striped table-sm">
        <thead><tr>`;

            keys.forEach(k => {
                html += `<th>${k}</th>`;
            });

            html += `</tr></thead><tbody>`;

            dataArray.forEach(row => {
                html += `<tr>`;
                keys.forEach(k => {
                    let value = row[k];
                    if (value === "9999-12-31" || value === "1900-01-01T00:00:00" || value ===
                        "9999-12-31T00:00:00Z") value = '';
                    html +=
                        `<td>${(value !== null && value !== undefined && value !== '') ? value : ''}</td>`;
                });
                html += `</tr>`;
            });

            html += `</tbody></table></div>`;
            return html;
        }
        // Accept / Reject buttons
        $(document).on('click', '.accept-property-btn, .reject-property-btn', function() {
            let $_this = $(this);
            const docId = $_this.data('docid');
            const remarks = $('#property_remark').val().trim();
            const status = $_this.hasClass('accept-property-btn') ? 'accepted' : 'rejected';

            if (!remarks) {
                alert("Please enter remarks before proceeding.");
                return;
            }
            $.ajax({
                url: '{{ route('storeApiResult') }}',
                method: 'POST',
                data: {
                    _token: $('meta[name="csrf-token"]').attr('content'),
                    document_id: docId,
                    remarks: remarks,
                    status: status,

                },
                success: function(res) {
                    alert("Remarks added successfully!");
                    location.reload();
                },
                error: function(xhr) {
                    console.error(xhr.responseText);
                    alert("Something went wrong!");
                }
            });
        });
    </script>
@endpush