@extends('layouts.admin')

@section('page-title', 'Withdrawal Details')

@section('content')
<div class="card card-body max-w-4xl">
    <div class="flex justify-between items-start mb-6">
        <div>
            <h3 class="text-lg font-semibold">Withdrawal #{{ $withdrawal->id }}</h3>
            <p class="text-gray-500 text-sm">Requested on {{ $withdrawal->created_at->format('M d, Y \a\t g:i A') }}</p>
        </div>
        @php
            $badgeClass = match($withdrawal->status) {
                'pending' => 'badge-yellow',
                'approved' => 'badge-green',
                'rejected' => 'badge-red',
                default => 'badge-gray',
            };
        @endphp
        <span class="badge {{ $badgeClass }} text-sm">{{ ucfirst($withdrawal->status) }}</span>
    </div>

    <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-8">
        <div class="p-4 bg-gray-50 rounded-lg">
            <h4 class="text-sm font-semibold text-gray-500 uppercase tracking-wide mb-3">Promoter</h4>
            <p class="font-medium">{{ $withdrawal->user->name }}</p>
            <p class="text-sm text-gray-500">{{ $withdrawal->user->email }}</p>
            @if($withdrawal->user->phone)
                <p class="text-sm text-gray-500">{{ $withdrawal->user->phone }}</p>
            @endif
        </div>

        <div class="p-4 bg-gray-50 rounded-lg">
            <h4 class="text-sm font-semibold text-gray-500 uppercase tracking-wide mb-3">Payment Details</h4>
            <p class="font-medium">{{ ucfirst(str_replace('_', ' ', $withdrawal->payment_method)) }}</p>
            @if($withdrawal->payment_details)
                @foreach($withdrawal->payment_details as $key => $value)
                    <p class="text-sm text-gray-500">{{ ucfirst(str_replace('_', ' ', $key)) }}: {{ $value }}</p>
                @endforeach
            @endif
        </div>
    </div>

    <div class="p-4 bg-gray-50 rounded-lg mb-8">
        <h4 class="text-sm font-semibold text-gray-500 uppercase tracking-wide mb-3">Amount</h4>
        <p class="text-3xl font-bold">${{ number_format($withdrawal->amount, 2) }}</p>
    </div>

    @if($withdrawal->notes)
        <div class="p-4 bg-gray-50 rounded-lg mb-8">
            <h4 class="text-sm font-semibold text-gray-500 uppercase tracking-wide mb-2">Notes</h4>
            <p class="text-gray-700">{{ $withdrawal->notes }}</p>
        </div>
    @endif

    @if($withdrawal->processed_at)
        <div class="p-4 bg-gray-50 rounded-lg mb-8">
            <h4 class="text-sm font-semibold text-gray-500 uppercase tracking-wide mb-2">Processed By</h4>
            <p>{{ $withdrawal->processor?->name ?? 'Unknown' }}</p>
            <p class="text-sm text-gray-500">{{ $withdrawal->processed_at->format('M d, Y \a\t g:i A') }}</p>
        </div>
    @endif

    @if($withdrawal->status === 'pending')
        <div class="border-t pt-6">
            <h4 class="font-semibold mb-4">Actions</h4>
            <div class="flex gap-3">
                <form method="POST" action="{{ route('admin.promoter-payouts.approve', $withdrawal) }}" class="inline">
                    @csrf
                    <input type="hidden" name="notes" value="Approved by {{ auth()->user()->name }}">
                    <button type="submit" class="btn-primary bg-emerald-600 hover:bg-emerald-700" onclick="return confirm('Approve this withdrawal?')">
                        Approve
                    </button>
                </form>
                <button onclick="document.getElementById('reject-form').classList.remove('hidden')" class="btn-secondary bg-red-600 text-white hover:bg-red-700">
                    Reject
                </button>
            </div>
            <form id="reject-form" method="POST" action="{{ route('admin.promoter-payouts.reject', $withdrawal) }}" class="mt-4 hidden">
                @csrf
                <div class="mb-3">
                    <label for="reason" class="input-label">Rejection Reason</label>
                    <textarea name="reason" id="reason" rows="2" class="input-field" required placeholder="Reason for rejection..."></textarea>
                </div>
                <div class="flex gap-3">
                    <button type="submit" class="btn-secondary bg-red-600 text-white hover:bg-red-700">Confirm Rejection</button>
                    <button type="button" onclick="this.closest('form').classList.add('hidden')" class="btn-secondary">Cancel</button>
                </div>
            </form>
        </div>
    @endif
</div>
@endsection