@extends('layouts.customer')

@section('content')
<div class="max-w-2xl mx-auto px-4 sm:px-6 lg:px-8 py-8">

    <a href="{{ route('customer.deposits') }}" class="inline-flex items-center text-sm text-gray-500 hover:text-[#0D6B58] mb-6 transition">
        <svg class="w-4 h-4 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"/>
        </svg>
        Back to Deposits
    </a>

    {{-- Status Banner --}}
    <div class="rounded-xl p-4 mb-6
        @if($deposit->status === 'approved') bg-emerald-50 border border-emerald-200
        @elseif($deposit->status === 'pending') bg-amber-50 border border-amber-200
        @else bg-rose-50 border border-rose-200 @endif">
        <div class="flex items-center space-x-3">
            @if($deposit->status === 'approved')
            <svg class="w-6 h-6 text-emerald-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <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>
            @elseif($deposit->status === 'pending')
            <svg class="w-6 h-6 text-amber-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"/>
            </svg>
            @else
            <svg class="w-6 h-6 text-rose-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z"/>
            </svg>
            @endif
            <div>
                <p class="font-semibold
                    @if($deposit->status === 'approved') text-emerald-700
                    @elseif($deposit->status === 'pending') text-amber-700
                    @else text-rose-700 @endif">
                    Deposit {{ ucfirst($deposit->status) }}
                </p>
            </div>
        </div>
    </div>

    <div class="bg-white rounded-xl shadow-sm border border-gray-100 p-6 sm:p-8">
        <div class="space-y-4">
            <div class="flex items-center justify-between py-3 border-b border-gray-100">
                <span class="text-sm text-gray-500">Amount</span>
                <span class="text-2xl font-bold text-gray-900">${{ number_format($deposit->amount, 2) }}</span>
            </div>
            <div class="flex items-center justify-between py-3 border-b border-gray-100">
                <span class="text-sm text-gray-500">Method</span>
                <span class="text-sm font-medium text-gray-900">{{ str_replace('_', ' ', ucfirst($deposit->method)) }}</span>
            </div>
            <div class="flex items-center justify-between py-3 border-b border-gray-100">
                <span class="text-sm text-gray-500">Reference</span>
                <span class="text-sm font-mono text-gray-900">{{ $deposit->reference ?? '---' }}</span>
            </div>
            <div class="flex items-center justify-between py-3 border-b border-gray-100">
                <span class="text-sm text-gray-500">Date</span>
                <span class="text-sm font-medium text-gray-900">{{ $deposit->created_at->format('M d, Y h:i A') }}</span>
            </div>
            <div class="flex items-center justify-between py-3">
                <span class="text-sm text-gray-500">Status</span>
                <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium
                    @if($deposit->status === 'approved') bg-emerald-100 text-emerald-700
                    @elseif($deposit->status === 'pending') bg-amber-100 text-amber-700
                    @else bg-rose-100 text-rose-700 @endif">
                    {{ ucfirst($deposit->status) }}
                </span>
            </div>

            @if($deposit->admin_notes)
            <div class="pt-4 border-t border-gray-100">
                <p class="text-sm text-gray-500 mb-1">Admin Notes</p>
                <p class="text-sm text-gray-700">{{ $deposit->admin_notes }}</p>
            </div>
            @endif
        </div>
    </div>

</div>
@endsection