<x-filament-panels::page>
    @php $data = $this->data(); @endphp

    <style>
        .wl-bar { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
        .wl-btn {
            padding: 6px 12px; border: 1px solid #e5e7eb; border-radius: 6px;
            background: #fff; cursor: pointer; font-size: 13px;
        }
        .dark .wl-btn { background: #1f2937; border-color: #374151; color: #d1d5db; }
        .wl-week { font-weight: 600; font-size: 14px; }

        .wl-card { background: #fff; border: 1px solid #e5e7eb; border-radius: 10px; padding: 16px; overflow-x: auto; }
        .dark .wl-card { background: #1f2937; border-color: #374151; }

        .wl-tbl { width: 100%; border-collapse: separate; border-spacing: 4px; }
        .wl-tbl th, .wl-tbl td { padding: 8px; text-align: center; font-size: 12px; vertical-align: middle; }
        .wl-tbl th:first-child, .wl-tbl td:first-child { text-align: left; min-width: 120px; }
        .wl-cell {
            border-radius: 6px; padding: 12px 4px;
            font-weight: 600; min-height: 56px;
            display: flex; flex-direction: column; align-items: center; justify-content: center;
        }
        .wl-hours { font-size: 14px; }
        .wl-count { font-size: 10px; opacity: .85; margin-top: 2px; }

        .wl-legend { display: flex; align-items: center; gap: 6px; font-size: 11px; color: #6b7280; margin-top: 12px; }
        .wl-sw { display: inline-block; width: 16px; height: 12px; border-radius: 3px; }
    </style>

    <div class="wl-bar">
        <button class="wl-btn" wire:click="setWeek(-1)">← Săpt. anterioară</button>
        <span class="wl-week">{{ $data['weekLabel'] }}</span>
        <button class="wl-btn" wire:click="setWeek(1)">Săpt. următoare →</button>
        <span style="margin-left:auto;font-size:11px;color:#6b7280;">capacitate ref: {{ $data['capacity'] }}h/zi</span>
    </div>

    <div class="wl-card">
        <table class="wl-tbl">
            <thead>
                <tr>
                    <th></th>
                    @foreach ($data['days'] as $d)
                        <th>{{ $d->translatedFormat('D') }}<br><span style="color:#9ca3af;font-weight:400;">{{ $d->format('d.m') }}</span></th>
                    @endforeach
                </tr>
            </thead>
            <tbody>
                @foreach ($data['matrix'] as $row)
                    <tr>
                        <td style="font-weight:600;">
                            <div style="display:flex;align-items:center;gap:8px;">
                                <span style="width:12px;height:12px;border-radius:3px;background:{{ $row['post']->color ?? '#9ca3af' }};display:inline-block;"></span>
                                {{ $row['post']->name }}
                            </div>
                        </td>
                        @foreach ($row['days'] as $cell)
                            @php
                                $h = (float) $cell['hours'];
                                $ratio = min(1, $h / max(0.001, $data['capacity']));
                                // Heatmap color: green → yellow → red as ratio grows.
                                if ($h <= 0) {
                                    $bg = '#f3f4f6'; $fg = '#9ca3af';
                                } else {
                                    $r = (int) (255 * $ratio);
                                    $g = (int) (200 * (1 - $ratio));
                                    $bg = "rgba({$r},{$g},80,0.18)";
                                    $fg = "rgba({$r},{$g},80,1)";
                                }
                            @endphp
                            <td>
                                <div class="wl-cell" style="background:{{ $bg }};color:{{ $fg }};">
                                    @if ($h > 0)
                                        <span class="wl-hours">{{ number_format($h, 1) }}h</span>
                                        <span class="wl-count">{{ $cell['count'] }} progr.</span>
                                    @else
                                        <span style="color:#d1d5db;">—</span>
                                    @endif
                                </div>
                            </td>
                        @endforeach
                    </tr>
                @endforeach
            </tbody>
        </table>
        <div class="wl-legend">
            Legendă:
            <span class="wl-sw" style="background:#f3f4f6;"></span> liber
            <span class="wl-sw" style="background:rgba(64,200,80,0.3);"></span> ușor
            <span class="wl-sw" style="background:rgba(160,160,80,0.3);"></span> mediu
            <span class="wl-sw" style="background:rgba(255,80,80,0.3);"></span> plin (peste capacitate)
        </div>
    </div>
</x-filament-panels::page>
