@extends('layouts.app')
@section('title', 'SMS Center')
@section('content')
<div class="card" style="max-width:600px;">
    <h2 style="font-size:17px;color:#0b4f2c;margin-bottom:16px;">SMS Center</h2>
    <form method="POST" action="{{ url('/api/messages/send') }}">
        @csrf
        <input type="hidden" name="channel" value="sms">
        <label style="display:block;font-size:12px;margin-bottom:4px;">Template (optional)</label>
        <select style="width:100%;padding:8px;border:1px solid #ddd;border-radius:6px;margin-bottom:12px;">
            <option value="">None — write custom message</option>
            @foreach($templates as $t)
                <option value="{{ $t->id }}">{{ $t->name }}</option>
            @endforeach
        </select>
        <label style="display:block;font-size:12px;margin-bottom:4px;">Recipients (comma-separated phone numbers)</label>
        <input type="text" name="recipients" placeholder="+2348012345678, +2348098765432" style="width:100%;padding:8px;border:1px solid #ddd;border-radius:6px;margin-bottom:12px;">
        <label style="display:block;font-size:12px;margin-bottom:4px;">Message</label>
        <textarea name="content" rows="4" maxlength="160" style="width:100%;padding:8px;border:1px solid #ddd;border-radius:6px;margin-bottom:16px;"></textarea>
        <button type="submit" style="background:#0b4f2c;color:#fff;border:none;padding:10px 20px;border-radius:6px;font-size:13px;cursor:pointer;">Send SMS</button>
    </form>
</div>

<div class="card">
    <h3 style="font-size:14px;color:#0b4f2c;margin-bottom:10px;">Recent SMS</h3>
    <table style="width:100%;border-collapse:collapse;font-size:12.5px;">
        <thead><tr style="background:#f4f6f5;text-align:left;"><th style="padding:6px;">To</th><th style="padding:6px;">Status</th><th style="padding:6px;">Sent</th></tr></thead>
        <tbody>
            @forelse($recentLogs as $log)
                <tr style="border-bottom:1px solid #eee;"><td style="padding:6px;">{{ $log->recipient }}</td><td style="padding:6px;text-transform:capitalize;">{{ $log->status }}</td><td style="padding:6px;">{{ $log->created_at->diffForHumans() }}</td></tr>
            @empty
                <tr><td colspan="3" style="padding:10px;color:#999;">No SMS sent yet.</td></tr>
            @endforelse
        </tbody>
    </table>
</div>
@endsection