@extends('layouts.customer')

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

    <div class="flex items-center justify-between mb-8">
        <h1 class="text-2xl sm:text-3xl font-bold text-gray-900">My Beneficiaries</h1>
        <button onclick="openBeneficiaryForm()" class="inline-flex items-center px-4 py-2.5 bg-[#0D6B58] text-white text-sm font-medium rounded-lg hover:bg-[#0A5A49] transition">
            <svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6"/>
            </svg>
            Add Beneficiary
        </button>
    </div>

    @if(isset($beneficiaries) && $beneficiaries->count())
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
        @foreach($beneficiaries as $beneficiary)
        <div class="bg-white rounded-xl shadow-sm border border-gray-100 p-6 hover:shadow-md transition">
            <div class="flex items-start justify-between mb-4">
                <div class="flex items-center space-x-3">
                    <div class="w-10 h-10 rounded-full bg-[#0D6B58]/10 flex items-center justify-center">
                        <span class="text-sm font-bold text-[#0D6B58]">{{ strtoupper(substr($beneficiary->name, 0, 1)) }}</span>
                    </div>
                    <div>
                        <p class="text-sm font-semibold text-gray-900">{{ $beneficiary->name }}</p>
                        <p class="text-xs text-gray-500">{{ $beneficiary->bank_name }}</p>
                    </div>
                </div>
            </div>

            <div class="space-y-2 mb-4">
                <div class="flex items-center justify-between">
                    <span class="text-xs text-gray-500">Account Number</span>
                    <span class="text-sm font-mono text-gray-900">{{ $beneficiary->account_number }}</span>
                </div>
                @if($beneficiary->nickname)
                <div class="flex items-center justify-between">
                    <span class="text-xs text-gray-500">Nickname</span>
                    <span class="text-sm text-gray-700">{{ $beneficiary->nickname }}</span>
                </div>
                @endif
                <div class="flex items-center justify-between">
                    <span class="text-xs text-gray-500">Added</span>
                    <span class="text-sm text-gray-700">{{ $beneficiary->created_at->format('M d, Y') }}</span>
                </div>
            </div>

            <div class="flex space-x-2 pt-4 border-t border-gray-100">
                <a href="{{ route('customer.transfer', ['recipient_account' => $beneficiary->account_number]) }}" class="flex-1 inline-flex items-center justify-center px-3 py-1.5 bg-[#0D6B58] text-white text-xs font-medium rounded-lg hover:bg-[#0A5A49] transition">
                    Transfer
                </a>
                <button onclick="openBeneficiaryForm({{ $beneficiary->id }}, '{{ $beneficiary->name }}', '{{ $beneficiary->bank_name }}', '{{ $beneficiary->account_number }}', '{{ $beneficiary->nickname ?? '' }}')" class="flex-1 inline-flex items-center justify-center px-3 py-1.5 bg-gray-100 text-gray-700 text-xs font-medium rounded-lg hover:bg-gray-200 transition">
                    Edit
                </button>
                <form method="POST" action="{{ route('customer.beneficiaries.destroy', $beneficiary->id) }}" onsubmit="return confirm('Delete this beneficiary?')">
                    @csrf
                    @method('DELETE')
                    <button type="submit" class="px-3 py-1.5 bg-rose-50 text-rose-700 text-xs font-medium rounded-lg hover:bg-rose-100 transition">
                        Delete
                    </button>
                </form>
            </div>
        </div>
        @endforeach
    </div>
    @else
    <div class="bg-white rounded-xl shadow-sm border border-gray-100 p-12 text-center">
        <svg class="w-16 h-16 text-gray-300 mx-auto mb-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0z"/>
        </svg>
        <h3 class="text-lg font-semibold text-gray-900 mb-2">No Beneficiaries Yet</h3>
        <p class="text-gray-500 text-sm mb-4">Add beneficiaries to make transfers faster.</p>
        <button onclick="openBeneficiaryForm()" class="inline-flex items-center px-4 py-2 bg-[#0D6B58] text-white text-sm font-medium rounded-lg hover:bg-[#0A5A49] transition">Add Beneficiary</button>
    </div>
    @endif

    {{-- Add/Edit Beneficiary Modal --}}
    <div id="beneficiary-modal" class="hidden fixed inset-0 z-50 overflow-y-auto">
        <div class="flex items-center justify-center min-h-screen px-4 pt-4 pb-20 text-center sm:block sm:p-0">
            <div class="fixed inset-0 transition-opacity bg-gray-500 bg-opacity-75" onclick="closeBeneficiaryModal()"></div>
            <div class="inline-block w-full max-w-md p-6 my-8 text-left align-bottom transition-all transform bg-white rounded-xl shadow-xl">
                <div class="flex items-center justify-between mb-4">
                    <h3 class="text-lg font-semibold text-gray-900" id="modal-title">Add Beneficiary</h3>
                    <button onclick="closeBeneficiaryModal()" class="p-1 rounded-lg hover:bg-gray-100">
                        <svg class="w-5 h-5 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/>
                        </svg>
                    </button>
                </div>
                <form id="beneficiary-form" method="POST" action="{{ route('customer.beneficiaries.store') }}">
                    @csrf
                    <div id="method-field"></div>
                    <div class="space-y-4">
                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-1">Name</label>
                            <input type="text" name="name" id="ben-name" 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>
                        </div>
                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-1">Bank</label>
                            <select name="bank_name" id="ben-bank" 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 bank</option>
                                @foreach($banks ?? [] as $bank)
                                <option value="{{ $bank }}">{{ $bank }}</option>
                                @endforeach
                            </select>
                        </div>
                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-1">Account Number</label>
                            <input type="text" name="account_number" id="ben-account" 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>
                        </div>
                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-1">Nickname (optional)</label>
                            <input type="text" name="nickname" id="ben-nickname" 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">
                            Save Beneficiary
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>

</div>

<script>
function openBeneficiaryForm(id, name, bank, account, nickname) {
    const modal = document.getElementById('beneficiary-modal');
    const form = document.getElementById('beneficiary-form');
    const title = document.getElementById('modal-title');
    const methodField = document.getElementById('method-field');

    if (id) {
        title.textContent = 'Edit Beneficiary';
        form.action = '{{ url("customer/beneficiaries") }}/' + id;
        methodField.innerHTML = '@method("PUT")';
        document.getElementById('ben-name').value = name || '';
        document.getElementById('ben-bank').value = bank || '';
        document.getElementById('ben-account').value = account || '';
        document.getElementById('ben-nickname').value = nickname || '';
    } else {
        title.textContent = 'Add Beneficiary';
        form.action = '{{ route("customer.beneficiaries.store") }}';
        methodField.innerHTML = '';
        form.reset();
    }
    modal.classList.remove('hidden');
}

function closeBeneficiaryModal() {
    document.getElementById('beneficiary-modal').classList.add('hidden');
}
</script>
@endsection