@extends('layouts.app')

@section('content')

@php
    $role1 = Auth::user()->role;
    $role  = $role1['role_name'];

    $counts = [
        'all'        => $agentproof->count(),
        'processing' => $agentproof->where('status','processing')->count(),
        'pending'    => $agentproof->where('status','pending')->count(),
        'approved'   => $agentproof->where('status','approved')->count(),
        'rejected'   => $agentproof->where('status','rejected')->count(),
    ];
@endphp

{{-- ── SUCCESS TOAST (generic) ── --}}
@if(session('success'))
<div id="successToast" class="status-toast toast-generic">
    <span class="toast-icon">✅</span>
    <div>
        <div class="toast-title">Success</div>
        <div class="toast-msg">{{ session('success') }}</div>
    </div>
    <button onclick="this.parentElement.remove()" class="toast-close">✕</button>
</div>
@endif

@if(session('status_approved'))
<div id="approvedToast" class="status-toast toast-approved">
    <span class="toast-icon">🎉</span>
    <div>
        <div class="toast-title">Proof Approved!</div>
        <div class="toast-msg">{{ session('status_approved') }}'s payment proof has been approved.</div>
    </div>
    <button onclick="this.parentElement.remove()" class="toast-close">✕</button>
</div>
@endif

@if(session('status_rejected'))
<div id="rejectedToast" class="status-toast toast-rejected">
    <span class="toast-icon">❌</span>
    <div>
        <div class="toast-title">Proof Rejected</div>
        <div class="toast-msg">{{ session('status_rejected') }}'s payment proof has been rejected.</div>
    </div>
    <button onclick="this.parentElement.remove()" class="toast-close">✕</button>
</div>
@endif

@if(session('status_pending'))
<div id="pendingToast" class="status-toast toast-pending">
    <span class="toast-icon">⏳</span>
    <div>
        <div class="toast-title">Marked as Pending</div>
        <div class="toast-msg">{{ session('status_pending') }}'s proof is set to pending.</div>
    </div>
    <button onclick="this.parentElement.remove()" class="toast-close">✕</button>
</div>
@endif

@if(session('status_processing'))
<div id="processingToast" class="status-toast toast-processing">
    <span class="toast-icon">🔄</span>
    <div>
        <div class="toast-title">Marked as Processing</div>
        <div class="toast-msg">{{ session('status_processing') }}'s proof is under processing.</div>
    </div>
    <button onclick="this.parentElement.remove()" class="toast-close">✕</button>
</div>
@endif

@if(session('error'))
<div id="errorToast" class="status-toast toast-rejected">
    <span class="toast-icon">⚠️</span>
    <div>
        <div class="toast-title">Error</div>
        <div class="toast-msg">{{ session('error') }}</div>
    </div>
    <button onclick="this.parentElement.remove()" class="toast-close">✕</button>
</div>
@endif


