@extends('backEnd.layouts.master')
@section('title', 'Call Tracking Report')

@push('styles')
<style>
.ct-tier-green { background:#dcfce7;color:#166534;font-weight:700;padding:.15rem .45rem;border-radius:4px; }
.ct-tier-yellow { background:#fef3c7;color:#92400e;font-weight:700;padding:.15rem .45rem;border-radius:4px; }
.ct-tier-orange { background:#ffedd5;color:#c2410c;font-weight:700;padding:.15rem .45rem;border-radius:4px; }
.ct-tier-red { background:#fee2e2;color:#991b1b;font-weight:700;padding:.15rem .45rem;border-radius:4px; }
.ct-stat { border-left:4px solid #2563eb; }
</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-phone-volume me-2 text-primary"></i>Call Tracking Report</h4>
            <small class="text-muted">Order generate → call start (response time) · talk duration · outcome — per call details</small>
        </div>
        <div class="d-flex gap-2">
            <a href="{{ route('admin.support.reports', ['from' => $from, 'to' => $to]) }}" class="btn btn-outline-secondary btn-sm">Performance Report</a>
            <a href="{{ route('admin.support.reports.dismissals', ['from' => $from, 'to' => $to]) }}" class="btn btn-outline-warning btn-sm">Dismiss History</a>
            <a href="{{ route('admin.support.hub', ['tab' => 'calls']) }}" class="btn btn-outline-primary btn-sm">Moderator Hub</a>
        </div>
    </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-2">
                    <label class="form-label small mb-1">Moderator</label>
                    <select name="moderator_user_id" class="form-select form-select-sm">
                        <option value="">All</option>
                        @foreach($moderators as $m)
                        @if($m->user_id)
                        <option value="{{ $m->user_id }}" {{ (string)($filters['moderator_user_id'] ?? '') === (string)$m->user_id ? 'selected' : '' }}>
                            {{ $m->name }}
                        </option>
                        @endif
                        @endforeach
                    </select>
                </div>
                <div class="col-md-2">
                    <label class="form-label small mb-1">Source</label>
                    <select name="source" class="form-select form-select-sm">
                        <option value="">All</option>
                        @foreach(['hub' => 'Hub', 'orders' => 'Orders page', 'crm' => 'CRM'] as $val => $label)
                        <option value="{{ $val }}" {{ ($filters['source'] ?? '') === $val ? 'selected' : '' }}>{{ $label }}</option>
                        @endforeach
                    </select>
                </div>
                <div class="col-md-2">
                    <label class="form-label small mb-1">Outcome</label>
                    <select name="outcome" class="form-select form-select-sm">
                        <option value="">All</option>
                        @foreach(['connected','confirmed','no_answer','busy','cancelled','follow_up'] as $o)
                        <option value="{{ $o }}" {{ ($filters['outcome'] ?? '') === $o ? 'selected' : '' }}>{{ str_replace('_',' ', $o) }}</option>
                        @endforeach
                    </select>
                </div>
                <div class="col-md-2">
                    <label class="form-label small mb-1">Order→Call speed</label>
                    <select name="response_tier" class="form-select form-select-sm">
                        <option value="">All</option>
                        @foreach(['green' => '≤1 min (Green)', 'yellow' => '≤3 min (Yellow)', 'orange' => '≤10 min (Orange)', 'red' => '10 min+ (Red)'] as $val => $label)
                        <option value="{{ $val }}" {{ ($filters['response_tier'] ?? '') === $val ? 'selected' : '' }}>{{ $label }}</option>
                        @endforeach
                    </select>
                </div>
            </div>
            <div class="row g-2 align-items-end mt-2">
                <div class="col-md-4">
                    <label class="form-label small mb-1">Search invoice / phone / name</label>
                    <input type="text" name="q" class="form-control form-control-sm" value="{{ $filters['q'] ?? '' }}" placeholder="INV-… or 01…">
                </div>
                <div class="col-md-4 d-flex gap-2">
                    <button class="btn btn-primary btn-sm">Filter</button>
                    <a href="{{ route('admin.support.reports.calls') }}" 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 ct-stat h-100">
                <div class="card-body py-3">
                    <div class="small text-muted">Total Calls</div>
                    <div class="fs-4 fw-bold">{{ $summary['total_calls'] }}</div>
                    <div class="small text-muted">{{ $summary['order_calls'] }} with order link</div>
                </div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="card shadow-sm border-0 ct-stat h-100">
                <div class="card-body py-3">
                    <div class="small text-muted">Avg Order → Call</div>
                    <div class="fs-4 fw-bold">{{ $summary['avg_order_response'] !== null ? $reports->formatTime($summary['avg_order_response']) : '—' }}</div>
                    @if($summary['fastest_response'] !== null)
                    <div class="small text-muted">Fast: {{ $reports->formatTime($summary['fastest_response']) }} · Slow: {{ $reports->formatTime($summary['slowest_response']) }}</div>
                    @endif
                </div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="card shadow-sm border-0 ct-stat h-100">
                <div class="card-body py-3">
                    <div class="small text-muted">Avg Talk Time</div>
                    <div class="fs-4 fw-bold">{{ $summary['avg_talk_seconds'] !== null ? $reports->formatTime($summary['avg_talk_seconds']) : '—' }}</div>
                </div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="card shadow-sm border-0 h-100">
                <div class="card-body py-3">
                    <div class="small text-muted mb-1">Order→Call tiers</div>
                    <span class="badge bg-success me-1">{{ $summary['tier_counts']['green'] ?? 0 }} ≤1m</span>
                    <span class="badge bg-warning text-dark me-1">{{ $summary['tier_counts']['yellow'] ?? 0 }} ≤3m</span>
                    <span class="badge me-1" style="background:#f97316">{{ $summary['tier_counts']['orange'] ?? 0 }} ≤10m</span>
                    <span class="badge bg-danger">{{ $summary['tier_counts']['red'] ?? 0 }} 10m+</span>
                </div>
            </div>
        </div>
    </div>

    <div class="card shadow-sm border-0">
        <div class="card-header bg-transparent fw-semibold">Call log details</div>
        <div class="table-responsive">
            <table class="table table-hover table-sm mb-0 align-middle">
                <thead class="table-light">
                    <tr>
                        <th>Call time</th>
                        <th>Moderator</th>
                        <th>Order</th>
                        <th>Customer</th>
                        <th>Order placed</th>
                        <th>Call started</th>
                        <th>Order→Call</th>
                        <th>Talk</th>
                        <th>Outcome</th>
                        <th>Source</th>
                        <th>Note</th>
                    </tr>
                </thead>
                <tbody>
                    @forelse($callLogs as $log)
                    @php
                        $tier = $log->orderResponseTier();
                        $tierClass = 'ct-tier-' . ($tier !== 'none' ? $tier : 'green');
                    @endphp
                    <tr>
                        <td class="text-nowrap small">{{ ($log->started_at ?? $log->created_at)?->format('d M Y, h:i A') }}</td>
                        <td>
                            <div class="fw-semibold small">{{ $log->moderator?->name ?? '—' }}</div>
                        </td>
                        <td>
                            @if($log->order)
                            <a href="{{ route('admin.orders.show', $log->order_id) }}" class="fw-semibold">#{{ $log->order->invoice_id }}</a>
                            <div class="small text-muted">৳{{ number_format((float)$log->order->amount) }}</div>
                            @else
                            <span class="text-muted">CRM / —</span>
                            @endif
                        </td>
                        <td>
                            <div class="small fw-semibold">{{ $log->customer_name ?: '—' }}</div>
                            <div class="small text-muted">{{ $log->customer_phone }}</div>
                        </td>
                        <td class="small text-nowrap">
                            {{ $log->order?->created_at?->format('d M, h:i A') ?? '—' }}
                        </td>
                        <td class="small text-nowrap">
                            {{ $log->started_at?->format('d M, h:i A') ?? '—' }}
                        </td>
                        <td>
                            @if($log->orderResponseLabel())
                            <span class="{{ $tierClass }}">{{ $log->orderResponseLabel() }}</span>
                            @else
                            —
                            @endif
                        </td>
                        <td>{{ $log->durationLabel() }}</td>
                        <td>
                            @if($log->outcome)
                            <span class="badge bg-light text-dark border">{{ str_replace('_', ' ', $log->outcome) }}</span>
                            @else
                            <span class="badge bg-warning text-dark">pending</span>
                            @endif
                        </td>
                        <td><span class="badge bg-secondary">{{ $log->source }}</span></td>
                        <td class="small" style="max-width:180px">{{ $log->note ? Str::limit($log->note, 80) : '—' }}</td>
                    </tr>
                    @empty
                    <tr>
                        <td colspan="11" class="text-center py-4 text-muted">
                            No call logs in this period.<br>
                            <small>Moderator Hub → Orders → <strong>Call</strong> → outcome save করুন।</small>
                        </td>
                    </tr>
                    @endforelse
                </tbody>
            </table>
        </div>
        @if($callLogs->hasPages())
        <div class="card-footer bg-transparent">{{ $callLogs->links() }}</div>
        @endif
    </div>

    <div class="card shadow-sm border-0 mt-3">
        <div class="card-body small text-muted mb-0">
            <strong>Order→Call</strong> = order <code>created_at</code> থেকে moderator <strong>Call</strong> button চাপলে log-এর <code>started_at</code> পর্যন্ত সময়।
            <strong>Talk</strong> = call sheet open থেকে outcome save পর্যন্ত (বা manually entered duration)।
            Moderator personal view: <a href="{{ route('admin.support.hub', ['tab' => 'calls']) }}">Hub → My Calls</a>।
        </div>
    </div>
</div>
@endsection