@extends('dashboard.layout')

@section('content')
    <div class="w-full px-4 py-4">
        <!-- Header -->
        <div class="mb-6 print:hidden">
            <div class="md:flex items-center justify-between">
                <div>
                    <h1 class="text-2xl font-bold text-gray-900 dark:text-white">Transaction Details</h1>
                    <p class="text-gray-600 dark:text-gray-400 mt-1">Complete information for transaction
                        #{{ $transection->id }}</p>
                </div>
            </div>
        </div>

        <!-- Main Content Grid -->
        <div class="grid grid-cols-1 xl:grid-cols-3 gap-6">
            <!-- Left Column - Transaction Details -->
            <div class="xl:col-span-2 space-y-6">
                <!-- Transaction Overview -->
                <div class="bg-white dark:bg-gray-800 rounded-xl p-6">
                    <div class="flex items-center justify-between mb-6">
                        <h2 class="text-xl font-semibold text-gray-900 dark:text-white">Transaction Overview</h2>
                        <span
                            class="inline-flex items-center px-4 py-2 rounded-full text-sm font-medium
                        @if ($transection->status === 'verified') bg-green-100 text-green-800 dark:bg-green-900/30 dark:text-green-300
                        @elseif($transection->status === 'pending_verification')
                            bg-yellow-100 text-yellow-800 dark:bg-yellow-900/30 dark:text-yellow-300
                        @elseif($transection->status === 'failed')
                            bg-red-100 text-red-800 dark:bg-red-900/30 dark:text-red-300
                        @else
                            bg-gray-100 text-gray-800 dark:bg-gray-700 dark:text-gray-300 @endif">
                            <i
                                class="fas 
                            @if ($transection->status === 'verified') fa-check-circle 
                            @elseif($transection->status === 'pending_verification') fa-clock
                            @elseif($transection->status === 'failed') fa-times-circle
                            @else fa-question-circle @endif mr-2">
                            </i>
                            {{ str_replace('_', ' ', ucfirst($transection->status)) }}
                        </span>
                    </div>

                    <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                        <!-- Basic Information -->
                        <div class="space-y-4">
                            <h3 class="text-lg font-medium text-gray-900 dark:text-white">Basic Information</h3>
                            <div class="space-y-3">
                                <div
                                    class="flex justify-between items-center py-2 border-b border-gray-200 dark:border-gray-700">
                                    <span class="text-sm font-medium text-gray-600 dark:text-gray-400">Transaction ID</span>
                                    <span
                                        class="text-sm text-gray-900 dark:text-white font-mono">#{{ $transection->transaction_id }}</span>
                                </div>
                                <div
                                    class="flex justify-between items-center py-2 border-b border-gray-200 dark:border-gray-700">
                                    <span class="text-sm font-medium text-gray-600 dark:text-gray-400">Internal ID</span>
                                    <span class="text-sm text-gray-900 dark:text-white">{{ $transection->id }}</span>
                                </div>
                                <div
                                    class="flex justify-between items-center py-2 border-b border-gray-200 dark:border-gray-700">
                                    <span class="text-sm font-medium text-gray-600 dark:text-gray-400">Created Date</span>
                                    <span
                                        class="text-sm text-gray-900 dark:text-white">{{ $transection->created_at->format('M d, Y h:i A') }}</span>
                                </div>
                                <div
                                    class="flex justify-between items-center py-2 border-b border-gray-200 dark:border-gray-700">
                                    <span class="text-sm font-medium text-gray-600 dark:text-gray-400">Updated Date</span>
                                    <span
                                        class="text-sm text-gray-900 dark:text-white">{{ $transection->updated_at->format('M d, Y h:i A') }}</span>
                                </div>
                            </div>
                        </div>

                        <!-- Payment Information -->
                        <div class="space-y-4">
                            <h3 class="text-lg font-medium text-gray-900 dark:text-white">Payment Information</h3>
                            <div class="space-y-3">
                                <div
                                    class="flex justify-between items-center py-2 border-b border-gray-200 dark:border-gray-700">
                                    <span class="text-sm font-medium text-gray-600 dark:text-gray-400">Payment Method</span>
                                    <span class="text-sm text-gray-900 dark:text-white capitalize">
                                        {{ str_replace('_', ' ', $transection->payment_method) }}
                                    </span>
                                </div>
                                <div
                                    class="flex justify-between items-center py-2 border-b border-gray-200 dark:border-gray-700">
                                    <span class="text-sm font-medium text-gray-600 dark:text-gray-400">Payment Date</span>
                                    <span class="text-sm text-gray-900 dark:text-white">
                                        {{ $transection->payment_date ? \Carbon\Carbon::parse($transection->payment_date)->format('M d, Y') : 'N/A' }}
                                    </span>
                                </div>
                                <div
                                    class="flex justify-between items-center py-2 border-b border-gray-200 dark:border-gray-700">
                                    <span class="text-sm font-medium text-gray-600 dark:text-gray-400">Payment
                                        Reference</span>
                                    <span
                                        class="text-sm text-gray-900 dark:text-white font-mono">{{ $transection->payment_reference ?? 'N/A' }}</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Sender & Project Information -->
                <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                    <!-- Sender Information -->
                    <div class="bg-white dark:bg-gray-800 rounded-xl p-6">
                        <h3 class="text-lg font-semibold text-gray-900 dark:text-white mb-4">Sender Information</h3>
                        <div class="space-y-4">
                            <div class="flex items-center space-x-3">
                              
                                <div>
                                    <p class="font-medium text-gray-900 dark:text-white">
                                        {{ $transection->sender_name ?? 'N/A' }}</p>
                                    <p class="text-sm text-gray-500 dark:text-gray-400">Sender Name</p>
                                </div>
                            </div>
                            <div class="space-y-2">
                                <div
                                    class="flex justify-between items-center py-2 border-b border-gray-200 dark:border-gray-700">
                                    <span class="text-sm font-medium text-gray-600 dark:text-gray-400">Account Number</span>
                                    <span
                                        class="text-sm text-gray-900 dark:text-white font-mono">{{ $transection->sender_account ?? 'N/A' }}</span>
                                </div>
                                <div
                                    class="flex justify-between items-center py-2 border-b border-gray-200 dark:border-gray-700">
                                    <span class="text-sm font-medium text-gray-600 dark:text-gray-400">User ID</span>
                                    <span class="text-sm text-gray-900 dark:text-white">{{ $transection->user_id }}</span>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Project Information -->
                    <div class="bg-white dark:bg-gray-800 rounded-xl p-6">
                        <h3 class="text-lg font-semibold text-gray-900 dark:text-white mb-4">Project Information</h3>
                        <div class="space-y-4">
                            <div class="flex items-center space-x-3">
                                
                                <div>
                                    <p class="font-medium text-gray-900 dark:text-white">
                                        {{ $transection->project->name ?? 'N/A' }}</p>
                                    <p class="text-sm text-gray-500 dark:text-gray-400">Project Name</p>
                                </div>
                            </div>
                            <div class="space-y-2">
                                <div
                                    class="flex justify-between items-center py-2 border-b border-gray-200 dark:border-gray-700">
                                    <span class="text-sm font-medium text-gray-600 dark:text-gray-400">Project ID</span>
                                    <span
                                        class="text-sm text-gray-900 dark:text-white">{{ $transection->project_id }}</span>
                                </div>
                                <div
                                    class="flex justify-between items-center py-2 border-b border-gray-200 dark:border-gray-700">
                                    <span class="text-sm font-medium text-gray-600 dark:text-gray-400">Request ID</span>
                                    <span
                                        class="text-sm text-gray-900 dark:text-white">{{ $transection->project->request_id ?? 'N/A' }}</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- User Information -->
                <div class="bg-white dark:bg-gray-800 rounded-xl p-6">
                    <h3 class="text-lg font-semibold text-gray-900 dark:text-white mb-4">User Information</h3>
                    <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                        <div class="flex items-center space-x-4">
                            
                            <div>
                                <p class="font-semibold text-gray-900 dark:text-white">
                                    {{ $transection->user->name ?? 'N/A' }}</p>
                                <p class="text-sm text-gray-500 dark:text-gray-400">Client Name</p>
                                <p class="text-sm text-gray-400 dark:text-gray-500 mt-1">
                                    {{ $transection->user->email ?? 'N/A' }}</p>
                            </div>
                        </div>
                        <div class="space-y-2">
                            <div
                                class="flex justify-between items-center py-2 border-b border-gray-200 dark:border-gray-700">
                                <span class="text-sm font-medium text-gray-600 dark:text-gray-400">User ID</span>
                                <span class="text-sm text-gray-900 dark:text-white">{{ $transection->user_id }}</span>
                            </div>
                            <div
                                class="flex justify-between items-center py-2 border-b border-gray-200 dark:border-gray-700">
                                <span class="text-sm font-medium text-gray-600 dark:text-gray-400">Member Since</span>
                                <span class="text-sm text-gray-900 dark:text-white">
                                    {{ $transection->user->created_at->format('M d, Y') ?? 'N/A' }}
                                </span>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Notes Section -->
                @if ($transection->notes)
                    <div class="bg-white dark:bg-gray-800 rounded-xl p-6">
                        <h3 class="text-lg font-semibold text-gray-900 dark:text-white mb-4">Additional Notes</h3>
                        <div class="bg-gray-50 dark:bg-gray-700/50 rounded-lg p-4">
                            <p class="text-gray-700 dark:text-gray-300">{{ $transection->notes }}</p>
                        </div>
                    </div>
                @endif
            </div>

            <!-- Right Column - Actions & Screenshot -->
            <div class="space-y-6 print:hidden">
               

                <!-- Payment Screenshot -->
                @if ($transection->payment_screenshot)
                    <div class="bg-white dark:bg-gray-800 rounded-xl p-6">
                        <h3 class="text-lg font-semibold text-gray-900 dark:text-white mb-4">Payment Proof</h3>
                        <div class="space-y-4">
                            <div
                                class="border-2 border-dashed border-gray-300 dark:border-gray-600 rounded-lg p-4 text-center">
                                <div class="mb-3">
                                    <i class="fas fa-receipt text-3xl text-gray-400"></i>
                                </div>
                                <p class="text-sm text-gray-600 dark:text-gray-400 mb-2">Payment Screenshot/Receipt</p>
                                <a href="{{ $transection->payment_screenshot }}" target="_blank"
                                    class="inline-flex items-center px-3 py-2 bg-blue-600 hover:bg-blue-700 text-white rounded-lg transition-colors duration-200 text-sm font-medium">
                                    <i class="fas fa-external-link-alt mr-2"></i>
                                    View Full Size
                                </a>
                            </div>
                        </div>
                    </div>
                @else
                    <div class="bg-white dark:bg-gray-800 rounded-xl p-6">
                        <h3 class="text-lg font-semibold text-gray-900 dark:text-white mb-4">Payment Proof</h3>
                        <div class="text-center py-8">
                            <i class="fas fa-times-circle text-3xl text-gray-400 mb-3"></i>
                            <p class="text-gray-500 dark:text-gray-400">No payment screenshot available</p>
                        </div>
                    </div>
                @endif

                <!-- Timeline -->
                <div class="bg-white dark:bg-gray-800 rounded-xl p-6">
                    <h3 class="text-lg font-semibold text-gray-900 dark:text-white mb-4">Transaction Timeline</h3>
                    <div class="space-y-4">
                        <div class="flex items-start space-x-3">
                            <div class="flex-shrink-0 w-8 h-8 bg-green-500 rounded-full flex items-center justify-center">
                                <i class="fas fa-check text-white text-xs"></i>
                            </div>
                            <div class="flex-1">
                                <p class="text-sm font-medium text-gray-900 dark:text-white">Transaction Created</p>
                                <p class="text-xs text-gray-500 dark:text-gray-400">
                                    {{ $transection->created_at->format('M d, Y h:i A') }}</p>
                            </div>
                        </div>

                        @if ($transection->status === 'verified')
                            <div class="flex items-start space-x-3">
                                <div
                                    class="flex-shrink-0 w-8 h-8 bg-green-500 rounded-full flex items-center justify-center">
                                    <i class="fas fa-check text-white text-xs"></i>
                                </div>
                                <div class="flex-1">
                                    <p class="text-sm font-medium text-gray-900 dark:text-white">Payment Verified</p>
                                    <p class="text-xs text-gray-500 dark:text-gray-400">
                                        {{ $transection->updated_at->format('M d, Y h:i A') }}</p>
                                </div>
                            </div>
                        @elseif($transection->status === 'failed')
                            <div class="flex items-start space-x-3">
                                <div
                                    class="flex-shrink-0 w-8 h-8 bg-red-500 rounded-full flex items-center justify-center">
                                    <i class="fas fa-times text-white text-xs"></i>
                                </div>
                                <div class="flex-1">
                                    <p class="text-sm font-medium text-gray-900 dark:text-white">Payment Failed</p>
                                    <p class="text-xs text-gray-500 dark:text-gray-400">
                                        {{ $transection->updated_at->format('M d, Y h:i A') }}</p>
                                </div>
                            </div>
                        @else
                            <div class="flex items-start space-x-3">
                                <div
                                    class="flex-shrink-0 w-8 h-8 bg-yellow-500 rounded-full flex items-center justify-center">
                                    <i class="fas fa-clock text-white text-xs"></i>
                                </div>
                                <div class="flex-1">
                                    <p class="text-sm font-medium text-gray-900 dark:text-white">Pending Verification</p>
                                    <p class="text-xs text-gray-500 dark:text-gray-400">Waiting for admin approval</p>
                                </div>
                            </div>
                        @endif
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Image Modal -->
    <div id="imageModal" class="fixed inset-0 bg-black bg-opacity-90 flex items-center justify-center z-50 hidden">
        <div class="max-w-4xl max-h-full p-4">
            <div class="relative">
                <button onclick="closeImageModal()"
                    class="absolute -top-12 right-0 text-white hover:text-gray-300 text-2xl">
                    <i class="fas fa-times"></i>
                </button>
                <img id="modalImage" src="" alt="Payment Proof" class="max-w-full max-h-screen object-contain">
            </div>
        </div>
    </div>

    <script>
        function openImageModal(imageUrl) {
            document.getElementById('modalImage').src = imageUrl;
            document.getElementById('imageModal').classList.remove('hidden');
        }

        function closeImageModal() {
            document.getElementById('imageModal').classList.add('hidden');
        }

        // Close modal when clicking outside image
        document.getElementById('imageModal').addEventListener('click', function(e) {
            if (e.target === this) {
                closeImageModal();
            }
        });

        // Close modal with Escape key
        document.addEventListener('keydown', function(e) {
            if (e.key === 'Escape') {
                closeImageModal();
            }
        });
    </script>

    <style>
        @media print {
            .no-print {
                display: none !important;
            }

            body {
                background: white !important;
            }

            .bg-white {
                background: white !important;
            }

            .text-gray-900 {
                color: black !important;
            }

            .border-gray-200 {
                border-color: #e5e7eb !important;
            }
        }

        .border-b:last-child {
            border-bottom: none !important;
        }
    </style>
@endsection