@extends('layouts.app')

@section('title', 'Chat - INUFA')
@section('header', 'Chat')

@push('styles')
<style>
.chat-container {
    max-width: 800px;
    margin: 0 auto;
    background: white;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.chat-header {
    padding: 1rem;
    border-bottom: 1px solid #e5e7eb;
    display: flex;
    align-items: center;
}

.chat-header-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #e5e7eb;
    margin-right: 1rem;
}

.chat-header-info h2 {
    margin: 0;
    font-size: 1.1rem;
    font-weight: 600;
}

.chat-body {
    height: 400px;
    overflow-y: auto;
    padding: 1rem;
    background: #f9fafb;
}

.chat-message {
    margin-bottom: 1rem;
    display: flex;
    align-items: flex-start;
}

.chat-message.sent {
    flex-direction: row-reverse;
}

.chat-message-content {
    max-width: 70%;
    padding: 0.75rem 1rem;
    border-radius: 1rem;
    margin: 0 0.5rem;
}

.chat-message.received .chat-message-content {
    background: #f3f4f6;
}

.chat-message.sent .chat-message-content {
    background: #3b82f6;
    color: white;
}

.chat-input {
    padding: 1rem;
    border-top: 1px solid #e5e7eb;
}

.chat-input form {
    display: flex;
    gap: 0.5rem;
}

.chat-input input {
    flex: 1;
    padding: 0.5rem 1rem;
    border: 1px solid #e5e7eb;
    border-radius: 9999px;
}

.chat-input button {
    padding: 0.5rem 1rem;
    background: #3b82f6;
    color: white;
    border-radius: 9999px;
    border: none;
    cursor: pointer;
}

.chat-input button:hover {
    background: #2563eb;
}
</style>
@endpush

@section('content')
<div class="container mx-auto px-4 py-6">
    <div class="chat-container">
        <div class="chat-header">
            <div class="chat-header-avatar">
                <!-- Avatar bisa ditambahkan di sini -->
            </div>
            <div class="chat-header-info">
                <h2>{{ $chatUser->nama }}</h2>
                <p class="text-sm text-gray-500">{{ $chatUser->tipe_pengguna }}</p>
            </div>
        </div>

        <div class="chat-body" id="chat-body">
            @foreach($chats as $chat)
                <div class="chat-message {{ $chat->sender_id === Auth::id() ? 'sent' : 'received' }}">
                    <div class="chat-message-content">
                        <p>{{ $chat->message }}</p>
                        <div class="text-xs {{ $chat->sender_id === Auth::id() ? 'text-blue-200' : 'text-gray-400' }}">
                            {{ $chat->created_at->format('H:i') }}
                        </div>
                    </div>
                </div>
            @endforeach
        </div>

        <div class="chat-input">
            <form action="{{ route('chat.store', ['user_id' => $chatUser->id]) }}" method="POST">
                @csrf
                <input type="hidden" name="receiver_id" value="{{ $chatUser->id }}">
                <div class="flex flex-col space-y-2">
                    @if(auth()->user()->tipe_pengguna === 'admin')
                    <div class="flex flex-wrap gap-2">
                        <button type="button" onclick="insertTemplate('Terima kasih atas pesanan Anda. Mohon tunggu konfirmasi selanjutnya.')" class="px-3 py-1 text-sm bg-blue-100 text-blue-700 rounded hover:bg-blue-200">Pesan Terima Kasih</button>
                        <button type="button" onclick="insertTemplate('Pembayaran Anda telah kami terima. Tim kami akan segera menghubungi Anda untuk detail lebih lanjut.')" class="px-3 py-1 text-sm bg-green-100 text-green-700 rounded hover:bg-green-200">Konfirmasi Pembayaran</button>
                        <button type="button" onclick="insertTemplate('Mohon maaf, pembayaran Anda belum kami terima. Silakan kirim bukti pembayaran yang valid.')" class="px-3 py-1 text-sm bg-red-100 text-red-700 rounded hover:bg-red-200">Pembayaran Invalid</button>
                    </div>
                    @else
                    <div class="flex flex-wrap gap-2">
                        <button type="button" onclick="insertTemplate('Mohon informasi untuk status pembayaran saya.')" class="px-3 py-1 text-sm bg-blue-100 text-blue-700 rounded hover:bg-blue-200">Cek Status Pembayaran</button>
                        <button type="button" onclick="insertTemplate('Saya sudah melakukan pembayaran. Berikut saya lampirkan bukti pembayarannya.')" class="px-3 py-1 text-sm bg-green-100 text-green-700 rounded hover:bg-green-200">Konfirmasi Pembayaran</button>
                        <button type="button" onclick="insertTemplate('Mohon informasi lebih lanjut mengenai layanan yang tersedia.')" class="px-3 py-1 text-sm bg-purple-100 text-purple-700 rounded hover:bg-purple-200">Tanya Informasi</button>
                    </div>
                    @endif
                    <div class="flex space-x-2">
                        <input type="text" name="message" id="message-input" placeholder="Ketik pesan..." required class="flex-1 focus:ring-2 focus:ring-blue-500 focus:outline-none rounded-full px-4 py-2 border">
                        <button type="submit" class="bg-blue-600 text-white rounded-full p-2 hover:bg-blue-700">
                            <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
                                <path d="M10.894 2.553a1 1 0 00-1.788 0l-7 14a1 1 0 001.169 1.409l5-1.429A1 1 0 009 15.571V11a1 1 0 112 0v4.571a1 1 0 00.725.962l5 1.428a1 1 0 001.17-1.408l-7-14z" />
                            </svg>
                        </button>
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>

@push('scripts')
<script>
    // Auto-scroll ke pesan terbaru
    const chatBody = document.getElementById('chat-body');
    chatBody.scrollTop = chatBody.scrollHeight;

    function insertTemplate(text) {
        const input = document.getElementById('message-input');
        input.value = text;
        input.focus();
    }
</script>
@endpush
@endsection