@extends('layouts.admin')
@section('title','Payment Records')
@section('page-title','💳 Payment Records')

@section('styles')
<style>
/* Standardized Theme Pagination */
.cust-pagination, .wof-pagination, .payment-pagination, .pagination-wrap, .pagination-wrapper {
    display: flex; justify-content: center; margin-top: 20px; text-align: center;
}
.cust-pagination nav, .wof-pagination nav, .payment-pagination nav, .pagination-wrap nav, .pagination-wrapper nav {
    display: flex; justify-content: center;
}
.cust-pagination ul, .wof-pagination ul, .payment-pagination ul, .pagination-wrap ul, .pagination-wrapper ul, .pagination {
    display: flex !important; list-style: none !important; gap: 8px !important;
    padding: 0 !important; margin: 0 !important; align-items: center; flex-wrap: wrap; justify-content: center;
}
.cust-pagination li, .wof-pagination li, .payment-pagination li, .pagination-wrap li, .pagination-wrapper li {
    list-style: none !important; display: inline-block;
}
.cust-pagination p, .wof-pagination p, .payment-pagination p, .pagination-wrap p, .pagination-wrapper p {
    display: none !important;
}
.cust-pagination li a, .cust-pagination li span,
.wof-pagination li a, .wof-pagination li span,
.payment-pagination li a, .payment-pagination li span,
.pagination-wrap li a, .pagination-wrap li span,
.pagination-wrapper li a, .pagination-wrapper li span,
.pagination a, .pagination span {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 38px; height: 38px; padding: 0 12px; border: 1px solid #e0e0e0; border-radius: 8px;
    color: #555; text-decoration: none !important; font-size: 14px; font-weight: 600; background: #fff; transition: .2s; cursor: pointer;
}
.cust-pagination li a:hover, .wof-pagination li a:hover, .payment-pagination li a:hover, .pagination-wrap li a:hover, .pagination-wrapper li a:hover, .pagination a:hover {
    background: linear-gradient(135deg, #f7941d, #e8820a) !important; color: #fff !important; border-color: transparent !important;
    transform: translateY(-2px); box-shadow: 0 4px 12px rgba(247, 148, 29, 0.25);
}
.cust-pagination li.active span, .cust-pagination li[aria-current=page] span,
.wof-pagination li.active span, .wof-pagination li[aria-current=page] span,
.payment-pagination li.active span, .payment-pagination li[aria-current=page] span,
.pagination-wrap li.active span, .pagination-wrap li[aria-current=page] span,
.pagination-wrapper li.active span, .pagination-wrapper li[aria-current=page] span,
.pagination .active span, .pagination [aria-current="page"] span {
    background: linear-gradient(135deg, #f7941d, #e8820a) !important; color: #fff !important; border-color: transparent !important;
    box-shadow: 0 4px 12px rgba(247, 148, 29, 0.3);
}
.cust-pagination li.disabled span, .cust-pagination li.disabled a,
.wof-pagination li.disabled span, .wof-pagination li.disabled a,
.payment-pagination li.disabled span, .payment-pagination li.disabled a,
.pagination-wrap li.disabled span, .pagination-wrap li.disabled a,
.pagination-wrapper li.disabled span, .pagination-wrapper li.disabled a,
.pagination .disabled span, .pagination .disabled a {
    color: #ccc !important; background: #f8f9fa !important; cursor: not-allowed !important; border-color: #e0e0e0 !important; pointer-events: none; transform: none; box-shadow: none;
}
.pagination .dots span, .cust-pagination .dots span, .wof-pagination .dots span, .payment-pagination .dots span, .pagination-wrap .dots span, .pagination-wrapper .dots span {
    background: transparent !important; border: none !important; color: #a0aec0 !important; cursor: default; box-shadow: none !important; transform: none !important;
}
.cust-pagination .pagination > div, .wof-pagination .pagination > div, .payment-pagination .pagination > div, .pagination-wrap .pagination > div, .pagination-wrapper .pagination > div {
    display: flex !important; gap: 6px; align-items: center; justify-content: center; width: 100%;
}
@media (max-width: 768px) {
    .cust-pagination li a, .cust-pagination li span,
    .wof-pagination li a, .wof-pagination li span,
    .payment-pagination li a, .payment-pagination li span,
    .pagination-wrap li a, .pagination-wrap li span,
    .pagination-wrapper li a, .pagination-wrapper li span,
    .pagination a, .pagination span {
        min-width: 34px; height: 34px; padding: 0 8px; font-size: 13px;
    }
}


.tabs-wrap{display:flex;border-bottom:2px solid #e0e0e0;margin-bottom:0}
.tab-btn{padding:12px 24px;background:none;border:none;font-size:14px;font-weight:600;color:#888;cursor:pointer;border-bottom:3px solid transparent;margin-bottom:-2px;transition:.2s}
.tab-btn.active{color:#1e3c72;border-bottom-color:#1e3c72}
.tab-content{display:none;padding-top:18px}.tab-content.active{display:block}
.filter-bar{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:16px;align-items:flex-end}
.filter-group{display:flex;flex-direction:column;gap:4px}
.filter-group label{font-size:12px;font-weight:600;color:#555}
.filter-group input,.filter-group select{padding:9px 12px;border:1.5px solid #ddd;border-radius:8px;font-size:13px;outline:none;background:#fff}
.filter-group input:focus,.filter-group select:focus{border-color:#1e3c72}
.filter-btn{padding:9px 16px;background:#1e3c72;color:#fff;border:none;border-radius:8px;cursor:pointer;font-size:13px;font-weight:600;align-self:flex-end}
.export-btn{padding:9px 16px;background:#16a34a;color:#fff;border:none;border-radius:8px;cursor:pointer;font-size:13px;font-weight:600;text-decoration:none;display:inline-flex;align-items:center;gap:6px;align-self:flex-end}
.refund-btn{background:#dc2626;color:#fff;border:none;padding:6px 12px;border-radius:6px;font-size:12px;cursor:pointer;font-weight:600}
.refund-btn:hover{background:#b91c1c}

/* ---- Custom toggle — NO pseudo-elements, pure div-based ---- */
.my-toggle{display:inline-flex;align-items:center;gap:8px;cursor:pointer}
.my-toggle-track{
    width:46px;height:26px;border-radius:13px;
    background:#ccc;
    position:relative;
    transition:background .25s;
    flex-shrink:0;
}
.my-toggle-track.on{ background:#22c55e; }
.my-toggle-thumb{
    position:absolute;
    width:20px;height:20px;border-radius:50%;
    background:#fff;
    top:3px;left:3px;
    transition:left .25s;
    box-shadow:0 1px 3px rgba(0,0,0,.25);
}
.my-toggle-track.on .my-toggle-thumb{ left:23px; }
.my-toggle-text{font-size:12px;font-weight:700;min-width:46px}
.my-toggle-text.shown{color:#22c55e}
.my-toggle-text.hidden-t{color:#aaa}
.my-toggle-sub{font-size:11px;color:#999;margin-top:1px}
.toggle-info{display:flex;flex-direction:column}

/* ---------- THEME BUTTONS ---------- */
.add-btn, .btn-save, .quick-link, .btn-pay {
    color: #fff !important;
    font-weight: 700 !important;
    text-align: center !important;
    padding: 13px 24px !important;
    border-radius: 8px !important;
    letter-spacing: .6px !important;
    font-size: 14px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    text-decoration: none !important;
    transition: transform .18s ease, box-shadow .25s ease !important;
    border: none !important;
    cursor: pointer !important;
    background: #07b8a3 !important;
    border-bottom: 4px solid #089a89 !important;
}
.add-btn:hover, .btn-save:hover, .quick-link:hover, .btn-pay:hover {
    transform: translateY(-3px) !important;
    box-shadow: 0 5px 15px rgba(0,0,0,0.15) !important;
}
.quick-links .quick-link:nth-child(2) { background: #81c66b !important; border-bottom-color: #67a055 !important; }
.quick-links .quick-link:nth-child(3) { background: #ff7528 !important; border-bottom-color: #d9a810 !important; }
.quick-links .quick-link:nth-child(4) { background: #de2779 !important; border-bottom-color: #af1b5d !important; }
.quick-links .quick-link:nth-child(5) { background: #11A2D9 !important; border-bottom-color: #0c8bbb !important; }

.action-btn { 
    border-radius: 6px !important; 
    border: none !important;
    border-bottom: 3px solid rgba(0,0,0,0.2) !important; 
    padding: 6px 12px !important; 
    font-weight: 600 !important; 
    color: #fff !important;
    transition: transform .18s ease !important;
}
.action-btn:hover { transform: translateY(-2px) !important; }
.edit-btn { background: #11A2D9 !important; }
.credits-btn, .btn-approve, .btn-success { background: #81c66b !important; }
.delete-btn, .btn-reject, .btn-danger { background: #de2779 !important; }
.btn-cancel { background: #ff7528 !important; color: #fff !important; border-bottom: 4px solid #d9a810 !important; }

.logo-text, .sidebar .logo-text, .main-sidebar .logo-text {
    color: transparent !important;
    text-indent: -9999px !important;
    background-image: url('{{ asset("images/logo.png") }}') !important;
    background-size: contain !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    width: 100% !important;
    height: 65px !important;
    display: block !important;
    margin: 10px 0 !important;
    overflow: hidden !important;
}

.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
@media (max-width: 768px) {
    .logo-text, .sidebar .logo-text, .main-sidebar .logo-text {
        height: 45px !important;
        margin: 5px 0 !important;
    }
    .card, .del-card, .settings-card { padding: 16px !important; }
    .filter-bar { flex-direction: column; align-items: stretch !important; }
    .filter-group, .filter-select, .filter-input { width: 100% !important; }
    .responsive-form-grid, .view-grid { grid-template-columns: 1fr !important; }
}

.sidebar a[href*="logout"], .sidebar form[action*="logout"] button, .sidebar .logout-btn, .sidebar .btn-logout, .main-sidebar a[href*="logout"], .main-sidebar form[action*="logout"] button, .sidebar-wrapper a[href*="logout"] {
    color: #fff !important;
    font-weight: 700 !important;
    text-align: center !important;
    padding: 12px 24px !important;
    border-radius: 8px !important;
    letter-spacing: .6px !important;
    font-size: 14px !important;
    display: block !important;
    text-decoration: none !important;
    transition: transform .18s ease, box-shadow .25s ease !important;
    border: none !important;
    cursor: pointer !important;
    background: #de2779 !important;
    width: 100% !important;
    margin-top: 10px !important;
}
.sidebar a[href*="logout"]:hover, .sidebar form[action*="logout"] button:hover, .sidebar .logout-btn:hover, .sidebar .btn-logout:hover, .main-sidebar a[href*="logout"]:hover, .main-sidebar form[action*="logout"] button:hover, .sidebar-wrapper a[href*="logout"]:hover {
    transform: translateY(-3px) !important;
    box-shadow: 0 5px 15px rgba(0,0,0,0.15) !important;
    background: #de2779 !important;
}

.navbar .nav-link, .navbar .dropdown-toggle, .navbar .user-name, header .user-name, .navbar .profile-text {
    color: #f7941d !important;
}

.main-sidebar, .sidebar, aside, .sidebar-wrapper {
    background: #1d1d1d !important;
}
.sidebar .nav-link, .sidebar a {
    color: #fff !important;
}
.sidebar .nav-link:hover, .sidebar a:hover {
    background: rgba(255,255,255,0.1) !important;
    color: #07b8a3 !important;
}
.sidebar .nav-item .nav-link.active, .sidebar .active > a {
    background: linear-gradient(90deg, #81c66b 0%, #07b8a3 25%, #ff7528 70%, #de2779 100%) !important;
    color: #fff !important;
    border-radius: 6px;
}
</style>
@endsection

@section('content')
<div class="card" style="padding:0;overflow:hidden">
<div style="padding:20px 22px 0">
    <h2 style="font-size:19px;color:#1e3c72;margin-bottom:4px">Payment Records</h2>
</div>

<div class="tabs-wrap">
    <button class="tab-btn active" onclick="switchTab('donation',this)">🎁 Donation</button>
    <button class="tab-btn" onclick="switchTab('prepayment',this)">💳 Prepayment</button>
</div>

<div style="padding:0 22px 22px">

{{-- DONATIONS TAB --}}
<div class="tab-content active" id="tab-donation">
    <form method="GET" class="filter-bar">
        <input type="hidden" name="tab" value="donation">
        <div class="filter-group">
            <label>Search</label>
            <input type="text" name="don_search" placeholder="Search by ID, Customer…" value="{{ request('don_search') }}" style="min-width:200px">
        </div>
        <div class="filter-group">
            <label>Type</label>
            <select name="don_type">
                <option value="">All Types</option>
                <option value="individual" {{ request('don_type')=='individual'?'selected':'' }}>Individual</option>
                <option value="business"   {{ request('don_type')=='business'?'selected':'' }}>Business</option>
            </select>
        </div>
        <div class="filter-group">
            <label>From Date</label>
            <input type="date" name="don_from" value="{{ request('don_from') }}">
        </div>
        <div class="filter-group">
            <label>To Date</label>
            <input type="date" name="don_to" value="{{ request('don_to') }}">
        </div>
        <button type="submit" class="filter-btn">🔍 Filter</button>
        <a href="{{ route('admin.payments.donations.export', request()->only(['don_search','don_type','don_from','don_to'])) }}" 
   class="export-btn">📤 Export CSV</a>
    </form>

    <div class="table-wrap">
    <table>
        <thead>
            <tr>
                <th>Transaction ID</th>
                <th>Date</th>
                <th>Customer</th>
                <th>Amount</th>
                <th>Email / Phone</th>
                <th>Type</th>
                <th>Anonymous
                    <br><span style="font-weight:400;font-size:11px;color:#aaa">Controls Wall of Fame visibility</span>
                </th>
            </tr>
        </thead>
        <tbody>
        @forelse($donations as $d)
        @php
            $isAnon     = (bool) $d->anonymous;
            $donorLabel = $d->donor_name ?? $d->business_name ?? 'Donor';
            $toggleUrl  = route('admin.donations.toggle-anon', $d->id);
        @endphp
        <tr>
            <td><strong>{{ $d->donation_id }}</strong></td>
            <td>{{ $d->created_at->format('Y-m-d') }}</td>
        <!--   <td>
    <div style="display:flex;align-items:center;gap:8px;flex-wrap:wrap">
        <span id="donor-name-{{ $d->id }}">
            @if($isAnon)
                <span style="color:#aaa;font-style:italic">Anonymous</span>
            @else
                {{ $donorLabel }}
            @endif
        </span>
       

          <button onclick="openEditName({{ $d->id }}, '{{ addslashes($donorLabel) }}', '{{ $d->type }}')"
    style="display:{{ $isAnon ? 'none' : 'inline-flex' }};background:none;border:1px solid #ddd;border-radius:6px;padding:3px 8px;cursor:pointer;font-size:11px;color:#667eea;white-space:nowrap;line-height:1.4">
    ✏️ Edit
</button>

    </div>
</td> -->


<td style="min-width:220px">
    <div style="display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:4px">
        <span id="donor-name-{{ $d->id }}" style="font-weight:700">
            @if($isAnon)
                <span style="color:#aaa;font-style:italic">Anonymous</span>
            @else
                @if($d->type === 'business')
                    {{ $d->business_name ?? $d->donor_name ?? 'Donor' }}
                @else
                    {{ $d->donor_name ?? 'Donor' }}
                @endif
            @endif
        </span>
        <button onclick="openEditName({{ $d->id }}, '{{ addslashes($d->type === 'business' ? ($d->business_name ?? '') : ($d->donor_name ?? '')) }}', '{{ $d->type }}')"
            style="display:{{ $isAnon ? 'none' : 'inline-flex' }};background:none;border:1px solid #ddd;border-radius:6px;padding:3px 8px;cursor:pointer;font-size:11px;color:#667eea;white-space:nowrap;line-height:1.4">
            ✏️ Edit
        </button>
    </div>

   <div class="extra-info" style="font-size:12px;color:#666;line-height:1.5;{{ $isAnon ? 'display:none' : '' }}">
    @if($d->type === 'business' && $d->donor_name)
        <span style="color:#aaa">Contact:</span> {{ $d->donor_name }}
    @endif
</div>


</td>

            <td><strong>${{ number_format($d->amount,2) }}</strong></td>
          
           <!--  <td id="email-{{ $d->id }}">
                @if($isAnon)
                    —
                @else
                    {{ $d->email ?: ($d->contact ?: '—') }}
                @endif
            </td> -->

            <td id="email-{{ $d->id }}" style="min-width:200px;font-size:13px;line-height:1.6">
                @if($isAnon)
                    —
                @else
                    @if($d->email)
                        <div style="color:#333">📧 {{ $d->email }}</div>
                    @endif
                    @if($d->contact)
                        <div style="color:#666">📞 {{ $d->contact }}</div>
                    @endif
                    @if(!$d->email && !$d->contact)
                        <span style="color:#aaa">—</span>
                    @endif
                @endif
            </td>


            <td>
    <span class="badge {{ $d->type=='individual'?'badge-info':'badge-success' }}">
        {{ ucfirst($d->type) }}@if($isAnon) Anonymous @endif
    </span>
</td>
            <td>
                {{-- Pure div-based toggle — no pseudo-elements --}}
                <div class="my-toggle" onclick="doToggle(this)"
                     data-id="{{ $d->id }}"
                     data-url="{{ $toggleUrl }}"
                     data-anon="{{ $isAnon ? '1' : '0' }}"
                     data-name="{{ $donorLabel }}">
                    <div class="my-toggle-track {{ $isAnon ? '' : 'on' }}">
                        <div class="my-toggle-thumb"></div>
                    </div>
                    <div class="toggle-info">
                        <span class="my-toggle-text {{ $isAnon ? 'hidden-t' : 'shown' }}">
                            {{ $isAnon ? 'Hidden' : 'Shown' }}
                        </span>
                        <span class="my-toggle-sub">
                            Shows as <em>{{ $isAnon ? 'Anonymous' : $donorLabel }}</em> on Wall of Fame
                        </span>
                    </div>
                </div>
            </td>
        </tr>
        @empty
        <tr><td colspan="7" style="text-align:center;padding:40px;color:#aaa">No donations found</td></tr>
        @endforelse
        </tbody>
    </table>
    </div>
   <div class="payment-pagination">{{ $donations->appends(request()->except('pre_page'))->links() }}</div>
</div>

{{-- PREPAYMENTS TAB --}}
<div class="tab-content" id="tab-prepayment">
    <form method="GET" class="filter-bar">
        <input type="hidden" name="tab" value="prepayment">
        <div class="filter-group">
            <label>Search</label>
            <input type="text" name="pre_search" placeholder="Invoice # or customer…" value="{{ request('pre_search') }}" style="min-width:200px">
        </div>
        <div class="filter-group">
            <label>From Date</label>
            <input type="date" name="pre_from" value="{{ request('pre_from') }}">
        </div>
        <div class="filter-group">
            <label>To Date</label>
            <input type="date" name="pre_to" value="{{ request('pre_to') }}">
        </div>
        <button type="submit" class="filter-btn">🔍 Filter</button>
    </form>

    <div class="table-wrap">
    <table>
        <thead>
            <tr>
                <th>Invoice #</th><th>Date</th><th>Customer</th>
                <th>Amount (ex GST)</th><th>GST (10%)</th><th>Total (inc GST)</th>
                <th>Card</th><th>Status</th><th>Refunded</th><th>Action</th>
            </tr>
        </thead>
        <tbody>
        @forelse($prepayments as $p)
        <tr>
            <td><strong>{{ $p->invoice_no }}</strong></td>
            <td>{{ $p->created_at->format('Y-m-d') }}</td>
            <td>{{ $p->customer_name }}</td>
            <td>${{ number_format($p->amount_ex_gst,2) }}</td>
            <td>${{ number_format($p->gst,2) }}</td>
            <td><strong>${{ number_format($p->amount,2) }}</strong></td>
            <td>
                @if($p->card_brand)
                    {{ ucfirst($p->card_brand) }} •••• {{ $p->card_last4 }}
                @else —
                @endif
            </td>
            <td>
                <span class="badge {{ $p->status=='success'?'badge-success':($p->status=='refunded'?'badge-info':($p->status=='partial_refund'?'badge-warning':'badge-danger')) }}">
                    {{ ucfirst(str_replace('_',' ',$p->status)) }}
                </span>
            </td>
            <td>${{ number_format($p->refunded_amount,2) }}</td>
            <!-- <td>
                @if($p->status !== 'refunded' && $p->payment_intent_id)
                <form method="POST" action="{{ route('admin.payments.refund', $p->id) }}"
                      onsubmit="return confirm('Issue full refund for {{ $p->invoice_no }}?')">
                    @csrf
                    <button type="submit" class="refund-btn">↩ Refund</button>
                </form>
                @else
                <span style="color:#aaa;font-size:12px">—</span>
                @endif
            </td> -->


            <td>
                     @php
                        $refundable     = (float) $p->amount - (float) $p->refunded_amount;
                        $userStatus     = $p->user?->status;
                        $userExists     = $p->user !== null;
                        $balanceDonated   = (bool) ($p->balance_donated ?? false);
                        $balanceWithdrawn = (bool) ($p->balance_withdrawn ?? false);

                        $canRefund = $p->status !== 'refunded'
                                  && $p->payment_intent_id
                                  && $refundable > 0
                                  && $userExists
                                  && $userStatus === 'active'
                                  && ! $balanceDonated
                                  && ! $balanceWithdrawn;
                    @endphp

                @if($canRefund)
                    <form method="POST" action="{{ route('admin.payments.refund', $p->id) }}"
                          onsubmit="return confirm('Issue refund of ${{ number_format($refundable, 2) }} for {{ $p->invoice_no }}?')">
                        @csrf
                        <button type="submit" class="refund-btn">↩ Refund</button>
                    </form>
                @else
                       @if($balanceDonated)
                            <span style="color:#c2185b;font-size:11px;font-weight:600">Donated</span>
                        @elseif($balanceWithdrawn)
                            <span style="color:#0ea5e9;font-size:11px;font-weight:600">Withdrawn</span>
                        @elseif(!$userExists)
                            <span style="color:#dc2626;font-size:11px;font-weight:600">Account Deleted</span>
                        @elseif($userStatus === 'suspended')
                            <span style="color:#f59e0b;font-size:11px;font-weight:600">Account Suspended</span>
                        @elseif($p->status === 'refunded')
                            <span style="color:#888;font-size:11px">Fully Refunded</span>
                        @else
                            <span style="color:#aaa;font-size:12px">—</span>
                        @endif
                @endif
            </td>


        </tr>
        @empty
        <tr><td colspan="10" style="text-align:center;padding:40px;color:#aaa">No prepayments found</td></tr>
        @endforelse
        </tbody>
    </table>
    </div>
  <div class="payment-pagination">{{ $prepayments->appends(request()->except('don_page'))->links() }}</div>
</div>

</div>
</div>
@endsection

@section('scripts')
<script>
/* ---- Tab switching ---- */
function switchTab(name, btn) {
    document.querySelectorAll('.tab-btn').forEach(b => b.classList.remove('active'));
    document.querySelectorAll('.tab-content').forEach(c => c.classList.remove('active'));
    btn.classList.add('active');
    document.getElementById('tab-' + name).classList.add('active');
}
const urlTab = new URLSearchParams(window.location.search).get('tab');
if (urlTab) {
    const btn = document.querySelector(`.tab-btn[onclick*="${urlTab}"]`);
    if (btn) switchTab(urlTab, btn);
}

/* ---- Toggle anonymous ---- */
async function doToggle(wrapper) {
    const url       = wrapper.dataset.url;
    const isAnon    = wrapper.dataset.anon === '1';   // current state
    const name      = wrapper.dataset.name || 'Donor';
    const track     = wrapper.querySelector('.my-toggle-track');
    const textEl    = wrapper.querySelector('.my-toggle-text');
    const subEl     = wrapper.querySelector('.my-toggle-sub');

    // Disable during request
    wrapper.style.pointerEvents = 'none';
    wrapper.style.opacity = '0.5';

    try {
        const res = await fetch(url, {
            method : 'POST',
            headers: {
                'X-CSRF-TOKEN': document.querySelector('meta[name=csrf-token]').content,
                'Accept'      : 'application/json',
                'Content-Type': 'application/json',
            },
        });

        if (!res.ok) throw new Error('Server error ' + res.status);

        const data = await res.json();   // { anonymous: true/false, name: "..." }
        const nowAnon = data.anonymous;

        /* --- Update data attribute for next click --- */
        wrapper.dataset.anon = nowAnon ? '1' : '0';

        /* --- Update track color + thumb position (pure class toggle) --- */
        if (nowAnon) {
            track.classList.remove('on');
        } else {
            track.classList.add('on');
        }

        /* --- Update text --- */
        textEl.textContent = nowAnon ? 'Hidden' : 'Shown';
        textEl.className   = 'my-toggle-text ' + (nowAnon ? 'hidden-t' : 'shown');

        subEl.innerHTML = nowAnon
            ? 'Shows as <em>Anonymous</em> on Wall of Fame'
            : `Shows as <em>${data.name || name}</em> on Wall of Fame`;

            // row cells
const row = wrapper.closest('tr');
const customerCell = row.children[2];
const emailCell = row.children[4];

// update instantly
// if (nowAnon) {

//     customerCell.innerHTML =
//         '<span style="color:#aaa;font-style:italic">Anonymous</span>';

//     emailCell.innerHTML = '—';

// } else {

//     customerCell.innerHTML = data.name || name;
//     emailCell.innerHTML = data.email || '—';
// }




// if (nowAnon) {
//     const nameSpan = customerCell.querySelector('span[id^="donor-name-"]');
//     if (nameSpan) nameSpan.innerHTML = '<span style="color:#aaa;font-style:italic">Anonymous</span>';
//     emailCell.innerHTML = '—';
// } else {
//     const nameSpan = customerCell.querySelector('span[id^="donor-name-"]');
//     if (nameSpan) nameSpan.textContent = data.name || name;
//     emailCell.innerHTML = data.email || data.contact || '—';
// }


if (nowAnon) {
    const nameSpan = customerCell.querySelector('span[id^="donor-name-"]');
    if (nameSpan) nameSpan.innerHTML = '<span style="color:#aaa;font-style:italic">Anonymous</span>';
    emailCell.innerHTML = '—';

    // Hide Edit button
    const editBtn = customerCell.querySelector('button');
    if (editBtn) editBtn.style.display = 'none';

    // Hide extra info (Contact line)
    const extraInfo = customerCell.querySelector('.extra-info');
    if (extraInfo) extraInfo.style.display = 'none';

} else {
    // Reload page to restore all fields properly
    window.location.reload();
    return;
}


    } catch (e) {
        console.error('Toggle failed:', e);
        alert('Error: ' + e.message);
    }

    /* Re-enable */
    wrapper.style.pointerEvents = '';
    wrapper.style.opacity = '';
}








/* ---- Edit Donor Name ---- */
let currentEditId = null;

function openEditName(id, currentName, type) {
    currentEditId = id;
    const val = (currentName === 'Donor' || currentName === '') ? '' : currentName;
    document.getElementById('editNameInput').value = val;
    document.getElementById('editNameErr').style.display = 'none';
    // document.getElementById('editNameForm').action = '/admin/donations/' + id + '/update-name';
    document.getElementById('editNameForm').action = '{{ url("admin/donations") }}/' + id + '/update-name';
    document.getElementById('editNameModal').style.display = 'flex';
}

document.getElementById('editNameForm').addEventListener('submit', async function(e) {
    e.preventDefault();
    const name = document.getElementById('editNameInput').value.trim();
    if (!name) {
        document.getElementById('editNameErr').style.display = 'block';
        return;
    }

    document.getElementById('editNameSaveBtn').textContent = 'Saving…';
    document.getElementById('editNameSaveBtn').disabled = true;

    try {
        const formData = new FormData(this);
        const res = await fetch(this.action, {
            method: 'POST',
            headers: { 'X-CSRF-TOKEN': document.querySelector('meta[name=csrf-token]').content },
            body: formData,
        });

        // if (res.ok) {
        //     // Update name in table instantly
        //     const nameCell = document.getElementById('donor-name-' + currentEditId);
        //     if (nameCell) nameCell.innerHTML = name;

        //     document.getElementById('editNameModal').style.display = 'none';
        // }

        if (res.ok) {
            document.getElementById('editNameModal').style.display = 'none';
            window.location.reload();
         } else {
            alert('Failed to update name. Please try again.');
        }
    } catch(err) {
        alert('Error: ' + err.message);
    }

    document.getElementById('editNameSaveBtn').textContent = 'Save Name';
    document.getElementById('editNameSaveBtn').disabled = false;
});
</script>


{{-- EDIT DONOR NAME MODAL --}}
<div id="editNameModal"
     style="display:none;position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:1000;align-items:center;justify-content:center"
     onclick="if(event.target===this){this.style.display='none'}">
<div style="background:#fff;border-radius:16px;padding:28px;max-width:420px;width:90%;box-shadow:0 20px 50px rgba(0,0,0,.2)">
    <h3 style="font-size:18px;font-weight:700;color:#1e3c72;margin-bottom:8px">✏️ Edit Donor Name</h3>
    <p style="font-size:13px;color:#888;margin-bottom:16px">Update the donor name shown on Wall of Fame. This will also set the donation as non-anonymous.</p>
    <form id="editNameForm" method="POST">
        @csrf
      
        <div style="margin-bottom:14px">
            <label style="display:block;font-size:13px;font-weight:600;color:#555;margin-bottom:6px">Donor Name</label>
            <input type="text" id="editNameInput" name="donor_name"
                style="width:100%;padding:11px 13px;border:2px solid #e0e0e0;border-radius:9px;font-size:14px;outline:none;box-sizing:border-box"
                onfocus="this.style.borderColor='#667eea'"
                onblur="this.style.borderColor='#e0e0e0'"
                placeholder="Enter donor name">
            <div id="editNameErr" style="display:none;color:#e24b4a;font-size:12px;margin-top:5px">Please enter a name.</div>
        </div>
        <div style="display:flex;gap:10px">
            <button type="button"
                onclick="document.getElementById('editNameModal').style.display='none'"
                style="flex:1;padding:11px;background:#f0f0f0;color:#555;border:none;border-radius:9px;cursor:pointer;font-weight:600;font-size:14px">
                Cancel
            </button>
            <button type="submit" id="editNameSaveBtn"
                style="flex:1;padding:11px;background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;border:none;border-radius:9px;cursor:pointer;font-weight:700;font-size:14px">
                Save Name
            </button>
        </div>
    </form>
</div>
</div>
@endsection