{{-- ============================================================
     resources/views/modules/keuangan/ar.blade.php
     ============================================================ --}}
@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 aging piutang pelanggan</p></div>
    <div class="d-flex gap-2">
        <button class="btn btn-outline-secondary btn-sm" onclick="window.location='/keuangan/ar/export'"><i class="bi bi-download"></i> Export</button>
        <a href="{{ route('invoices.index') }}" class="btn btn-outline-primary btn-sm"><i class="bi bi-receipt"></i> Semua Invoice</a>
    </div>
</div>

{{-- Aging Summary --}}
<div class="row g-3 mb-4">
    @php $ags=[['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($ags as $s)
    <div class="col-6 col-md">
        <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:15px">Rp {{ number_format($s['val'],0,',','.') }}</div>
            </div>
        </div>
    </div>
    @endforeach
</div>

{{-- Charts --}}
<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:220px"></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:220px"></div></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>SO</th><th>Pelanggan</th><th>Tgl Invoice</th><th>Jatuh Tempo</th><th>Total</th><th>Sudah Bayar</th><th>Sisa</th><th>Status</th><th>Aksi</th></tr></thead>
                <tbody>
                    @foreach($invoices as $inv)
                    @php $sisa=$inv->sisa_tagihan; $overdue=$sisa>0&&$inv->tgl_jatuh_tempo<now(); $sCls=$sisa<=0?'pf-status-selesai':($overdue?'pf-status-batal':($inv->total_bayar>0?'pf-status-pending':'pf-status-draft')); $sLbl=$sisa<=0?'Lunas':($overdue?'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 class="font-mono" style="font-size:12px;color:var(--pf-text-muted)">{{ $inv->salesOrder?->no_so??'-' }}</td>
                        <td style="font-weight:500">{{ $inv->pelanggan?->nama??'-' }}</td>
                        <td style="font-size:13px">{{ $inv->tgl_invoice?->format('d/m/Y') }}</td>
                        <td style="font-size:13px;{{ $overdue?'color:#DC2626;font-weight:600':'' }}">{{ $inv->tgl_jatuh_tempo?->format('d/m/Y') }}@if($overdue)<div style="font-size:10.5px">{{ now()->diffInDays($inv->tgl_jatuh_tempo) }}h lalu</div>@endif</td>
                        <td class="font-mono fw-500">Rp {{ number_format($inv->total_invoice,0,',','.') }}</td>
                        <td class="font-mono text-success">Rp {{ number_format($inv->total_bayar,0,',','.') }}</td>
                        <td class="font-mono fw-600" style="color:{{ $sisa>0?'#DC2626':'#059669' }}">Rp {{ number_format($sisa,0,',','.') }}</td>
                        <td><span class="pf-status {{ $sCls }}">{{ $sLbl }}</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="{{ route('invoices.pdf',$inv->id) }}" target="_blank" class="btn btn-xs btn-outline-primary"><i class="bi bi-filetype-pdf"></i></a>
                                @if($sisa>0)<button class="btn btn-xs btn-outline-success" 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>
<div class="mt-3">{{ $invoices->links() }}</div>

{{-- Modal Bayar --}}
<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="bayarNo" readonly style="background:var(--pf-bg)"><input type="hidden" id="bayarId"></div>
                    <div class="col-12"><label class="form-label">Jumlah (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:3px">Sisa: <strong id="bayarSisa" class="text-danger">Rp 0</strong></div></div>
                    <div class="col-6"><label class="form-label">Tgl 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</label><input type="text" class="form-control" id="bayarRef" placeholder="No. transfer, giro..."></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>
$(document).ready(()=>$('#tblAR').DataTable({pageLength:25,order:[[8,'asc']]}));
const isDark=document.documentElement.getAttribute('data-bs-theme')==='dark';
const pf={chart:{backgroundColor:'transparent',style:{fontFamily:'DM Sans,sans-serif'}},title:{text:null},credits:{enabled:false},xAxis:{labels:{style:{color:isDark?'#9CA3AF':'#6B7280'}}},yAxis:{gridLineColor:isDark?'#1F2937':'#F3F4F6',labels:{style:{color:isDark?'#9CA3AF':'#6B7280'}}},tooltip:{backgroundColor:isDark?'#1F2937':'#fff',borderColor:isDark?'#374151':'#E5E7EB',borderRadius:10,shadow:false}};
Highcharts.chart('chartAging',Highcharts.merge(pf,{chart:{type:'bar'},xAxis:{categories:['Belum JT','1-30 Hari','31-60 Hari','>60 Hari']},yAxis:{labels:{formatter:function(){return'Rp '+Highcharts.numberFormat(this.value/1e6,0)+'jt';}}},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',Highcharts.merge(pf,{chart:{type:'areaspline'},xAxis:{categories:{!! json_encode(collect(range(5,0))->map(fn($i)=>now()->subMonths($i)->isoFormat('MMM YY'))->values()) !!}},yAxis:{labels:{formatter:function(){return'Rp '+Highcharts.numberFormat(this.value/1e6,0)+'jt';}}},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(array_values($trendPenerimaan??array_fill(0,6,0))) !!}}]}));
function catatBayar(id,no,sisa){document.getElementById('bayarId').value=id;document.getElementById('bayarNo').value=no;document.getElementById('bayarJumlah').value=sisa;document.getElementById('bayarSisa').textContent='Rp '+sisa.toLocaleString('id-ID');new bootstrap.Modal(document.getElementById('modalBayar')).show();}
function submitBayar(){
    const jumlah=parseFloat(document.getElementById('bayarJumlah').value);
    if(!jumlah||jumlah<=0){PF.error('Jumlah harus diisi');return;}
    PF.loading('Menyimpan...');
    fetch('/payments',{method:'POST',headers:{'Content-Type':'application/json','X-CSRF-TOKEN':document.querySelector('meta[name="csrf-token"]').content},
    body:JSON.stringify({invoice_id:document.getElementById('bayarId').value,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 dicatat');setTimeout(()=>location.reload(),1000);}else PF.error(d.message||'Gagal');}).catch(()=>{PF.closeLoading();PF.error('Koneksi gagal');});
}
</script>
@endpush