@extends('layouts.finance')

@section('title', 'Collectible Detail')
@section('subtitle', 'Receivables and pending collections tracker')

@section('content')
@php
    $displayCurrency = 'PKR';
    $fmt = fn($usd) => $metrics->moneyIn($usd, 'USD', $displayCurrency);

    $statusPills = [
        'open' => 'pill-blue',
        'partial' => 'pill-cyan',
        'overdue' => 'pill-rose',
        'collected' => 'pill-green',
        'written_off' => 'pill-amber',
        'cancelled' => '',
    ];
    $statusText = [
        'open' => 'receivable',
        'partial' => 'partial receivable',
        'overdue' => 'overdue',
        'collected' => 'received',
        'written_off' => 'written off',
        'cancelled' => 'cancelled',
    ];

    $statusLabels = $byStatus->keys()->map(fn ($status) => ucfirst($statusText[$status] ?? str_replace('_', ' ', $status)))->values()->toArray();
    $statusValues = $byStatus->values()->toArray();
    $palette = ['#0ea5e9', '#06b6d4', '#ef4444', '#10b981', '#f59e0b', '#64748b'];

    $typeLabels = $byType->keys()->map(fn ($type) => ucfirst(str_replace('_', ' ', $type)))->values()->toArray();
    $typeValues = $byType->values()->toArray();
    $businessLabels = $byBusiness->keys()->values()->toArray();
    $businessValues = $byBusiness->values()->toArray();
    $personLabels = $byPerson->keys()->values()->toArray();
    $personValues = $byPerson->values()->toArray();
    $dateFilter = $dateFilter ?? ['active' => false, 'from' => null, 'to' => null, 'label' => null];
    $dashboardRouteParams = ($dateFilter['active'] ?? false) ? ['from' => $dateFilter['from'], 'to' => $dateFilter['to']] : [];
@endphp

<div class="mb-4">
    <a href="{{ route('dashboard', $dashboardRouteParams) }}" class="btn btn-ghost" style="font-size:13px">
        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="15 18 9 12 15 6"/></svg>
        Back to Dashboard
    </a>
</div>

@include('dashboard.cards._date-filter', ['dateFilter' => $dateFilter, 'filterRoute' => 'dashboard.cards.collectible'])

<section class="grid kpi-grid gap-3 mb-6">
    <div class="card kpi-card" style="background:var(--cyan-soft);border-color:#a5f3fc">
        <div class="kpi-icon ico-bg-cyan"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M20 7h-9"/><path d="M14 17H5"/><circle cx="17" cy="17" r="3"/><circle cx="7" cy="7" r="3"/></svg></div>
        <div class="kpi-label">Total Collectible</div>
        <div class="kpi-value" style="color:#155e75">{{ $fmt($totalUsd) }}</div>
        <div class="kpi-sub">Open receivables</div>
    </div>
    <div class="card kpi-card">
        <div class="kpi-icon ico-bg-red"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><line x1="12" y1="8" x2="12" y2="12"/><line x1="12" y1="16" x2="12.01" y2="16"/></svg></div>
        <div class="kpi-label">Overdue</div>
        <div class="kpi-value" style="color:#ef4444">{{ $fmt($byStatus['overdue'] ?? 0) }}</div>
        <div class="kpi-sub">Past due date</div>
    </div>
    <div class="card kpi-card">
        <div class="kpi-icon ico-bg-amber"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/></svg></div>
        <div class="kpi-label">Due Soon</div>
        <div class="kpi-value" style="color:#d97706">{{ number_format($dueSoonCount) }}</div>
        <div class="kpi-sub">Next 7 days</div>
    </div>
    <div class="card kpi-card">
        <div class="kpi-icon ico-bg-green"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="20 6 9 17 4 12"/></svg></div>
        <div class="kpi-label">Collected Mo.</div>
        <div class="kpi-value" style="color:#10b981">{{ $fmt($collectedThisMonthUsd) }}</div>
        <div class="kpi-sub">Closed this month</div>
    </div>
</section>

<section class="card p-5 mb-6">
    <div class="flex items-center justify-between gap-3 flex-wrap">
        <div>
            <h3 class="font-semibold">Collectible Records</h3>
            <p class="text-xs" style="color:var(--muted);margin:3px 0 0">Add manual receivables when they are not created from a transaction.</p>
        </div>
        <button class="btn btn-primary" type="button" id="toggleCollectibleForm">
            <span id="toggleCollectibleFormLabel">Add Collectible</span>
        </button>
    </div>

