@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/datatables/datatables.min.css') }}" rel="stylesheet" type="text/css" />
    <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
                                $groups = $skuGroups ?? [];
                                $colCount = 1;
                                foreach ($groups as $group) {
                                    $colCount += count($group['columns'] ?? []);
                                }
                            @endphp
                            <table id="iva-sku-table" class="table table-centered table-nowrap mb-0 iva-report-table w-100">
                                <thead>
                                    <tr>
                                        <th rowspan="2" class="sticky-first-col iva-th-id">Dr Name</th>
                                        @foreach ($groups as $group)
                                            <th colspan="{{ count($group['columns']) }}"
                                                class="text-center iva-group-start {{ $group['style']['class'] ?? '' }}">{{ $group['name'] }}</th>
                                        @endforeach
                                    </tr>
                                    <tr>
                                        @foreach ($groups as $group)
                                            @foreach ($group['columns'] as $j => $col)
                                                <th class="iva-th-metric @if ($j === 0) iva-group-start @endif">
                                                    {{ $col['key'] }}
                                                </th>
                                            @endforeach
                                        @endforeach
                                    </tr>
                                </thead>
                                <tbody>
                                    @forelse ($rows as $row)
                                        <tr>
                                            <td class="sticky-first-col">{{ $row['dr_name'] }}</td>
                                            @foreach ($groups as $group)
                                                @foreach ($group['columns'] as $j => $col)
                                                    <td @if ($j === 0) class="iva-group-start" @endif>
                                                        {{ $ivaFmt($row['values'][$col['key']] ?? 0, true) }}
                                                    </td>
                                                @endforeach
                                            @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')
    <script src="{{ asset('assets/libs/datatables/datatables.min.js') }}"></script>
    @include('ivareport._scripts')
    <script>
        $(document).ready(function() {
            if ($('#iva-sku-table tbody tr').length && !$('#iva-sku-table td[colspan]').length) {
                $('#iva-sku-table').DataTable({
                    scrollX: true,
                    pageLength: 25,
                    order: [],
                    autoWidth: false
                });
            }
        });
    </script>
@endsection