<div class="card border-0 shadow-sm">

    {{-- ── CARD HEADER ── --}}
    <div class="card-header d-flex justify-content-between align-items-center py-4 flex-wrap gap-3">
        <h3 class="mb-0">
            <i class="fa fa-file-invoice-dollar me-2 text-primary"></i> Agent Payment Proofs
        </h3>

        <div class="d-flex align-items-center gap-3 flex-wrap">
            <div class="d-flex gap-2 flex-wrap">
                <button class="filter-btn active" data-filter="all" onclick="filterTable('all', this)">
                    All <span class="filter-count" id="count_all">0</span>
                </button>
                <button class="filter-btn processing" data-filter="processing" onclick="filterTable('processing', this)">
                    🔄 Processing <span class="filter-count" id="count_processing">0</span>
                </button>
                <button class="filter-btn pending" data-filter="pending" onclick="filterTable('pending', this)">
                    ⏳ Pending <span class="filter-count" id="count_pending">0</span>
                </button>
                <button class="filter-btn approved" data-filter="approved" onclick="filterTable('approved', this)">
                    ✅ Approved <span class="filter-count" id="count_approved">0</span>
                </button>
                <button class="filter-btn rejected" data-filter="rejected" onclick="filterTable('rejected', this)">
                    ❌ Rejected <span class="filter-count" id="count_rejected">0</span>
                </button>
                <button class="filter-btn adv-filter-btn"
                    onclick="document.getElementById('advFilterModal').style.display='flex'"
                    title="Advanced Filter">
                    <i class="fa fa-sliders me-1"></i> Filter
                </button>
            </div>
            <div class="d-flex align-items-center gap-2">
                <span class="badge text-white bg-primary fs-6 px-3 py-2" id="totalBadge">
                    {{ $agentproof->count() }} Total
                </span>
                <a href="{{ route('agentproof_form.show') }}" class="btn btn-primary btn-sm px-4 rounded-pill">
                    <i class="fa fa-plus me-1"></i> Add Proof
                </a>
            </div>
        </div>
    </div>

    {{-- ── TABLE ── --}}
    <div class="card-body p-0">
        <table class="table table-hover align-middle mb-0">
            <thead style="background:#f8f9fc;">
                <tr>
                    <th class="px-4 py-3" style="width:60px;">S.No</th>
                    <th class="py-3">Agent</th>
                    <th class="py-3">Payment Info</th>
                    <th class="py-3">Amount</th>
                    <th class="py-3 text-center">Status</th>
                    <th class="py-3 text-center" style="width:120px;">Actions</th>
                </tr>
            </thead>
            <tbody id="apTableBody">
                @forelse($agentproof as $key => $val)
                <tr class="proof-row"
                    data-status="{{ $val->status }}"
                    data-name="{{ strtolower($val->full_name) }}"
                    data-method="{{ strtolower($val->payment_method ?? '') }}"
                    data-index="{{ $key }}">

                    <td class="px-4 text-muted row-sno">{{ $key + 1 }}</td>

                    {{-- Agent --}}
                    <td>
                        <div class="fw-bold">{{ $val->full_name }}</div>
                        @if($val->company_name)
                            <div class="small text-muted mt-1">
                                <i class="fa fa-building me-1"></i>{{ $val->company_name }}
                            </div>
                        @endif
                        <div class="small text-muted">
                            <i class="fa fa-envelope me-1"></i>{{ $val->email }}
                        </div>
                    </td>

                    {{-- Payment Info --}}
                    <td>
                        <div class="fw-semibold text-capitalize">{{ $val->payment_method ?? '—' }}</div>
                        @if($val->payment_method === 'upi' && $val->upi_id)
                            <div class="small text-muted"><i class="fa fa-at me-1"></i>{{ $val->upi_id }}</div>
                        @elseif($val->payment_method === 'bank' && $val->bank_account_number)
                            <div class="small text-muted"><i class="fa fa-university me-1"></i>{{ $val->bank_account_number }}</div>
                        @endif
                        @if($val->transaction_id)
                            <div class="small text-muted"><i class="fa fa-hashtag me-1"></i>{{ $val->transaction_id }}</div>
                        @endif
                    </td>

                    {{-- Amount --}}
                    <td>
                        <span class="fw-bold text-dark">
                            {{ $val->paid_amt ? '₹ ' . number_format($val->paid_amt, 2) : '—' }}
                        </span>
                    </td>

                    {{-- Status --}}
                    <td class="text-center">
                        @if($val->status === 'processing')
                            <span class="status-pill processing-pill">🔄 Processing</span>
                        @elseif($val->status === 'pending')
                            <span class="status-pill pending-pill">⏳ Pending</span>
                        @elseif($val->status === 'approved')
                            <span class="status-pill approved-pill">✅ Approved</span>
                        @elseif($val->status === 'rejected')
                            <span class="status-pill rejected-pill">❌ Rejected</span>
                        @else
                            <span class="status-pill default-pill">{{ ucfirst($val->status) }}</span>
                        @endif
                    </td>

                    {{-- Actions --}}
                    <td class="text-center">
                        <div class="d-flex gap-2 justify-content-center">
                            <button class="action-btn action-btn--view" title="View Details"
                                onclick="openViewModal({{ $val->id }})">
                                <i class="fa fa-eye"></i>
                            </button>
                            <button class="action-btn action-btn--edit" title="Change Status"
                                onclick="openEditModal({{ $val->id }}, '{{ $val->status }}', '{{ addslashes($val->full_name) }}')">
                                <i class="fa fa-pen"></i>
                            </button>
                        </div>
                    </td>
                </tr>
                @empty
                <tr id="emptyRow">
                    <td colspan="6" class="text-center text-muted py-5">
                        <i class="fa fa-inbox fa-2x mb-2 d-block"></i>
                        No payment proofs found.
                    </td>
                </tr>
                @endforelse
            </tbody>
        </table>

        <div id="noFilterResults" class="text-center py-5 d-none">
            <i class="fa fa-filter fa-2x text-muted mb-2 d-block"></i>
            <p class="text-muted">No records found for this filter.</p>
        </div>
    </div>

</div>