</section>

<div id="collectibleFormModal" class="collectible-modal-overlay" @if(! $errors->any()) hidden @endif role="dialog" aria-modal="true" aria-labelledby="collectibleFormTitle">
    <div class="collectible-modal">
        <div class="collectible-modal-header">
            <div>
                <h3 class="font-semibold" id="collectibleFormTitle">Add Collectible</h3>
                <p class="text-xs" style="color:var(--muted);margin:3px 0 0">Enter the receivable details.</p>
            </div>
            <button class="btn" type="button" id="closeCollectibleForm" aria-label="Close collectible form" style="padding:4px 10px;font-size:18px">&times;</button>
        </div>
        <form method="POST" action="{{ route('dashboard.cards.collectible.entries.store') }}">
            @csrf
            <div class="collectible-modal-body">
                <div class="collectible-entry-form">
                    <div>
                        <label class="label">Type</label>
                        <select class="field" name="source" id="collectibleTypeSelect" required>
                            <option value="personal" @selected(old('source', 'personal') === 'personal')>Personal</option>
                            <option value="business" @selected(old('source') === 'business')>Business</option>
                        </select>
                    </div>
                    <div>
                        <label class="label">Name</label>
                        <input class="field" name="party_name" value="{{ old('party_name') }}" required>
                    </div>
                    <div id="collectibleBusinessNameGroup" @if(old('source', 'personal') !== 'business') hidden @endif>
                        <label class="label">Business Name</label>
                        <input class="field" name="business_name" value="{{ old('business_name') }}">
                    </div>
                    <div class="collectible-field-wide">
                        <label class="label">Reason<span style="color:#ef4444">*</span></label>
                        <input class="field" name="reason" value="{{ old('reason') }}" required>
                    </div>
                    <div class="collectible-field-wide">
                        <label class="label">Description<span style="color:#ef4444">*</span></label>
                        <input class="field" name="description" value="{{ old('description') }}" required>
                    </div>
                    <div>
                        <label class="label">Due</label>
                        <input class="field" type="date" name="due_date" value="{{ old('due_date') }}">
                    </div>
                    <div>
                        <label class="label">Currency<span style="color:#ef4444">*</span></label>
                        <select class="field" name="currency" required>
                            <option value="" @selected(old('currency') === null)>Select currency</option>
                            @foreach(['PKR','USD','AUD'] as $currency)
                                <option value="{{ $currency }}" @selected(old('currency') === $currency)>{{ $currency }}</option>
                            @endforeach
                        </select>
                    </div>
                    <div>
                        <label class="label">Amount<span style="color:#ef4444">*</span></label>
                        <input class="field right" type="number" step="0.01" min="0.01" name="amount" value="{{ old('amount') }}" required>
                    </div>
                </div>
                @if($errors->any())
                    <div class="mt-3 text-sm" style="color:#e11d48">{{ $errors->first() }}</div>
                @endif
                <input type="hidden" name="collectible_date" value="{{ now()->toDateString() }}">
                <input type="hidden" name="collected_amount" value="0">
                <input type="hidden" name="status" value="open">
            </div>
            <div class="collectible-modal-footer">
                <button class="btn" type="button" id="cancelCollectibleForm">Cancel</button>
                <button class="btn btn-primary" type="submit">Save Collectible</button>
            </div>
        </form>
    </div>
</div>

