@extends('layouts.app')
@section('title','Data Supplier')
@section('breadcrumb') <span>Pembelian</span><i class="bi bi-chevron-right"></i><span>Supplier</span> @endsection
@section('content')
<div class="pf-page-header">
    <div>
        <h1 class="pf-page-title"><i class="bi bi-building me-2 text-primary-pf"></i>Data Supplier</h1>
        <p class="pf-page-subtitle">Kelola data pemasok bahan baku dan material produksi</p>
    </div>
    <a href="{{ route('suppliers.create') }}" class="btn btn-primary btn-sm"><i class="bi bi-plus-lg"></i> Tambah Supplier</a>
</div>
<div class="pf-card">
    <div class="pf-card-body p-0">
        <table class="table table-hover mb-0" id="tblSupplier" style="width:100%">
            <thead>
                <tr><th>Kode</th><th>Nama Supplier</th><th>PIC</th><th>Telepon</th><th>Kota</th><th>TOP</th><th>Total PO</th><th>Status</th><th>Aksi</th></tr>
            </thead>
            <tbody></tbody>
        </table>
    </div>
</div>
@endsection
@push('scripts')
<script>
$(document).ready(function() {
    $('#tblSupplier').DataTable({
        processing: true, serverSide: true,
        ajax: '{{ route("suppliers.index") }}',
        columns: [
            { data:'kode', render: v=>`<span class="font-mono" style="font-size:12px">${v}</span>` },
            { data:'nama', render:(v,_,r)=>`<a href="/suppliers/${r.id}" class="fw-500">${v}</a>` },
            { data:'pic', render: v=>v||'-' },
            { data:'telepon', render: v=>v||'-' },
            { data:'kota', render: v=>v||'-' },
            { data:'top_hari', render: v=>`<span class="font-mono">${v||0} hari</span>` },
            { data:'total_po', render: v=>`<span class="font-mono fw-600">${v}</span>`, className:'text-center' },
            { data:'status', render: v=>`<span class="pf-status ${v==='aktif'?'pf-status-selesai':'pf-status-batal'}">${v.charAt(0).toUpperCase()+v.slice(1)}</span>` },
            { data:'id', orderable:false, render:(id,_,r)=>`
                <div class="d-flex gap-1">
                    <a href="/suppliers/${id}" class="btn btn-xs btn-outline-secondary"><i class="bi bi-eye"></i></a>
                    <a href="/suppliers/${id}/edit" class="btn btn-xs btn-outline-primary"><i class="bi bi-pencil"></i></a>
                    <a href="/purchases/create?supplier_id=${id}" class="btn btn-xs btn-outline-success" title="Buat PO"><i class="bi bi-bag-plus"></i></a>
                    <button class="btn btn-xs btn-outline-danger" onclick="PF.confirmDelete('/suppliers/${id}','${r.nama}')"><i class="bi bi-trash"></i></button>
                </div>` }
        ], order:[[1,'asc']]
    });
});
</script>
@endpush