@extends('layouts.customer')

@section('content')
<div class="max-w-3xl mx-auto px-4 sm:px-6 lg:px-8 py-8">

    <a href="{{ route('customer.messages') }}" class="inline-flex items-center text-sm text-gray-500 hover:text-[#0D6B58] mb-6 transition">
        <svg class="w-4 h-4 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"/>
        </svg>
        Back to Inbox
    </a>

    <div class="bg-white rounded-xl shadow-sm border border-gray-100 overflow-hidden">
        {{-- Header --}}
        <div class="px-6 py-5 border-b border-gray-100">
            <h1 class="text-xl font-bold text-gray-900">{{ $message->subject }}</h1>
            <div class="flex items-center space-x-4 mt-2 text-sm text-gray-500">
                <span>From: <span class="font-medium text-gray-700">{{ $message->sender_name ?? 'System' }}</span></span>
                <span>&middot;</span>
                <span>{{ $message->created_at->format('M d, Y h:i A') }}</span>
            </div>
        </div>

        {{-- Content --}}
        <div class="px-6 py-6">
            <div class="prose prose-sm max-w-none text-gray-700">
                {!! nl2br(e($message->body)) !!}
            </div>
        </div>

        {{-- Metadata --}}
        <div class="px-6 py-4 bg-gray-50 border-t border-gray-100">
            <div class="flex items-center space-x-6 text-xs text-gray-500">
                <span>From: {{ $message->sender_name ?? 'System' }}</span>
                <span>To: {{ $message->recipient_name ?? $user->name }}</span>
                <span>{{ $message->created_at->format('M d, Y h:i A') }}</span>
            </div>
        </div>
    </div>

    {{-- Reply Form (if from bank/admin) --}}
    @if(!isset($message->is_from_user) || !$message->is_from_user)
    <div class="mt-6 bg-white rounded-xl shadow-sm border border-gray-100 p-6">
        <h3 class="text-lg font-semibold text-gray-900 mb-4">Reply</h3>
        <form method="POST" action="{{ route('customer.messages.reply', $message->id) }}">
            @csrf
            @method('POST')
            <div class="mb-4">
                <textarea name="body" rows="4" class="w-full px-3 py-2.5 border border-gray-200 rounded-lg text-sm focus:ring-2 focus:ring-[#0D6B58]/20 focus:border-[#0D6B58] resize-none" placeholder="Type your reply..." required></textarea>
                @error('body')
                <p class="mt-1 text-sm text-rose-600">{{ $message }}</p>
                @enderror
            </div>
            <div class="flex justify-end">
                <button type="submit" class="inline-flex items-center px-5 py-2.5 bg-[#0D6B58] text-white text-sm font-semibold rounded-lg hover:bg-[#0A5A49] transition">
                    <svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 19l9 2-9-18-9 18 9-2zm0 0v-8"/>
                    </svg>
                    Send Reply
                </button>
            </div>
        </form>
    </div>
    @endif

</div>
@endsection