<div id="collectibleEditModal" class="collectible-modal-overlay" hidden role="dialog" aria-modal="true" aria-labelledby="collectibleEditTitle">
    <div class="collectible-modal">
        <div class="collectible-modal-header">
            <div>
                <h3 class="font-semibold" id="collectibleEditTitle">Edit Collectible</h3>
                <p class="text-xs" style="color:var(--muted);margin:3px 0 0">Update the receivable details.</p>
            </div>
            <button class="btn" type="button" id="closeCollectibleEdit" aria-label="Close edit form" style="padding:4px 10px;font-size:18px">&times;</button>
        </div>
        <form method="POST" id="collectibleEditForm" action="">
            @csrf
            @method('PUT')
            <div class="collectible-modal-body">
                <div class="collectible-entry-form">
                    <div>
                        <label class="label">Type</label>
                        <select class="field" name="source" id="editCollectibleTypeSelect" required>
                            <option value="personal">Personal</option>
                            <option value="business">Business</option>
                        </select>
                    </div>
                    <div>
                        <label class="label">Name</label>
                        <input class="field" name="party_name" required>
                    </div>
                    <div id="editCollectibleBusinessNameGroup" hidden>
                        <label class="label">Business Name</label>
                        <input class="field" name="business_name">
                    </div>
                    <div class="collectible-field-wide">
                        <label class="label">Reason</label>
                        <input class="field" name="reason">
                    </div>
                    <div class="collectible-field-wide">
                        <label class="label">Description</label>
                        <input class="field" name="description">
                    </div>
                    <div>
                        <label class="label">Due</label>
                        <input class="field" type="date" name="due_date">
                    </div>
                    <div>
                        <label class="label">Status</label>
                        <select class="field" name="status">
                            @foreach(['open','partial','overdue','collected','written_off','cancelled'] as $option)
                                <option value="{{ $option }}">{{ ucfirst($statusText[$option] ?? str_replace('_', ' ', $option)) }}</option>
                            @endforeach
                        </select>
                    </div>
                    <div>
                        <label class="label">Currency</label>
                        <select class="field" name="currency" required>
                            @foreach(['PKR','USD','AUD'] as $currency)
                                <option value="{{ $currency }}">{{ $currency }}</option>
                            @endforeach
                        </select>
                    </div>
                    <div>
                        <label class="label">Amount</label>
                        <input class="field right" type="number" step="0.01" min="0.01" name="amount" required>
                    </div>
                    <div>
                        <label class="label">Collected</label>
                        <input class="field right" type="number" step="0.01" min="0" name="collected_amount">
                    </div>
                </div>
                <input type="hidden" name="collectible_date" value="">
                <input type="hidden" name="bank_account_id" value="">
            </div>
            <div class="collectible-modal-footer">
                <button class="btn" type="button" id="cancelCollectibleEdit">Cancel</button>
                <button class="btn btn-primary" type="submit">Update Collectible</button>
            </div>
        </form>
    </div>
</div>

<div id="collectibleReceiptsModal" class="collectible-modal-overlay" hidden role="dialog" aria-modal="true" aria-labelledby="collectibleReceiptsTitle">
    <div class="collectible-modal" style="width:min(520px,100%)">
        <div class="collectible-modal-header">
            <div>
                <h3 class="font-semibold" id="collectibleReceiptsTitle">Receipt Breakdown</h3>
                <p class="text-xs" style="color:var(--muted);margin:3px 0 0" id="collectibleReceiptsSubtitle">How this amount was received.</p>
            </div>
            <button class="btn" type="button" id="closeCollectibleReceipts" aria-label="Close receipts" style="padding:4px 10px;font-size:18px">&times;</button>
        </div>
        <div class="collectible-modal-body">
            <div class="flex items-center justify-between mb-3" style="gap:10px">
                <div style="background:var(--bg-2);border-radius:8px;padding:8px 12px;flex:1">
                    <div class="kpi-label">Original</div>
                    <div style="font-weight:700" id="collectibleReceiptsOriginal">-</div>
                </div>
                <div style="background:var(--bg-2);border-radius:8px;padding:8px 12px;flex:1">
                    <div class="kpi-label">Collected</div>
                    <div style="font-weight:700;color:#10b981" id="collectibleReceiptsCollected">-</div>
                </div>
                <div style="background:var(--bg-2);border-radius:8px;padding:8px 12px;flex:1">
                    <div class="kpi-label">Outstanding</div>
                    <div style="font-weight:700;color:#ef4444" id="collectibleReceiptsOutstanding">-</div>
                </div>
            </div>
            <table>
                <thead>
                    <tr>
                        <th style="width:28px">#</th>
                        <th>Date</th>
                        <th>Reference</th>
                        <th class="right">Amount</th>
                    </tr>
                </thead>
                <tbody id="collectibleReceiptsBody"></tbody>
            </table>
        </div>
        <div class="collectible-modal-footer">
            <button class="btn" type="button" id="cancelCollectibleReceipts">Close</button>
        </div>
    </div>
</div>

