@php
    $title = $data['title'] ?? '';
    $subtitle = $data['subtitle'] ?? '';
    $tableTitle = $data['table_title'] ?? '';
    $tableTitleBg = $data['table_title_bg_color'] ?? '#333333';
    $tableTitleText = $data['table_title_text_color'] ?? '#ffffff';
    $tableTitleAlign = $data['table_title_alignment'] ?? 'center';
    $tableContent = $data['table_content'] ?? '';
    $hasHeader = isset($data['has_header']) ? (bool)$data['has_header'] : true;
    $striped = isset($data['striped']) ? (bool)$data['striped'] : true;
    $showSearch = isset($data['show_search']) ? (bool)$data['show_search'] : true;
    $searchPosition = $data['search_position'] ?? 'right';
    $textAlignment = $data['text_alignment'] ?? 'center';
    $tableWidth = $data['table_width'] ?? '100%';
    if ($tableWidth === 'custom') {
        $tableWidth = ($data['table_width_custom'] ?? '100') . '%';
    }
    $colWidths = $data['column_widths'] ?? [];
    $sectionId = $section['id'] ?? uniqid();

    // Processamento do conteúdo TSV com suporte a multi-linha (fgetcsv)
    $tableData = [];
    $stream = fopen('php://temp', 'r+');
    fwrite($stream, $tableContent);
    rewind($stream);
    while (($row = fgetcsv($stream, 0, "\t")) !== false) {
        if (count($row) === 1 && $row[0] === null) continue;
        $tableData[] = $row;
    }
    fclose($stream);

    $alignClass = 'text-center';
    if ($textAlignment === 'left') $alignClass = 'text-left';
    if ($textAlignment === 'right') $alignClass = 'text-right';

    $searchJustify = 'pull-right';
    if ($searchPosition === 'left') $searchJustify = 'pull-left';
    if ($searchPosition === 'center') $searchJustify = 'text-center';

    // Função para converter URLs em links clicáveis de forma segura
    $linkify = function($text) {
        $text = e($text); // Escape XSS primeiro
        $pattern = '/(https?:\/\/[^\s]+)/i';
        $replacement = '<a href="$1" target="_blank" style="color: var(--tenant-primary); text-decoration: underline; font-weight: bold;">$1</a>';
        return preg_replace($pattern, $replacement, $text);
    };
@endphp

