@extends('layouts.admin')
@section('title','Canlı Destek')
@section('content')
<div class="p-4 md:p-6">
    <div class="flex items-center justify-between mb-5">
        <div>
            <h1 class="text-2xl font-bold text-white">Canlı Destek</h1>
            <p class="text-zinc-400 text-sm">Müşteri görüşmelerini buradan cevaplayabilirsiniz.</p>
        </div>
        <a href="{{ route('admin.live-support') }}" class="px-4 py-2 rounded-lg bg-red-500/20 border border-red-500/30 text-red-200">Yenile</a>
    </div>
    <div class="grid grid-cols-1 lg:grid-cols-[340px_minmax(0,1fr)] gap-4">
        <div class="content-card m-0 p-0 overflow-hidden">
            <div class="p-4 border-b border-red-500/20 font-semibold">Görüşmeler</div>
            <div class="divide-y divide-zinc-800 max-h-[650px] overflow-auto">
                @forelse($chats as $chat)
                    <a href="{{ route('admin.live-support', ['chat'=>$chat->id]) }}" class="block p-4 hover:bg-white/5 {{ $active && $active->id == $chat->id ? 'bg-red-500/10' : '' }}">
                        <div class="flex items-center justify-between gap-2">
                            <strong class="text-white truncate">{{ $chat->full_name }}</strong>
                            <span class="text-[11px] px-2 py-1 rounded {{ $chat->status === 'closed' ? 'bg-zinc-700 text-zinc-300' : ($chat->status === 'waiting' ? 'bg-yellow-500/20 text-yellow-200' : 'bg-emerald-500/20 text-emerald-200') }}">{{ $chat->status }}</span>
                        </div>
                        <div class="text-zinc-400 text-xs mt-1">{{ $chat->username ?: 'Kullanıcı adı yok' }} · #{{ $chat->id }}</div>
                    </a>
                @empty
                    <div class="p-5 text-zinc-400">Henüz görüşme yok.</div>
                @endforelse
            </div>
        </div>
        <div class="content-card m-0">
            @if($active)
                <div class="flex items-center justify-between gap-3 border-b border-red-500/20 pb-4 mb-4">
                    <div>
                        <h2 class="text-xl font-bold text-white">{{ $active->full_name }}</h2>
                        <p class="text-zinc-400 text-sm">{{ $active->username ?: 'Kullanıcı adı yok' }} · Durum: {{ $active->status }}</p>
                    </div>
                    <form method="POST" action="{{ route('admin.live-support.close', $active->id) }}">@csrf<button class="px-4 py-2 rounded-lg bg-zinc-800 hover:bg-zinc-700 text-white">Kapat</button></form>
                </div>
                <div class="h-[430px] overflow-auto bg-black/30 rounded-xl border border-zinc-800 p-4 space-y-3 mb-4">
                    @foreach($messages as $msg)
                        <div class="max-w-[80%] {{ $msg->sender === 'admin' ? 'ml-auto text-right' : '' }}">
                            <div class="inline-block rounded-xl px-3 py-2 text-sm {{ $msg->sender === 'admin' ? 'bg-red-500 text-white' : ($msg->sender === 'user' ? 'bg-zinc-800 text-white' : 'bg-yellow-500/20 text-yellow-100') }}">{{ $msg->message }}</div>
                            <div class="text-[11px] text-zinc-500 mt-1">{{ $msg->created_at }}</div>
                        </div>
                    @endforeach
                </div>
                <form method="POST" action="{{ route('admin.live-support.reply', $active->id) }}" class="flex gap-2">@csrf
                    <input name="message" required class="flex-1 bg-zinc-900 border border-zinc-700 rounded-lg px-4 py-3 text-white" placeholder="Cevabınızı yazın...">
                    <button class="px-5 py-3 rounded-lg bg-red-500 hover:bg-red-600 text-white font-semibold">Gönder</button>
                </form>
            @else
                <div class="text-zinc-400">Bir görüşme seçin.</div>
            @endif
        </div>
    </div>
</div>

<script>
    setTimeout(function(){ window.location.reload(); }, 10000);
</script>
@endsection