<section class="grid gap-4 mb-6" style="grid-template-columns:1fr 2fr">
    <div class="card p-5">
        <div class="flex items-center justify-between mb-3">
            <h3 class="font-semibold">By Status</h3>
            <span class="pill">USD eq.</span>
        </div>
        @if(count($statusLabels) > 0)
            <div style="height:260px;position:relative"><canvas id="statusChart"></canvas></div>
        @else
            <div style="height:260px;display:flex;align-items:center;justify-content:center;color:var(--muted);background:var(--bg-2);border-radius:8px;font-size:13px">No open collectibles.</div>
        @endif
    </div>
    <div class="card p-5">
        <div class="flex items-center justify-between mb-3">
            <h3 class="font-semibold">Open Collectibles</h3>
            <span class="pill">{{ $collectibles->count() }} open</span>
        </div>
        <div class="scrollbar" style="max-height:280px;overflow:auto">
            <table>
                <thead>
                    <tr>
                        <th>Name</th>
                        <th>Business</th>
                        <th>Type</th>
                        <th>Reason</th>
                        <th>Description</th>
                        <th>Due</th>
                        <th>Status</th>
                        <th class="right">Outstanding</th>
                    </tr>
                </thead>
                <tbody>
                    @forelse($collectibles as $item)
                    @php
                        $status = ($item->status !== 'collected' && $item->due_date && $item->due_date->lt(now()->startOfDay())) ? 'overdue' : $item->status;
                    @endphp
                    <tr class="row-hover">
                        <td style="font-weight:600">{{ $item->party_name }}</td>
                        <td>{{ $item->business_name ?: '-' }}</td>
                        <td>{{ str_replace('_', ' ', ucfirst($item->source)) }}</td>
                        <td>{{ $item->reason ?: '-' }}</td>
                        <td class="collectible-description-cell">{{ $item->description ?: '-' }}</td>
                        <td>{{ $item->due_date?->format('d M Y') ?? '-' }}</td>
                        <td><span class="pill {{ $statusPills[$status] ?? '' }}" style="font-size:10px;text-transform:capitalize">{{ $statusText[$status] ?? str_replace('_', ' ', $status) }}</span></td>
                        <td class="right">{{ $metrics->money($item->outstandingAmount(), $item->currency) }}</td>
                    </tr>
                    @empty
                    <tr><td colspan="8" class="muted">No open collectibles.</td></tr>
                    @endforelse
                </tbody>
            </table>
        </div>
    </div>
</section>

<section class="grid gap-4 mb-6" style="grid-template-columns:1fr 1fr">
    <div class="card p-5">
        <div class="flex items-center justify-between mb-3">
            <h3 class="font-semibold">Personal vs Business</h3>
            <span class="pill">USD eq.</span>
        </div>
        @if(count($typeLabels) > 0)
            <div style="height:260px;position:relative"><canvas id="typeChart"></canvas></div>
        @else
            <div style="height:260px;display:flex;align-items:center;justify-content:center;color:var(--muted);background:var(--bg-2);border-radius:8px;font-size:13px">No open collectibles.</div>
        @endif
    </div>
    <div class="card p-5">
        <div class="flex items-center justify-between mb-3">
            <h3 class="font-semibold">By Person (Receivable)</h3>
            <span class="pill">USD eq.</span>
        </div>
        @if(count($personLabels) > 0)
            <div style="height:260px;position:relative"><canvas id="personChart"></canvas></div>
        @else
            <div style="height:260px;display:flex;align-items:center;justify-content:center;color:var(--muted);background:var(--bg-2);border-radius:8px;font-size:13px">No open collectibles.</div>
        @endif
    </div>
</section>