{{-- ── VIEW DETAILS MODALS ── --}}
@foreach($agentproof as $val)
<div class="modal fade" id="viewModal{{ $val->id }}" tabindex="-1">
    <div class="modal-dialog modal-lg modal-dialog-centered">
        <div class="modal-content border-0 shadow-lg" style="border-radius:16px; overflow:hidden;">

            <div class="modal-header border-0 text-white py-4 px-4"
                 style="background: linear-gradient(135deg, #1565C0, #1976D2);">
                <div>
                    <h5 class="modal-title fw-bold mb-1">
                        <i class="fa fa-file-invoice-dollar me-2"></i> Payment Proof Details
                    </h5>
                    <div class="small opacity-75">
                        {{ $val->full_name }}{{ $val->company_name ? ' — ' . $val->company_name : '' }}
                    </div>
                </div>
                <div class="ms-auto d-flex align-items-center gap-3">
                    @if($val->status === 'approved')
                        <span class="badge px-3 py-2" style="background:rgba(255,255,255,0.25);">✅ Approved</span>
                    @elseif($val->status === 'rejected')
                        <span class="badge px-3 py-2" style="background:rgba(255,255,255,0.25);">❌ Rejected</span>
                    @elseif($val->status === 'processing')
                        <span class="badge px-3 py-2" style="background:rgba(255,255,255,0.25);">🔄 Processing</span>
                    @else
                        <span class="badge px-3 py-2" style="background:rgba(255,255,255,0.25);">⏳ Pending</span>
                    @endif
                    <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
                </div>
            </div>

            <div class="modal-body p-4">

                {{-- AGENT INFO --}}
                <div class="row g-3 mb-4">
                    <div class="col-12"><div class="detail-section-label">👤 Agent Information</div></div>
                    <div class="col-md-3">
                        <div class="detail-card">
                            <div class="detail-icon">🙍</div>
                            <div class="detail-label">Full Name</div>
                            <div class="detail-value" style="font-size:13px;">{{ $val->full_name }}</div>
                        </div>
                    </div>
                    <div class="col-md-3">
                        <div class="detail-card">
                            <div class="detail-icon">🏢</div>
                            <div class="detail-label">Company</div>
                            <div class="detail-value" style="font-size:13px;">{{ $val->company_name ?? '—' }}</div>
                        </div>
                    </div>
                    <div class="col-md-3">
                        <div class="detail-card">
                            <div class="detail-icon">✉️</div>
                            <div class="detail-label">Email</div>
                            <div class="detail-value" style="font-size:11px; word-break:break-all;">{{ $val->email ?? '—' }}</div>
                        </div>
                    </div>
                    <div class="col-md-3">
                        <div class="detail-card">
                            <div class="detail-icon">📞</div>
                            <div class="detail-label">Mobile</div>
                            <div class="detail-value" style="font-size:13px;">{{ $val->mobile_number ?? '—' }}</div>
                        </div>
                    </div>
                </div>

                {{-- PAYMENT DETAILS --}}
                <div class="row g-3 mb-4">
                    <div class="col-12"><div class="detail-section-label">💳 Payment Details</div></div>
                    <div class="col-md-3">
                        <div class="detail-card">
                            <div class="detail-icon">💰</div>
                            <div class="detail-label">Amount Paid</div>
                            <div class="detail-value" style="color:#1a6e2e;">
                                {{ $val->paid_amt ? '₹ ' . number_format($val->paid_amt, 2) : '—' }}
                            </div>
                        </div>
                    </div>
                    <div class="col-md-3">
                        <div class="detail-card">
                            <div class="detail-icon">🏦</div>
                            <div class="detail-label">Method</div>
                            <div class="detail-value" style="font-size:13px; text-transform:capitalize;">
                                {{ $val->payment_method ?? '—' }}
                            </div>
                        </div>
                    </div>
                    @if($val->payment_method === 'upi')
                    <div class="col-md-3">
                        <div class="detail-card">
                            <div class="detail-icon">📲</div>
                            <div class="detail-label">UPI ID</div>
                            <div class="detail-value" style="font-size:11px; word-break:break-all;">{{ $val->upi_id ?? '—' }}</div>
                        </div>
                    </div>
                    @elseif($val->payment_method === 'bank')
                    <div class="col-md-3">
                        <div class="detail-card">
                            <div class="detail-icon">🏛️</div>
                            <div class="detail-label">Account No.</div>
                            <div class="detail-value" style="font-size:12px;">{{ $val->bank_account_number ?? '—' }}</div>
                        </div>
                    </div>
                    @else
                    <div class="col-md-3">
                        <div class="detail-card">
                            <div class="detail-icon">🔖</div>
                            <div class="detail-label">Ref / ID</div>
                            <div class="detail-value" style="font-size:12px;">—</div>
                        </div>
                    </div>
                    @endif
                    <div class="col-md-3">
                        <div class="detail-card">
                            <div class="detail-icon">🔖</div>
                            <div class="detail-label">Transaction ID</div>
                            <div class="detail-value" style="font-size:11px; word-break:break-all;">
                                {{ $val->transaction_id ?? '—' }}
                            </div>
                        </div>
                    </div>
                </div>

                {{-- PROOF FILE --}}
                @if($val->payment_proof)
                <div class="mb-4">
                    <div class="detail-section-label">🖼️ Payment Proof Document</div>
                    <div class="mt-2 p-3 rounded-3 text-center"
                         style="background:#f8f9fc; border: 1.5px dashed #dee2e6;">
                        @php $ext = strtolower(pathinfo($val->payment_proof, PATHINFO_EXTENSION)); @endphp
                        @if(in_array($ext, ['jpg','jpeg','png','gif','webp']))
                            <img src="{{ asset('uploads/' . $val->payment_proof) }}"
                                 alt="Payment Proof"
                                 style="max-width:100%; max-height:320px; border-radius:8px; object-fit:contain; cursor:pointer;"
                                 onclick="window.open(this.src,'_blank')">
                            <div class="mt-2">
                                <a href="{{ asset('uploads/' . $val->payment_proof) }}"
                                   target="_blank"
                                   class="btn btn-sm btn-outline-primary rounded-pill px-3">
                                    <i class="fa fa-arrow-up-right-from-square me-1"></i> Open Full Size
                                </a>
                            </div>
                        @else
                            <i class="fa fa-file-pdf fa-3x text-danger mb-3 d-block"></i>
                            <a href="{{ asset('uploads/' . $val->payment_proof) }}"
                               target="_blank"
                               class="btn btn-outline-primary rounded-pill px-4">
                                <i class="fa fa-file-arrow-down me-2"></i> View / Download Proof
                            </a>
                        @endif
                    </div>
                </div>
                @endif

                {{-- SUBMITTED ON --}}
                <div class="row g-3 mt-1">
                    <div class="col-12"><div class="detail-section-label">🕐 Submission Info</div></div>
                    <div class="col-md-4">
                        <div class="detail-card">
                            <div class="detail-icon">🗓️</div>
                            <div class="detail-label">Submitted On</div>
                            <div class="detail-value" style="font-size:13px;">
                                {{ $val->created_at->format('d M Y, h:i A') }}
                            </div>
                        </div>
                    </div>
                </div>

            </div>

            <div class="modal-footer border-0 px-4 pb-4 pt-0">
                <button type="button" class="btn btn-outline-secondary rounded-pill px-4"
                    data-bs-dismiss="modal">Close</button>
                <a href="{{ route('agentproof_form.show', ['id' => $val->id]) }}"
                   class="btn btn-outline-primary rounded-pill px-4">
                    <i class="fa fa-pen-to-square me-2"></i> Edit Record
                </a>
                <button type="button" class="btn btn-primary rounded-pill px-4"
                    onclick="bootstrap.Modal.getInstance(document.getElementById('viewModal{{ $val->id }}')).hide();
                             openEditModal({{ $val->id }}, '{{ $val->status }}', '{{ addslashes($val->full_name) }}')">
                    <i class="fa fa-pen me-2"></i> Change Status
                </button>
            </div>

        </div>
    </div>
