@props(['videoResult' => null])

@if(!empty($videoResult) && !empty($videoResult['results']))
    @php
        $rightResults = $videoResult['results']['right'] ?? [];
        $leftResults = $videoResult['results']['left'] ?? [];
    @endphp
    
    <div class="results-section">
        <div class="results-grid">
            <!-- Tabla del ojo derecho -->
            <div class="eye-results">
                <div class="table-container">
                    <table class="modern-table">
                        <thead>
                            <tr>
                                <th colspan="3" class="eye-header">
                                    @if(!empty($videoResult['images']) && !empty($videoResult['images']['right_eye']))
                                        <img class="eye-thumbnail" src="data:image/png;base64,{{ $videoResult['images']['right_eye'] }}" alt="Right eye">
                                    @endif
                                    <span>{{ __('all.right_eye') }}</span>
                                </th>
                            </tr>
                            <tr class="table-subheader">
                                <th>{{ __('all.type') }}</th>
                                <th class="text-center">{{ __('all.darkness') }}</th>
                                <th class="text-center">{{ __('all.color') }}</th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach($rightResults as $key => $result)
                                <tr>
                                    <td class="type-cell">{{$key}}</td>
                                    <td class="value-cell {{ $result['darkness'] < 0 ? 'negative-value' : 'positive-value' }}">
                                        {{number_format($result['darkness'], 2)}}%
                                    </td>
                                    <td class="value-cell">
                                        {{ $result['color'] ? __('all.color_blue_purple') : __('all.color_brown_dark') }}
                                    </td>
                                </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>
            </div>

            <!-- Tabla del ojo izquierdo -->
            <div class="eye-results">
                <div class="table-container">
                    <table class="modern-table">
                        <thead>
                            <tr>
                                <th colspan="3" class="eye-header">
                                    @if(!empty($videoResult['images']) && !empty($videoResult['images']['left_eye']))
                                        <img class="eye-thumbnail" src="data:image/png;base64,{{ $videoResult['images']['left_eye'] }}" alt="Left eye">
                                    @endif
                                    <span>{{ __('all.left_eye') }}</span>
                                </th>
                            </tr>
                            <tr class="table-subheader">
                                <th>{{ __('all.type') }}</th>
                                <th class="text-center">{{ __('all.darkness') }}</th>
                                <th class="text-center">{{ __('all.color') }}</th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach($leftResults as $key => $result)
                                <tr>
                                    <td class="type-cell">{{$key}}</td>
                                    <td class="value-cell {{ $result['darkness'] < 0 ? 'negative-value' : 'positive-value' }}">
                                        {{number_format($result['darkness'], 2)}}%
                                    </td>
                                    <td class="value-cell">
                                        {{ $result['color'] ? __('all.color_blue_purple') : __('all.color_brown_dark') }}
                                    </td>
                                </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
@endif