<section class="ftco-section" style="padding-top: 48px; padding-bottom: 48px; background-color: #fff;" id="section-{{ $sectionId }}" aria-labelledby="title-{{ $sectionId }}">
    <div class="container">
        @if($title || $subtitle)
            <header class="row text-center" style="margin-bottom: 48px;">
                <div class="col-md-8 col-md-offset-2 ftco-animate">
                    @if($title)
                        <h2 id="title-{{ $sectionId }}" style="font-size: 36px; font-weight: bold; color: var(--tenant-primary);">{{ $title }}</h2>
                    @endif
                    @if($subtitle)
                        <p style="margin-top: 16px; font-size: 18px; opacity: 0.8;">{{ $subtitle }}</p>
                    @endif
                </div>
            </header>
        @endif

        <div class="table-container ftco-animate" style="max-width: {{ $tableWidth }}; margin: 0 auto;">
            @if($showSearch)
                <div class="row no-gutters" style="text-align: {{ $searchJustify == 'text-center' ? 'center' : ($searchJustify == 'pull-right' ? 'right' : 'left') }};">
                    <div class="col-md-5" style="display: inline-block; {{ $searchJustify == 'text-center' ? 'float: none;' : '' }}">
                        <div class="search-wrapper" role="search" aria-label="Busca na tabela">
                            <label for="search-{{ $sectionId }}" class="visually-hidden">Pesquisar na tabela de {{ $tableTitle ?: $title }}</label>
                            <i class="fa fa-search" style="position: absolute; left: 15px; top: 50%; transform: translateY(-50%); color: var(--tenant-primary); z-index: 10;" aria-hidden="true"></i>
                            <input type="text" id="search-{{ $sectionId }}" class="form-control table-search-input" 
                                   placeholder="Pesquisar..." 
                                   aria-controls="table-{{ $sectionId }}"
                                   aria-describedby="search-help-{{ $sectionId }}"
                                   style="border-radius: 8px 8px 0 0; padding-left: 40px; padding-right: 45px; height: 45px; border: 1px solid #dee2e6; border-bottom: 1px solid #eee; box-shadow: none; transition: 0.3s; background: #fdfdfd; color: #212529;">
                            <style>
                                #search-{{ $sectionId }}::placeholder { color: #6c757d; opacity: 1; }
                            </style>
                            <span id="search-help-{{ $sectionId }}" class="visually-hidden">A tabela abaixo será filtrada automaticamente conforme você digita.</span>
                            <button class="btn btn-clear" type="button" aria-label="Limpar campo de pesquisa" 
                                    style="position: absolute; right: 5px; top: 50%; transform: translateY(-50%); background: none; border: none; color: #ccc; z-index: 10; padding: 10px;">
                                <i class="bi bi-x-lg-circle" aria-hidden="true"></i>
                            </button>
                        </div>
                    </div>
                </div>
            @endif

            @if($tableTitle)
                <div class="table-title-line" role="heading" aria-level="3" style="background-color: {{ $tableTitleBg }}; color: {{ $tableTitleText }}; text-align: {{ $tableTitleAlign }}; padding: 15px; font-weight: bold; font-size: 18px; border: 1px solid #eee; {{ $showSearch ? 'border-top: none;' : '' }} border-bottom: none;">
                    {{ $tableTitle }}
                </div>
            @endif

            <div class="table-responsive {{ $alignClass }}" style="border-radius: 0 0 12px 12px; border: 1px solid #eee; box-shadow: 0 5px 15px rgba(0,0,0,0.05); overflow: hidden;">
                @if(!$showSearch && !$tableTitle)
                    <style>#section-{{ $sectionId }} .table-responsive { border-radius: 12px; }</style>
                @endif
                <table id="table-{{ $sectionId }}" class="table {{ $striped ? 'table-striped' : '' }}" style="width: 100%; margin-bottom: 0; border-collapse: collapse;">
                    <caption class="visually-hidden">{{ $tableTitle ?: ($title ?: 'Tabela interativa') }}</caption>
                    @if($hasHeader && count($tableData) > 0)
                        @php $headerRow = array_shift($tableData); @endphp
                        <thead>
                            <tr style="background-color: var(--tenant-primary);">
                                @foreach($headerRow as $cIdx => $col)
                                    @php $w = $colWidths[$cIdx] ?? null; @endphp
                                    <th scope="col" style="color: #fff; border: none; border-bottom: 2px solid #a00e14; font-weight: bold; vertical-align: middle; padding: 15px; word-break: break-word; overflow-wrap: break-word; white-space: pre-wrap; {{ $w ? "width: {$w}%; min-width: {$w}%;" : '' }}">{{ $col }}</th>
                                @endforeach
                            </tr>
                        </thead>
                    @endif
                    <tbody aria-live="polite" style="color: #212529;">
                        @forelse($tableData as $rowIndex => $rowData)
                            <tr class="table-row">
                                @foreach($rowData as $cIdx => $col)
                                    @php $w = $colWidths[$cIdx] ?? null; @endphp
                                    <td style="border: 1px solid #dee2e6; vertical-align: middle; padding: 12px 15px; word-break: break-word; overflow-wrap: break-word; white-space: pre-wrap; {{ $w ? "width: {$w}%; min-width: {$w}%;" : '' }}">{!! $linkify($col) !!}</td>
                                @endforeach
                            </tr>
                        @empty
                            <tr>
                                <td colspan="100%" class="text-center" style="padding-top: 48px; padding-bottom: 48px;">
                                    <div style="padding-top: 16px; padding-bottom: 16px;">
                                        <i class="bi bi-info-circle-fill fa-3x" style="color: #eee; margin-bottom: 16px;" aria-hidden="true"></i>
                                        <p class="text-muted">Nenhum dado disponível na tabela.</p>
                                    </div>
                                </td>
                            </tr>
                        @endforelse
                    </tbody>
                </table>
            </div>
            
            <div class="no-results-msg text-center" style="padding-top: 24px; padding-bottom: 24px; display: none;" role="status" aria-live="assertive">
                <p class="text-muted"><i class="bi bi-info-circle-fill" aria-hidden="true"></i> Nenhum registro encontrado para sua busca.</p>
            </div>
        </div>
    </div>