</div>
@endforeach


{{-- ── EDIT STATUS MODAL ── --}}
<div class="modal fade" id="editStatusModal" tabindex="-1">
    <div class="modal-dialog modal-dialog-centered" style="max-width:420px;">
        <div class="modal-content border-0 shadow-lg" style="border-radius:16px; overflow:hidden;">

            <div class="modal-header border-0 py-4 px-4"
                 style="background: linear-gradient(135deg, #1a1a2e, #16213e);">
                <div>
                    <h5 class="modal-title text-white fw-bold mb-1">
                        <i class="fa fa-pen me-2"></i> Update Proof Status
                    </h5>
                    <div class="small text-white opacity-50" id="editModalSubtitle"></div>
                </div>
                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
            </div>

            <div class="modal-body p-4">
                <p class="text-muted small mb-4">Select a new status for this payment proof.</p>

                <form id="editStatusForm" method="POST">
                    @csrf

                    <label class="status-option-card mb-3" id="card_processing">
                        <input type="radio" name="status" value="processing" class="status-radio" id="status_processing">
                        <div class="d-flex align-items-center gap-3">
                            <div class="status-icon" style="background:#e3f2fd; color:#1565c0;">🔄</div>
                            <div>
                                <div class="fw-bold" style="color:#1565c0;">Processing</div>
                                <div class="small text-muted">Proof is being reviewed</div>
                            </div>
                        </div>
                    </label>

                    <label class="status-option-card mb-3" id="card_pending">
                        <input type="radio" name="status" value="pending" class="status-radio" id="status_pending">
                        <div class="d-flex align-items-center gap-3">
                            <div class="status-icon" style="background:#fff8e1; color:#f57f17;">⏳</div>
                            <div>
                                <div class="fw-bold" style="color:#f57f17;">Pending</div>
                                <div class="small text-muted">Awaiting further action</div>
                            </div>
                        </div>
                    </label>

                    <label class="status-option-card mb-3" id="card_approved">
                        <input type="radio" name="status" value="approved" class="status-radio" id="status_approved">
                        <div class="d-flex align-items-center gap-3">
                            <div class="status-icon" style="background:#e8f5e9; color:#2e7d32;">✅</div>
                            <div>
                                <div class="fw-bold" style="color:#2e7d32;">Approve Proof</div>
                                <div class="small text-muted">Mark this payment proof as approved</div>
                            </div>
                        </div>
                    </label>

                    <label class="status-option-card mb-3" id="card_rejected">
                        <input type="radio" name="status" value="rejected" class="status-radio" id="status_rejected">
                        <div class="d-flex align-items-center gap-3">
                            <div class="status-icon" style="background:#ffebee; color:#c62828;">❌</div>
                            <div>
                                <div class="fw-bold" style="color:#c62828;">Reject Proof</div>
                                <div class="small text-muted">Decline and reject this proof</div>
                            </div>
                        </div>
                    </label>

                    <button type="submit" class="btn btn-primary w-100 py-3 rounded-pill fw-bold mt-2">
                        <i class="fa fa-save me-2"></i> Save Status
                    </button>
                </form>
            </div>

        </div>
    </div>
