<div class="section-title">{{ __('Detalle por Fase') }}</div>

@forelse($phases as $phase)
    @php
        $phaseColor = $phase['color'] ?? '#3b82f6';
        $hasDeviation = $phase['deviation_days'] !== null;
        $deviationColor = $hasDeviation && $phase['deviation_days'] > 0 ? 'text-red-600' : ($hasDeviation && $phase['deviation_days'] < 0 ? 'text-green-600' : '');
    @endphp
    <div class="phase-block mb-8" style="border-left-color: {{ $phaseColor }};">
        <div class="phase-header" style="border-left-color: {{ $phaseColor }};">
            <div>
                <div class="phase-name">{{ $phase['name'] }}</div>
                <div class="phase-meta">
                    @if($phase['planned_start'])
                        {{ $phase['planned_start'] }} &mdash; {{ $phase['planned_end'] ?? 'Sin fecha fin' }}
                    @else
                        Sin fechas planificadas
                    @endif
                    &nbsp;&bull;&nbsp; {{ $phase['features_count'] }} elementos
                    &nbsp;&bull;&nbsp; {{ $phase['completed_features'] }} completados
                </div>
            </div>
            <div style="text-align:right;">
                <div style="font-size:16px;font-weight:700;color: {{ $phaseColor }};">{{ $phase['progress_percent'] }}%</div>
                <div class="phase-progress-bar-wrap" style="margin-top:4px;width:160px;">
                    <div class="phase-progress-bar" style="width:{{ min(100, $phase['progress_percent']) }}%;background: {{ $phaseColor }};"></div>
                </div>
                <div class="phase-meta" style="margin-top:4px;">
                    Plan: {{ $phase['planned_progress'] }}% &nbsp;|&nbsp; 
                    @if($hasDeviation)
                        <span class="{{ $deviationColor }}">
                            {{ $phase['deviation_days'] > 0 ? '+' : '' }}{{ $phase['deviation_days'] }}d
                        </span>
                    @endif
                    @if($phase['spi'] !== null)
                        &nbsp;|&nbsp; SPI: {{ $phase['spi'] }}
                    @endif
                </div>
            </div>
        </div>

        @if(!empty($phase['layers']))
            <div class="p-4">
                <table class="w-full text-sm">
                    <thead>
                        <tr class="bg-gray-50">
                            <th class="text-left p-2">{{ __('Capa') }}</th>
                            <th class="text-left p-2">{{ __('Elementos') }}</th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach($phase['layers'] as $layer)
                        <tr class="border-t">
                            <td class="p-2">{{ $layer['name'] }}</td>
                            <td class="p-2">{{ $layer['features_count'] }}</td>
                        </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>
        @endif
    </div>
@empty
    <div class="text-center text-gray-400 py-8">
        <p>{{ __('No hay fases registradas en este proyecto.') }}</p>
    </div>
@endforelse