@extends('layout.app')

@section('head')
    <style>
        /* Vertical scroll happens inside this wrapper so the header and the total
           row can stick to it. */
        .pop-summary-wrap {
            max-height: calc(100vh - 260px);
            overflow: auto;
            position: relative;
        }

        .pop-summary-wrap table {
            margin-bottom: 0;
        }

        #popSummaryTable thead th,
        #popSummaryTable tfoot td {
            position: sticky;
            z-index: 10;
            /* Opaque: rows scroll underneath, and table-striped shows through otherwise. */
            background: #78716c !important;
            color: #fff !important;
            /* border-collapse drops a sticky cell's borders once it detaches,
               so they are drawn as insets instead. */
            box-shadow: inset 0 1px 0 #8d857f, inset 0 -1px 0 #8d857f;
        }

        #popSummaryTable thead th {
            top: 0;
        }

        #popSummaryTable tfoot td {
            bottom: 0;
        }
    </style>
@endsection

@section('content')
    <div class="container-fluid">
        <div class="card">
            <div class="card-header">
                <h3 class="card-title">New Join Summary Report (by POP)</h3>
                <div class="card-tools">
                    <span class="text-muted">From {{ $from_date }} to {{ $to_date }}</span>
                    <button type="button" class="btn btn-sm btn-primary ml-2 noprint" onclick="window.print()">
                        <i class="fa fa-print"></i> Print
                    </button>
                    <a href="{{ route('newJoinSummaryReportByPop') . '?' . http_build_query(array_merge(request()->query(), ['download' => 'excel'])) }}"
                        class="btn btn-sm btn-success ml-2 noprint">
                        <i class="fa fa-file-excel-o"></i> Download Excel
                    </a>
                    <a href="{{ route('list', 'new-join') }}" class="btn btn-sm btn-secondary ml-1 noprint">
                        <i class="fa fa-arrow-left"></i> Back to List
                    </a>
                </div>
            </div>
            <div class="card-body">
                <div class="pop-summary-wrap">
                    <table class="table table-bordered table-striped" id="popSummaryTable">
                        <thead>
                            <tr>
                                <th>#</th>
                                <th>POP</th>
                                <th>Total User</th>
                            </tr>
                        </thead>
                        <tbody>
                            @php $sr = 1; $grandTotal = 0; @endphp
                            @foreach ($summary as $row)
                                @php
                                    $popName = $row->pop_id
                                        ? ($pops[$row->pop_id] ?? 'POP #' . $row->pop_id)
                                        : 'No POP';
                                    $grandTotal += $row->total;
                                @endphp
                                <tr>
                                    <td>{{ $sr++ }}</td>
                                    <td>{{ $popName }}</td>
                                    <td>{{ $row->total }}</td>
                                </tr>
                            @endforeach
                        </tbody>
                        <tfoot>
                            <tr class="font-weight-bold">
                                <td colspan="2" class="text-right">Total</td>
                                <td>{{ $grandTotal }}</td>
                            </tr>
                        </tfoot>
                    </table>
                </div>
                @if ($summary->isEmpty())
                    <p class="text-muted mb-0 mt-2">No records found for the selected date range and filters.</p>
                @endif
            </div>
        </div>
    </div>
@endsection