@extends('admin.layouts.app')

@section('title', 'Chi tiết liên hệ')
@section('page-title', 'Chi tiết liên hệ')

@section('content')
<div class="max-w-4xl mx-auto">
    <!-- Back Button -->
    <div class="mb-6">
        <a href="{{ route('admin.contacts.index') }}" 
           class="inline-flex items-center px-4 py-2 bg-gray-500 text-white rounded-lg hover:bg-gray-600 transition-colors">
            <svg class="w-4 h-4 mr-2" fill="currentColor" viewBox="0 0 20 20">
                <path fill-rule="evenodd" d="M9.707 16.707a1 1 0 01-1.414 0l-6-6a1 1 0 010-1.414l6-6a1 1 0 011.414 1.414L5.414 9H17a1 1 0 110 2H5.414l4.293 4.293a1 1 0 010 1.414z" clip-rule="evenodd"></path>
            </svg>
            Quay lại danh sách
        </a>
    </div>

    <!-- Contact Details -->
    <div class="bg-white rounded-lg shadow overflow-hidden">
        <!-- Header -->
        <div class="px-6 py-4 bg-gray-50 border-b border-gray-200">
            <div class="flex items-center justify-between">
                <div>
                    <h1 class="text-2xl font-bold text-gray-900">{{ $contact->name }}</h1>
                    <p class="text-sm text-gray-600">{{ $contact->email }}</p>
                </div>
                <div class="flex items-center space-x-3">
                    <span class="px-3 py-1 text-sm font-semibold rounded-full
                        {{ $contact->status === 'new' ? 'bg-blue-100 text-blue-800' : 
                           ($contact->status === 'read' ? 'bg-yellow-100 text-yellow-800' : 'bg-green-100 text-green-800') }}">
                        @if($contact->status === 'new')
                            Mới
                        @elseif($contact->status === 'read')
                            Đã đọc
                        @else
                            Đã trả lời
                        @endif
                    </span>
                    <span class="text-sm text-gray-500">
                        {{ $contact->created_at->format('d/m/Y H:i') }}
                    </span>
                </div>
            </div>
        </div>

        <!-- Content -->
        <div class="px-6 py-6">
            <!-- Contact Information -->
            <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-6">
                <div>
                    <h3 class="text-lg font-semibold text-gray-900 mb-3">Thông tin liên hệ</h3>
                    <div class="space-y-2">
                        <div class="flex items-center">
                            <svg class="w-5 h-5 text-gray-400 mr-3" fill="currentColor" viewBox="0 0 20 20">
                                <path d="M2.003 5.884L10 9.882l7.997-3.998A2 2 0 0016 4H4a2 2 0 00-1.997 1.884z"></path>
                                <path d="M18 8.118l-8 4-8-4V14a2 2 0 002 2h12a2 2 0 002-2V8.118z"></path>
                            </svg>
                            <span class="text-gray-700">{{ $contact->email }}</span>
                        </div>
                        @if($contact->phone)
                        <div class="flex items-center">
                            <svg class="w-5 h-5 text-gray-400 mr-3" fill="currentColor" viewBox="0 0 20 20">
                                <path d="M2 3a1 1 0 011-1h2.153a1 1 0 01.986.836l.74 4.435a1 1 0 01-.54 1.06l-1.548.773a11.037 11.037 0 006.105 6.105l.774-1.548a1 1 0 011.059-.54l4.435.74a1 1 0 01.836.986V17a1 1 0 01-1 1h-2C7.82 18 2 12.18 2 5V3z"></path>
                            </svg>
                            <span class="text-gray-700">{{ $contact->phone }}</span>
                        </div>
                        @endif
                        <div class="flex items-center">
                            <svg class="w-5 h-5 text-gray-400 mr-3" fill="currentColor" viewBox="0 0 20 20">
                                <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm1-12a1 1 0 10-2 0v4a1 1 0 00.293.707l2.828 2.829a1 1 0 101.415-1.415L11 9.586V6z" clip-rule="evenodd"></path>
                            </svg>
                            <span class="text-gray-700">{{ $contact->created_at->format('d/m/Y H:i') }}</span>
                        </div>
                    </div>
                </div>

                <div>
                    <h3 class="text-lg font-semibold text-gray-900 mb-3">Chủ đề</h3>
                    <p class="text-gray-700">{{ $contact->subject }}</p>
                </div>
            </div>

            <!-- Message -->
            <div class="mb-6">
                <h3 class="text-lg font-semibold text-gray-900 mb-3">Tin nhắn</h3>
                <div class="bg-gray-50 rounded-lg p-4">
                    <p class="text-gray-700 whitespace-pre-wrap">{{ $contact->message }}</p>
                </div>
            </div>

            <!-- Reply Section -->
            @if($contact->status !== 'replied')
            <div class="border-t border-gray-200 pt-6">
                <h3 class="text-lg font-semibold text-gray-900 mb-3">Trả lời</h3>
                <form method="POST" action="{{ route('admin.contacts.reply', $contact) }}"
                    onsubmit="const btn=this.querySelector('[data-reply-submit]'); if(btn){btn.disabled=true; btn.classList.add('opacity-70','cursor-not-allowed'); const idle=btn.querySelector('[data-idle]'); const loading=btn.querySelector('[data-loading]'); if(idle) idle.classList.add('hidden'); if(loading) loading.classList.remove('hidden'); }">
                    @csrf
                    <div class="mb-4">
                        <label for="reply_message" class="block text-sm font-medium text-gray-700 mb-2">
                            Nội dung trả lời
                        </label>
                        <textarea id="reply_message" name="reply_message" rows="4" required
                            class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
                            placeholder="Nhập nội dung trả lời..."></textarea>
                    </div>
                    <div class="flex justify-end">
                        <button type="submit" data-reply-submit
                            class="inline-flex items-center px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500">
                            <span data-idle>Gửi trả lời</span>
                            <span data-loading class="hidden inline-flex items-center">
                                <svg class="animate-spin -ml-1 mr-2 h-4 w-4 text-white" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
                                    <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
                                    <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8v4a4 4 0 00-4 4H4z"></path>
                                </svg>
                                Đang gửi...
                            </span>
                        </button>
                    </div>
                </form>
            </div>
            @else
            <div class="border-t border-gray-200 pt-6">
                <h3 class="text-lg font-semibold text-gray-900 mb-3">Trả lời đã gửi</h3>
                <div class="bg-green-50 border border-green-200 rounded-lg p-4">
                    <p class="text-green-800 whitespace-pre-wrap">{{ $contact->reply_message }}</p>
                    <p class="text-sm text-green-600 mt-2">
                        Gửi lúc: {{ $contact->replied_at ? $contact->replied_at->format('d/m/Y H:i') : 'N/A' }}
                    </p>
                </div>
            </div>
            @endif
        </div>

        <!-- Actions -->
        <div class="px-6 py-4 bg-gray-50 border-t border-gray-200">
            <div class="flex justify-between items-center">
                <div class="flex space-x-3">
                    @if($contact->status === 'new')
                    <form method="POST" action="{{ route('admin.contacts.mark-as-read', $contact) }}" class="inline">
                        @csrf
                        <button type="submit" 
                            class="px-4 py-2 bg-yellow-600 text-white rounded-md hover:bg-yellow-700 focus:outline-none focus:ring-2 focus:ring-yellow-500">
                            Đánh dấu đã đọc
                        </button>
                    </form>
                    @endif
                </div>
                
                <div class="flex space-x-3">
                    <form method="POST" action="{{ route('admin.contacts.destroy', $contact) }}" 
                        class="inline" onsubmit="return confirm('Bạn có chắc chắn muốn xóa liên hệ này?')">
                        @csrf
                        @method('DELETE')
                        <button type="submit" 
                            class="px-4 py-2 bg-red-600 text-white rounded-md hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-red-500">
                            Xóa liên hệ
                        </button>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection