@extends('client.layouts.dashboard')

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

@section('styles')
<style>
    .report-hero{border-radius:14px;padding:1.15rem;position:relative;overflow:hidden;color:#fff}
    .report-hero::before{content:'';position:absolute;top:-30%;right:-20%;width:100px;height:100px;border-radius:50%;background:rgba(255,255,255,.06)}
    .report-hero .rh-val{font-size:1.4rem;font-weight:800;line-height:1}
    .report-hero .rh-lbl{font-size:.7rem;opacity:.8;margin-top:2px}
    .rh-sms{background:linear-gradient(135deg,#3b82f6,#60a5fa)}
    .rh-sent{background:linear-gradient(135deg,#10b981,#34d399)}
    .rh-pending{background:linear-gradient(135deg,#f59e0b,#fbbf24)}
    .rh-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}
    .channel-pill{display:inline-flex;align-items:center;gap:4px;padding:3px 10px;border-radius:20px;font-size:.72rem;font-weight:600;background:#e8f0fe;color:#1a56db}
    .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-chat-dots-fill me-2" style="color:#3b82f6"></i>SMS Activity Report</h5>
        <p class="text-muted mb-0" style="font-size:.82rem">View and analyze all SMS auto-replies sent by your organization's users</p>
    </div>
    <a href="{{ route('client.sms-logs.export', array_merge(request()->query(), ['channel' => 'sms'])) }}" class="btn btn-success export-btn">
        <i class="bi bi-file-earmark-excel me-1"></i> Export SMS Data
    </a>
</div>

<!-- Stats -->
<div class="row g-3 mb-4">
    <div class="col-6 col-lg-3">
        <div class="report-hero rh-sms">
            <div class="d-flex align-items-center gap-2">
                <i class="bi bi-chat-dots-fill" style="font-size:1.2rem;opacity:.7"></i>
                <div><div class="rh-val">{{ number_format($stats['sms_total']) }}</div><div class="rh-lbl">Total SMS Sent</div></div>
            </div>
        </div>
    </div>
    <div class="col-6 col-lg-3">
        <div class="report-hero rh-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="report-hero rh-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="report-hero rh-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
    $totalMsg = $stats['sms_total'] ?: 1;
    $deliveryRate = round(($stats['sent'] / $totalMsg) * 100, 1);
    $failRate = round(($stats['failed'] / $totalMsg) * 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">SMS Delivery Rate</small>
                <span class="fw-bold {{ $deliveryRate >= 90 ? 'text-success' : ($deliveryRate >= 70 ? 'text-warning' : 'text-danger') }}">{{ $deliveryRate }}%</span>
            </div>
            <div class="progress" style="height:8px;border-radius:8px">
                <div class="progress-bar bg-success" style="width:{{ ($stats['sent']/$totalMsg)*100 }}%;border-radius:8px 0 0 8px"></div>
                <div class="progress-bar bg-warning" style="width:{{ ($stats['pending']/$totalMsg)*100 }}%"></div>
                <div class="progress-bar bg-danger" style="width:{{ ($stats['failed']/$totalMsg)*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:#3b82f6">{{ number_format($stats['sms_total'] - $stats['whatsapp_total']) }}</div>
                <div style="font-size:.68rem;color:#6b7280;text-transform:uppercase">SMS Only</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">{{ $failRate }}%</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">All Messages</div>
            </div>
        </div>
    </div>
</div>

<!-- Filters -->
<div class="filter-card mb-4">
    <div class="card-body">
        <form method="GET" action="{{ route('client.sms-logs') }}" class="row g-2 align-items-end">
            <input type="hidden" name="channel" value="sms">
            <div class="col-md-2">
                <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-2">
                <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-primary btn-sm flex-fill"><i class="bi bi-funnel me-1"></i>Filter</button>
                <a href="{{ route('client.sms-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:#3b82f6"></i>SMS 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.sms-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:#eff6ff;border:1px solid rgba(0,0,0,.05);{{ !request('status') ? 'outline:2px solid #3b82f6' : '' }}">
                        <i class="bi bi-chat-dots-fill" style="font-size:1.1rem;color:#3b82f6"></i>
                        <div>
                            <div class="fw-bold" style="color:#3b82f6;font-size:1.1rem">{{ number_format($stats['sms_total']) }}</div>
                            <div style="font-size:.7rem;color:#3b82f6;opacity:.85">All SMS</div>
                        </div>
                    </div>
                </a>
            </div>
            <div class="col-6 col-md-3 col-lg-2">
                <a href="{{ route('client.sms-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.sms-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.sms-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>

<!-- SMS Logs Table -->
<div class="table-card">
    <div class="card-header d-flex justify-content-between align-items-center">
        <h5><i class="bi bi-chat-dots me-2" style="color:#3b82f6"></i>SMS Log Records</h5>
        <small class="text-muted">Showing {{ $smsLogs->firstItem() ?? 0 }}-{{ $smsLogs->lastItem() ?? 0 }} of {{ $smsLogs->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>Direction</th>
                    <th>Time</th>
                </tr>
            </thead>
            <tbody>
                @forelse($smsLogs as $log)
                <tr>
                    <td>
                        <div class="user-chip">
                            <div class="uc-avatar" style="background:{{ ['#3b82f6','#10b981','#f59e0b','#ef4444','#8b5cf6','#ec4899','#06b6d4','#84cc16'][$loop->index % 8] }}">
                                {{ strtoupper(substr($log->user->name ?? 'U', 0, 1)) }}
                            </div>
                            <div>
                                <div class="fw-semibold" style="font-size:.8rem">{{ $log->user->name ?? 'Unknown' }}</div>
                            </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>
                        @if($log->sms_type === 'incoming')<span class="badge bg-info bg-opacity-10 text-info">Incoming</span>
                        @else<span class="badge bg-primary bg-opacity-10 text-primary">Outgoing</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="6" class="text-center py-5">
                        <i class="bi bi-chat-dots text-muted" style="font-size:2.5rem"></i>
                        <p class="text-muted mt-2 mb-0">No SMS logs found</p>
                    </td>
                </tr>
                @endforelse
            </tbody>
        </table>
    </div>
    @if($smsLogs->hasPages())
    <div class="card-footer bg-transparent p-3">{{ $smsLogs->withQueryString()->links() }}</div>
    @endif
</div>
@endsection