@extends('layouts.vertical', ['page_title' => $title])

@section('css')
    <style>
        .zenova-wrap {
            overflow: auto;
            max-height: calc(100vh - 220px);
        }
        .zenova-table {
            border-collapse: separate;
            border-spacing: 0;
            font-size: 12px;
            min-width: 100%;
        }
        .zenova-table th,
        .zenova-table td {
            border: 1px solid #e5e7eb;
            white-space: nowrap;
            padding: 6px 8px;
            background: #fff;
        }
        .zenova-table thead th {
            position: sticky;
            z-index: 2;
            text-align: center;
            font-weight: 600;
        }
        .zenova-table thead tr:first-child th {
            top: 0;
        }
        .zenova-table thead tr:nth-child(2) th {
            top: 34px;
        }
        .zenova-table td {
            text-align: right;
        }
        .zenova-table td.text-cell,
        .zenova-table th.text-cell {
            text-align: left;
        }
        .zenova-table tr.totals td {
            font-weight: 700;
            background: #f8f9fa;
        }
        .tone-demo { background: #fff2cc !important; }
        .tone-day { background: #ddebf7 !important; }
        .tone-yesterday { background: #e2efda !important; }
        .tone-today { background: #c6efce !important; }
        .tone-mtd { background: #fce4d6 !important; }
        .tone-ytd { background: #d9e2f3 !important; }
    </style>
@endsection

@section('content')
    <div class="container-fluid">
        <div class="row">
            <div class="col-md-6 p-2">
                <h4 class="page-title">{{ $title }}</h4>
            </div>
            <div class="col-md-6 p-2 d-flex justify-content-end align-items-center">
                <form method="get" action="/zenovareport/dashboard" class="d-flex align-items-center gap-2">
                    <label for="level" class="mb-0">Level</label>
                    <select class="form-select" name="level" id="level" style="width: 110px;" onchange="this.form.submit()">
                        @for ($option = 1; $option <= 5; $option++)
                            <option value="{{ $option }}" {{ (int) $level === $option ? 'selected' : '' }}>
                                Level {{ $option }}
                            </option>
                        @endfor
                    </select>
                    <a href="/zenovareport/export?level={{ $level }}" class="btn btn-primary">Export</a>
                </form>
            </div>
        </div>

        @if (session()->has('error'))
            <div class="alert alert-danger">{{ session()->get('error') }}</div>
        @endif
        @if (!empty($error))
            <div class="alert alert-danger">{{ $error }}</div>
        @endif

        <div class="card">
            <div class="card-body">
                <div class="zenova-wrap">
                    <table class="zenova-table">
                        <thead>
                            <tr>
                                @foreach ($groups as $group)
                                    <th class="tone-{{ $group['tone'] }}" colspan="{{ count($group['columns']) }}">
                                        {{ $group['label'] }}
                                    </th>
                                @endforeach
                            </tr>
                            <tr>
                                @foreach ($groups as $group)
                                    @foreach ($group['columns'] as $column)
                                        <th class="tone-{{ $group['tone'] }} {{ $column['type'] === 'text' ? 'text-cell' : '' }}">
                                            {{ $column['label'] }}
                                        </th>
                                    @endforeach
                                @endforeach
                            </tr>
                        </thead>
                        <tbody>
                            @forelse ($body as $line)
                                <tr>
                                    @php $cellIndex = 0; @endphp
                                    @foreach ($groups as $group)
                                        @foreach ($group['columns'] as $column)
                                            <td class="{{ $column['type'] === 'text' ? 'text-cell' : '' }}">
                                                {{ $line[$cellIndex] ?? '' }}
                                            </td>
                                            @php $cellIndex++; @endphp
                                        @endforeach
                                    @endforeach
                                </tr>
                            @empty
                                <tr>
                                    <td colspan="{{ max(1, collect($groups)->sum(fn ($group) => count($group['columns']))) }}">
                                        No positions found for this level.
                                    </td>
                                </tr>
                            @endforelse
                            @if (!empty($totals))
                                <tr class="totals">
                                    @php $cellIndex = 0; @endphp
                                    @foreach ($groups as $group)
                                        @foreach ($group['columns'] as $column)
                                            <td class="{{ $column['type'] === 'text' ? 'text-cell' : '' }}">
                                                {{ $totals[$cellIndex] ?? '' }}
                                            </td>
                                            @php $cellIndex++; @endphp
                                        @endforeach
                                    @endforeach
                                </tr>
                            @endif
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
@endsection