@extends('layouts.customer')

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

    <h1 class="text-2xl sm:text-3xl font-bold text-gray-900 mb-8">Deposits</h1>

    <div class="grid grid-cols-1 lg:grid-cols-3 gap-8">
        {{-- Deposit Form --}}
        <div class="lg:col-span-1">
            <div class="bg-white rounded-xl shadow-sm border border-gray-100 p-6 sticky top-8">
                <h2 class="text-lg font-semibold text-gray-900 mb-4">Make a Deposit</h2>

                @if($errors->any())
                <div class="bg-rose-50 border border-rose-200 rounded-lg p-3 mb-4">
                    @foreach($errors->all() as $error)
                    <p class="text-sm text-rose-700">{{ $error }}</p>
                    @endforeach
                </div>
                @endif

                <form method="POST" action="{{ route('customer.deposits.store') }}">
                    @csrf
                    @method('POST')

                    <div class="space-y-4">
                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-1">Account</label>
                            <select name="account_id" class="w-full px-3 py-2.5 border border-gray-200 rounded-lg text-sm focus:ring-2 focus:ring-[#0D6B58]/20 focus:border-[#0D6B58]" required>
                                <option value="">Select account</option>
                                @foreach($accounts as $account)
                                <option value="{{ $account->id }}" {{ old('account_id', request('account_id')) == $account->id ? 'selected' : '' }}>
                                    {{ ucfirst($account->type) }} (****{{ substr($account->account_number, -4) }})
                                </option>
                                @endforeach
                            </select>
                        </div>

                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-1">Amount</label>
                            <div class="relative">
                                <span class="absolute left-3 top-2.5 text-gray-500 text-sm">$</span>
                                <input type="number" name="amount" value="{{ old('amount') }}" step="0.01" min="1" placeholder="0.00" class="w-full pl-7 pr-3 py-2.5 border border-gray-200 rounded-lg text-sm focus:ring-2 focus:ring-[#0D6B58]/20 focus:border-[#0D6B58]" required>
                            </div>
                        </div>

                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-1">Deposit Method</label>
                            <select name="method" class="w-full px-3 py-2.5 border border-gray-200 rounded-lg text-sm focus:ring-2 focus:ring-[#0D6B58]/20 focus:border-[#0D6B58]" required>
                                <option value="">Select method</option>
                                <option value="bank_transfer" {{ old('method') === 'bank_transfer' ? 'selected' : '' }}>Bank Transfer</option>
                                <option value="cash_deposit" {{ old('method') === 'cash_deposit' ? 'selected' : '' }}>Cash Deposit</option>
                                <option value="online" {{ old('method') === 'online' ? 'selected' : '' }}>Online</option>
                            </select>
                        </div>

                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-1">Reference / Transaction ID</label>
                            <input type="text" name="reference" value="{{ old('reference') }}" placeholder="e.g. Bank transfer reference" class="w-full px-3 py-2.5 border border-gray-200 rounded-lg text-sm focus:ring-2 focus:ring-[#0D6B58]/20 focus:border-[#0D6B58]">
                        </div>

                        <button type="submit" class="w-full py-2.5 bg-[#0D6B58] text-white text-sm font-semibold rounded-lg hover:bg-[#0A5A49] transition">
                            Make Deposit
                        </button>
                    </div>
                </form>

                {{-- Deposit Instructions --}}
                <div class="mt-6 pt-6 border-t border-gray-100">
                    <h3 class="text-sm font-semibold text-gray-900 mb-3">Deposit Instructions</h3>
                    <div class="space-y-3 text-xs text-gray-500">
                        <div class="p-3 bg-gray-50 rounded-lg">
                            <p class="font-medium text-gray-700">Bank Transfer</p>
                            <p class="mt-1">Transfer from any bank to your account using the details provided. Include your account number as reference.</p>
                        </div>
                        <div class="p-3 bg-gray-50 rounded-lg">
                            <p class="font-medium text-gray-700">Cash Deposit</p>
                            <p class="mt-1">Visit any branch to make a cash deposit. Bring a valid ID and your account number.</p>
                        </div>
                        <div class="p-3 bg-gray-50 rounded-lg">
                            <p class="font-medium text-gray-700">Online</p>
                            <p class="mt-1">Use the online payment portal for instant deposits. Debit card required.</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        {{-- Deposit History --}}
        <div class="lg:col-span-2">
            <div class="bg-white rounded-xl shadow-sm border border-gray-100">
                <div class="px-6 py-4 border-b border-gray-100">
                    <h2 class="text-lg font-semibold text-gray-900">Deposit History</h2>
                </div>
                <div class="overflow-x-auto">
                    <table class="w-full">
                        <thead>
                            <tr class="text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                                <th class="px-6 py-3">Date</th>
                                <th class="px-6 py-3">Amount</th>
                                <th class="px-6 py-3">Method</th>
                                <th class="px-6 py-3">Reference</th>
                                <th class="px-6 py-3">Status</th>
                            </tr>
                        </thead>
                        <tbody class="divide-y divide-gray-50">
                            @forelse($deposits as $deposit)
                            <tr class="hover:bg-gray-50 transition">
                                <td class="px-6 py-4 text-sm text-gray-500">{{ $deposit->created_at->format('M d, Y') }}</td>
                                <td class="px-6 py-4 text-sm font-semibold text-gray-900">${{ number_format($deposit->amount, 2) }}</td>
                                <td class="px-6 py-4 text-sm text-gray-600">{{ str_replace('_', ' ', ucfirst($deposit->method)) }}</td>
                                <td class="px-6 py-4 text-sm font-mono text-gray-500">{{ $deposit->reference ?? '---' }}</td>
                                <td class="px-6 py-4">
                                    <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>
                                </td>
                            </tr>
                            @empty
                            <tr>
                                <td colspan="5" class="px-6 py-12 text-center">
                                    <p class="text-sm text-gray-500">No deposits yet</p>
                                </td>
                            </tr>
                            @endforelse
                        </tbody>
                    </table>
                </div>
                @if($deposits->hasPages())
                <div class="px-6 py-4 border-t border-gray-100">
                    {{ $deposits->links() }}
                </div>
                @endif
            </div>
        </div>
    </div>

</div>
@endsection