{{-- admin/notifications/index.blade.php | Obrempong | Jcode --}}
@extends('layouts.admin')
@section('title','Push Notifications')

@section('content')
<div class="grid-side">
    <div>
        {{-- Send Form --}}
        <div class="card mb-20">
            <div class="card-header"><h3>📣 Send Notification to All Users</h3></div>
            <div class="card-body">
                @if(session('success'))<div class="alert alert-success"><i class="fa fa-check-circle"></i> {{ session('success') }}</div>@endif
                <form method="POST" action="{{ route('admin.notifications.send') }}">
                    @csrf
                    <div class="form-group">
                        <label class="form-label">Notification Title *</label>
                        <input type="text" name="title" class="form-control" placeholder="e.g. New Feature Alert 🎉" maxlength="100" required>
                    </div>
                    <div class="form-group">
                        <label class="form-label">Message *</label>
                        <textarea name="message" class="form-control" rows="4" placeholder="Enter your message to all users..." maxlength="500" required></textarea>
                        <span class="form-hint">Max 500 characters</span>
                    </div>
                    <div class="form-group">
                        <label class="form-label">Type</label>
                        <select name="type" class="form-control" style="width:200px;">
                            <option value="info">ℹ️ Info</option>
                            <option value="success">✅ Success</option>
                            <option value="warning">⚠️ Warning</option>
                            <option value="danger">🚨 Alert</option>
                        </select>
                    </div>
                    <div style="background:#EEF2FF;border-radius:8px;padding:12px;margin-bottom:16px;font-size:13px;color:#3730A3;">
                        <i class="fa fa-users"></i> This notification will be sent to <strong>{{ number_format($totalUsers) }} active users</strong>.
                    </div>
                    <button type="submit" class="btn btn-primary" onclick="return confirm('Send notification to all {{ number_format($totalUsers) }} users?')">
                        <i class="fa fa-bell"></i> Send to All Users
                    </button>
                </form>
            </div>
        </div>
    </div>

    <div>
        {{-- Recent Notifications --}}
        <div class="card" style="position:sticky;top:80px;">
            <div class="card-header"><h3>Recent Broadcasts</h3></div>
            @forelse($recent as $n)
            <div style="padding:12px 16px;border-bottom:1px solid var(--border);{{ $loop->last?'border-bottom:none;':'' }}">
                <div style="display:flex;align-items:flex-start;gap:10px;">
                    <span style="font-size:18px;">{{ match($n->type){'success'=>'✅','warning'=>'⚠️','danger'=>'🚨',default=>'ℹ️'} }}</span>
                    <div style="flex:1;">
                        <div style="font-weight:700;font-size:13px;">{{ $n->title }}</div>
                        <div style="font-size:12px;color:var(--text-muted);margin-top:2px;">{{ Str::limit($n->message,80) }}</div>
                        <div style="font-size:11px;color:var(--text-muted);margin-top:4px;">{{ $n->created_at->diffForHumans() }}</div>
                    </div>
                </div>
            </div>
            @empty
            <div style="padding:32px;text-align:center;color:var(--text-muted);">No notifications sent yet.</div>
            @endforelse
        </div>
    </div>
</div>
@endsection