</div>


{{-- ── ADVANCED FILTER MODAL ── --}}
<div id="advFilterModal" onclick="if(event.target===this) closeAdvFilter()">
    <div id="advFilterBox">

        <div class="adv-filter-header">
            <h6><i class="fa fa-sliders me-2"></i> Advanced Filter</h6>
            <button class="adv-filter-close" onclick="closeAdvFilter()">✕</button>
        </div>

        <div class="adv-filter-body">
            <div class="mb-3">
                <label class="adv-filter-label">👤 Agent Name</label>
                <input type="text" id="flt_name" class="adv-filter-input" placeholder="Search by name...">
            </div>
            <div class="mb-3">
                <label class="adv-filter-label">📊 Status</label>
                <select id="flt_status" class="adv-filter-input">
                    <option value="">All Statuses</option>
                    <option value="processing">Processing</option>
                    <option value="pending">Pending</option>
                    <option value="approved">Approved</option>
                    <option value="rejected">Rejected</option>
                </select>
            </div>
            <div class="mb-3">
                <label class="adv-filter-label">💳 Payment Method</label>
                <select id="flt_method" class="adv-filter-input">
                    <option value="">All Methods</option>
                    <option value="upi">UPI</option>
                    <option value="bank">Bank Transfer</option>
                    <option value="cash">Cash</option>
                </select>
            </div>
        </div>

        <div class="adv-filter-footer">
            <button class="adv-filter-reset" onclick="resetAdvFilter()">
                <i class="fa fa-rotate-left me-1"></i> Reset
            </button>
            <button class="adv-filter-apply" onclick="applyAdvFilter()">
                <i class="fa fa-check me-1"></i> Apply Filter
            </button>
        </div>

    </div>
</div>