<section class="card mb-6">
    <div class="section-head">
        <h2>Recent Collectible Records</h2>
        <span class="pill">{{ $recentCollectibles->count() }} records</span>
    </div>
    <div class="scrollbar" style="overflow:auto">
        <table>
            <thead>
                <tr>
                    <th>Name</th>
                    <th>Business</th>
                    <th>Type</th>
                    <th>Reason</th>
                    <th>Description</th>
                    <th>Reference</th>
                    <th>Status</th>
                    <th>Currency</th>
                    <th class="right">Original</th>
                    <th class="right">Collected</th>
                    <th class="right">Outstanding</th>
                    <th class="right">Actions</th>
                </tr>
            </thead>
            <tbody>
                @forelse($recentCollectibles as $item)
                @php
                    $status = ($item->status !== 'collected' && $item->due_date && $item->due_date->lt(now()->startOfDay())) ? 'overdue' : $item->status;
                    $receipts = $collectibleReceipts[$item->id] ?? collect();
                @endphp
                <tr class="row-hover">
                    <td style="font-weight:600">{{ $item->party_name }}</td>
                    <td>{{ $item->business_name ?: '-' }}</td>
                    <td>{{ str_replace('_', ' ', ucfirst($item->source)) }}</td>
                    <td>{{ $item->reason ?: '-' }}</td>
                    <td class="collectible-description-cell">{{ $item->description ?: '-' }}</td>
                    <td>{{ $item->reference ?: '-' }}</td>
                    <td>
                        @if($receipts->isNotEmpty())
                            <button type="button"
                                    class="pill {{ $statusPills[$status] ?? '' }} js-collectible-receipts"
                                    style="font-size:10px;text-transform:capitalize;border:0;cursor:pointer;text-decoration:underline"
                                    data-party="{{ $item->party_name }}"
                                    data-original="{{ $metrics->money($item->amount, $item->currency) }}"
                                    data-collected="{{ $metrics->money($item->collected_amount, $item->currency) }}"
                                    data-outstanding="{{ $metrics->money($item->outstandingAmount(), $item->currency) }}"
                                    data-receipts='@json($receipts)'>{{ $statusText[$status] ?? str_replace('_', ' ', $status) }}</button>
                        @else
                            <span class="pill {{ $statusPills[$status] ?? '' }}" style="font-size:10px;text-transform:capitalize">{{ $statusText[$status] ?? str_replace('_', ' ', $status) }}</span>
                        @endif
                    </td>
                    <td>{{ $item->currency }}</td>
                    <td class="right">{{ $metrics->money($item->amount, $item->currency) }}</td>
                    <td class="right">
                        @if($receipts->isNotEmpty())
                            <button type="button"
                                    class="js-collectible-receipts"
                                    style="background:none;border:0;padding:0;color:#0ea5e9;cursor:pointer;text-decoration:underline;font:inherit"
                                    data-party="{{ $item->party_name }}"
                                    data-original="{{ $metrics->money($item->amount, $item->currency) }}"
                                    data-collected="{{ $metrics->money($item->collected_amount, $item->currency) }}"
                                    data-outstanding="{{ $metrics->money($item->outstandingAmount(), $item->currency) }}"
                                    data-receipts='@json($receipts)'>{{ $metrics->money($item->collected_amount, $item->currency) }}</button>
                        @else
                            {{ $metrics->money($item->collected_amount, $item->currency) }}
                        @endif
                    </td>
                    <td class="right">{{ $metrics->money($item->outstandingAmount(), $item->currency) }}</td>
                    <td class="right" style="white-space:nowrap">
                        <button
                            type="button"
                            class="btn btn-sm js-edit-collectible"
                            data-action="{{ route('dashboard.cards.collectible.entries.update', $item) }}"
                            data-source="{{ $item->source }}"
                            data-party_name="{{ $item->party_name }}"
                            data-business_name="{{ $item->business_name }}"
                            data-reason="{{ $item->reason }}"
                            data-description="{{ $item->description }}"
                            data-reference="{{ $item->reference }}"
                            data-collectible_date="{{ $item->collectible_date?->toDateString() }}"
                            data-due_date="{{ $item->due_date?->toDateString() }}"
                            data-bank_account_id="{{ $item->bank_account_id }}"
                            data-currency="{{ $item->currency }}"
                            data-status="{{ $item->status }}"
                            data-amount="{{ $item->amount }}"
                            data-collected_amount="{{ $item->collected_amount }}"
                        >Edit</button>
                        <form method="POST" action="{{ route('dashboard.cards.collectible.entries.destroy', $item) }}" style="display:inline" onsubmit="return confirm('Remove this collectible?')">
                            @csrf @method('DELETE')
                            <button class="btn btn-sm btn-danger" type="submit">Delete</button>
                        </form>
                    </td>
                </tr>
                @empty
                <tr><td colspan="12" class="muted">No collectible records yet.</td></tr>
                @endforelse
            </tbody>
        </table>
    </div>
</section>

