@extends(($isMobile ?? false) ? 'layouts.vertical-individual' : 'layouts.vertical', ['page_title' => $title])

@section('css')
    @if (!empty($isMobile))
        <meta name="viewport" content="width=device-width, initial-scale=1">
    @endif
    <link href="{{ asset('assets/libs/select2/select2.min.css') }}" rel="stylesheet" type="text/css" />
@endsection

@section('content')
    <div class="container-fluid{{ !empty($isMobile) ? ' iva-mobile' : '' }}">
        <div class="row">
            <div class="col-md-4 p-2">
                @if (!empty($isMobile))
                    <a href="{{ $mobileBackUrl }}" class="iva-mobile-back">&larr; Back</a>
                @endif
                <h4 class="page-title">{{ $title }}</h4>
            </div>
            <div class="col-md-8 p-2 d-flex justify-content-end align-items-center">
                @include('ivareport._filters')
            </div>
        </div>

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

        @if (empty($isMobile))
            @include('ivareport._tabs')
        @endif

        <div class="row">
            <div class="col-12">
                <div class="card">
                    @include('ivareport._export_header')
                    <div class="card-body">
                        <div class="iva-report-scroll">
                            @php
                                $brandColumns = $brandColumns ?? [];
                                $colCount = 3 + count($brandColumns);
                            @endphp
                            <table class="table table-centered table-nowrap mb-0 iva-report-table">
                                <thead>
                                    <tr>
                                        <th class="sticky-first-col iva-th-id">Territory</th>
                                        <th class="iva-th-id">KAM Name</th>
                                        <th class="iva-th-metric">Total Brand POB Val</th>
                                        @foreach ($brandColumns as $col)
                                            <th class="iva-th-metric">{{ $col['key'] }}</th>
                                        @endforeach
                                    </tr>
                                </thead>
                                <tbody>
                                    @forelse ($rows as $row)
                                        <tr>
                                            <td class="sticky-first-col">{{ $row['territory'] }}</td>
                                            <td>{{ $row['kam_name'] }}</td>
                                            <td>{{ $ivaFmt($row['total'] ?? 0) }}</td>
                                            @foreach ($brandColumns as $col)
                                                <td>{{ $ivaFmt($row['values'][$col['key']] ?? 0) }}</td>
                                            @endforeach
                                        </tr>
                                    @empty
                                        <tr>
                                            <td colspan="{{ max(1, $colCount) }}" class="text-center text-muted py-3">
                                                No data
                                            </td>
                                        </tr>
                                    @endforelse
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    @include('ivareport._styles')
    @if (!empty($isMobile))
        @include('ivareport._mobile')
    @endif
@endsection

@section('script')
    @include('ivareport._scripts')
@endsection