@extends('layouts.admin')

@section('title', 'Beneficiaries')

@section('content')
<div class="page-header">
    <div>
        <h1 class="page-title">Beneficiaries <span class="page-title-count">({{ $beneficiaries->total() ?? 0 }})</span></h1>
    </div>
    <div class="page-actions">
        <a href="{{ route('admin.beneficiaries.create') }}" class="btn btn-primary">
            <svg width="16" height="16" viewBox="0 0 16 16" fill="none"><path d="M8 3v10M3 8h10" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/></svg>
            Add Beneficiary
        </a>
    </div>
</div>

<div class="card">
    <div class="card-header">
        <form method="GET" action="{{ route('admin.beneficiaries') }}" class="filter-bar">
            <div class="filter-search">
                <svg width="18" height="18" viewBox="0 0 18 18" fill="none"><circle cx="8" cy="8" r="5.5" stroke="currentColor" stroke-width="1.5"/><path d="M12 12l4 4" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/></svg>
                <input type="text" name="search" value="{{ request('search') }}" placeholder="Search by customer, beneficiary name, bank, account number..." class="filter-search-input">
            </div>
            <button type="submit" class="btn btn-primary btn-sm">Search</button>
            @if(request('search'))
            <a href="{{ route('admin.beneficiaries') }}" class="btn btn-outline btn-sm">Clear</a>
            @endif
        </form>
    </div>

    @if($beneficiaries->isNotEmpty())
    <form method="POST" action="{{ route('admin.beneficiaries.bulk') }}" id="bulk-delete-form">
        @csrf
        @method('DELETE')
        <div class="card-header" style="border-top: 1px solid var(--border, #e2e8f0);">
            <button type="submit" class="btn btn-sm btn-danger" onclick="return confirm('Delete all selected beneficiaries? This cannot be undone.')" disabled id="bulk-delete-btn">
                Delete Selected
            </button>
        </div>
    </form>
    @endif

    <x-data-table :emptyMessage="'No beneficiaries found.'" :paginator="$beneficiaries ?? null">
        <x-slot:thead>
            <th style="width: 40px;">
                @if($beneficiaries->isNotEmpty())
                <input type="checkbox" class="form-checkbox" id="select-all" title="Select all on page">
                @endif
            </th>
            <th>Customer</th>
            <th>Beneficiary Name</th>
            <th>Bank</th>
            <th>Account Number</th>
            <th>Nickname</th>
            <th>Date Added</th>
            <th>Actions</th>
        </x-slot:thead>
        <x-slot:tbody>
            @forelse($beneficiaries ?? [] as $beneficiary)
            <tr>
                <td>
                    <input type="checkbox" class="form-checkbox bulk-check" name="ids[]" value="{{ $beneficiary->id }}" form="bulk-delete-form">
                </td>
                <td class="text-semibold">{{ $beneficiary->user->name ?? 'N/A' }}</td>
                <td>{{ $beneficiary->name }}</td>
                <td>{{ $beneficiary->bank }}</td>
                <td><span class="text-mono">{{ $beneficiary->account_number }}</span></td>
                <td>{{ $beneficiary->nickname ?? '-' }}</td>
                <td>{{ $beneficiary->created_at->format('M d, Y') }}</td>
                <td>
                    <div class="table-actions">
                        <form method="POST" action="{{ route('admin.beneficiaries.destroy', $beneficiary->id) }}" class="inline">
                            @csrf
                            @method('DELETE')
                            <button type="submit" class="btn btn-sm btn-outline btn-danger" title="Delete" onclick="return confirm('Are you sure you want to delete this beneficiary?')">
                                <svg width="14" height="14" viewBox="0 0 14 14" fill="none"><path d="M3 4h8M6 4V2.5A.5.5 0 016.5 2h1A.5.5 0 018 2.5V4M4.5 4l.5 8h4l.5-8M5.5 6l.3 4M8.2 6l-.3 4" stroke="currentColor" stroke-width="1.3" stroke-linecap="round" stroke-linejoin="round"/></svg>
                            </button>
                        </form>
                    </div>
                </td>
            </tr>
            @empty
            <tr>
                <td colspan="8">
                    <div class="data-table-empty-content">
                        <svg width="48" height="48" viewBox="0 0 48 48" fill="none"><circle cx="24" cy="24" r="24" fill="#F1F5F9"/><circle cx="18" cy="16" r="6" stroke="#94A3B8" stroke-width="1.5"/><circle cx="28" cy="18" r="5" stroke="#94A3B8" stroke-width="1.5"/><path d="M8 38c0-5 4-8 10-8s10 3 10 8" stroke="#94A3B8" stroke-width="1.5" stroke-linecap="round"/></svg>
                        <p>No beneficiaries found.</p>
                    </div>
                </td>
            </tr>
            @endforelse
        </x-slot:tbody>
    </x-data-table>
</div>
@endsection

@push('scripts')
<script>
(function () {
    const selectAll = document.getElementById('select-all');
    const checkboxes = document.querySelectorAll('.bulk-check');
    const bulkBtn = document.getElementById('bulk-delete-btn');

    if (!selectAll || !bulkBtn) return;

    function updateBulkState() {
        const checked = document.querySelectorAll('.bulk-check:checked');
        bulkBtn.disabled = checked.length === 0;
        if (selectAll) {
            selectAll.checked = checkboxes.length > 0 && checked.length === checkboxes.length;
        }
    }

    checkboxes.forEach(cb => cb.addEventListener('change', updateBulkState));
    selectAll.addEventListener('change', function () {
        checkboxes.forEach(cb => cb.checked = selectAll.checked);
        updateBulkState();
    });
})();
</script>
@endpush