@extends('layouts.app')

@section('content')

<div class="container">

    <h4>Chat Orang Tua</h4>

    <div class="card p-3 mb-3" style="height:400px; overflow-y:auto;">

        @foreach($messages as $m)

        @if($m->sender == 'user')
        <div class="text-end mb-2">
            <span class="badge bg-primary">{{ $m->message }}</span>
        </div>
        @elseif($m->sender == 'bot')
        <div class="text-start mb-2">
            <span class="badge bg-success">{{ $m->message }}</span>
        </div>
        @else
        <div class="text-start mb-2">
            <span class="badge bg-dark">{{ $m->message }}</span>
        </div>
        @endif

        @endforeach

    </div>

    <form action="/chat/kirim" method="POST">
        @csrf
        <div class="input-group">
            <input type="text" name="message" class="form-control" placeholder="Tulis pesan...">
            <button class="btn btn-primary">Kirim</button>
        </div>
    </form>

</div>

@endsection