@extends('layouts.app')

@section('title', 'Beneficiaries')

@section('content')
<div class="space-y-6">
    <div class="flex items-center justify-between">
        <div>
            <h1 class="text-2xl font-bold text-gray-900">Beneficiaries</h1>
            <p class="mt-1 text-sm text-gray-500">Manage your saved beneficiaries.</p>
        </div>
        <button onclick="document.getElementById('addModal').classList.remove('hidden')" class="rounded-lg bg-green-950 px-4 py-2.5 text-sm font-semibold text-white shadow-sm hover:bg-green-700">Add Beneficiary</button>
    </div>

    <div class="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3">
        @forelse($beneficiaries as $b)
        <div class="rounded-xl bg-white p-4 shadow-sm border border-gray-100">
            <div class="flex items-center justify-between">
                <div class="flex items-center gap-3">
                    <div class="h-10 w-10 rounded-full bg-gray-100 flex items-center justify-center">
                        @if($b->type === 'phone')
                            <svg class="h-5 w-5 text-gray-500" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M10.5 1.5H8.25A2.25 2.25 0 006 3.75v16.5a2.25 2.25 0 002.25 2.25h7.5A2.25 2.25 0 0018 20.25V3.75a2.25 2.25 0 00-2.25-2.25H13.5m-3 0V3h3V1.5m-3 0h3" /></svg>
                        @else
                            <svg class="h-5 w-5 text-gray-500" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M3.75 13.5l10.5-11.25L12 10.5h8.25L9.75 21.75 12 13.5H3.75z" /></svg>
                        @endif
                    </div>
                    <div>
                        <p class="text-sm font-semibold text-gray-900">{{ $b->name }}</p>
                        <p class="text-xs text-gray-500">{{ $b->number }}</p>
                    </div>
                </div>
                <form method="POST" action="{{ route('beneficiaries.toggle-favorite', $b) }}">
                    @csrf
                    <button type="submit" class="text-{{ $b->is_favorite ? 'yellow' : 'gray' }}-400 hover:text-yellow-500">
                        <svg class="h-5 w-5 {{ $b->is_favorite ? 'fill-yellow-400' : '' }}" viewBox="0 0 20 20" fill="currentColor"><path fill-rule="evenodd" d="M10.868 2.884c-.321-.772-1.415-.772-1.736 0l-1.83 4.401-4.753.381c-.833.067-1.171 1.107-.536 1.651l3.62 3.102 1.106 4.637c.12.513.501.857 1.012.924l4.923.649c.771.104 1.082 1.047.536 1.57l-3.618 3.202 1.105 4.637c.12.512-.044 1.086-.536 1.203l-4.923.649c-.771.103-1.445-.372-1.294-1.142l.724-3.951-3.62-3.102c-.433-.372-.396-1.037.082-1.364l4.83-3.716z" clip-rule="evenodd" /></svg>
                    </button>
                </form>
            </div>
            <div class="mt-3 flex gap-2">
                <span class="inline-flex items-center rounded-full bg-gray-100 px-2 py-1 text-xs font-medium text-gray-600">{{ ucfirst($b->type) }}</span>
                @if($b->network)<span class="inline-flex items-center rounded-full bg-gray-100 px-2 py-1 text-xs font-medium text-gray-600">{{ $b->network }}</span>@endif
            </div>
            <div class="mt-3 flex gap-2">
                <form method="POST" action="{{ route('beneficiaries.destroy', $b) }}" onsubmit="return confirm('Delete this beneficiary?')">
                    @csrf @method('DELETE')
                    <button type="submit" class="text-xs text-red-500 hover:text-red-600">Delete</button>
                </form>
            </div>
        </div>
        @empty
        <div class="col-span-full text-center py-12">
            <p class="text-sm text-gray-500">No beneficiaries saved yet.</p>
        </div>
        @endforelse
    </div>
</div>

{{-- Add Modal --}}
<div id="addModal" class="hidden fixed inset-0 z-50 overflow-y-auto bg-black/50 flex items-center justify-center">
    <div class="bg-white rounded-xl p-6 w-full max-w-md mx-4">
        <h3 class="text-lg font-semibold text-gray-900 mb-4">Add Beneficiary</h3>
        <form method="POST" action="{{ route('beneficiaries.store') }}" class="space-y-4">
            @csrf
            <div>
                <label class="block text-sm font-medium text-gray-700 mb-1">Name</label>
                <input type="text" name="name" required class="block w-full rounded-lg border-gray-300 shadow-sm focus:border-green-950 focus:ring-green-950 sm:text-sm px-3 py-2 border">
            </div>
            <div>
                <label class="block text-sm font-medium text-gray-700 mb-1">Type</label>
                <select name="type" required class="block w-full rounded-lg border-gray-300 shadow-sm focus:border-green-950 focus:ring-green-950 sm:text-sm px-3 py-2 border">
                    <option value="phone">Phone Number</option>
                    <option value="meter">Meter Number</option>
                    <option value="smartcard">Smartcard</option>
                    <option value="customer_id">Customer ID</option>
                </select>
            </div>
            <div>
                <label class="block text-sm font-medium text-gray-700 mb-1">Number</label>
                <input type="text" name="number" required class="block w-full rounded-lg border-gray-300 shadow-sm focus:border-green-950 focus:ring-green-950 sm:text-sm px-3 py-2 border">
            </div>
            <div class="flex gap-3">
                <button type="submit" class="flex-1 rounded-lg bg-green-950 px-4 py-2.5 text-sm font-semibold text-white hover:bg-green-700">Save</button>
                <button type="button" onclick="document.getElementById('addModal').classList.add('hidden')" class="flex-1 rounded-lg bg-gray-100 px-4 py-2.5 text-sm font-semibold text-gray-700 hover:bg-gray-200">Cancel</button>
            </div>
        </form>
    </div>
</div>
@endsection