@extends('layouts.app')
@section('title', 'Messages')
@section('page-title', 'Messages')
@section('content')
<div class="card mb-3">
    <div class="card-body">
        <form method="GET" class="row g-2 align-items-end">
            <div class="col-md-3">
                <label class="form-label small">Device</label>
                <select name="device_id" class="form-select form-select-sm">
                    <option value="">All Devices</option>
                    @foreach($devices as $d)
                        <option value="{{ $d->id }}" {{ request('device_id') == $d->id ? 'selected' : '' }}>{{ $d->name }}</option>
                    @endforeach
                </select>
            </div>
            <div class="col-md-2">
                <label class="form-label small">Direction</label>
                <select name="direction" class="form-select form-select-sm">
                    <option value="">All</option>
                    <option value="outgoing" {{ request('direction') == 'outgoing' ? 'selected' : '' }}>Outgoing</option>
                    <option value="incoming" {{ request('direction') == 'incoming' ? 'selected' : '' }}>Incoming</option>
                </select>
            </div>
            <div class="col-md-4">
                <label class="form-label small">Search</label>
                <input type="text" name="search" class="form-control form-control-sm" value="{{ request('search') }}" placeholder="Search messages...">
            </div>
            <div class="col-md-3">
                <button type="submit" class="btn btn-sm btn-whatsapp">Filter</button>
                <a href="{{ route('dashboard.messages.index') }}" class="btn btn-sm btn-outline-secondary">Reset</a>
            </div>
        </form>
    </div>
</div>

<div class="card">
    <div class="card-body p-0">
        <div class="table-responsive">
            <table class="table table-hover mb-0">
                <thead class="table-light">
                    <tr><th>Direction</th><th>Chat</th><th>Type</th><th>Content</th><th>Status</th><th>Device</th><th>Time</th></tr>
                </thead>
                <tbody>
                    @forelse($messages as $msg)
                    <tr>
                        <td>
                            @if($msg->direction === 'outgoing')
                                <span class="badge bg-success"><i class="bi bi-arrow-up"></i></span>
                            @else
                                <span class="badge bg-info"><i class="bi bi-arrow-down"></i></span>
                            @endif
                        </td>
                        <td class="text-truncate" style="max-width: 120px;">{{ $msg->chat_jid }}</td>
                        <td><span class="badge bg-light text-dark">{{ $msg->type }}</span></td>
                        <td class="text-truncate" style="max-width: 200px;">{{ Str::limit($msg->content, 50) }}</td>
                        <td>
                            @php $colors = ['pending'=>'warning','sent'=>'success','delivered'=>'primary','read'=>'info','failed'=>'danger']; @endphp
                            <span class="badge bg-{{ $colors[$msg->status] ?? 'secondary' }}">{{ $msg->status }}</span>
                        </td>
                        <td class="small">{{ $msg->device?->name ?? '-' }}</td>
                        <td class="small text-muted">{{ $msg->created_at->diffForHumans() }}</td>
                    </tr>
                    @empty
                    <tr><td colspan="7" class="text-center text-muted py-4">No messages found</td></tr>
                    @endforelse
                </tbody>
            </table>
        </div>
    </div>
</div>
<div class="mt-3">{{ $messages->appends(request()->query())->links() }}</div>
@endsection