@extends('layouts.app')
@section('title','Hutang (AP)')
@section('breadcrumb')<span>Keuangan</span><i class="bi bi-chevron-right"></i><span>Hutang (AP)</span>@endsection
@section('content')
<div class="pf-page-header">
    <div><h1 class="pf-page-title"><i class="bi bi-credit-card-fill me-2 text-primary-pf"></i>Hutang & AP</h1><p class="pf-page-subtitle">Kelola hutang pembelian ke supplier</p></div>
</div>
<div class="row g-3 mb-4">
    @foreach([['label'=>'Belum JT','val'=>$ap['belum_jatuh']??0,'color'=>'#1B4FD8'],['label'=>'1-30 Hari','val'=>$ap['aging_30']??0,'color'=>'#059669'],['label'=>'31-60 Hari','val'=>$ap['aging_60']??0,'color'=>'#D97706'],['label'=>'>60 Hari','val'=>$ap['aging_over60']??0,'color'=>'#DC2626'],['label'=>'Total Hutang','val'=>$ap['total']??0,'color'=>'#0F172A']] as $s)
    <div class="col-6 col-md"><div class="pf-card p-3"><div style="font-size:12px;color:var(--pf-text-muted);margin-bottom:4px">{{ $s['label'] }}</div><div class="font-mono" style="font-size:16px;font-weight:600;color:{{ $s['color'] }}">Rp {{ number_format($s['val'],0,',','.') }}</div></div></div>
    @endforeach
</div>
<div class="pf-card">
    <div class="pf-card-body p-0"><div class="table-responsive"><table class="table table-hover mb-0" id="tblAP">
        <thead><tr><th>No. PO</th><th>Supplier</th><th>Tgl Terima</th><th>Total</th><th>Status Bayar</th><th>Aksi</th></tr></thead>
        <tbody>
            @foreach($purchases as $po)
            <tr><td><a href="{{ route('purchases.show',$po->id) }}" class="font-mono text-primary">{{ $po->no_po }}</a></td><td style="font-weight:500">{{ $po->supplier?->nama??'-' }}</td><td>{{ $po->tgl_terima?->format('d/m/Y')??'-' }}</td><td class="font-mono fw-500">Rp {{ number_format($po->total,0,',','.') }}</td><td><span class="pf-status {{ ['belum'=>'pf-status-draft','dp'=>'pf-status-pending','lunas'=>'pf-status-selesai'][$po->status_bayar??'belum']??'pf-status-draft' }}">{{ ucfirst($po->status_bayar??'Belum') }}</span></td><td><a href="{{ route('purchases.show',$po->id) }}" class="btn btn-xs btn-outline-secondary"><i class="bi bi-eye"></i></a></td></tr>
            @endforeach
        </tbody>
    </table></div></div>
</div>
<div class="mt-3">{{ $purchases->links() }}</div>
@endsection
@push('scripts')<script>$(document).ready(()=>$('#tblAP').DataTable({paging:false,order:[[2,'asc']]}));</script>@endpush