@extends('layouts.app')
@section('title', __('WhatsApp').' — '.$patient->full_name)

@section('content')
<div class="d-flex flex-wrap justify-content-between align-items-center gap-2 mb-2">
    <h1 class="h4 fw-bold mb-0">💬 {{ $patient->full_name }}</h1>
    <a class="btn btn-sm mb-btn-ghost" target="_blank" rel="noopener"
       href="https://wa.me/{{ $patient->phone_normalized }}">{{ __('Open in WhatsApp') }}</a>
</div>
@include('patients._tabs')

<div class="mb-card p-3 p-md-4" style="max-width:40rem">
    <div class="d-flex flex-column gap-2 mb-3">
        @forelse($messages as $m)
            <div class="ms-auto" style="max-width:85%">
                <div class="wa-bubble" style="background: var(--mb-mint)">
                    <div style="white-space:pre-wrap">{{ $m->body }}</div>
                    @if($m->hasMedia())<div class="small mt-1">📎 {{ $m->media_filename }}</div>@endif
                </div>
                <div class="small mb-muted text-end mt-1">
                    {{ $m->created_at->setTimezone(\App\Support\ClinicTime::timezone())->format('d M · H:i') }}
                    · <span style="color: {{ $m->status->color() }}">{{ $m->status->label() }}</span>
                    @if($m->status === \App\Enums\WaMessageStatus::Failed)
                    @can('retry', $m)
                        <form method="POST" action="{{ route('tenant.whatsapp.retry', $m) }}" class="d-inline">
                            @csrf <button class="btn btn-sm btn-link p-0">↻ {{ __('Retry') }}</button>
                        </form>
                    @endcan
                    @endif
                </div>
            </div>
        @empty
            <p class="mb-muted text-center py-4">{{ __('No messages yet.') }}</p>
        @endforelse
    </div>

    @if($patient->whatsapp_opt_in)
    @can('create', App\Models\WaMessage::class)
    <form method="POST" action="{{ route('tenant.patients.whatsapp.send', $patient) }}" class="d-flex gap-2">
        @csrf
        <input name="body" class="form-control" placeholder="{{ __('Type a message…') }}" maxlength="4000" required>
        <button class="btn mb-btn-primary">{{ __('Send') }}</button>
    </form>
    @endcan
    @else
        <p class="mb-muted small mb-0">{{ __('This patient has opted out of WhatsApp messages.') }}</p>
    @endif
</div>
@endsection