@extends('layout.app')

@section('head')
    <style>
        /* Bootstrap/AdminLTE cards can clip a sticky child, so this one opts out. */
        .summary-card {
            overflow: visible;
        }

        .summary-sticky {
            position: sticky;
            top: 0;
            z-index: 5;
            background: #fff;
            padding: 8px 0 10px;
            margin-bottom: 4px;
            border-bottom: 1px solid #e9ecef;
            box-shadow: 0 6px 6px -6px rgba(0, 0, 0, .18);
        }

        .summary-legend {
            display: flex;
            gap: 18px;
            justify-content: center;
            font-size: 12px;
            color: #495057;
        }

        .summary-legend-item {
            display: inline-flex;
            align-items: center;
            gap: 6px;
        }

        .summary-swatch {
            width: 12px;
            height: 12px;
            border-radius: 2px;
            display: inline-block;
        }

        /* The scroll box the sticky header and footer pin against. */
        .summary-table-scroll {
            max-height: 65vh;
            overflow: auto;
        }

        .summary-table-scroll #summaryTable {
            margin-bottom: 0;
        }

        #summaryTable thead th,
        #summaryTable tfoot th {
            position: sticky;
            z-index: 3;
            /* Opaque: rows scroll underneath these, and table-striped would
               otherwise show through. */
            background: #fff;
            /* border-collapse drops the borders of a sticky cell once it detaches,
               so they are drawn as insets instead. */
            box-shadow: inset 0 1px 0 #dee2e6, inset 0 -1px 0 #dee2e6;
        }

        #summaryTable thead th {
            top: 0;
        }

        #summaryTable tfoot th {
            bottom: 0;
        }
    </style>
@endsection

