{{-- user/chat/index.blade.php | Obrempong | Jcode --}}
@extends('layouts.app')
@section('title','Global Chat')
@push('styles')
<style>
.chat-wrap{display:flex;flex-direction:column;height:calc(100vh - 180px);}
.chat-msgs{flex:1;overflow-y:auto;padding:12px;display:flex;flex-direction:column;gap:10px;}
.msg-row{display:flex;gap:8px;align-items:flex-end;}
.msg-row.mine{flex-direction:row-reverse;}
.msg-bubble{max-width:72%;padding:10px 14px;border-radius:16px;font-size:13px;line-height:1.4;word-break:break-word;}
.msg-row.mine .msg-bubble{background:var(--primary);color:#fff;border-bottom-right-radius:4px;}
.msg-row:not(.mine) .msg-bubble{background:var(--surface);border:1px solid var(--border);border-bottom-left-radius:4px;}
.msg-avatar{width:30px;height:30px;border-radius:50%;object-fit:cover;flex-shrink:0;}
.msg-meta{font-size:10px;color:var(--text-muted);margin-top:3px;}
.chat-input-bar{padding:10px 12px;border-top:1px solid var(--border);background:var(--surface);display:flex;gap:8px;}
.chat-input-bar input{flex:1;padding:10px 14px;border:2px solid var(--border);border-radius:24px;font-family:inherit;font-size:14px;outline:none;}
.chat-input-bar input:focus{border-color:var(--primary);}
</style>
@endpush
@section('content')
<div class="app-header" style="background:var(--surface);border-bottom:1px solid var(--border);">
    <a href="{{ route('home') }}" style="color:var(--text);text-decoration:none;font-size:16px;"><i class="fa fa-arrow-left"></i></a>
    <div style="font-size:16px;font-weight:700;flex:1;margin-left:12px;color:var(--text);">💬 Global Chat</div>
    <div style="font-size:12px;color:var(--success);font-weight:600;"><i class="fa fa-circle" style="font-size:8px;"></i> Live</div>
</div>

<div class="chat-wrap">
    <div class="chat-msgs" id="chat-msgs">
        @foreach($messages as $msg)
        <div class="msg-row {{ $msg->user_id===auth()->id()?'mine':'' }}" id="msg-{{ $msg->id }}">
            @if($msg->user_id!==auth()->id())
            <img src="{{ $msg->user->avatar_url }}" class="msg-avatar">
            @endif
            <div>
                @if($msg->user_id!==auth()->id())
                <div style="font-size:11px;font-weight:700;color:var(--primary);margin-bottom:3px;">{{ $msg->user->name }}</div>
                @endif
                <div class="msg-bubble">{{ $msg->message }}</div>
                <div class="msg-meta {{ $msg->user_id===auth()->id()?'text-right':'' }}">{{ $msg->created_at->diffForHumans() }}</div>
            </div>
        </div>
        @endforeach
    </div>

    <div class="chat-input-bar">
        <input type="text" id="msg-input" placeholder="Type a message..." maxlength="500" onkeydown="if(event.key==='Enter')sendMsg()">
        <button class="btn btn-primary" style="border-radius:50%;width:42px;height:42px;padding:0;" onclick="sendMsg()"><i class="fa fa-paper-plane"></i></button>
    </div>
</div>
@endsection
@push('scripts')
<script>
const box=document.getElementById('chat-msgs');
box.scrollTop=box.scrollHeight;

async function sendMsg(){
    const input=document.getElementById('msg-input');
    const msg=input.value.trim();
    if(!msg)return;
    input.value='';
    try{
        const r=await post('{{ route('chat.send') }}',{message:msg});
        if(r.success){
            const d=document.createElement('div');
            d.className='msg-row mine';
            d.innerHTML=`<div><div class="msg-bubble">${r.message.message}</div><div class="msg-meta">just now</div></div>`;
            box.appendChild(d);
            box.scrollTop=box.scrollHeight;
        }
    }catch(e){}
}

// Auto-refresh every 15s
setInterval(async()=>{
    const r=await fetch('{{ route('chat.index') }}',{headers:{'Accept':'application/json'}});
},15000);
</script>
@endpush