@extends('dashboard.layouts.master')
@section('title', 'Chat History | Admin Panel')

@push('after-styles')
<style>
    .chat-container { height: 500px; overflow-y: auto; padding: 20px; background: #f9f9f9; border: 1px solid #eee; border-radius: 8px; }
    .message { margin-bottom: 15px; max-width: 80%; padding: 10px 15px; border-radius: 15px; position: relative; }
    .message.sent { margin-left: auto; background: #e3f2fd; color: #0d47a1; border-bottom-right-radius: 2px; }
    .message.received { margin-right: auto; background: #fff; color: #333; border-bottom-left-radius: 2px; border: 1px solid #eee; }
    .message .time { font-size: 10px; color: #999; margin-top: 5px; display: block; }
    .message .sender { font-size: 11px; font-weight: bold; margin-bottom: 3px; display: block; }
</style>
@endpush

@section('content')
<div class="padding">
    <div class="box">
        <div class="box-header">
            <h3>Conversation History</h3>
            <small>
                <a href="{{ route('adminHome') }}">Dashboard</a> / 
                <a href="{{ route('chat-monitoring.index') }}">Chat Monitoring</a> / 
                History
            </small>
        </div>

        <div class="box-body">
            <div class="row m-b-2">
                <div class="col-sm-6">
                    <div class="p-a border-light b-a">
                        <h6 class="_600 m-a-0">Customer</h6>
                        <div class="text-muted">{{ $chat->customer?->name ?? 'Unknown' }} ({{ $chat->customer?->email ?? '-' }})</div>
                    </div>
                </div>
                <div class="col-sm-6">
                    <div class="p-a border-light b-a">
                        <h6 class="_600 m-a-0">Business</h6>
                        <div class="text-muted">{{ $chat->businessProfile?->business_name ?? 'Unknown' }}</div>
                    </div>
                </div>
            </div>

            <div class="chat-container" id="chatContainer">
                @forelse($messages as $msg)
                    <div class="message {{ $msg->sender_type == 'user' ? 'received' : 'sent' }}">
                        <span class="sender">{{ $msg->sender_type == 'user' ? 'Customer' : 'Business' }}</span>
                        @if($msg->message_type == 'text')
                            <div class="text">{{ $msg->message }}</div>
                        @elseif($msg->message_type == 'image')
                            <img src="{{ asset('storage/' . $msg->file) }}" style="max-width: 200px; border-radius: 4px;">
                        @else
                            <a href="{{ asset('storage/' . $msg->file) }}" target="_blank"><i class="fa fa-file"></i> View Attachment</a>
                        @endif
                        <span class="time">{{ $msg->created_at->format('h:i A, d M Y') }}</span>
                    </div>
                @empty
                    <div class="text-center p-a-lg text-muted">No messages in this conversation.</div>
                @endforelse
            </div>
            
            <div class="m-t">
                <a href="{{ route('chat-monitoring.index') }}" class="btn btn-default">Back to List</a>
            </div>
        </div>
    </div>
</div>
@endsection

@push('after-scripts')
<script>
    var container = document.getElementById('chatContainer');
    container.scrollTop = container.scrollHeight;
</script>
@endpush