@extends('layouts.app')

@section('title', 'Chat Conversation')

@section('content')
<div class="mb-6 flex justify-between items-center">
    <div>
        <h1 class="text-3xl font-bold text-gray-900">Chat Conversation</h1>
        <p class="text-sm text-gray-500 mt-1">{{ $session->contact->phone_number }}</p>
    </div>
    <a href="{{ route('admin.chat.index') }}" class="text-indigo-600 hover:text-indigo-900">← Back to Sessions</a>
</div>

<div class="bg-white shadow rounded-lg overflow-hidden" style="height: 600px; display: flex; flex-direction: column;">
    <!-- Chat Messages -->
    <div class="flex-1 overflow-y-auto p-4 space-y-4 bg-gray-50">
        @foreach($session->messages as $message)
        <div class="flex {{ $message->direction === 'in' ? 'justify-start' : 'justify-end' }}">
            <div class="max-w-xs lg:max-w-md px-4 py-2 rounded-lg {{ $message->direction === 'in' ? 'bg-white text-gray-800' : 'bg-indigo-600 text-white' }}">
                <p class="text-sm">{{ $message->message }}</p>
                <p class="text-xs mt-1 opacity-75">{{ $message->created_at->format('H:i') }}</p>
            </div>
        </div>
        @endforeach
    </div>

    <!-- Send Message Form -->
    <div class="border-t border-gray-200 p-4 bg-white">
        <form method="POST" action="{{ route('admin.chat.send', $session) }}" class="flex space-x-2">
            @csrf
            <input type="text" name="message" placeholder="Type a message..." required class="flex-1 rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500">
            <button type="submit" class="px-4 py-2 bg-indigo-600 text-white rounded-md hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
                Send
            </button>
        </form>
    </div>
</div>

<div class="mt-4 bg-white shadow rounded-lg p-6">
    <h3 class="text-lg font-medium text-gray-900 mb-4">Session Details</h3>
    <dl class="grid grid-cols-1 gap-x-4 gap-y-6 sm:grid-cols-2">
        <div>
            <dt class="text-sm font-medium text-gray-500">Status</dt>
            <dd class="mt-1 text-sm text-gray-900">
                <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full {{ $session->status === 'active' ? 'bg-green-100 text-green-800' : 'bg-gray-100 text-gray-800' }}">
                    {{ ucfirst($session->status) }}
                </span>
            </dd>
        </div>
        <div>
            <dt class="text-sm font-medium text-gray-500">Current Step</dt>
            <dd class="mt-1 text-sm text-gray-900">{{ $session->current_step ?: 'N/A' }}</dd>
        </div>
        <div>
            <dt class="text-sm font-medium text-gray-500">Created</dt>
            <dd class="mt-1 text-sm text-gray-900">{{ $session->created_at->format('M d, Y H:i') }}</dd>
        </div>
        <div>
            <dt class="text-sm font-medium text-gray-500">Last Updated</dt>
            <dd class="mt-1 text-sm text-gray-900">{{ $session->updated_at->format('M d, Y H:i') }}</dd>
        </div>
    </dl>
</div>
@endsection