@extends('client.layouts.dashboard')

@section('title', 'WhatsApp Logs')

@section('styles')
<style>
    .wa-hero{border-radius:14px;padding:1.15rem;position:relative;overflow:hidden;color:#fff}
    .wa-hero::before{content:'';position:absolute;top:-30%;right:-20%;width:100px;height:100px;border-radius:50%;background:rgba(255,255,255,.06)}
    .wa-hero .rh-val{font-size:1.4rem;font-weight:800;line-height:1}
    .wa-hero .rh-lbl{font-size:.7rem;opacity:.8;margin-top:2px}
    .wa-total{background:linear-gradient(135deg,#128C7E,#25D366)}
    .wa-sent{background:linear-gradient(135deg,#10b981,#34d399)}
    .wa-pending{background:linear-gradient(135deg,#f59e0b,#fbbf24)}
    .wa-failed{background:linear-gradient(135deg,#ef4444,#f87171)}
    .filter-card{background:#fff;border-radius:12px;border:1px solid rgba(0,0,0,.05);box-shadow:0 1px 4px rgba(0,0,0,.04)}
    .filter-card .card-body{padding:.85rem 1rem}
    .wa-badge{display:inline-flex;align-items:center;gap:4px;padding:3px 10px;border-radius:20px;font-size:.72rem;font-weight:600;background:#e8f5e9;color:#128C7E}
    .status-dot{width:8px;height:8px;border-radius:50%;display:inline-block;margin-right:4px}
    .status-dot.sent{background:#10b981}.status-dot.pending{background:#f59e0b}.status-dot.failed{background:#ef4444}
    .user-chip{display:inline-flex;align-items:center;gap:6px}
    .user-chip .uc-avatar{width:28px;height:28px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:.65rem;font-weight:700;color:#fff;flex-shrink:0}
    .type-badge{font-size:.68rem;padding:2px 8px;border-radius:4px;font-weight:600}
    .type-auto{background:#dbeafe;color:#1e40af}
    .type-promo{background:#fef3c7;color:#92400e}
    .type-other{background:#f3f4f6;color:#4b5563}
    .time-cell{font-size:.75rem;color:#6b7280;line-height:1.4}
    .export-btn{border-radius:8px;font-size:.78rem;font-weight:600;padding:.45rem 1rem}
</style>
@endsection

@section('content')
<div class="d-flex justify-content-between align-items-center mb-4 flex-wrap gap-2">
    <div>
        <h5 class="mb-1 fw-bold" style="color:#1f2937"><i class="bi bi-whatsapp me-2" style="color:#25D366"></i>WhatsApp Activity Report</h5>
        <p class="text-muted mb-0" style="font-size:.82rem">View and analyze all WhatsApp auto-messages sent by your organization's users</p>
    </div>
    <a href="{{ route('client.sms-logs.export', array_merge(request()->query(), ['channel' => 'whatsapp'])) }}" class="btn export-btn text-white" style="background:linear-gradient(135deg,#128C7E,#25D366)">
        <i class="bi bi-file-earmark-excel me-1"></i> Export WhatsApp Data
    </a>
</div>

<!-- Stats -->
<div class="row g-3 mb-4">
    <div class="col-6 col-lg-3">
        <div class="wa-hero wa-total">
            <div class="d-flex align-items-center gap-2">
                <i class="bi bi-whatsapp" style="font-size:1.2rem;opacity:.7"></i>
                <div><div class="rh-val">{{ number_format($stats['total']) }}</div><div class="rh-lbl">Total WhatsApp</div></div>
            </div>
        </div>
    </div>
    <div class="col-6 col-lg-3">
        <div class="wa-hero wa-sent">
            <div class="d-flex align-items-center gap-2">
                <i class="bi bi-check-circle-fill" style="font-size:1.2rem;opacity:.7"></i>
                <div><div class="rh-val">{{ number_format($stats['sent']) }}</div><div class="rh-lbl">Delivered</div></div>
            </div>
        </div>
    </div>
    <div class="col-6 col-lg-3">
        <div class="wa-hero wa-pending">
            <div class="d-flex align-items-center gap-2">
                <i class="bi bi-clock-fill" style="font-size:1.2rem;opacity:.7"></i>
                <div><div class="rh-val">{{ number_format($stats['pending']) }}</div><div class="rh-lbl">Pending</div></div>
            </div>
        </div>
    </div>
    <div class="col-6 col-lg-3">
        <div class="wa-hero wa-failed">
            <div class="d-flex align-items-center gap-2">
                <i class="bi bi-x-circle-fill" style="font-size:1.2rem;opacity:.7"></i>
                <div><div class="rh-val">{{ number_format($stats['failed']) }}</div><div class="rh-lbl">Failed</div></div>
            </div>
        </div>
    </div>
</div>

<!-- Delivery Rate -->
@php
    $totalWa = $stats['total'] ?: 1;
    $waDelivery = round(($stats['sent'] / $totalWa) * 100, 1);
    $waFailRate = round(($stats['failed'] / $totalWa) * 100, 1);
@endphp
<div class="row g-3 mb-4">
    <div class="col-md-6">
        <div class="stat-card">
            <div class="d-flex justify-content-between align-items-center mb-2">
                <small class="fw-bold text-muted">WhatsApp Delivery Rate</small>
                <span class="fw-bold {{ $waDelivery >= 90 ? 'text-success' : ($waDelivery >= 70 ? 'text-warning' : 'text-danger') }}">{{ $waDelivery }}%</span>
            </div>
            <div class="progress" style="height:8px;border-radius:8px">
                <div class="progress-bar" style="width:{{ ($stats['sent']/$totalWa)*100 }}%;background:#25D366;border-radius:8px 0 0 8px"></div>
                <div class="progress-bar bg-warning" style="width:{{ ($stats['pending']/$totalWa)*100 }}%"></div>
                <div class="progress-bar bg-danger" style="width:{{ ($stats['failed']/$totalWa)*100 }}%;border-radius:0 8px 8px 0"></div>
            </div>
            <div class="d-flex justify-content-between mt-1">
                <small class="text-muted"><span class="status-dot sent"></span>Sent {{ $stats['sent'] }}</small>
                <small class="text-muted"><span class="status-dot pending"></span>Pending {{ $stats['pending'] }}</small>
                <small class="text-muted"><span class="status-dot failed"></span>Failed {{ $stats['failed'] }}</small>
            </div>
        </div>
    </div>
    <div class="col-md-6">
        <div class="stat-card d-flex align-items-center gap-3 h-100">
            <div class="text-center flex-fill">
                <div style="font-size:1.3rem;font-weight:800;color:#25D366">{{ $waDelivery }}%</div>
                <div style="font-size:.68rem;color:#6b7280;text-transform:uppercase">Success Rate</div>
            </div>
            <div style="width:1px;height:40px;background:#e5e7eb"></div>
            <div class="text-center flex-fill">
                <div style="font-size:1.3rem;font-weight:800;color:#ef4444">{{ $waFailRate }}%</div>
                <div style="font-size:.68rem;color:#6b7280;text-transform:uppercase">Failure Rate</div>
            </div>
            <div style="width:1px;height:40px;background:#e5e7eb"></div>
            <div class="text-center flex-fill">
                <div style="font-size:1.3rem;font-weight:800;color:#1f2937">{{ number_format($stats['total']) }}</div>
                <div style="font-size:.68rem;color:#6b7280;text-transform:uppercase">Total Messages</div>
            </div>
        </div>
    </div>
</div>

<!-- Filters -->
<div class="filter-card mb-4">
    <div class="card-body">
        <form method="GET" action="{{ route('client.whatsapp-logs') }}" class="row g-2 align-items-end">
            <div class="col-md-3">
                <label class="form-label" style="font-size:.72rem;font-weight:600;color:#6b7280">PHONE</label>
                <input type="text" class="form-control form-control-sm" name="search" placeholder="Search phone..." value="{{ request('search') }}">
            </div>
            <div class="col-md-2">
                <label class="form-label" style="font-size:.72rem;font-weight:600;color:#6b7280">USER</label>
                <select class="form-select form-select-sm" name="user_id">
                    <option value="">All Users</option>
                    @foreach($users as $user)
                    <option value="{{ $user->id }}" {{ request('user_id') == $user->id ? 'selected' : '' }}>{{ $user->name }}</option>
                    @endforeach
                </select>
            </div>
            <div class="col-md-2">
                <label class="form-label" style="font-size:.72rem;font-weight:600;color:#6b7280">STATUS</label>
                <select class="form-select form-select-sm" name="status">
                    <option value="">All</option>
                    <option value="sent" {{ request('status') === 'sent' ? 'selected' : '' }}>Sent</option>
                    <option value="pending" {{ request('status') === 'pending' ? 'selected' : '' }}>Pending</option>
                    <option value="failed" {{ request('status') === 'failed' ? 'selected' : '' }}>Failed</option>
                </select>
            </div>
            <div class="col-md-2">
                <label class="form-label" style="font-size:.72rem;font-weight:600;color:#6b7280">FROM</label>
                <input type="date" class="form-control form-control-sm" name="date_from" value="{{ request('date_from') }}">
            </div>
            <div class="col-md-1">
                <label class="form-label" style="font-size:.72rem;font-weight:600;color:#6b7280">TO</label>
                <input type="date" class="form-control form-control-sm" name="date_to" value="{{ request('date_to') }}">
            </div>
            <div class="col-md-2 d-flex gap-1">
                <button type="submit" class="btn btn-sm flex-fill text-white" style="background:linear-gradient(135deg,#128C7E,#25D366)"><i class="bi bi-funnel me-1"></i>Filter</button>
                <a href="{{ route('client.whatsapp-logs') }}" class="btn btn-outline-secondary btn-sm" title="Clear"><i class="bi bi-x-lg"></i></a>
            </div>
        </form>
    </div>
</div>

{{-- Delivery Status Breakdown Cards --}}
<div class="card border-0 shadow-sm mb-4">
    <div class="card-body">
        <div class="d-flex align-items-center justify-content-between mb-3">
            <h6 class="mb-0 fw-bold"><i class="bi bi-pie-chart-fill me-2" style="color:#25D366"></i>WhatsApp Delivery Breakdown</h6>
            <small class="text-muted">Click a status to filter</small>
        </div>
        <div class="row g-2">
            <div class="col-6 col-md-3 col-lg-2">
                <a href="{{ route('client.whatsapp-logs', array_merge(request()->except('status','page'), ['status' => ''])) }}" class="text-decoration-none">
                    <div class="rounded-3 p-3 d-flex align-items-center gap-2" style="background:#d1fae5;border:1px solid rgba(0,0,0,.05);{{ !request('status') ? 'outline:2px solid #128C7E' : '' }}">
                        <i class="bi bi-whatsapp" style="font-size:1.1rem;color:#128C7E"></i>
                        <div>
                            <div class="fw-bold" style="color:#128C7E;font-size:1.1rem">{{ number_format($stats['total']) }}</div>
                            <div style="font-size:.7rem;color:#128C7E;opacity:.85">All WA</div>
                        </div>
                    </div>
                </a>
            </div>
            <div class="col-6 col-md-3 col-lg-2">
                <a href="{{ route('client.whatsapp-logs', array_merge(request()->except('status','page'), ['status' => 'sent'])) }}" class="text-decoration-none">
                    <div class="rounded-3 p-3 d-flex align-items-center gap-2" style="background:#dcfce7;border:1px solid rgba(0,0,0,.05);{{ request('status')==='sent' ? 'outline:2px solid #15803d' : '' }}">
                        <i class="bi bi-check-circle-fill" style="font-size:1.1rem;color:#15803d"></i>
                        <div>
                            <div class="fw-bold" style="color:#15803d;font-size:1.1rem">{{ number_format($stats['sent']) }}</div>
                            <div style="font-size:.7rem;color:#15803d;opacity:.85">Sent</div>
                        </div>
                    </div>
                </a>
            </div>
            <div class="col-6 col-md-3 col-lg-2">
                <a href="{{ route('client.whatsapp-logs', array_merge(request()->except('status','page'), ['status' => 'pending'])) }}" class="text-decoration-none">
                    <div class="rounded-3 p-3 d-flex align-items-center gap-2" style="background:#fef9c3;border:1px solid rgba(0,0,0,.05);{{ request('status')==='pending' ? 'outline:2px solid #b45309' : '' }}">
                        <i class="bi bi-clock-fill" style="font-size:1.1rem;color:#b45309"></i>
                        <div>
                            <div class="fw-bold" style="color:#b45309;font-size:1.1rem">{{ number_format($stats['pending']) }}</div>
                            <div style="font-size:.7rem;color:#b45309;opacity:.85">Pending</div>
                        </div>
                    </div>
                </a>
            </div>
            <div class="col-6 col-md-3 col-lg-2">
                <a href="{{ route('client.whatsapp-logs', array_merge(request()->except('status','page'), ['status' => 'failed'])) }}" class="text-decoration-none">
                    <div class="rounded-3 p-3 d-flex align-items-center gap-2" style="background:#fee2e2;border:1px solid rgba(0,0,0,.05);{{ request('status')==='failed' ? 'outline:2px solid #b91c1c' : '' }}">
                        <i class="bi bi-x-circle-fill" style="font-size:1.1rem;color:#b91c1c"></i>
                        <div>
                            <div class="fw-bold" style="color:#b91c1c;font-size:1.1rem">{{ number_format($stats['failed']) }}</div>
                            <div style="font-size:.7rem;color:#b91c1c;opacity:.85">Failed</div>
                        </div>
                    </div>
                </a>
            </div>
        </div>
    </div>
</div>

<!-- WhatsApp Logs Table -->
<div class="table-card">
    <div class="card-header d-flex justify-content-between align-items-center">
        <h5><i class="bi bi-whatsapp me-2" style="color:#25D366"></i>WhatsApp Log Records</h5>
        <small class="text-muted">Showing {{ $whatsAppLogs->firstItem() ?? 0 }}-{{ $whatsAppLogs->lastItem() ?? 0 }} of {{ $whatsAppLogs->total() }}</small>
    </div>
    <div class="table-responsive">
        <table class="table">
            <thead>
                <tr>
                    <th>User</th>
                    <th>Phone Number</th>
                    <th>Message Type</th>
                    <th>Status</th>
                    <th>Time</th>
                </tr>
            </thead>
            <tbody>
                @forelse($whatsAppLogs as $log)
                <tr>
                    <td>
                        <div class="user-chip">
                            <div class="uc-avatar" style="background:{{ ['#128C7E','#25D366','#10b981','#059669','#047857','#065f46','#34d399','#6ee7b7'][$loop->index % 8] }}">
                                {{ strtoupper(substr($log->user->name ?? 'U', 0, 1)) }}
                            </div>
                            <div class="fw-semibold" style="font-size:.8rem">{{ $log->user->name ?? 'Unknown' }}</div>
                        </div>
                    </td>
                    <td>
                        <code style="font-size:.78rem">{{ $log->phone_number }}</code>
                        @if($log->contact_name)<br><small class="text-muted">{{ $log->contact_name }}</small>@endif
                    </td>
                    <td>
                        @if($log->sms_type === 'auto_reply')<span class="type-badge type-auto"><i class="bi bi-reply-fill me-1"></i>Auto Reply</span>
                        @elseif($log->sms_type === 'promotion')<span class="type-badge type-promo"><i class="bi bi-megaphone-fill me-1"></i>Promotion</span>
                        @else<span class="type-badge type-other">{{ ucfirst(str_replace('_',' ',$log->sms_type ?? 'unknown')) }}</span>@endif
                    </td>
                    <td>
                        @if($log->status === 'sent')<span class="badge bg-success bg-opacity-10 text-success"><i class="bi bi-check-circle me-1"></i>Sent</span>
                        @elseif($log->status === 'pending')<span class="badge bg-warning bg-opacity-10 text-warning"><i class="bi bi-clock me-1"></i>Pending</span>
                        @else<span class="badge bg-danger bg-opacity-10 text-danger"><i class="bi bi-x-circle me-1"></i>Failed</span>@endif
                    </td>
                    <td>
                        <div class="time-cell">{{ $log->created_at->format('M d, Y') }}<br>{{ $log->created_at->format('h:i A') }}</div>
                    </td>
                </tr>
                @empty
                <tr>
                    <td colspan="5" class="text-center py-5">
                        <i class="bi bi-whatsapp text-muted" style="font-size:2.5rem"></i>
                        <p class="text-muted mt-2 mb-0">No WhatsApp logs found</p>
                    </td>
                </tr>
                @endforelse
            </tbody>
        </table>
    </div>
    @if($whatsAppLogs->hasPages())
    <div class="card-footer bg-transparent p-3">{{ $whatsAppLogs->withQueryString()->links() }}</div>
    @endif
</div>
@endsection