<x-app-layout>
    <x-slot name="title">Transfer Details</x-slot>
    <div class="mb-6 flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
        <div>
            <h1 class="text-2xl font-bold text-gray-900">Transfer Request #{{ $propertyTransfer->id }}</h1>
            <p class="text-sm text-gray-500 mt-1">Review and approve plot transfer.</p>
        </div>
        <div class="flex items-center gap-3">
            <a href="{{ route('property-transfers.index') }}" class="text-gray-500 hover:text-gray-700 font-medium text-sm transition-colors">
                &larr; Back
            </a>
        </div>
    </div>

    @if(session('success'))
        <div class="mb-4 bg-green-50 border border-green-200 text-green-700 px-4 py-3 rounded-lg">
            {{ session('success') }}
        </div>
    @endif
    @if(session('error'))
        <div class="mb-4 bg-red-50 border border-red-200 text-red-700 px-4 py-3 rounded-lg">
            {{ session('error') }}
        </div>
    @endif

    <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
        <!-- Details Card -->
        <div class="md:col-span-2 bg-white rounded-xl shadow-sm border border-gray-100 overflow-hidden p-6">
            <h3 class="text-lg font-bold text-gray-900 border-b pb-2 mb-4">Transfer Details</h3>
            
            <div class="grid grid-cols-2 gap-4 mb-6">
                <div>
                    <span class="block text-xs font-medium text-gray-500 uppercase">Property</span>
                    <span class="block mt-1 text-sm text-gray-900 font-bold">Plot {{ $propertyTransfer->property->plot_number ?? 'N/A' }}</span>
                </div>
                <div>
                    <span class="block text-xs font-medium text-gray-500 uppercase">Status</span>
                    <span class="inline-flex mt-1 px-2 py-1 text-xs font-semibold rounded-full {{ $propertyTransfer->status === 'Approved' ? 'bg-green-100 text-green-800' : ($propertyTransfer->status === 'Pending' ? 'bg-yellow-100 text-yellow-800' : 'bg-red-100 text-red-800') }}">
                        {{ $propertyTransfer->status }}
                    </span>
                </div>
                <div>
                    <span class="block text-xs font-medium text-gray-500 uppercase">From Customer</span>
                    <span class="block mt-1 text-sm text-gray-900">{{ $propertyTransfer->fromCustomer->full_name ?? 'N/A' }} (CNIC: {{ $propertyTransfer->fromCustomer->cnic ?? 'N/A' }})</span>
                </div>
                <div>
                    <span class="block text-xs font-medium text-gray-500 uppercase">To Customer</span>
                    <span class="block mt-1 text-sm text-gray-900 font-bold text-primary-600">{{ $propertyTransfer->toCustomer->full_name ?? 'N/A' }} (CNIC: {{ $propertyTransfer->toCustomer->cnic ?? 'N/A' }})</span>
                </div>
            </div>

            <div class="bg-gray-50 p-4 rounded-lg mb-6">
                <h4 class="text-sm font-bold text-gray-900 mb-2">Financials</h4>
                <div class="grid grid-cols-2 gap-4">
                    <div>
                        <span class="block text-xs font-medium text-gray-500 uppercase">Transfer Fee</span>
                        <span class="block mt-1 text-sm text-gray-900">PKR {{ number_format($propertyTransfer->fee_amount) }}</span>
                    </div>
                    <div>
                        <span class="block text-xs font-medium text-gray-500 uppercase">Fee Status</span>
                        <span class="block mt-1 text-sm font-bold {{ $propertyTransfer->fee_paid ? 'text-green-600' : 'text-red-600' }}">
                            {{ $propertyTransfer->fee_paid ? 'Paid' : 'Unpaid' }}
                        </span>
                    </div>
                </div>
            </div>

            <div>
                <span class="block text-xs font-medium text-gray-500 uppercase">Notes</span>
                <p class="mt-1 text-sm text-gray-700 whitespace-pre-wrap">{{ $propertyTransfer->notes ?: 'No notes provided.' }}</p>
            </div>
        </div>

        <!-- Action Card -->
        <div class="bg-white rounded-xl shadow-sm border border-gray-100 overflow-hidden p-6">
            <h3 class="text-lg font-bold text-gray-900 border-b pb-2 mb-4">Management Action</h3>
            
            @if($propertyTransfer->status === 'Pending')
                <form action="{{ route('property-transfers.update', $propertyTransfer) }}" method="POST">
                    @csrf
                    @method('PUT')
                    
                    @if(!$propertyTransfer->fee_paid)
                    <div class="mb-4">
                        <label class="flex items-center">
                            <input type="checkbox" name="fee_paid" value="1" class="rounded border-gray-300 text-primary-600 shadow-sm focus:border-primary-300 focus:ring focus:ring-offset-0 focus:ring-primary-200 focus:ring-opacity-50">
                            <span class="ml-2 text-sm text-gray-700">Mark Fee as Paid</span>
                        </label>
                    </div>
                    @endif

                    <div class="flex flex-col gap-3">
                        <button type="submit" name="status" value="Approved" class="w-full inline-flex justify-center py-2 px-4 border border-transparent shadow-sm text-sm font-medium rounded-lg text-white bg-green-600 hover:bg-green-700" onclick="return confirm('Are you sure you want to approve this transfer? This will permanently change ownership of the plot and all associated active installment plans/bookings.')">
                            Approve Transfer
                        </button>
                        <button type="submit" name="status" value="Rejected" class="w-full inline-flex justify-center py-2 px-4 border border-gray-300 shadow-sm text-sm font-medium rounded-lg text-gray-700 bg-white hover:bg-gray-50" onclick="return confirm('Are you sure you want to reject this transfer?')">
                            Reject Transfer
                        </button>
                    </div>
                </form>
            @else
                <div class="text-center py-6">
                    <svg class="mx-auto h-12 w-12 text-gray-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
                    </svg>
                    <h3 class="mt-2 text-sm font-medium text-gray-900">Transfer processed</h3>
                    <p class="mt-1 text-sm text-gray-500">This transfer has been {{ strtolower($propertyTransfer->status) }} by {{ $propertyTransfer->approvedBy->name ?? 'Management' }}.</p>
                </div>
            @endif
        </div>
    </div>
</x-app-layout>