</section>

<style>
    .table-container .btn-primary { background-color: var(--tenant-primary); border-color: var(--tenant-primary); }
    .table-container .btn-primary:hover { background-color: var(--tenant-primary); border-color: var(--tenant-primary); }
    .table-container .table { border-collapse: separate; border-spacing: 0; }
    .table-container .table th, .table-container .table td { vertical-align: middle; }
</style>

<script>
    (function() {
        const sectionId = '{{ $sectionId }}';
        const $searchInput = document.getElementById('search-' + sectionId);
        if (!$searchInput) return;

        const $table = document.getElementById('table-' + sectionId);
        const $tbody = $table.querySelector('tbody');
        const $rows = $tbody.querySelectorAll('tr.table-row');
        const $noResults = document.querySelector('#section-' + sectionId + ' .no-results-msg');
        const $btnClear = document.querySelector('#section-' + sectionId + ' .btn-clear');
        
        // Pré-indexação para busca rápida (Cache local dos dados para busca O(1) pattern)
        const rowData = Array.from($rows).map(row => {
            const cellTexts = Array.from(row.querySelectorAll('td')).map(td => td.textContent.trim());
            return {
                el: row,
                content: cellTexts.join(' ').toLowerCase(),
                searchableArray: cellTexts.map(t => t.toLowerCase())
            };
        });

        let debounceTimer;

        function filterTable() {
            const searchTerm = $searchInput.value.trim().toLowerCase();
            
            if (searchTerm === '') {
                rowData.forEach(row => row.el.style.display = '');
                $noResults.style.display = 'none';
                $tbody.style.display = '';
                $btnClear.style.opacity = '0';
                return;
            }

            $btnClear.style.opacity = '1';

            const searchTerms = searchTerm.split(/\s+/);
            let visibleCount = 0;

            rowData.forEach(row => {
                // A linha é visível se TODOS os termos da busca forem encontrados em QUALQUER coluna
                const isVisible = searchTerms.every(term => {
                    // Tenta busca via Regex se o termo parecer uma, senão busca literal
                    try {
                        const regex = new RegExp(term, 'i');
                        return regex.test(row.content);
                    } catch (e) {
                        return row.content.indexOf(term) !== -1;
                    }
                });

                row.el.style.display = isVisible ? '' : 'none';
                if (isVisible) visibleCount++;
            });

            if (visibleCount === 0) {
                $tbody.style.display = 'none';
                $noResults.style.display = 'block';
            } else {
                $tbody.style.display = '';
                $noResults.style.display = 'none';
            }
        }

        $searchInput.addEventListener('input', function() {
            clearTimeout(debounceTimer);
            debounceTimer = setTimeout(filterTable, 200);
        });

        $btnClear.addEventListener('click', function() {
            $searchInput.value = '';
            filterTable();
            $searchInput.focus();
        });
        
        // Estilo inicial do botão limpar
        $btnClear.style.opacity = '0';
        $btnClear.style.transition = '0.3s';
        
        // Suporte ao botão "Enter"
        $searchInput.addEventListener('keypress', function(e) {
            if (e.key === 'Enter') {
                e.preventDefault();
                clearTimeout(debounceTimer);
                filterTable();
            }
        });
    })();
</script>