<section class="card p-5">
    <h3 class="font-semibold mb-3">Insights</h3>
    <div class="grid gap-3" style="grid-template-columns:repeat(3,1fr)">
        <div style="background:var(--bg-2);border-radius:8px;padding:14px">
            <div class="kpi-label">Overdue Rate</div>
            <div class="text-xl" style="font-weight:700;margin-top:4px;color:#ef4444">
                {{ $totalUsd > 0 ? number_format((($byStatus['overdue'] ?? 0) / $totalUsd) * 100, 1) : '0.0' }}%
            </div>
            <div class="text-xs muted">Of open collectible value</div>
        </div>
        <div style="background:var(--bg-2);border-radius:8px;padding:14px">
            <div class="kpi-label">Avg. Open Size</div>
            <div class="text-xl" style="font-weight:700;margin-top:4px">
                {{ $collectibles->count() > 0 ? $metrics->money($totalUsd / $collectibles->count()) : '$0.00' }}
            </div>
            <div class="text-xs muted">USD average</div>
        </div>
        <div style="background:var(--bg-2);border-radius:8px;padding:14px">
            <div class="kpi-label">PKR Equivalent</div>
            <div class="text-xl" style="font-weight:700;margin-top:4px">{{ $fmt($totalUsd) }}</div>
            <div class="text-xs muted">At current FX rate</div>
        </div>
    </div>
</section>

@push('styles')
<style>
    .collectible-modal-overlay {
        position: fixed;
        inset: 0;
        z-index: 80;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 20px;
        background: rgba(15, 23, 42, .46);
    }
    .collectible-modal-overlay[hidden] {
        display: none;
    }
    .collectible-modal {
        width: min(720px, 100%);
        max-height: calc(100vh - 40px);
        overflow: hidden;
        border: 1px solid var(--border);
        border-radius: 14px;
        background: var(--card);
        box-shadow: 0 24px 70px rgba(15, 23, 42, .24);
    }
    .collectible-modal-header,
    .collectible-modal-footer {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        padding: 14px 16px;
        border-bottom: 1px solid var(--border);
    }
    .collectible-modal-footer {
        justify-content: flex-end;
        border-top: 1px solid var(--border);
        border-bottom: 0;
        background: #fafbff;
    }
    .collectible-modal-body {
        max-height: calc(100vh - 180px);
        overflow-y: auto;
        padding: 16px;
    }
    .collectible-entry-form {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 13px;
    }
    .collectible-field-wide {
        grid-column: 1 / -1;
    }
    .collectible-description-cell {
        max-width: 260px;
        white-space: normal;
        line-height: 1.35;
    }
    @media (max-width: 640px) {
        .collectible-modal-overlay {
            align-items: flex-start;
            padding: 12px;
        }
        .collectible-entry-form {
            grid-template-columns: 1fr;
        }
    }
</style>
@endpush

