@extends('layouts.app')

@section('title', 'Piutang & Invoice (AR)')

@section('breadcrumb')
    <span>Keuangan</span>
    <i class="bi bi-chevron-right"></i>
    <span>Piutang (AR)</span>
@endsection

@section('content')

<div class="pf-page-header">
    <div>
        <h1 class="pf-page-title"><i class="bi bi-receipt-cutoff me-2 text-primary-pf"></i>Piutang & Invoice (AR)</h1>
        <p class="pf-page-subtitle">Kelola invoice, pembayaran, dan piutang pelanggan</p>
    </div>
    <div class="d-flex gap-2">
        <button class="btn btn-outline-secondary btn-sm" onclick="exportAR()">
            <i class="bi bi-download"></i> Export
        </button>
        <a href="{{ route('invoices.create') }}" class="btn btn-primary btn-sm">
            <i class="bi bi-plus-lg"></i> Buat Invoice
        </a>
    </div>
</div>

{{-- ===== AGING AR SUMMARY ===== --}}
<div class="row g-3 mb-4">
    @php
    $aging = [
        ['label'=>'Belum Jatuh Tempo', 'val'=> $ar['belum_jatuh']  ?? 0, 'color'=>'#1B4FD8','bg'=>'#EEF3FF','icon'=>'bi-clock'],
        ['label'=>'1 - 30 Hari',       'val'=> $ar['aging_30']     ?? 0, 'color'=>'#059669','bg'=>'#D1FAE5','icon'=>'bi-calendar-check'],
        ['label'=>'31 - 60 Hari',      'val'=> $ar['aging_60']     ?? 0, 'color'=>'#D97706','bg'=>'#FEF3C7','icon'=>'bi-calendar-event'],
        ['label'=>'> 60 Hari',         'val'=> $ar['aging_over60']  ?? 0, 'color'=>'#DC2626','bg'=>'#FEE2E2','icon'=>'bi-calendar-x'],
        ['label'=>'Total Outstanding',  'val'=> $ar['total']        ?? 0, 'color'=>'#0F172A','bg'=>'#F1F5F9','icon'=>'bi-cash-stack'],
    ];
    @endphp
    @foreach($aging as $s)
    <div class="col-6 col-md-4 col-xl">
        <div class="pf-stat-card" style="--pf-stat-color:{{ $s['color'] }};--pf-stat-bg:{{ $s['bg'] }}">
            <div class="pf-stat-icon"><i class="{{ $s['icon'] }}"></i></div>
            <div class="pf-stat-body">
                <div class="pf-stat-label">{{ $s['label'] }}</div>
                <div class="pf-stat-value" style="font-size:16px">Rp {{ number_format($s['val'], 0, ',', '.') }}</div>
            </div>
        </div>
    </div>
    @endforeach
</div>

{{-- AR Chart --}}
<div class="row g-3 mb-4">
    <div class="col-12 col-xl-7">
        <div class="pf-card h-100">
            <div class="pf-card-header">
                <h6 class="pf-card-title"><i class="bi bi-bar-chart-fill"></i> Aging Piutang</h6>
            </div>
            <div class="pf-card-body">
                <div id="chartAging" style="height:240px"></div>
            </div>
        </div>
    </div>
    <div class="col-12 col-xl-5">
        <div class="pf-card h-100">
            <div class="pf-card-header">
                <h6 class="pf-card-title"><i class="bi bi-graph-up-arrow"></i> Tren Penerimaan (6 Bulan)</h6>
            </div>
            <div class="pf-card-body">
                <div id="chartPenerimaan" style="height:240px"></div>
            </div>
        </div>
    </div>
</div>

