@extends('layouts.app')
@section('title', 'Inbox')
@section('page-title', 'Inbox')
@section('content')
<div class="row g-3">
    <div class="col-md-3">
        <div class="card">
            <div class="card-header bg-white"><h6 class="mb-0">Chats</h6></div>
            <div class="card-body p-0" style="max-height: 600px; overflow-y: auto;">
                @forelse($chats as $chat)
                <div class="p-3 border-bottom" style="cursor: pointer;">
                    <div class="fw-semibold small">{{ $chat['name'] ?? $chat['id'] ?? 'Unknown' }}</div>
                    <div class="text-muted small text-truncate">{{ $chat['lastMessage'] ?? '' }}</div>
                </div>
                @empty
                <div class="p-3 text-center text-muted">
                    @if($selectedDevice)
                        No chats found
                    @else
                        Connect a device first
                    @endif
                </div>
                @endforelse
            </div>
        </div>
    </div>
    <div class="col-md-9">
        <div class="card">
            <div class="card-header bg-white d-flex justify-content-between align-items-center">
                <h6 class="mb-0">Quick Send</h6>
                <select class="form-select form-select-sm" style="width: 200px;" onchange="window.location.href='?device_id='+this.value">
                    @foreach($devices as $d)
                        <option value="{{ $d->id }}" {{ $selectedDevice && $selectedDevice->id == $d->id ? 'selected' : '' }}>{{ $d->name }}</option>
                    @endforeach
                </select>
            </div>
            <div class="card-body">
                @if($selectedDevice && $selectedDevice->isConnected())
                <form method="POST" action="{{ route('dashboard.messages.send') }}">
                    @csrf
                    <input type="hidden" name="device_id" value="{{ $selectedDevice->id }}">
                    <div class="row g-2">
                        <div class="col-md-4">
                            <input type="text" name="number" class="form-control" placeholder="Phone number (e.g., 628xxx)" required>
                        </div>
                        <div class="col-md-6">
                            <input type="text" name="message" class="form-control" placeholder="Type your message..." required>
                        </div>
                        <div class="col-md-2">
                            <button type="submit" class="btn btn-whatsapp w-100"><i class="bi bi-send"></i> Send</button>
                        </div>
                    </div>
                </form>
                @else
                <div class="text-center text-muted py-5">Select a connected device to send messages</div>
                @endif
            </div>
        </div>
    </div>
</div>
@endsection