@section('content')
    <section class="content">
        <div class="container-fluid">

            <div class="card">
                <div class="card-body">
                    <form action="{{ route('pop-client-summary-chart') }}" method="GET">
                        <div class="row">
                            <div class="col-md-3 col-sm-6">
                                <div class="form-group">
                                    <label class="text-sm font-bold mb-2">Group By</label>
                                    <select name="view_by" class="form-control form-control-sm">
                                        <option value="pop" @if ($viewBy === 'pop') selected @endif>POP</option>
                                        <option value="manager" @if ($viewBy === 'manager') selected @endif>Manager</option>
                                    </select>
                                </div>
                            </div>

                            <div class="col-md-3 col-sm-6">
                                <div class="form-group">
                                    <label class="text-sm font-bold mb-2">Date</label>
                                    <select name="snapshot_date" class="form-control form-control-sm select2">
                                        @forelse ($availableDates as $date)
                                            <option value="{{ $date }}" @if ($snapshotDate === $date) selected @endif>
                                                {{ date('d-M-Y', strtotime($date)) }}
                                            </option>
                                        @empty
                                            <option value="">No snapshot yet</option>
                                        @endforelse
                                    </select>
                                </div>
                            </div>

                            <div class="col-md-3 col-sm-6">
                                <div class="form-group">
                                    <label class="text-sm font-bold mb-2">Manager</label>
                                    <select name="reseller_id" class="form-control form-control-sm select2"
                                        data-placeholder="ALL Manager">
                                        <option value="">ALL Manager</option>
                                        @foreach ($resellers as $reseller)
                                            <option value="{{ $reseller->id }}"
                                                @if ((string) $resellerId === (string) $reseller->id) selected @endif>
                                                {{ $reseller->name }}
                                            </option>
                                        @endforeach
                                    </select>
                                </div>
                            </div>

                            <div class="col-md-3 col-sm-6">
                                <div class="form-group">
                                    <label class="text-sm font-bold mb-2 d-block">&nbsp;</label>
                                    <button type="submit" class="btn btn-primary btn-sm">
                                        <i class="fa fa-search"></i> Show
                                    </button>
                                    <a href="{{ route('pop-client-summary-chart') }}" class="btn btn-info btn-sm">Reset</a>
                                </div>
                            </div>
                        </div>
                    </form>
                </div>
            </div>

            @if (!$snapshotDate)
                <div class="card">
                    <div class="card-body">
                        <p class="mb-0">
                            No snapshot has been stored yet. The scheduler writes one every day at 23:50, or run
                            <code>php artisan snapshot:pop-client-status</code> to create today's now.
                        </p>
                    </div>
                </div>
            @else
                <div class="card summary-card">
                    <div class="card-body">
                        {{-- Pinned while the bars scroll: with 130 POPs the totals and
                             the legend would otherwise be off-screen for most of the
                             chart. The legend is hand-rolled here because Chart.js
                             draws its own inside the canvas, which scrolls away. --}}
                        <div class="summary-sticky">
                            <h3 class="card-title" style="color:#115548;">
                                Client Summary by {{ $viewBy === 'manager' ? 'Manager' : 'POP' }}
                                — {{ date('d-M-Y', strtotime($snapshotDate)) }}
                            </h3>

                            {{-- The two figures the chart plots come first, then the
                                 statuses that make up Not Active, then Closed which the
                                 chart leaves out. --}}
                            <div class="row mt-3 mb-1">
                                <div class="col text-center border-right">
                                    <div class="text-muted text-uppercase" style="font-size:11px; letter-spacing:.03em;">
                                        Active
                                    </div>
                                    <div style="font-size:22px; font-weight:700; color:#28a745;">
                                        {{ number_format($totals['active']) }}
                                    </div>
                                </div>
                                <div class="col text-center border-right">
                                    <div class="text-muted text-uppercase" style="font-size:11px; letter-spacing:.03em;">
                                        Not Active
                                    </div>
                                    <div style="font-size:22px; font-weight:700; color:#dc3545;">
                                        {{ number_format($totals['not_active']) }}
                                    </div>
                                </div>
                                @foreach (['disable', 'deactive', 'expired'] as $column)
                                    <div class="col text-center border-right">
                                        <div class="text-muted text-uppercase" style="font-size:11px; letter-spacing:.03em;">
                                            {{ $column }}
                                        </div>
                                        <div style="font-size:18px; font-weight:600; color:#6c757d;">
                                            {{ number_format($totals[$column]) }}
                                        </div>
                                    </div>
                                @endforeach
                                <div class="col text-center border-right">
                                    <div class="text-muted text-uppercase" style="font-size:11px; letter-spacing:.03em;">
                                        Closed
                                    </div>
                                    <div style="font-size:18px; font-weight:600; color:#6c757d;">
                                        {{ number_format($totals['closed']) }}
                                    </div>
                                </div>
                                <div class="col text-center">
                                    <div class="text-muted text-uppercase" style="font-size:11px; letter-spacing:.03em;">
                                        Total
                                    </div>
                                    <div style="font-size:18px; font-weight:600; color:#012970;">
                                        {{ number_format($totals['total']) }}
                                    </div>
                                </div>
                            </div>

                            <div class="summary-legend">
                                <span class="summary-legend-item">
                                    <span class="summary-swatch" style="background:#28a745;"></span> Active
                                </span>
                                <span class="summary-legend-item">
                                    <span class="summary-swatch" style="background:#dc3545;"></span> Not Active
                                </span>
                            </div>
                        </div>

                        {{-- Height grows with the bar count so 130 POPs stay readable
                             instead of being squeezed into a fixed canvas. --}}
                        <div style="overflow-x:auto;">
                            <div style="height: {{ max(320, count($rows) * 34 + 80) }}px; min-width: 320px;">
                                <canvas id="clientSummaryChart"></canvas>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="card">
                    <div class="card-body">
                        {{-- Own scroll box rather than .table-responsive: that wrapper
                             scrolls on the x axis at auto height, so a sticky thead had
                             no scrollable ancestor to pin against. A capped height gives
                             the header and footer something to stick to. --}}
                        <div class="summary-table-scroll">
                            <table class="table table-sm table-bordered table-striped" id="summaryTable">
                                <thead>
                                    <tr>
                                        <th>{{ $viewBy === 'manager' ? 'Manager' : 'POP' }}</th>
                                        <th class="text-right">Active</th>
                                        <th class="text-right" title="disable + deactive + expired. Closed is not included.">
                                            Not Active
                                        </th>
                                        @foreach (['disable', 'deactive', 'expired', 'closed'] as $column)
                                            <th class="text-right text-capitalize">{{ $column }}</th>
                                        @endforeach
                                        <th class="text-right">Total</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @foreach ($rows as $row)
                                        <tr>
                                            <td>{{ $row->label }}</td>
                                            <td class="text-right"><strong>{{ number_format($row->active) }}</strong></td>
                                            <td class="text-right"><strong>{{ number_format($row->not_active) }}</strong></td>
                                            @foreach (['disable', 'deactive', 'expired', 'closed'] as $column)
                                                <td class="text-right">{{ number_format($row->{$column}) }}</td>
                                            @endforeach
                                            <td class="text-right"><strong>{{ number_format($row->total) }}</strong></td>
                                        </tr>
                                    @endforeach
                                </tbody>
                                <tfoot>
                                    <tr>
                                        <th>Total</th>
                                        <th class="text-right">{{ number_format($totals['active']) }}</th>
                                        <th class="text-right">{{ number_format($totals['not_active']) }}</th>
                                        @foreach (['disable', 'deactive', 'expired', 'closed'] as $column)
                                            <th class="text-right">{{ number_format($totals[$column]) }}</th>
                                        @endforeach
                                        <th class="text-right">{{ number_format($totals['total']) }}</th>
                                    </tr>
                                </tfoot>
                            </table>
                        </div>
                    </div>
                </div>
            @endif

        </div>
    </section>
@endsection

@section('ajax')
    @if ($snapshotDate)
        <script>
            (function() {
                var canvas = document.getElementById('clientSummaryChart');
                if (!canvas || typeof Chart === 'undefined') {
                    return;
                }

                // Two bars only: Active, and Not Active rolled up from
                // disable + deactive + expired. Closed is deliberately not
                // plotted — see NOT_ACTIVE_COLUMNS on the model.
                var series = [
                    { key: 'active', label: 'Active', color: '#28a745' },
                    { key: 'not_active', label: 'Not Active', color: '#dc3545' },
                ];

                var rows = @json($rows);

                new Chart(canvas.getContext('2d'), {
                    type: 'horizontalBar',
                    data: {
                        labels: rows.map(function(r) { return r.label; }),
                        datasets: series.map(function(s) {
                            return {
                                label: s.label,
                                backgroundColor: s.color,
                                data: rows.map(function(r) { return Number(r[s.key]) || 0; }),
                            };
                        }),
                    },
                    options: {
                        maintainAspectRatio: false,
                        responsive: true,
                        tooltips: { mode: 'y', intersect: false },
                        scales: {
                            // Not stacked: the two are meant to be compared
                            // against each other, so they sit side by side.
                            xAxes: [{ stacked: false, ticks: { beginAtZero: true } }],
                            yAxes: [{ stacked: false }],
                        },
                        // Legend lives in the sticky header instead.
                        legend: { display: false },
                    },
                });
            })();
        </script>
    @endif
@endsection