{{-- Filter --}}
<div class="pf-card mb-3">
    <div class="pf-card-body py-3">
        <div class="row g-2 align-items-end">
            <div class="col-md-3">
                <label class="form-label mb-1" style="font-size:12px">Pelanggan</label>
                <select class="form-select form-select-sm" id="fPelanggan">
                    <option value="">Semua</option>
                    @foreach($pelanggan ?? [] as $p)
                        <option value="{{ $p->id }}">{{ $p->nama }}</option>
                    @endforeach
                </select>
            </div>
            <div class="col-md-2">
                <label class="form-label mb-1" style="font-size:12px">Status</label>
                <select class="form-select form-select-sm" id="fStatus">
                    <option value="">Semua</option>
                    <option value="unpaid">Belum Bayar</option>
                    <option value="partial">Bayar Sebagian</option>
                    <option value="paid">Lunas</option>
                    <option value="overdue">Jatuh Tempo</option>
                </select>
            </div>
            <div class="col-md-2">
                <label class="form-label mb-1" style="font-size:12px">Dari Tgl</label>
                <input type="date" class="form-control form-control-sm" id="fFrom">
            </div>
            <div class="col-md-2">
                <label class="form-label mb-1" style="font-size:12px">Sampai</label>
                <input type="date" class="form-control form-control-sm" id="fTo">
            </div>
            <div class="col-md-2 d-flex gap-1">
                <button class="btn btn-sm btn-primary flex-fill" onclick="arTable.ajax.reload()">Filter</button>
                <button class="btn btn-sm btn-outline-secondary" onclick="resetFilter()"><i class="bi bi-x"></i></button>
            </div>
        </div>
    </div>
</div>

{{-- Invoice Table --}}
<div class="pf-card">
    <div class="pf-card-body p-0">
        <div class="table-responsive">
            <table class="table table-hover mb-0" id="tblAR" style="width:100%">
                <thead>
                    <tr>
                        <th>No. Invoice</th>
                        <th>Sales Order</th>
                        <th>Pelanggan</th>
                        <th>Tgl Invoice</th>
                        <th>Jatuh Tempo</th>
                        <th>Total Invoice</th>
                        <th>Sudah Dibayar</th>
                        <th>Sisa Tagihan</th>
                        <th>Status</th>
                        <th>Aksi</th>
                    </tr>
                </thead>
                <tbody>
                    @foreach($invoices as $inv)
                    @php
                        $sisa       = $inv->total_invoice - $inv->total_bayar;
                        $isOverdue  = $sisa > 0 && $inv->tgl_jatuh_tempo < now()->toDateString();
                        $statusCls  = $sisa <= 0 ? 'pf-status-selesai' : ($isOverdue ? 'pf-status-batal' : ($inv->total_bayar > 0 ? 'pf-status-pending' : 'pf-status-draft'));
                        $statusLbl  = $sisa <= 0 ? 'Lunas' : ($isOverdue ? 'Overdue' : ($inv->total_bayar > 0 ? 'Partial' : 'Unpaid'));
                    @endphp
                    <tr>
                        <td>
                            <a href="{{ route('invoices.show', $inv->id) }}" class="font-mono text-primary fw-500">
                                {{ $inv->no_invoice }}
                            </a>
                        </td>
                        <td><span class="font-mono text-muted" style="font-size:12px">{{ $inv->salesOrder?->no_so ?? '-' }}</span></td>
                        <td>
                            <div style="font-weight:500">{{ $inv->pelanggan->nama ?? '-' }}</div>
                            <div style="font-size:11px;color:var(--pf-text-muted)">{{ $inv->pelanggan->telepon ?? '' }}</div>
                        </td>
                        <td><span style="font-size:13px">{{ $inv->tgl_invoice?->format('d/m/Y') }}</span></td>
                        <td>
                            <span style="font-size:13px;{{ $isOverdue ? 'color:#DC2626;font-weight:600' : '' }}">
                                {{ $inv->tgl_jatuh_tempo?->format('d/m/Y') }}
                            </span>
                            @if($isOverdue)
                                <div style="font-size:10.5px;color:#DC2626">
                                    {{ now()->diffInDays($inv->tgl_jatuh_tempo) }} hari lalu
                                </div>
                            @endif
                        </td>
                        <td><span class="font-mono fw-500">Rp {{ number_format($inv->total_invoice, 0, ',', '.') }}</span></td>
                        <td><span class="font-mono text-success">Rp {{ number_format($inv->total_bayar, 0, ',', '.') }}</span></td>
                        <td>
                            <span class="font-mono fw-600" style="{{ $sisa > 0 ? 'color:#DC2626' : 'color:#059669' }}">
                                Rp {{ number_format($sisa, 0, ',', '.') }}
                            </span>
                        </td>
                        <td><span class="pf-status {{ $statusCls }}">{{ $statusLbl }}</span></td>
                        <td>
                            <div class="d-flex gap-1">
                                <a href="{{ route('invoices.show', $inv->id) }}" class="btn btn-xs btn-outline-secondary"><i class="bi bi-eye"></i></a>
                                <a href="/invoices/{{ $inv->id }}/pdf" target="_blank" class="btn btn-xs btn-outline-primary" title="PDF"><i class="bi bi-filetype-pdf"></i></a>
                                @if($sisa > 0)
                                <button class="btn btn-xs btn-outline-success" title="Catat Pembayaran"
                                        onclick="catatBayar({{ $inv->id }}, '{{ $inv->no_invoice }}', {{ $sisa }})">
                                    <i class="bi bi-cash-coin"></i>
                                </button>
                                @endif
                            </div>
                        </td>
                    </tr>
                    @endforeach
                </tbody>
            </table>
        </div>
    </div>
