@extends('layouts.app')

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

@section('content')
<div style="padding: 24px 32px;">
    <div style="display:flex; justify-content:space-between; align-items:center; margin-bottom: 24px;">
        <div>
            <h1 style="font-size: 24px; margin-bottom: 4px;">
                <i class="fas fa-bullhorn" style="color: var(--accent);"></i> SMS Campaigns
            </h1>
            <p style="color: var(--text-muted); font-size: 14px;">Send bulk SMS to your customers — promotions, announcements, reminders.</p>
        </div>
        <a href="{{ route('inventory.campaigns.create') }}" style="background: var(--accent); color:#000; padding: 10px 16px; border:none; border-radius: 8px; font-weight:600; cursor:pointer; text-decoration:none; display:inline-flex; align-items:center; gap:8px;">
            <i class="fas fa-plus"></i> New Campaign
        </a>
    </div>

    @if(session('success'))
        <div style="background: rgba(34,197,94,0.1); border:1px solid var(--success); color: var(--success); padding: 12px 16px; border-radius: 8px; margin-bottom: 16px;">
            <i class="fas fa-check-circle"></i> {{ session('success') }}
        </div>
    @endif
    @if(session('error'))
        <div style="background: rgba(239,68,68,0.1); border:1px solid var(--danger); color: var(--danger); padding: 12px 16px; border-radius: 8px; margin-bottom: 16px;">
            <i class="fas fa-exclamation-circle"></i> {{ session('error') }}
        </div>
    @endif

    <div style="background: rgba(16,191,255,0.08); border:1px solid var(--accent); color: var(--text); padding: 14px 18px; border-radius: 10px; margin-bottom: 24px; display:flex; align-items:center; gap:12px;">
        <i class="fas fa-info-circle" style="color: var(--accent); font-size: 18px;"></i>
        <div style="font-size: 14px;">
            You have <strong style="color: var(--accent);">{{ number_format($customerCount) }}</strong> customers with phone numbers available to message.
        </div>
    </div>

    <div style="display:grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 24px;">
        <div style="background: var(--bg-card); border:1px solid var(--border); border-radius:12px; padding: 20px;">
            <div style="display:flex; justify-content:space-between; align-items:flex-start; margin-bottom: 10px;">
                <div style="color: var(--text-muted); font-size: 12px; text-transform: uppercase; font-weight:600; letter-spacing: 0.5px;">Total Campaigns</div>
                <div style="width:36px; height:36px; border-radius:8px; background: rgba(16,191,255,0.12); color: var(--accent); display:flex; align-items:center; justify-content:center;">
                    <i class="fas fa-bullhorn"></i>
                </div>
            </div>
            <div style="font-size: 26px; font-weight: 700;">{{ number_format($stats['total'] ?? 0) }}</div>
        </div>
        <div style="background: var(--bg-card); border:1px solid var(--border); border-radius:12px; padding: 20px;">
            <div style="display:flex; justify-content:space-between; align-items:flex-start; margin-bottom: 10px;">
                <div style="color: var(--text-muted); font-size: 12px; text-transform: uppercase; font-weight:600; letter-spacing: 0.5px;">Sent</div>
                <div style="width:36px; height:36px; border-radius:8px; background: rgba(34,197,94,0.12); color: var(--success); display:flex; align-items:center; justify-content:center;">
                    <i class="fas fa-check-circle"></i>
                </div>
            </div>
            <div style="font-size: 26px; font-weight: 700;">{{ number_format($stats['sent'] ?? 0) }}</div>
        </div>
        <div style="background: var(--bg-card); border:1px solid var(--border); border-radius:12px; padding: 20px;">
            <div style="display:flex; justify-content:space-between; align-items:flex-start; margin-bottom: 10px;">
                <div style="color: var(--text-muted); font-size: 12px; text-transform: uppercase; font-weight:600; letter-spacing: 0.5px;">Drafts</div>
                <div style="width:36px; height:36px; border-radius:8px; background: rgba(245,158,11,0.12); color: var(--warning); display:flex; align-items:center; justify-content:center;">
                    <i class="fas fa-pencil"></i>
                </div>
            </div>
            <div style="font-size: 26px; font-weight: 700;">{{ number_format($stats['draft'] ?? 0) }}</div>
        </div>
        <div style="background: var(--bg-card); border:1px solid var(--border); border-radius:12px; padding: 20px;">
            <div style="display:flex; justify-content:space-between; align-items:flex-start; margin-bottom: 10px;">
                <div style="color: var(--text-muted); font-size: 12px; text-transform: uppercase; font-weight:600; letter-spacing: 0.5px;">Messages Delivered</div>
                <div style="width:36px; height:36px; border-radius:8px; background: rgba(16,191,255,0.12); color: var(--accent); display:flex; align-items:center; justify-content:center;">
                    <i class="fas fa-paper-plane"></i>
                </div>
            </div>
            <div style="font-size: 26px; font-weight: 700;">{{ number_format($stats['total_delivered'] ?? 0) }}</div>
        </div>
    </div>

    <div style="background: var(--bg-card); border:1px solid var(--border); border-radius:12px; padding: 16px 20px; margin-bottom: 16px;">
        <form method="GET" style="display:flex; align-items:center; gap:12px; flex-wrap:wrap;">
            <label style="font-size:13px; color: var(--text-muted); font-weight:500;">Filter by status:</label>
            <select name="status" onchange="this.form.submit()" style="background: var(--bg-elevated); border:1px solid var(--border); color: var(--text); padding: 8px 12px; border-radius: 8px; min-width: 160px;">
                <option value="">All statuses</option>
                @php $currentStatus = request('status'); @endphp
                <option value="draft" @if($currentStatus === 'draft') selected @endif>Draft</option>
                <option value="scheduled" @if($currentStatus === 'scheduled') selected @endif>Scheduled</option>
                <option value="sending" @if($currentStatus === 'sending') selected @endif>Sending</option>
                <option value="sent" @if($currentStatus === 'sent') selected @endif>Sent</option>
                <option value="failed" @if($currentStatus === 'failed') selected @endif>Failed</option>
            </select>
            @if($currentStatus)
                <a href="{{ route('inventory.campaigns.index') }}" style="color: var(--text-muted); font-size:13px; text-decoration:none;">
                    <i class="fas fa-times"></i> Clear filter
                </a>
            @endif
        </form>
    </div>

    <div style="background: var(--bg-card); border:1px solid var(--border); border-radius:12px; padding: 24px;">
        @if($campaigns->isEmpty())
            <div style="text-align:center; padding: 48px 24px;">
                <div style="width:72px; height:72px; margin: 0 auto 16px; border-radius:50%; background: rgba(16,191,255,0.1); display:flex; align-items:center; justify-content:center;">
                    <i class="fas fa-bullhorn" style="font-size: 30px; color: var(--accent);"></i>
                </div>
                <h3 style="font-size: 18px; margin-bottom: 8px;">No campaigns yet</h3>
                <p style="color: var(--text-muted); margin-bottom: 20px; font-size: 14px;">Create your first SMS campaign to reach your customers.</p>
                <a href="{{ route('inventory.campaigns.create') }}" style="background: var(--accent); color:#000; padding: 10px 20px; border:none; border-radius: 8px; font-weight:600; cursor:pointer; text-decoration:none; display:inline-flex; align-items:center; gap:8px;">
                    <i class="fas fa-plus"></i> Create First Campaign
                </a>
            </div>
        @else
            <table style="width:100%; border-collapse: collapse;">
                <thead>
                    <tr style="border-bottom: 1px solid var(--border);">
                        <th style="text-align:left; padding: 10px 12px; font-size: 12px; text-transform: uppercase; color: var(--text-muted); font-weight:600;">Name</th>
                        <th style="text-align:left; padding: 10px 12px; font-size: 12px; text-transform: uppercase; color: var(--text-muted); font-weight:600;">Audience</th>
                        <th style="text-align:right; padding: 10px 12px; font-size: 12px; text-transform: uppercase; color: var(--text-muted); font-weight:600;">Recipients</th>
                        <th style="text-align:right; padding: 10px 12px; font-size: 12px; text-transform: uppercase; color: var(--text-muted); font-weight:600;">Sent/Failed</th>
                        <th style="text-align:left; padding: 10px 12px; font-size: 12px; text-transform: uppercase; color: var(--text-muted); font-weight:600;">Status</th>
                        <th style="text-align:left; padding: 10px 12px; font-size: 12px; text-transform: uppercase; color: var(--text-muted); font-weight:600;">Created</th>
                        <th style="padding: 10px 12px;"></th>
                    </tr>
                </thead>
                <tbody>
                    @foreach($campaigns as $c)
                        @php
                            $audience = $c->audience ?? 'all';
                            $audBg = 'rgba(148,163,184,0.15)'; $audColor = 'var(--text-muted)';
                            if ($audience === 'tag:vip') { $audBg = 'rgba(245,158,11,0.15)'; $audColor = 'var(--warning)'; }
                            elseif ($audience === 'tag:regular') { $audBg = 'rgba(16,191,255,0.15)'; $audColor = 'var(--accent)'; }
                            elseif ($audience === 'tag:new') { $audBg = 'rgba(34,197,94,0.15)'; $audColor = 'var(--success)'; }
                            elseif ($audience === 'custom') { $audBg = 'rgba(16,191,255,0.15)'; $audColor = 'var(--accent)'; }

                            $status = $c->status ?? 'draft';
                            $stBg = 'rgba(148,163,184,0.15)'; $stColor = 'var(--text-muted)';
                            if ($status === 'sent') { $stBg = 'rgba(34,197,94,0.15)'; $stColor = 'var(--success)'; }
                            elseif ($status === 'failed') { $stBg = 'rgba(239,68,68,0.15)'; $stColor = 'var(--danger)'; }
                            elseif ($status === 'sending') { $stBg = 'rgba(16,191,255,0.15)'; $stColor = 'var(--accent)'; }
                            elseif ($status === 'scheduled') { $stBg = 'rgba(245,158,11,0.15)'; $stColor = 'var(--warning)'; }
                        @endphp
                        <tr style="border-bottom: 1px solid var(--border);">
                            <td style="padding: 14px 12px;">
                                <a href="{{ route('inventory.campaigns.show', $c->id) }}" style="color: var(--text); text-decoration:none; font-weight:600;">
                                    {{ $c->name }}
                                </a>
                                <div style="color: var(--text-muted); font-size: 12px; margin-top: 2px;">
                                    {{ \Illuminate\Support\Str::limit($c->message, 60) }}
                                </div>
                            </td>
                            <td style="padding: 14px 12px;">
                                <span style="background: {{ $audBg }}; color: {{ $audColor }}; padding: 4px 10px; border-radius: 12px; font-size: 12px; font-weight: 600;">
                                    {{ ucfirst(str_replace(['tag:', '_'], ['', ' '], $audience)) }}
                                </span>
                            </td>
                            <td style="padding: 14px 12px; text-align:right; font-family: monospace;">
                                {{ number_format($c->recipients_count ?? 0) }}
                            </td>
                            <td style="padding: 14px 12px; text-align:right; font-size: 13px;">
                                <span style="color: var(--success);">{{ number_format($c->sent_count ?? 0) }}</span>
                                <span style="color: var(--text-muted);">/</span>
                                <span style="color: var(--danger);">{{ number_format($c->failed_count ?? 0) }}</span>
                            </td>
                            <td style="padding: 14px 12px;">
                                <span style="background: {{ $stBg }}; color: {{ $stColor }}; padding: 4px 10px; border-radius: 12px; font-size: 12px; font-weight: 600; text-transform: capitalize;">
                                    {{ $status }}
                                </span>
                            </td>
                            <td style="padding: 14px 12px; color: var(--text-muted); font-size: 13px;">
                                {{ $c->created_at ? $c->created_at->diffForHumans() : '—' }}
                            </td>
                            <td style="padding: 14px 12px; text-align:right;">
                                <a href="{{ route('inventory.campaigns.show', $c->id) }}" style="color: var(--accent); text-decoration:none; font-size: 13px; font-weight:600;">
                                    View <i class="fas fa-arrow-right" style="font-size:11px;"></i>
                                </a>
                            </td>
                        </tr>
                    @endforeach
                </tbody>
            </table>

            <div style="margin-top: 20px;">
                {{ $campaigns->links() }}
            </div>
        @endif
    </div>
</div>
@endsection