@extends('admin.layout')

@section('title', 'Payment Details')

@section('header', 'Payment Details')

@section('content')
<div class="max-w-4xl mx-auto">
    <div class="bg-white shadow rounded-lg">
        <div class="px-4 py-5 sm:p-6">
            <!-- Payment Header -->
            <div class="flex items-center justify-between mb-6">
                <div>
                    <h1 class="text-2xl font-bold text-gray-900">Payment #PAY-{{ str_pad($payment->id, 4, '0', STR_PAD_LEFT) }}</h1>
                    <p class="mt-1 text-sm text-gray-500">
                        Recorded on {{ $payment->created_at->format('F d, Y \a\t g:i A') }}
                    </p>
                </div>
                <div class="flex space-x-2">
                    <a href="{{ route('admin.payments.receipt', $payment) }}" 
                       class="inline-flex items-center px-3 py-2 border border-gray-300 shadow-sm text-sm leading-4 font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500">
                        <i class="fas fa-receipt mr-2"></i>Receipt
                    </a>
                    <a href="{{ route('admin.payments.edit', $payment) }}" 
                       class="inline-flex items-center px-3 py-2 border border-gray-300 shadow-sm text-sm leading-4 font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500">
                        <i class="fas fa-edit mr-2"></i>Edit
                    </a>
                </div>
            </div>

            <!-- Payment Status -->
            <div class="mb-6">
                <div class="bg-gradient-to-r {{ $payment->status === 'paid' ? 'from-green-50 to-emerald-50 border-green-200' : ($payment->status === 'pending' ? 'from-yellow-50 to-orange-50 border-yellow-200' : 'from-red-50 to-pink-50 border-red-200') }} border rounded-lg p-4">
                    <div class="flex items-center">
                        <div class="w-12 h-12 bg-{{ $payment->getStatusColor() }}-500 rounded-full flex items-center justify-center mr-4">
                            <i class="fas {{ $payment->status === 'paid' ? 'fa-check' : ($payment->status === 'pending' ? 'fa-clock' : 'fa-times') }} text-white text-xl"></i>
                        </div>
                        <div>
                            <h3 class="text-lg font-semibold text-{{ $payment->getStatusColor() }}-800">
                                {{ ucfirst($payment->status) }} Payment
                            </h3>
                            <p class="text-sm text-{{ $payment->getStatusColor() }}-600">
                                {{ $payment->status === 'paid' ? 'Payment successfully processed' : ($payment->status === 'pending' ? 'Payment awaiting processing' : 'Payment processing failed') }}
                            </p>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Payment Details Grid -->
            <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-6">
                <!-- Payment Information -->
                <div class="bg-gray-50 rounded-lg p-4">
                    <h3 class="text-lg font-medium text-gray-900 mb-4">Payment Information</h3>
                    <div class="space-y-3">
                        <div>
                            <p class="text-sm font-medium text-gray-500">Amount</p>
                            <p class="text-2xl font-bold text-green-600">{{ $payment->getFormattedAmount() }}</p>
                        </div>
                        <div>
                            <p class="text-sm font-medium text-gray-500">Customer Name</p>
                            <p class="text-sm text-gray-900">{{ $payment->customer_name ?? 'N/A' }}</p>
                        </div>
                        <div>
                            <p class="text-sm font-medium text-gray-500">Payment Method</p>
                            <div class="flex items-center">
                                <i class="fas {{ $payment->getPaymentMethodIcon() }} text-gray-600 mr-2"></i>
                                <span class="text-sm text-gray-900">{{ ucfirst(str_replace('_', ' ', $payment->payment_method)) }}</span>
                            </div>
                        </div>
                        <div>
                            <p class="text-sm font-medium text-gray-500">Payment Date</p>
                            <p class="text-sm text-gray-900">{{ $payment->payment_date->format('F d, Y') }}</p>
                        </div>
                        @if($payment->transaction_id)
                            <div>
                                <p class="text-sm font-medium text-gray-500">Transaction ID</p>
                                <p class="text-sm text-gray-900">{{ $payment->transaction_id }}</p>
                            </div>
                        @endif
                        @if($payment->upi_id)
                            <div>
                                <p class="text-sm font-medium text-gray-500">UPI ID</p>
                                <p class="text-sm text-gray-900">{{ $payment->upi_id }}</p>
                            </div>
                        @endif
                        @if($payment->upi_transaction_id)
                            <div>
                                <p class="text-sm font-medium text-gray-500">UPI Transaction ID</p>
                                <p class="text-sm text-gray-900">{{ $payment->upi_transaction_id }}</p>
                            </div>
                        @endif
                        @if($payment->check_number)
                            <div>
                                <p class="text-sm font-medium text-gray-500">Check Number</p>
                                <p class="text-sm text-gray-900">{{ $payment->check_number }}</p>
                            </div>
                        @endif
                        @if($payment->bank_name)
                            <div>
                                <p class="text-sm font-medium text-gray-500">Bank Name</p>
                                <p class="text-sm text-gray-900">{{ $payment->bank_name }}</p>
                            </div>
                        @endif
                    </div>
                </div>

                <!-- Task Information -->
                <div class="bg-gray-50 rounded-lg p-4">
                    <h3 class="text-lg font-medium text-gray-900 mb-4">Task Information</h3>
                    <div class="space-y-3">
                        <div>
                            <p class="text-sm font-medium text-gray-500">Task Title</p>
                            <p class="text-sm text-gray-900">{{ $payment->task->title }}</p>
                        </div>
                        <div>
                            <p class="text-sm font-medium text-gray-500">Task ID</p>
                            <p class="text-sm text-gray-900">#{{ $payment->task->id }}</p>
                        </div>
                        <div>
                            <p class="text-sm font-medium text-gray-500">Technician</p>
                            <p class="text-sm text-gray-900">{{ $payment->technician->name }}</p>
                            <p class="text-sm text-gray-600">{{ $payment->technician->phone }}</p>
                        </div>
                        <div>
                            <p class="text-sm font-medium text-gray-500">Task Completed</p>
                            <p class="text-sm text-gray-900">{{ $payment->task->completed_at->format('F d, Y') }}</p>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Processing Information -->
            <div class="bg-gray-50 rounded-lg p-4 mb-6">
                <h3 class="text-lg font-medium text-gray-900 mb-4">Processing Information</h3>
                <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                    <div>
                        <p class="text-sm font-medium text-gray-500">Processed By</p>
                        <p class="text-sm text-gray-900">{{ $payment->processedBy->name ?? 'System' }}</p>
                        <p class="text-sm text-gray-600">{{ $payment->processedBy->email ?? 'N/A' }}</p>
                    </div>
                    <div>
                        <p class="text-sm font-medium text-gray-500">Processed At</p>
                        <p class="text-sm text-gray-900">{{ $payment->processed_at?->format('F d, Y g:i A') ?? 'N/A' }}</p>
                    </div>
                </div>
            </div>

            <!-- Notes -->
            @if($payment->notes)
                <div class="bg-gray-50 rounded-lg p-4 mb-6">
                    <h3 class="text-lg font-medium text-gray-900 mb-2">
                        {{ $payment->payment_method === 'debt' ? 'Debt Notes' : 'Payment Notes' }}
                    </h3>
                    <p class="text-gray-700">{{ nl2br($payment->notes) }}</p>
                    @if($payment->payment_method === 'debt')
                        <div class="mt-3 p-3 bg-yellow-50 border border-yellow-200 rounded">
                            <div class="flex items-center">
                                <i class="fas fa-exclamation-triangle text-yellow-600 mr-2"></i>
                                <span class="text-sm font-medium text-yellow-800">Debt Payment</span>
                            </div>
                            <p class="text-sm text-yellow-700 mt-1">This payment is recorded as debt/credit and requires follow-up for collection.</p>
                        </div>
                    @endif
                </div>
            @endif
        </div>
    </div>
</div>
@endsection