</div>

{{-- Modal Catat Pembayaran --}}
<div class="modal fade" id="modalBayar" tabindex="-1">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content" style="border-radius:var(--pf-radius-lg);border:1px solid var(--pf-border)">
            <div class="modal-header" style="border-bottom:1px solid var(--pf-border)">
                <h5 class="modal-title"><i class="bi bi-cash-coin me-2 text-success"></i>Catat Pembayaran</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <div class="row g-3">
                    <div class="col-12">
                        <label class="form-label">Invoice</label>
                        <input type="text" class="form-control" id="bayarInvNo" readonly style="background:var(--pf-bg)">
                        <input type="hidden" id="bayarInvId">
                    </div>
                    <div class="col-12">
                        <label class="form-label">Jumlah Pembayaran (Rp) <span class="text-danger">*</span></label>
                        <div class="input-group">
                            <span class="input-group-text">Rp</span>
                            <input type="number" class="form-control font-mono" id="bayarJumlah" min="1" placeholder="0">
                        </div>
                        <div style="font-size:12px;color:var(--pf-text-muted);margin-top:4px">
                            Sisa tagihan: <strong id="bayarSisa" class="text-danger">Rp 0</strong>
                        </div>
                    </div>
                    <div class="col-6">
                        <label class="form-label">Tanggal Bayar</label>
                        <input type="date" class="form-control" id="bayarTgl" value="{{ date('Y-m-d') }}">
                    </div>
                    <div class="col-6">
                        <label class="form-label">Metode</label>
                        <select class="form-select" id="bayarMetode">
                            <option value="transfer">Transfer Bank</option>
                            <option value="tunai">Tunai</option>
                            <option value="giro">Giro / Cek</option>
                        </select>
                    </div>
                    <div class="col-12">
                        <label class="form-label">No. Referensi / Bukti</label>
                        <input type="text" class="form-control" id="bayarRef" placeholder="No. transfer, giro, dll.">
                    </div>
                    <div class="col-12">
                        <label class="form-label">Catatan</label>
                        <textarea class="form-control" id="bayarCatatan" rows="2"></textarea>
                    </div>
                </div>
            </div>
            <div class="modal-footer" style="border-top:1px solid var(--pf-border)">
                <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">Batal</button>
                <button type="button" class="btn btn-success" onclick="submitBayar()">
                    <i class="bi bi-check2-circle"></i> Simpan Pembayaran
                </button>
            </div>
        </div>
    </div>
</div>

@endsection

@push('scripts')
<script>
// ─── Charts ───
const isDark = document.documentElement.getAttribute('data-bs-theme') === 'dark';

