Rapport-Laravel/resources/views/adherencepobdrivereport/report.blade.php

@extends('layouts.vertical', ['page_title' => $title ?? 'Adherence Pack POB Drive'])

@section('css')
    <style>
        .pob-table-wrap {
            overflow: auto;
            max-height: 70vh;
        }

        .pob-table {
            font-size: 12px;
            white-space: nowrap;
        }

        .pob-table th,
        .pob-table td {
            vertical-align: middle;
            text-align: center;
        }

        .pob-table thead tr:nth-child(1) th {
            position: sticky;
            top: 0;
            z-index: 3;
            background: #fff;
        }

        .pob-table thead tr:nth-child(2) th {
            position: sticky;
            top: 28px;
            z-index: 2;
            background: #fff;
        }

        .pob-table thead tr th.pob-day-w {
            background: #c6efce;
            color: #000;
        }

        .pob-table td.pob-day-h,
        .pob-table thead tr th.pob-day-h {
            background: #d9d9d9;
            color: #000;
        }

        .pob-table thead tr th.pob-identity {
            background: #c00000;
            color: #fff;
        }

        .pob-table thead tr th.pob-summary {
            background: #8a1538;
            color: #fff;
        }

        .pob-table tr.pob-vacant td {
            background: #f8cbad;
            color: #000;
        }
    </style>
@endsection

@section('content')
    <div class="container-fluid">
        <div class="row">
            <div class="col-12">
                <div class="card">
                    <div class="card-body">
                        <h4 class="page-title">{{ $title }}</h4>
                        <p class="text-muted">Adherence Pack POB of at least ₹15,000. Changing the month reloads the report.</p>

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

                        <form method="get" action="{{ $base_url }}/report" id="pob-report-form" class="row g-2 align-items-end">
                            <div class="col-md-4">
                                <label for="field-month" class="form-label">Month</label>
                                <select name="month" id="field-month" class="form-select">
                                    @foreach ($months as $month)
                                        <option value="{{ $month }}"@if (($selectedMonth ?? '') === $month) selected @endif>{{ $month }}</option>
                                    @endforeach
                                </select>
                            </div>
                            <div class="col-auto">
                                <button type="submit" class="btn btn-primary" id="pob-show">Show report</button>
                            </div>
                            @if (!empty($sections))
                                <div class="col-auto">
                                    <a class="btn btn-outline-primary" href="{{ $base_url }}/export?month={{ urlencode($selectedMonth) }}">Download Excel</a>
                                </div>
                            @endif
                        </form>
                        <p class="text-muted mt-2 d-none" id="pob-loading">Loading the report. This can take a minute.</p>
                    </div>
                </div>

                @if (!empty($sections))
                    @php
                        $tabLabels = [
                            'abm' => 'Details ABM wise',
                            'region' => 'Region Daily Winners',
                            'territory' => 'Territory Daily Winners',
                        ];
                    @endphp
                    <div class="card">
                        <div class="card-body">
                            <ul class="nav nav-tabs" role="tablist">
                                @foreach ($sections as $index => $section)
                                    <li class="nav-item" role="presentation">
                                        <button class="nav-link{{ $index === 0 ? ' active' : '' }}" id="pob-tab-{{ $section['id'] }}" data-bs-toggle="tab" data-bs-target="#pob-pane-{{ $section['id'] }}" type="button" role="tab" aria-controls="pob-pane-{{ $section['id'] }}" aria-selected="{{ $index === 0 ? 'true' : 'false' }}">{{ $tabLabels[$section['id']] ?? $section['title'] }}</button>
                                    </li>
                                @endforeach
                            </ul>
                            <div class="tab-content pt-3">
                                @foreach ($sections as $index => $section)
                                    @php
                                        $firstDay = null;
                                        $lastDay = null;
                                        foreach ($section['dayTypes'] as $dayIndex => $dayType) {
                                            if ($dayType === 'W' || $dayType === 'H') {
                                                if ($firstDay === null) {
                                                    $firstDay = $dayIndex;
                                                }
                                                $lastDay = $dayIndex;
                                            }
                                        }
                                    @endphp
                                    <div class="tab-pane fade{{ $index === 0 ? ' show active' : '' }}" id="pob-pane-{{ $section['id'] }}" role="tabpanel" aria-labelledby="pob-tab-{{ $section['id'] }}">
                                        <div class="pob-table-wrap">
                                            <table class="table table-bordered table-sm pob-table mb-0">
                                                <thead>
                                                    <tr>
                                                        @foreach ($section['dayTypes'] as $dayType)
                                                            <th class="{{ $dayType === 'H' ? 'pob-day-h' : ($dayType === 'W' ? 'pob-day-w' : '') }}">{{ $dayType }}</th>
                                                        @endforeach
                                                    </tr>
                                                    <tr>
                                                        @foreach ($section['headers'] as $headerIndex => $header)
                                                            @php
                                                                $dayType = $section['dayTypes'][$headerIndex] ?? '';
                                                                $headerClass = $dayType === 'H' ? 'pob-day-h' : ($dayType === 'W' ? 'pob-day-w' : (($firstDay !== null && $headerIndex < $firstDay) ? 'pob-identity' : 'pob-summary'));
                                                            @endphp
                                                            <th class="{{ $headerClass }}">{!! nl2br(e($header)) !!}</th>
                                                        @endforeach
                                                    </tr>
                                                </thead>
                                                <tbody>
                                                    @forelse ($section['rows'] as $row)
                                                        <tr class="{{ !empty($row['vacant']) ? 'pob-vacant' : '' }}">
                                                            @foreach ($row['cells'] as $cellIndex => $cell)
                                                                @php
                                                                    $dayType = $section['dayTypes'][$cellIndex] ?? '';
                                                                    $cellClass = '';
                                                                    if (empty($row['vacant']) && ($dayType === 'H' || $cell === 'Holiday')) {
                                                                        $cellClass = 'pob-day-h';
                                                                    }
                                                                @endphp
                                                                <td class="{{ $cellClass }}">{{ $cell }}</td>
                                                            @endforeach
                                                        </tr>
                                                    @empty
                                                        <tr>
                                                            <td colspan="{{ count($section['headers']) }}">No rows for this month.</td>
                                                        </tr>
                                                    @endforelse
                                                </tbody>
                                            </table>
                                        </div>
                                    </div>
                                @endforeach
                            </div>
                        </div>
                    </div>
                @endif
            </div>
        </div>
    </div>
@endsection

@section('script')
    <script>
        document.getElementById('pob-report-form').addEventListener('submit', function () {
            document.getElementById('pob-loading').classList.remove('d-none');
            document.getElementById('pob-show').disabled = true;
        });
    </script>
@endsection