@extends('cms.layout')
@section('content_header')
  <h1 class="mb-0">Live Chat: {{ $session->public_token }}</h1>
@endsection
@section('cms')
  <div class="row">
    <div class="col-lg-8">
      <div class="card shadow-sm mb-3">
        <div class="card-body">
          <div class="d-flex justify-content-between align-items-center mb-2">
            <div>
              <span class="badge bg-secondary">{{ strtoupper($session->mode) }}</span>
              @php $cls = $session->status==='pending'?'warning':($session->status==='open'?'success':'secondary'); @endphp
              <span class="badge bg-{{ $cls }}">{{ ucfirst($session->status) }}</span>
              @if($session->assignee)
                <span class="badge bg-info">Assigned: {{ optional($session->assignee)->name }}</span>
              @endif
            </div>
            <div class="btn-group">
              <form method="post" action="{{ route('cms.livechat.claim', $session) }}">@csrf<button class="btn btn-sm btn-outline-primary" {{ $session->assigned_to ? 'disabled' : '' }}>Claim</button></form>
              <form method="post" action="{{ route('cms.livechat.close', $session) }}" onsubmit="return confirm('Close chat?')">@csrf<button class="btn btn-sm btn-outline-danger">Close</button></form>
              <a href="{{ route('cms.livechat.transcript', $session) }}" class="btn btn-sm btn-outline-secondary">Transcript</a>
              <a href="{{ route('cms.livechat.export.txt', $session) }}" class="btn btn-sm btn-outline-secondary">.txt</a>
              <a href="{{ route('cms.livechat.export.json', $session) }}" class="btn btn-sm btn-outline-secondary">.json</a>
            </div>
          </div>

          <div id="msgs" class="border rounded p-2" style="height:420px; overflow:auto; background:#fafafa"></div>
          <div class="input-group mt-2">
            <input id="msgInput" class="form-control" placeholder="Tulis balasan…" maxlength="4000"/>
            <button id="btnSend" class="btn btn-primary">Send</button>
          </div>
        </div>
      </div>
    </div>
    <div class="col-lg-4">
      <div class="card shadow-sm">
        <div class="card-body">
          <div><strong>Visitor:</strong> {{ $session->visitor_name ?: '-' }}</div>
          <div class="small mt-1"><strong>Phone:</strong> {{ $session->visitor_phone ?: '-' }}</div>
          <div class="small"><strong>Email:</strong> {{ $session->visitor_email ?: '-' }}</div>
          <div class="small text-muted">IP: {{ $session->ip_address }} | UA: {{ $session->user_agent }}</div>
          <div class="small text-muted mt-1">Started: {{ optional($session->started_at)->format('Y-m-d H:i') }}</div>
        </div>
      </div>
    </div>
  </div>

@push('scripts')
<script>
  (function(){
    const list=document.getElementById('msgs'); const input=document.getElementById('msgInput'); const btn=document.getElementById('btnSend');
    function append(sender, text){ const wrap=document.createElement('div'); wrap.className='mb-2'; const b=document.createElement('div'); b.className = sender==='lawyer' ? 'bg-primary text-white p-2 rounded-3 ms-auto' : (sender==='ai' ? 'bg-light p-2 rounded-3' : 'bg-white p-2 border rounded-3'); b.style.maxWidth='80%'; b.style.whiteSpace='pre-wrap'; b.textContent = text; wrap.appendChild(b); wrap.style.display='flex'; wrap.style.flexDirection='column'; wrap.style.alignItems = sender==='lawyer' ? 'flex-end' : 'flex-start'; list.appendChild(wrap); list.scrollTop=list.scrollHeight; }
    async function poll(){ try{ const r=await fetch('{{ route('cms.livechat.messages', $session) }}'); const j=await r.json(); if(!j||!j.ok) return; list.innerHTML=''; (j.messages||[]).forEach(m=> append(m.sender,m.content)); }catch(e){} }
    async function send(){ const t=(input.value||'').trim(); if(!t) return; input.value=''; append('lawyer', t); try{ await fetch('{{ route('cms.livechat.send', $session) }}', { method:'POST', headers:{'Content-Type':'application/json','X-CSRF-TOKEN':'{{ csrf_token() }}'}, body: JSON.stringify({ content: t }) }); setTimeout(poll, 500); }catch(e){ alert('Send failed'); } }
    btn.addEventListener('click', send); input.addEventListener('keydown', e=>{ if(e.key==='Enter' && !e.shiftKey){ e.preventDefault(); send(); }});
    poll(); setInterval(poll, 3000);
  })();
</script>
@endpush
@endsection