@push('scripts')
<script src="{{ asset('chart.umd.min.js') }}"></script>
<script>
(function () {
    'use strict';
    var modal = document.getElementById('collectibleFormModal');
    var toggle = document.getElementById('toggleCollectibleForm');
    var cancel = document.getElementById('cancelCollectibleForm');
    var close = document.getElementById('closeCollectibleForm');
    var firstField = modal ? modal.querySelector('input[name="party_name"]') : null;
    var typeSelect = document.getElementById('collectibleTypeSelect');
    var businessNameGroup = document.getElementById('collectibleBusinessNameGroup');
    var businessNameField = businessNameGroup ? businessNameGroup.querySelector('input[name="business_name"]') : null;

    function syncCollectibleTypeFields() {
        var isBusiness = typeSelect && typeSelect.value === 'business';
        if (businessNameGroup) {
            businessNameGroup.hidden = !isBusiness;
        }
        if (businessNameField) {
            businessNameField.required = isBusiness;
            if (!isBusiness) {
                businessNameField.value = '';
            }
        }
    }

    function setFormVisible(visible) {
        if (!modal) return;
        modal.hidden = !visible;
        if (visible && firstField) {
            window.setTimeout(function () { firstField.focus(); }, 40);
        }
    }

    if (toggle) {
        toggle.addEventListener('click', function () {
            setFormVisible(true);
        });
    }
    if (typeSelect) {
        typeSelect.addEventListener('change', syncCollectibleTypeFields);
        syncCollectibleTypeFields();
    }
    if (cancel) {
        cancel.addEventListener('click', function () {
            setFormVisible(false);
        });
    }
    if (close) {
        close.addEventListener('click', function () {
            setFormVisible(false);
        });
    }
    if (modal) {
        modal.addEventListener('click', function (event) {
            if (event.target === modal) {
                setFormVisible(false);
            }
        });
    }
    document.addEventListener('keydown', function (event) {
        if (event.key === 'Escape' && modal && !modal.hidden) {
            setFormVisible(false);
        }
    });

    // ── Edit collectible modal ──────────────────────────────────────────────
    var editModal = document.getElementById('collectibleEditModal');
    var editForm = document.getElementById('collectibleEditForm');
    var editClose = document.getElementById('closeCollectibleEdit');
    var editCancel = document.getElementById('cancelCollectibleEdit');
    var editTypeSelect = document.getElementById('editCollectibleTypeSelect');
    var editBusinessNameGroup = document.getElementById('editCollectibleBusinessNameGroup');
    var editBusinessNameField = editBusinessNameGroup ? editBusinessNameGroup.querySelector('input[name="business_name"]') : null;

    function syncEditTypeFields() {
        var isBusiness = editTypeSelect && editTypeSelect.value === 'business';
        if (editBusinessNameGroup) {
            editBusinessNameGroup.hidden = !isBusiness;
        }
        if (editBusinessNameField) {
            editBusinessNameField.required = isBusiness;
            if (!isBusiness) {
                editBusinessNameField.value = '';
            }
        }
    }

    function setEditVisible(visible) {
        if (!editModal) return;
        editModal.hidden = !visible;
    }

    function setEditField(name, value) {
        if (!editForm) return;
        var el = editForm.elements[name];
        if (el) {
            el.value = value == null ? '' : value;
        }
    }

    function openEdit(btn) {
        if (!editForm) return;
        editForm.setAttribute('action', btn.getAttribute('data-action') || '');
        setEditField('source', btn.getAttribute('data-source') || 'personal');
        setEditField('party_name', btn.getAttribute('data-party_name'));
        setEditField('business_name', btn.getAttribute('data-business_name'));
        setEditField('reason', btn.getAttribute('data-reason'));
        setEditField('description', btn.getAttribute('data-description'));
        setEditField('reference', btn.getAttribute('data-reference'));
        setEditField('collectible_date', btn.getAttribute('data-collectible_date'));
        setEditField('due_date', btn.getAttribute('data-due_date'));
        setEditField('bank_account_id', btn.getAttribute('data-bank_account_id'));
        setEditField('currency', btn.getAttribute('data-currency') || 'PKR');
        setEditField('status', btn.getAttribute('data-status') || 'open');
        setEditField('amount', btn.getAttribute('data-amount'));
        setEditField('collected_amount', btn.getAttribute('data-collected_amount'));
        syncEditTypeFields();
        setEditVisible(true);
        var nameField = editForm.elements['party_name'];
        if (nameField) {
            window.setTimeout(function () { nameField.focus(); }, 40);
        }
    }

    document.querySelectorAll('.js-edit-collectible').forEach(function (btn) {
        btn.addEventListener('click', function () { openEdit(btn); });
    });
    if (editTypeSelect) {
        editTypeSelect.addEventListener('change', syncEditTypeFields);
    }
    if (editCancel) {
        editCancel.addEventListener('click', function () { setEditVisible(false); });
    }
    if (editClose) {
        editClose.addEventListener('click', function () { setEditVisible(false); });
    }
    if (editModal) {
        editModal.addEventListener('click', function (event) {
            if (event.target === editModal) {
                setEditVisible(false);
            }
        });
    }
    document.addEventListener('keydown', function (event) {
        if (event.key === 'Escape' && editModal && !editModal.hidden) {
            setEditVisible(false);
        }
    });

    // ── Receipt breakdown modal ─────────────────────────────────────────────
    var receiptsModal = document.getElementById('collectibleReceiptsModal');
    var receiptsBody = document.getElementById('collectibleReceiptsBody');
    var receiptsTitle = document.getElementById('collectibleReceiptsTitle');
    var receiptsClose = document.getElementById('closeCollectibleReceipts');
    var receiptsCancel = document.getElementById('cancelCollectibleReceipts');

    function setReceiptsVisible(visible) {
        if (receiptsModal) receiptsModal.hidden = !visible;
    }

    function openReceipts(btn) {
        if (!receiptsModal) return;
        var party = btn.getAttribute('data-party') || '';
        receiptsTitle.textContent = party ? ('Receipts — ' + party) : 'Receipt Breakdown';
        document.getElementById('collectibleReceiptsOriginal').textContent = btn.getAttribute('data-original') || '-';
        document.getElementById('collectibleReceiptsCollected').textContent = btn.getAttribute('data-collected') || '-';
        document.getElementById('collectibleReceiptsOutstanding').textContent = btn.getAttribute('data-outstanding') || '-';

        var receipts = [];
        try { receipts = JSON.parse(btn.getAttribute('data-receipts') || '[]'); } catch (e) { receipts = []; }

        if (!receipts.length) {
            receiptsBody.innerHTML = '<tr><td colspan="4" class="muted">No receipts recorded.</td></tr>';
        } else {
            receiptsBody.innerHTML = receipts.map(function (r, i) {
                return '<tr>'
                    + '<td>' + (i + 1) + '</td>'
                    + '<td>' + (r.date || '-') + '</td>'
                    + '<td>' + (r.reference ? r.reference : '-') + '</td>'
                    + '<td class="right">' + (r.amount || '-') + '</td>'
                    + '</tr>';
            }).join('');
        }
        setReceiptsVisible(true);
    }

    document.querySelectorAll('.js-collectible-receipts').forEach(function (btn) {
        btn.addEventListener('click', function () { openReceipts(btn); });
    });
    if (receiptsClose) receiptsClose.addEventListener('click', function () { setReceiptsVisible(false); });
    if (receiptsCancel) receiptsCancel.addEventListener('click', function () { setReceiptsVisible(false); });
    if (receiptsModal) {
        receiptsModal.addEventListener('click', function (event) {
            if (event.target === receiptsModal) setReceiptsVisible(false);
        });
    }
    document.addEventListener('keydown', function (event) {
        if (event.key === 'Escape' && receiptsModal && !receiptsModal.hidden) {
            setReceiptsVisible(false);
        }
    });

    Chart.defaults.font.family = 'Inter, system-ui, sans-serif';
    Chart.defaults.font.size = 12;
    var palette = @json($palette);
    function sliceColors(n) { var out = []; for (var i = 0; i < n; i++) out.push(palette[i % palette.length]); return out; }

    var statusEl = document.getElementById('statusChart');
    if (statusEl && @json(count($statusLabels)) > 0) {
        new Chart(statusEl, {
            type: 'doughnut',
            data: {
                labels: @json($statusLabels),
                datasets: [{ data: @json($statusValues), backgroundColor: sliceColors(@json(count($statusLabels))), borderWidth: 2, borderColor: '#fff' }]
            },
            options: {
                responsive: true,
                maintainAspectRatio: false,
                plugins: {
                    legend: { position: 'bottom', labels: { boxWidth: 10, padding: 10, font: { size: 11 } } },
                    tooltip: { callbacks: { label: function (context) { return ' $' + Number(context.raw || 0).toLocaleString('en-US', { maximumFractionDigits: 0 }); } } }
                }
            }
        });
    }

    var typeEl = document.getElementById('typeChart');
    if (typeEl && @json(count($typeLabels)) > 0) {
        new Chart(typeEl, {
            type: 'doughnut',
            data: {
                labels: @json($typeLabels),
                datasets: [{ data: @json($typeValues), backgroundColor: sliceColors(@json(count($typeLabels))), borderWidth: 2, borderColor: '#fff' }]
            },
            options: {
                responsive: true,
                maintainAspectRatio: false,
                plugins: {
                    legend: { position: 'bottom', labels: { boxWidth: 10, padding: 10, font: { size: 11 } } },
                    tooltip: { callbacks: { label: function (context) { return ' $' + Number(context.raw || 0).toLocaleString('en-US', { maximumFractionDigits: 0 }); } } }
                }
            }
        });
    }

    var personEl = document.getElementById('personChart');
    if (personEl && @json(count($personLabels)) > 0) {
        new Chart(personEl, {
            type: 'pie',
            data: {
                labels: @json($personLabels),
                datasets: [{ data: @json($personValues), backgroundColor: sliceColors(@json(count($personLabels))), borderWidth: 2, borderColor: '#fff' }]
            },
            options: {
                responsive: true,
                maintainAspectRatio: false,
                plugins: {
                    legend: { position: 'bottom', labels: { boxWidth: 10, padding: 10, font: { size: 11 } } },
                    tooltip: { callbacks: { label: function (context) { return ' ' + (context.label || '') + ': $' + Number(context.raw || 0).toLocaleString('en-US', { maximumFractionDigits: 0 }); } } }
                }
            }
        });
    }
}());
</script>
@endpush
@endsection