@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;
            height: 56px;
        }
        .zenova-table thead tr:nth-child(2) th {
            top: 56px;
        }
        .zenova-table thead tr:nth-child(2) th.sticky-zone,
        .zenova-table tbody td.sticky-zone {
            position: sticky;
            left: 0;
            min-width: 160px;
            width: 160px;
            background: #fff;
        }
        .zenova-table thead tr:nth-child(2) th.sticky-region,
        .zenova-table tbody td.sticky-region {
            position: sticky;
            left: 160px;
            min-width: 160px;
            width: 160px;
            background: #fff;
            box-shadow: 2px 0 0 #e5e7eb;
        }
        .zenova-table tbody td.sticky-zone,
        .zenova-table tbody td.sticky-region {
            z-index: 1;
        }
        .zenova-table tr.totals td.sticky-zone,
        .zenova-table tr.totals td.sticky-region {
            background: #f8f9fa;
        }
        .zenova-table thead tr:first-child th.sticky-group {
            position: sticky;
            left: 0;
            z-index: 6;
            min-width: 320px;
            white-space: normal;
            box-shadow: 2px 0 0 #e5e7eb;
        }
        .zenova-table thead th.sticky-zone,
        .zenova-table thead th.sticky-region {
            z-index: 5;
        }
        .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-12 p-2 d-flex flex-wrap justify-content-between align-items-center gap-2">
                <h4 class="page-title mb-0">{{ $title }}</h4>
                <form method="get" action="/zenovareport/dashboard" class="d-flex flex-wrap align-items-center gap-2">
                    <label for="month" class="mb-0">Month</label>
                    <select class="form-select" name="month" id="month" style="width: 160px;" onchange="this.form.submit()">
                        @foreach ($months as $value => $label)
                            <option value="{{ $value }}" {{ $month === $value ? 'selected' : '' }}>{{ $label }}</option>
                        @endforeach
                    </select>
                    <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/dashboard?level={{ $level }}&month={{ $month }}" class="btn btn-outline-secondary">Refresh</a>
                    <a href="/zenovareport/export?level={{ $level }}&month={{ $month }}" class="btn btn-primary">Export</a>
                </form>
            </div>
            <div class="col-12 px-2">
                <p class="text-muted mb-2">Please refresh before downloading the latest report.</p>
            </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)
                                    @php
                                        $stickyCount = 0;
                                        foreach ($group['columns'] as $column) {
                                            if (!empty($column['sticky'])) {
                                                $stickyCount++;
                                            }
                                        }
                                        $scrollCount = count($group['columns']) - $stickyCount;
                                    @endphp
                                    @if ($stickyCount > 0)
                                        <th class="tone-{{ $group['tone'] }} sticky-group" colspan="{{ $stickyCount }}">
                                            {{ $group['label'] }}
                                        </th>
                                    @endif
                                    @if ($scrollCount > 0)
                                        <th class="tone-{{ $group['tone'] }}" colspan="{{ $scrollCount }}">
                                            {{ $stickyCount > 0 ? '' : $group['label'] }}
                                        </th>
                                    @endif
                                @endforeach
                            </tr>
                            <tr>
                                @foreach ($groups as $group)
                                    @foreach ($group['columns'] as $column)
                                        <th class="tone-{{ $group['tone'] }} {{ $column['type'] === 'text' ? 'text-cell' : '' }} {{ !empty($column['sticky']) ? 'sticky-'.$column['sticky'] : '' }}">
                                            {{ $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' : '' }} {{ !empty($column['sticky']) ? 'sticky-'.$column['sticky'] : '' }}">
                                                {{ $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' : '' }} {{ !empty($column['sticky']) ? 'sticky-'.$column['sticky'] : '' }}">
                                                {{ $totals[$cellIndex] ?? '' }}
                                            </td>
                                            @php $cellIndex++; @endphp
                                        @endforeach
                                    @endforeach
                                </tr>
                            @endif
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
@endsection