@extends('backEnd.layouts.master')
@section('title', 'Moderator Reports')

@push('styles')
<style>
.report-stat { border-left: 4px solid #22c55e; }
.report-stat.warn { border-left-color: #f97316; }
.compliance-high { color: #16a34a; font-weight: 700; }
.compliance-mid { color: #ca8a04; font-weight: 700; }
.compliance-low { color: #dc2626; font-weight: 700; }
</style>
@endpush

@section('content')
<div class="container-fluid py-3">
    <div class="d-flex justify-content-between align-items-center mb-3 flex-wrap gap-2">
        <div>
            <h4 class="mb-0 fw-bold"><i class="fas fa-user-clock me-2"></i>Moderator Reports</h4>
            <small class="text-muted">Duty time, screen time, replies & performance — moderator wise</small>
        </div>
        <a href="{{ route('admin.support.reports.calls', ['from' => $from, 'to' => $to]) }}" class="btn btn-primary btn-sm">
            <i class="fas fa-phone-volume me-1"></i> Call Tracking
        </a>
        <a href="{{ route('admin.support.reports.dismissals', ['from' => $from, 'to' => $to]) }}" class="btn btn-outline-warning btn-sm">
            <i class="fas fa-check-double me-1"></i> Dismiss History
        </a>
        <a href="{{ route('admin.support.reports.inquiries', ['from' => $from, 'to' => $to]) }}" class="btn btn-outline-success btn-sm">
            <i class="fas fa-globe me-1"></i> Website Inquiry
        </a>
        <a href="{{ route('admin.support.inbox') }}" class="btn btn-outline-secondary btn-sm">Inbox</a>
    </div>

    <form method="GET" class="card shadow-sm border-0 mb-3">
        <div class="card-body">
            <div class="row g-2 align-items-end">
                <div class="col-md-2">
                    <label class="form-label small mb-1">From</label>
                    <input type="date" name="from" class="form-control form-control-sm" value="{{ $from }}">
                </div>
                <div class="col-md-2">
                    <label class="form-label small mb-1">To</label>
                    <input type="date" name="to" class="form-control form-control-sm" value="{{ $to }}">
                </div>
                <div class="col-md-3">
                    <label class="form-label small mb-1">Moderator (name / email)</label>
                    <input type="text" name="q" class="form-control form-control-sm" value="{{ $filters['q'] ?? '' }}" placeholder="Search user…">
                </div>
                <div class="col-md-3">
                    <label class="form-label small mb-1">Or select user</label>
                    <select name="moderator_id" class="form-select form-select-sm">
                        <option value="">All moderators</option>
                        @foreach($moderators as $m)
                        <option value="{{ $m->id }}" {{ (string)($filters['moderator_id'] ?? '') === (string)$m->id ? 'selected' : '' }}>
                            {{ $m->name }} @if($m->user?->email) ({{ $m->user->email }}) @endif
                        </option>
                        @endforeach
                    </select>
                </div>
                <div class="col-md-2">
                    <label class="form-label small mb-1">Sort by</label>
                    <select name="sort" class="form-select form-select-sm">
                        @foreach([
                            'name' => 'Name',
                            'screen' => 'Screen Time',
                            'duty' => 'On Duty Screen',
                            'duty_pct' => 'Duty %',
                            'replies' => 'Replies',
                            'red' => 'Red replies',
                            'sessions' => 'Sessions',
                            'resolved' => 'Resolved',
                            'hub_calls' => 'Hub Calls',
                            'crm_calls' => 'CRM Calls',
                        ] as $val => $label)
                        <option value="{{ $val }}" {{ ($filters['sort'] ?? 'name') === $val ? 'selected' : '' }}>{{ $label }}</option>
                        @endforeach
                    </select>
                </div>
            </div>
            <div class="row g-2 align-items-end mt-2">
                <div class="col-md-2">
                    <label class="form-label small mb-1">Min Replies</label>
                    <input type="number" min="0" name="min_replies" class="form-control form-control-sm" value="{{ $filters['min_replies'] ?? '' }}" placeholder="0">
                </div>
                <div class="col-md-2">
                    <label class="form-label small mb-1">Min Duty %</label>
                    <input type="number" min="0" max="100" name="min_duty_pct" class="form-control form-control-sm" value="{{ $filters['min_duty_pct'] ?? '' }}" placeholder="e.g. 50">
                </div>
                <div class="col-md-2">
                    <label class="form-label small mb-1">Max Duty %</label>
                    <input type="number" min="0" max="100" name="max_duty_pct" class="form-control form-control-sm" value="{{ $filters['max_duty_pct'] ?? '' }}">
                </div>
                <div class="col-md-2">
                    <label class="form-label small mb-1">Min On Duty (min)</label>
                    <input type="number" min="0" name="min_on_duty_minutes" class="form-control form-control-sm" value="{{ $filters['min_on_duty_minutes'] ?? '' }}" placeholder="On Duty Screen">
                </div>
                <div class="col-md-2">
                    <label class="form-label small mb-1">Min Screen (min)</label>
                    <input type="number" min="0" name="min_screen_minutes" class="form-control form-control-sm" value="{{ $filters['min_screen_minutes'] ?? '' }}">
                </div>
                <div class="col-md-2">
                    <label class="form-label small mb-1">G/Y/O/R filter</label>
                    <div class="input-group input-group-sm">
                        <select name="response_color" class="form-select">
                            <option value="">Any color</option>
                            @foreach(['green','yellow','orange','red'] as $c)
                            <option value="{{ $c }}" {{ ($filters['response_color'] ?? '') === $c ? 'selected' : '' }}>{{ ucfirst($c) }}</option>
                            @endforeach
                        </select>
                        <input type="number" min="1" name="min_color_count" class="form-control" value="{{ $filters['min_color_count'] ?? 1 }}" title="Min count">
                    </div>
                </div>
            </div>
            <div class="row g-2 align-items-end mt-2">
                <div class="col-md-2">
                    <label class="form-label small mb-1">Min Sessions</label>
                    <input type="number" min="0" name="min_sessions" class="form-control form-control-sm" value="{{ $filters['min_sessions'] ?? '' }}">
                </div>
                <div class="col-md-2">
                    <label class="form-label small mb-1">Min Resolved</label>
                    <input type="number" min="0" name="min_resolved" class="form-control form-control-sm" value="{{ $filters['min_resolved'] ?? '' }}">
                </div>
                <div class="col-md-2">
                    <label class="form-label small mb-1">Min Hub Calls</label>
                    <input type="number" min="0" name="min_hub_calls" class="form-control form-control-sm" value="{{ $filters['min_hub_calls'] ?? '' }}">
                </div>
                <div class="col-md-2">
                    <label class="form-label small mb-1">Min CRM Calls</label>
                    <input type="number" min="0" name="min_crm_calls" class="form-control form-control-sm" value="{{ $filters['min_crm_calls'] ?? '' }}">
                </div>
                <div class="col-md-4 d-flex gap-2">
                    <button class="btn btn-primary btn-sm">Search / Filter</button>
                    <a href="{{ route('admin.support.reports') }}" class="btn btn-outline-secondary btn-sm">Reset</a>
                </div>
            </div>
        </div>
    </form>

    <div class="row g-3 mb-3">
        <div class="col-md-3">
            <div class="card shadow-sm border-0 report-stat h-100">
                <div class="card-body py-3">
                    <div class="small text-muted">Total Replies</div>
                    <div class="fs-4 fw-bold">{{ $totals['replies'] }}</div>
                </div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="card shadow-sm border-0 report-stat h-100">
                <div class="card-body py-3">
                    <div class="small text-muted">Total Screen Time</div>
                    <div class="fs-4 fw-bold">{{ $reports->formatDuration($totals['screen_seconds']) }}</div>
                </div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="card shadow-sm border-0 report-stat warn h-100">
                <div class="card-body py-3">
                    <div class="small text-muted">Scheduled Duty</div>
                    <div class="fs-4 fw-bold">{{ $reports->formatDuration($totals['scheduled_seconds']) }}</div>
                </div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="card shadow-sm border-0 report-stat h-100">
                <div class="card-body py-3">
                    <div class="small text-muted">Online During Duty</div>
                    <div class="fs-4 fw-bold">{{ $reports->formatDuration($totals['online_in_duty']) }}</div>
                </div>
            </div>
        </div>
    </div>

    <div class="row g-3 mb-3">
        @foreach(['green' => 'success', 'yellow' => 'warning', 'orange' => '', 'red' => 'danger'] as $color => $bs)
        <div class="col-md-3 col-6">
            <div class="card shadow-sm border-0">
                <div class="card-body py-2">
                    <div class="small text-muted text-uppercase">{{ ucfirst($color) }} Replies</div>
                    <div class="fs-5 fw-bold">{{ $colorBreakdown[$color] ?? 0 }}</div>
                </div>
            </div>
        </div>
        @endforeach
    </div>

    <div class="card shadow-sm border-0">
        <div class="card-header bg-transparent fw-semibold d-flex justify-content-between align-items-center">
            <span>Moderator Wise Report</span>
            <small class="text-muted">Click Details for full duty & session log</small>
        </div>
        <div class="table-responsive">
            <table class="table table-hover mb-0 align-middle table-sm">
                <thead class="table-light">
                    <tr>
                        <th>Moderator</th>
                        <th>Screen Time</th>
                        <th>Duty (Scheduled)</th>
                        <th>On Duty Screen</th>
                        <th>Duty %</th>
                        <th>Replies</th>
                        <th>Avg Reply</th>
                        <th>G/Y/O/R</th>
                        <th>Sessions</th>
                        <th>Resolved</th>
                        <th>Hub</th>
                        <th>CRM</th>
                        <th>Avg Order→Call</th>
                        <th></th>
                    </tr>
                </thead>
                <tbody>
                    @forelse($moderatorRows as $row)
                    @php
                        $pct = $row['duty_compliance'];
                        $pctClass = $pct >= 80 ? 'compliance-high' : ($pct >= 50 ? 'compliance-mid' : 'compliance-low');
                    @endphp
                    <tr>
                        <td>
                            <div class="fw-semibold">{{ $row['moderator']->name }}</div>
                            <small class="text-muted">{{ $row['moderator']->user?->email }}</small>
                        </td>
                        <td>
                            <strong>{{ $row['screen_label'] }}</strong>
                            @if($row['first_online'])
                            <div class="small text-muted">First: {{ $row['first_online']->format('d M h:i A') }}</div>
                            @endif
                        </td>
                        <td>{{ $row['scheduled_label'] }}</td>
                        <td>{{ $row['online_in_duty_label'] }}</td>
                        <td><span class="{{ $pctClass }}">{{ $row['scheduled_seconds'] > 0 ? $pct . '%' : '—' }}</span></td>
                        <td>{{ $row['total_replies'] }}</td>
                        <td>{{ $reports->formatTime($row['avg_seconds']) }}</td>
                        <td>
                            <span class="badge bg-success">{{ $row['green_count'] }}</span>
                            <span class="badge bg-warning text-dark">{{ $row['yellow_count'] }}</span>
                            <span class="badge" style="background:#f97316">{{ $row['orange_count'] }}</span>
                            <span class="badge bg-danger">{{ $row['red_count'] }}</span>
                        </td>
                        <td>{{ $row['session_count'] }}</td>
                        <td>{{ $row['resolved_count'] }}</td>
                        <td>{{ $row['hub_calls'] ?? 0 }}</td>
                        <td>{{ $row['crm_calls'] ?? 0 }}</td>
                        <td>
                            @if(isset($row['avg_order_response']) && $row['avg_order_response'] !== null)
                            <strong>{{ $reports->formatTime($row['avg_order_response']) }}</strong>
                            <div class="small text-muted">order → call</div>
                            @else
                            —
                            @endif
                        </td>
                        <td class="text-end">
                            <a href="{{ route('admin.support.reports.moderator', ['id' => $row['moderator']->id, 'from' => $from, 'to' => $to]) }}" class="btn btn-sm btn-outline-primary">Details</a>
                        </td>
                    </tr>
                    @empty
                    <tr>
                        <td colspan="14" class="text-center py-4 text-muted">
                            No moderator data for this period.<br>
                            <small>Add moderators in Shifts and keep Support Inbox open to log screen time.</small>
                        </td>
                    </tr>
                    @endforelse
                </tbody>
            </table>
        </div>
    </div>

    <div class="card shadow-sm border-0 mt-3">
        <div class="card-body small text-muted mb-0">
            <strong>How duty % works:</strong> If shift is 3:00 PM – 6:00 PM, system checks how many minutes moderator had Support Inbox, Moderator Hub, or Chat open during that window.
            Heartbeat every 20 seconds logs screen sessions automatically. Hub & CRM calls are logged separately in the Hub/CRM columns.
            <strong>Avg Order→Call</strong> = order create থেকে প্রথম call start — কতক্ষণ লেগেছে (Hub call log থেকে)।
        </div>
    </div>
</div>
@endsection