@extends('layouts.app')

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

@section('content')
<div class="mb-6">
    <a href="{{ route('payments.index') }}" class="text-blue-600 hover:text-blue-800 flex items-center gap-2 mb-4">
        <i class="fas fa-arrow-left"></i> Back to Payments
    </a>
</div>

<div class="bg-white rounded-xl shadow-sm border border-gray-200 p-6">
    <div class="flex items-center justify-between mb-6">
        <h2 class="text-xl font-bold text-gray-800">Payment #{{ $payment->id }}</h2>
        <span class="px-3 py-1 rounded-full text-sm font-medium
            {{ $payment->status == 'completed' ? 'bg-green-100 text-green-700' : 
              ($payment->status == 'pending' ? 'bg-amber-100 text-amber-700' : 'bg-red-100 text-red-700') }}">
            {{ ucfirst($payment->status) }}
        </span>
    </div>
    
    <div class="grid grid-cols-2 md:grid-cols-4 gap-4 mb-6">
        <div class="bg-gray-50 rounded-lg p-4">
            <p class="text-gray-500 text-sm">Amount</p>
            <p class="text-2xl font-bold text-gray-800"> BHD {{ number_format($payment->amount, 0) }}</p>
        </div>
        <div class="bg-gray-50 rounded-lg p-4">
            <p class="text-gray-500 text-sm">Method</p>
            <p class="font-semibold text-gray-800 capitalize">{{ $payment->method }}</p>
        </div>
        <div class="bg-gray-50 rounded-lg p-4">
            <p class="text-gray-500 text-sm">Rental</p>
            <a href="{{ route('rentals.show', $payment->rental) }}" class="font-semibold text-blue-600 hover:underline">
                {{ $payment->rental->car->brand }} {{ $payment->rental->car->model }}
            </a>
        </div>
        <div class="bg-gray-50 rounded-lg p-4">
            <p class="text-gray-500 text-sm">Date</p>
            <p class="font-semibold text-gray-800">{{ $payment->created_at->format('M d, Y') }}</p>
        </div>
    </div>
    
    @if($payment->transaction_id)
    <div class="border-t pt-4">
        <p class="text-gray-500 text-sm mb-1">Transaction ID</p>
        <p class="text-gray-700 font-mono">{{ $payment->transaction_id }}</p>
    </div>
    @endif
    
    @if($payment->notes)
    <div class="border-t pt-4 mt-4">
        <p class="text-gray-500 text-sm mb-1">Notes</p>
        <p class="text-gray-700">{{ $payment->notes }}</p>
    </div>
    @endif
    
    <div class="flex gap-3 mt-6">
        <form action="{{ route('payments.destroy', $payment) }}" method="POST">
            @csrf
            @method('DELETE')
            <button type="submit" class="bg-red-600 text-white px-4 py-2 rounded-lg hover:bg-red-700 text-sm" onclick="return confirm('Delete this payment?')">Delete Payment</button>
        </form>
    </div>
</div>
@endsection