<style>
/* ── Toasts ── */
.status-toast {
    position: fixed; bottom: 30px; right: 30px;
    padding: 14px 18px; border-radius: 12px;
    font-size: 14px; font-weight: 500;
    box-shadow: 0 8px 30px rgba(0,0,0,0.18);
    z-index: 9999; display: flex; align-items: flex-start; gap: 12px;
    max-width: 340px; animation: slideInRight 0.4s ease; color: #fff;
}
.toast-approved   { background: linear-gradient(135deg, #1b5e20, #2e7d32); }
.toast-rejected   { background: linear-gradient(135deg, #b71c1c, #c62828); }
.toast-pending    { background: linear-gradient(135deg, #e65100, #f57f17); }
.toast-processing { background: linear-gradient(135deg, #0d47a1, #1565C0); }
.toast-generic    { background: linear-gradient(135deg, #1a237e, #1565C0); }
.toast-icon  { font-size: 1.5rem; line-height:1; flex-shrink:0; margin-top:2px; }
.toast-title { font-weight: 700; font-size: 14px; margin-bottom: 2px; }
.toast-msg   { font-size: 12px; opacity: 0.9; line-height: 1.4; }
.toast-close { background:none; border:none; color:#fff; cursor:pointer; opacity:0.7; font-size:14px; margin-left:8px; padding:0; align-self:flex-start; margin-top:2px; }
.toast-close:hover { opacity:1; }
@keyframes slideInRight {
    from { opacity:0; transform:translateX(60px); }
    to   { opacity:1; transform:translateX(0); }
}

/* ── Filter buttons — identical to enquiries ── */
.filter-btn {
    border: 2px solid #dee2e6; background: #fff; border-radius: 20px;
    padding: 5px 14px; font-size: 12px; font-weight: 600; cursor: pointer;
    transition: all 0.2s; color: #555;
}
.filter-btn:hover { border-color: #1976D2; color: #1976D2; }
.filter-btn.active              { background: #1976D2; border-color: #1976D2; color: #fff; }
.filter-btn.processing.active   { background: #1565C0; border-color: #1565C0; color: #fff; }
.filter-btn.pending.active      { background: #f57f17; border-color: #f57f17; color: #fff; }
.filter-btn.approved.active     { background: #2e7d32; border-color: #2e7d32; color: #fff; }
.filter-btn.rejected.active     { background: #c62828; border-color: #c62828; color: #fff; }
.filter-count { display: inline-block; background: rgba(255,255,255,0.3); border-radius: 10px; padding: 0 6px; font-size: 11px; margin-left: 2px; }
.filter-btn:not(.active) .filter-count { background: #eee; color: #555; }

/* ── Status Pills — identical to enquiries ── */
.status-pill { display: inline-block; padding: 4px 12px; border-radius: 20px; font-size: 12px; font-weight: 600; }
.processing-pill { background: #e3f2fd; color: #1565c0; }
.pending-pill    { background: #fff8e1; color: #f57f17; }
.approved-pill   { background: #e8f5e9; color: #2e7d32; }
.rejected-pill   { background: #ffebee; color: #c62828; }
.default-pill    { background: #f5f5f5; color: #555; }

/* ── Action buttons — identical to enquiries ── */
.action-btn {
    display: inline-flex; align-items: center; justify-content: center;
    width: 34px; height: 34px; border-radius: 8px; border: none;
    cursor: pointer; font-size: 14px;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.action-btn:hover { transform: translateY(-2px); box-shadow: 0 4px 10px rgba(0,0,0,0.15); }
.action-btn--view       { background:#e8f5e9; color:#2e7d32; }
.action-btn--view:hover { background:#2e7d32; color:#fff; }
.action-btn--edit       { background:#e3f2fd; color:#1565c0; }
.action-btn--edit:hover { background:#1565c0; color:#fff; }

/* ── Detail modal — identical to enquiries ── */
.detail-section-label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 1.5px; color: #888; margin-bottom: 4px; }
.detail-card { background: #f8f9fc; border: 1px solid #eef0f8; border-radius: 12px; padding: 16px; text-align: center; height: 100%; }
.detail-icon  { font-size: 1.4rem; margin-bottom: 6px; }
.detail-label { font-size: 11px; color: #999; text-transform: uppercase; letter-spacing: 1px; margin-bottom: 4px; }
.detail-value { font-size: 15px; font-weight: 700; color: #1a1a2e; }

/* ── Edit status option cards — identical to enquiries ── */
.status-option-card { display: block; border: 2px solid #eee; border-radius: 12px; padding: 14px 16px; cursor: pointer; transition: all 0.2s; }
.status-option-card:hover { border-color: #1976D2; background: #f0f7ff; }
.status-option-card.selected-processing { border-color: #1565c0 !important; background: #e3f2fd !important; }
.status-option-card.selected-pending    { border-color: #f57f17 !important; background: #fffde7 !important; }
.status-option-card.selected-approved   { border-color: #2e7d32 !important; background: #f1f8f1 !important; }
.status-option-card.selected-rejected   { border-color: #c62828 !important; background: #fff5f5 !important; }
.status-radio { display: none; }
.status-icon { width: 42px; height: 42px; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 1.2rem; flex-shrink: 0; }

/* ── Advanced filter — identical to enquiries ── */
.adv-filter-btn { border-color: #6c757d !important; color: #6c757d !important; }
.adv-filter-btn:hover { border-color: #343a40 !important; color: #343a40 !important; background: #f8f9fa !important; }
.adv-filter-btn.filter-active { border-color: #6f42c1 !important; background: #6f42c1 !important; color: #fff !important; }
#advFilterModal { display: none; position: fixed; inset: 0; z-index: 9998; background: rgba(0,0,0,0.45); align-items: center; justify-content: center; }
#advFilterBox { background: #fff; border-radius: 16px; width: 100%; max-width: 480px; margin: 16px; box-shadow: 0 20px 60px rgba(0,0,0,0.2); overflow: hidden; animation: slideUp 0.3s ease; }
@keyframes slideUp { from { opacity:0; transform:translateY(30px); } to { opacity:1; transform:translateY(0); } }
.adv-filter-header { background: linear-gradient(135deg, #1a1a2e, #16213e); padding: 18px 22px; display: flex; align-items: center; justify-content: space-between; }
.adv-filter-header h6 { color:#fff; font-weight:700; margin:0; font-size:15px; }
.adv-filter-close { background:none; border:none; color:#fff; opacity:0.7; font-size:18px; cursor:pointer; line-height:1; padding:0; }
.adv-filter-close:hover { opacity:1; }
.adv-filter-body { padding: 22px; }
.adv-filter-label { font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:1.2px; color:#888; margin-bottom:6px; display:block; }
.adv-filter-input { width:100%; padding:9px 14px; border:1.5px solid #dee2e6; border-radius:10px; font-size:13px; outline:none; transition:border-color 0.2s; background:#fff; color:#333; box-sizing:border-box; }
.adv-filter-input:focus { border-color: #1976D2; }
.adv-filter-footer { padding: 0 22px 22px; display:flex; gap:10px; }
.adv-filter-apply { flex:1; padding:10px; background:#1976D2; color:#fff; border:none; border-radius:10px; font-weight:700; font-size:13px; cursor:pointer; }
.adv-filter-apply:hover { background:#1565C0; }
.adv-filter-reset { padding:10px 18px; background:#f8f9fa; color:#555; border:1.5px solid #dee2e6; border-radius:10px; font-weight:600; font-size:13px; cursor:pointer; }
.adv-filter-reset:hover { background:#e9ecef; }
</style>


<script>
let allRows       = Array.from(document.querySelectorAll('.proof-row'));
let filtered      = allRows;
let currentFilter = 'all';

function updateCounts() {
    document.getElementById('count_all').textContent        = allRows.length;
    document.getElementById('count_processing').textContent = allRows.filter(r => r.dataset.status === 'processing').length;
    document.getElementById('count_pending').textContent    = allRows.filter(r => r.dataset.status === 'pending').length;
    document.getElementById('count_approved').textContent   = allRows.filter(r => r.dataset.status === 'approved').length;
    document.getElementById('count_rejected').textContent   = allRows.filter(r => r.dataset.status === 'rejected').length;
}

function filterTable(filter, btn) {
    currentFilter = filter;
    document.querySelectorAll('.filter-btn').forEach(b => b.classList.remove('active'));
    btn.classList.add('active');
    filtered = filter === 'all' ? allRows : allRows.filter(r => r.dataset.status === filter);
    allRows.forEach(r => r.style.display = 'none');
    filtered.forEach((r, i) => {
        r.style.display = '';
        r.querySelector('.row-sno').textContent = i + 1;
    });
    document.getElementById('totalBadge').textContent = filtered.length + ' Total';
    document.getElementById('noFilterResults').classList.toggle('d-none', filtered.length > 0);
}

function openViewModal(id) {
    new bootstrap.Modal(document.getElementById('viewModal' + id)).show();
}

function openEditModal(id, currentStatus, name) {
    document.getElementById('editStatusForm').dataset.id   = id;
    document.getElementById('editStatusForm').dataset.name = name;
    document.getElementById('editModalSubtitle').textContent = 'Updating status for: ' + name;
    ['processing','pending','approved','rejected'].forEach(s => {
        document.getElementById('card_' + s).classList.remove(
            'selected-processing','selected-pending','selected-approved','selected-rejected'
        );
    });
    const radio = document.getElementById('status_' + currentStatus);
    if (radio) {
        radio.checked = true;
        document.getElementById('card_' + currentStatus).classList.add('selected-' + currentStatus);
    }
    new bootstrap.Modal(document.getElementById('editStatusModal')).show();
}

document.querySelectorAll('.status-radio').forEach(function(radio) {
    radio.addEventListener('change', function() {
        ['processing','pending','approved','rejected'].forEach(s => {
            document.getElementById('card_' + s).classList.remove(
                'selected-processing','selected-pending','selected-approved','selected-rejected'
            );
        });
        document.getElementById('card_' + this.value).classList.add('selected-' + this.value);
    });
});

document.getElementById('editStatusForm').addEventListener('submit', function(e) {
    e.preventDefault();
    const id     = this.dataset.id;
    const name   = this.dataset.name;
    const status = this.querySelector('input[name="status"]:checked')?.value;
    const token  = this.querySelector('input[name="_token"]').value;
    if (!status) { alert('Please select a status.'); return; }

    fetch('{{ url("admin/agentproof/status") }}/' + id, {
        method: 'POST',
        headers: { 'Content-Type': 'application/json', 'X-CSRF-TOKEN': token },
        body: JSON.stringify({ status: status }),
    })
    .then(res => res.json())
    .then(data => {
        if (data.success) {
            bootstrap.Modal.getInstance(document.getElementById('editStatusModal')).hide();
            allRows.forEach(row => {
                if (row.innerHTML.includes('openEditModal(' + id + ',')) {
                    row.dataset.status = status;
                    const pill = row.querySelector('.status-pill');
                    if (pill) {
                        pill.className = 'status-pill';
                        const map = {
                            processing: ['processing-pill', '🔄 Processing'],
                            pending:    ['pending-pill',    '⏳ Pending'],
                            approved:   ['approved-pill',   '✅ Approved'],
                            rejected:   ['rejected-pill',   '❌ Rejected'],
                        };
                        const [cls, label] = map[status] || ['default-pill', status];
                        pill.classList.add(cls);
                        pill.textContent = label;
                        row.querySelector('.action-btn--edit').setAttribute('onclick',
                            "openEditModal(" + id + ", '" + status + "', '" + name.replace(/'/g,"\\'") + "')");
                    }
                }
            });
            updateCounts();
            filterTable(currentFilter, document.querySelector('.filter-btn.active'));
            showToast(status, name);
        }
    })
    .catch(() => alert('Something went wrong. Please try again.'));
});

function showToast(status, name) {
    document.querySelectorAll('.status-toast').forEach(t => t.remove());
    const configs = {
        approved:   { cls: 'toast-approved',   icon: '🎉', title: 'Proof Approved!',     msg: name + "'s payment proof has been approved." },
        rejected:   { cls: 'toast-rejected',   icon: '❌', title: 'Proof Rejected',       msg: name + "'s payment proof has been rejected." },
        pending:    { cls: 'toast-pending',    icon: '⏳', title: 'Marked as Pending',    msg: name + "'s proof is set to pending." },
        processing: { cls: 'toast-processing', icon: '🔄', title: 'Marked as Processing', msg: name + "'s proof is under processing." },
    };
    const c = configs[status];
    if (!c) return;
    const toast = document.createElement('div');
    toast.className = 'status-toast ' + c.cls;
    toast.innerHTML = '<span class="toast-icon">' + c.icon + '</span><div><div class="toast-title">' + c.title + '</div><div class="toast-msg">' + c.msg + '</div></div><button onclick="this.parentElement.remove()" class="toast-close">✕</button>';
    document.body.appendChild(toast);
    setTimeout(() => {
        toast.style.transition = 'opacity 0.5s ease, transform 0.5s ease';
        toast.style.opacity    = '0';
        toast.style.transform  = 'translateX(60px)';
        setTimeout(() => toast.remove(), 500);
    }, 5000);
}

['successToast','approvedToast','rejectedToast','pendingToast','processingToast','errorToast'].forEach(function(id) {
    var el = document.getElementById(id);
    if (el) {
        setTimeout(function() {
            el.style.transition = 'opacity 0.5s ease, transform 0.5s ease';
            el.style.opacity    = '0';
            el.style.transform  = 'translateX(60px)';
            setTimeout(() => el.remove(), 500);
        }, 5000);
    }
});

function closeAdvFilter() {
    document.getElementById('advFilterModal').style.display = 'none';
}

function resetAdvFilter() {
    ['flt_name','flt_status','flt_method'].forEach(function(id) {
        document.getElementById(id).value = '';
    });
    document.querySelector('.adv-filter-btn').classList.remove('filter-active');
    filtered = currentFilter === 'all' ? allRows : allRows.filter(r => r.dataset.status === currentFilter);
    allRows.forEach(r => r.style.display = 'none');
    filtered.forEach((r, i) => { r.style.display = ''; r.querySelector('.row-sno').textContent = i + 1; });
    document.getElementById('totalBadge').textContent = filtered.length + ' Total';
    document.getElementById('noFilterResults').classList.toggle('d-none', filtered.length > 0);
    closeAdvFilter();
}

function applyAdvFilter() {
    const name   = document.getElementById('flt_name').value.trim().toLowerCase();
    const status = document.getElementById('flt_status').value;
    const method = document.getElementById('flt_method').value.toLowerCase();

    let base = currentFilter === 'all' ? allRows : allRows.filter(r => r.dataset.status === currentFilter);

    filtered = base.filter(function(row) {
        let pass = true;
        if (name   && !(row.dataset.name   || '').includes(name))   pass = false;
        if (status && row.dataset.status !== status)                 pass = false;
        if (method && !(row.dataset.method || '').includes(method))  pass = false;
        return pass;
    });

    const hasFilter = name || status || method;
    document.querySelector('.adv-filter-btn').classList.toggle('filter-active', !!hasFilter);
    document.getElementById('totalBadge').textContent = filtered.length + ' Total';
    allRows.forEach(r => r.style.display = 'none');
    filtered.forEach((r, i) => { r.style.display = ''; r.querySelector('.row-sno').textContent = i + 1; });
    document.getElementById('noFilterResults').classList.toggle('d-none', filtered.length > 0);
    closeAdvFilter();
}

updateCounts();
</script>

@endsection