Highcharts.chart('chartAging', {
    chart: { type: 'bar', backgroundColor: 'transparent', animation: { duration: 600 } },
    title: { text: null }, credits: { enabled: false },
    xAxis: { categories: ['Belum JT', '1-30 Hari', '31-60 Hari', '> 60 Hari'], labels: { style: { color: isDark ? '#9CA3AF' : '#6B7280' } } },
    yAxis: { title: { text: null }, labels: { formatter: function() { return 'Rp ' + Highcharts.numberFormat(this.value/1e6,0) + 'jt'; }, style: { color: isDark ? '#9CA3AF' : '#6B7280' } } },
    tooltip: { formatter: function() { return '<b>' + this.x + '</b><br>Rp ' + Highcharts.numberFormat(this.y,0,',','.'); } },
    plotOptions: { bar: { borderRadius: 4, colorByPoint: true, colors: ['#1B4FD8','#059669','#D97706','#DC2626'] } },
    legend: { enabled: false },
    series: [{ name: 'Piutang', data: [
        {{ $ar['belum_jatuh'] ?? 0 }},
        {{ $ar['aging_30'] ?? 0 }},
        {{ $ar['aging_60'] ?? 0 }},
        {{ $ar['aging_over60'] ?? 0 }}
    ]}]
});

Highcharts.chart('chartPenerimaan', {
    chart: { type: 'areaspline', backgroundColor: 'transparent' },
    title: { text: null }, credits: { enabled: false },
    xAxis: { categories: {!! json_encode(collect(range(5,0))->map(fn($i) => now()->subMonths($i)->isoFormat('MMM YY'))->values()) !!}, labels: { style: { color: isDark ? '#9CA3AF' : '#6B7280' } } },
    yAxis: { title: { text: null }, labels: { formatter: function() { return 'Rp ' + Highcharts.numberFormat(this.value/1e6,0) + 'jt'; }, style: { color: isDark ? '#9CA3AF' : '#6B7280' } } },
    plotOptions: { areaspline: { fillOpacity: 0.12, marker: { enabled: true, radius: 4 } } },
    series: [{
        name: 'Penerimaan',
        color: '#059669',
        fillColor: { linearGradient: { x1:0, y1:0, x2:0, y2:1 }, stops: [[0,'rgba(5,150,105,.2)'],[1,'rgba(5,150,105,0)']] },
        data: {!! json_encode($trendPenerimaan ?? [85000000,92000000,78000000,105000000,98000000,115000000]) !!}
    }]
});

// ─── Modal Bayar ───
function catatBayar(invId, noInv, sisa) {
    document.getElementById('bayarInvId').value = invId;
    document.getElementById('bayarInvNo').value = noInv;
    document.getElementById('bayarJumlah').value = sisa;
    document.getElementById('bayarSisa').textContent = 'Rp ' + sisa.toLocaleString('id-ID');
    new bootstrap.Modal(document.getElementById('modalBayar')).show();
}

function submitBayar() {
    const invId  = document.getElementById('bayarInvId').value;
    const jumlah = parseFloat(document.getElementById('bayarJumlah').value);
    if (!jumlah || jumlah <= 0) { PF.error('Jumlah pembayaran harus diisi'); return; }

    PF.loading('Menyimpan pembayaran...');
    fetch(`/payments`, {
        method: 'POST',
        headers: { 'Content-Type': 'application/json', 'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content },
        body: JSON.stringify({
            invoice_id: invId,
            jumlah,
            tgl_bayar:  document.getElementById('bayarTgl').value,
            metode:     document.getElementById('bayarMetode').value,
            referensi:  document.getElementById('bayarRef').value,
            catatan:    document.getElementById('bayarCatatan').value,
        })
    })
    .then(r => r.json())
    .then(d => {
        PF.closeLoading();
        if (d.success) {
            bootstrap.Modal.getInstance(document.getElementById('modalBayar')).hide();
            PF.success('Pembayaran berhasil dicatat');
            setTimeout(() => location.reload(), 1000);
        } else { PF.error(d.message || 'Gagal'); }
    })
    .catch(() => { PF.closeLoading(); PF.error('Koneksi gagal'); });
}

function exportAR() { window.location.href = '/keuangan/ar/export'; }
function resetFilter() { ['fPelanggan','fStatus','fFrom','fTo'].forEach(id => document.getElementById(id).value = ''); }

$(document).ready(() => { $('#tblAR').DataTable({ pageLength: 25, order: [[8,'asc']] }); });
</script>
@endpush