@extends('layouts.app')

@section('title', 'Purchase Order')

@section('breadcrumb')
    <span>Pembelian</span>
    <i class="bi bi-chevron-right"></i>
    <span>Purchase Order</span>
@endsection

@section('content')

<div class="pf-page-header">
    <div>
        <h1 class="pf-page-title"><i class="bi bi-bag-fill me-2 text-primary-pf"></i>Purchase Order</h1>
        <p class="pf-page-subtitle">Kelola pembelian bahan baku dan kebutuhan produksi dari supplier</p>
    </div>
    <div class="d-flex gap-2">
        <a href="{{ route('purchases.create') }}" class="btn btn-primary btn-sm">
            <i class="bi bi-plus-lg"></i> Buat PO Baru
        </a>
    </div>
</div>

{{-- Stats --}}
<div class="row g-3 mb-4">
    @php
    $poStats = [
        ['label'=>'Draft',    'val'=>$counts['draft']   ?? 3,  'color'=>'#6B7280','bg'=>'#F3F4F6','icon'=>'bi-file-earmark'],
        ['label'=>'Dikirim',  'val'=>$counts['sent']    ?? 8,  'color'=>'#1D4ED8','bg'=>'#DBEAFE','icon'=>'bi-send-fill'],
        ['label'=>'Diterima', 'val'=>$counts['partial'] ?? 5,  'color'=>'#D97706','bg'=>'#FEF3C7','icon'=>'bi-box-arrow-in-down'],
        ['label'=>'Selesai',  'val'=>$counts['done']    ?? 42, 'color'=>'#059669','bg'=>'#D1FAE5','icon'=>'bi-check-circle-fill'],
    ];
    @endphp
    @foreach($poStats as $s)
    <div class="col-6 col-md-3">
        <div class="pf-card p-3 d-flex align-items-center gap-3" style="border-left:3px solid {{ $s['color'] }}">
            <div style="width:38px;height:38px;border-radius:8px;background:{{ $s['bg'] }};color:{{ $s['color'] }};display:flex;align-items:center;justify-content:center;font-size:16px">
                <i class="{{ $s['icon'] }}"></i>
            </div>
            <div>
                <div class="font-mono" style="font-size:22px;font-weight:700;color:{{ $s['color'] }};line-height:1">{{ $s['val'] }}</div>
                <div style="font-size:12px;color:var(--pf-text-muted)">{{ $s['label'] }}</div>
            </div>
        </div>
    </div>
    @endforeach
</div>

{{-- PO Table --}}
<div class="pf-card">
    <div class="pf-card-header">
        <h6 class="pf-card-title"><i class="bi bi-table"></i> Daftar Purchase Order</h6>
    </div>
    <div class="pf-card-body p-0">
        <div class="table-responsive">
            <table class="table table-hover mb-0" id="tblPO" style="width:100%">
                <thead>
                    <tr>
                        <th>No. PO</th>
                        <th>Supplier</th>
                        <th>Tgl PO</th>
                        <th>Tgl Kirim</th>
                        <th>Total</th>
                        <th>Status</th>
                        <th>Status Bayar</th>
                        <th>Dibuat Oleh</th>
                        <th>Aksi</th>
                    </tr>
                </thead>
                <tbody>
                    @foreach($purchases as $po)
                    @php
                        $statusCls = match($po->status) {
                            'draft'    => 'pf-status-draft',
                            'sent'     => 'pf-status-proses',
                            'partial'  => 'pf-status-pending',
                            'received' => 'pf-status-selesai',
                            'cancelled'=> 'pf-status-batal',
                            default    => 'pf-status-draft',
                        };
                        $statusLbl = ['draft'=>'Draft','sent'=>'Dikirim','partial'=>'Sebagian','received'=>'Diterima','cancelled'=>'Batal'][$po->status] ?? '-';
                    @endphp
                    <tr>
                        <td><a href="{{ route('purchases.show', $po->id) }}" class="font-mono text-primary fw-500">{{ $po->no_po }}</a></td>
                        <td>
                            <div style="font-weight:500">{{ $po->supplier->nama ?? '-' }}</div>
                            <div style="font-size:11px;color:var(--pf-text-muted)">{{ $po->supplier->telepon ?? '' }}</div>
                        </td>
                        <td>{{ $po->tgl_po?->format('d/m/Y') }}</td>
                        <td>
                            <span style="{{ $po->tgl_kirim < now()->toDateString() && $po->status !== 'received' ? 'color:#DC2626;font-weight:600' : '' }}">
                                {{ $po->tgl_kirim?->format('d/m/Y') }}
                            </span>
                        </td>
                        <td><span class="font-mono fw-500">Rp {{ number_format($po->total, 0, ',', '.') }}</span></td>
                        <td><span class="pf-status {{ $statusCls }}">{{ $statusLbl }}</span></td>
                        <td>
                            @php $bayarCls = ['belum'=>'pf-status-draft','dp'=>'pf-status-pending','lunas'=>'pf-status-selesai'][$po->status_bayar] ?? 'pf-status-draft'; @endphp
                            <span class="pf-status {{ $bayarCls }}">{{ ucfirst($po->status_bayar ?? 'belum') }}</span>
                        </td>
                        <td style="font-size:12.5px">{{ $po->createdBy->name ?? '-' }}</td>
                        <td>
                            <div class="d-flex gap-1">
                                <a href="{{ route('purchases.show', $po->id) }}" class="btn btn-xs btn-outline-secondary"><i class="bi bi-eye"></i></a>
                                @if($po->status === 'draft')
                                    <a href="{{ route('purchases.edit', $po->id) }}" class="btn btn-xs btn-outline-primary"><i class="bi bi-pencil"></i></a>
                                @endif
                                @if(in_array($po->status, ['sent','partial']))
                                    <button class="btn btn-xs btn-outline-success" title="Terima Barang"
                                            onclick="terimaBarang({{ $po->id }}, '{{ $po->no_po }}')">
                                        <i class="bi bi-box-arrow-in-down"></i>
                                    </button>
                                @endif
                                <a href="/purchases/{{ $po->id }}/pdf" target="_blank" class="btn btn-xs btn-outline-secondary"><i class="bi bi-filetype-pdf"></i></a>
                            </div>
                        </td>
                    </tr>
                    @endforeach
                </tbody>
            </table>
        </div>
    </div>
</div>

{{-- Modal Terima Barang --}}
<div class="modal fade" id="modalTerima" tabindex="-1">
    <div class="modal-dialog modal-dialog-centered modal-lg">
        <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-box-arrow-in-down me-2 text-success"></i>Penerimaan Barang</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <div class="alert alert-info mb-3" style="font-size:13px">
                    <i class="bi bi-info-circle me-2"></i>
                    Stok inventory akan otomatis bertambah saat penerimaan barang dikonfirmasi.
                </div>
                <div id="terimaItemsBody">
                    {{-- Diisi dinamis oleh JS --}}
                </div>
                <div class="row g-3 mt-2">
                    <div class="col-6">
                        <label class="form-label">Tanggal Terima</label>
                        <input type="date" class="form-control" id="terimaTgl" value="{{ date('Y-m-d') }}">
                    </div>
                    <div class="col-6">
                        <label class="form-label">No. Surat Jalan Supplier</label>
                        <input type="text" class="form-control" id="terimaSJ" placeholder="No. SJ Supplier">
                    </div>
                    <div class="col-12">
                        <label class="form-label">Catatan Penerimaan</label>
                        <textarea class="form-control" id="terimaCatatan" rows="2" placeholder="Kondisi barang, kekurangan, dll..."></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="submitTerima()">
                    <i class="bi bi-check2-all"></i> Konfirmasi Terima
                </button>
            </div>
        </div>
    </div>
</div>

@endsection

@push('scripts')
<script>
$(document).ready(function() {
    $('#tblPO').DataTable({
        pageLength: 25,
        order: [[2, 'desc']],
        buttons: [
            { extend: 'excelHtml5', text: '<i class="bi bi-file-earmark-excel me-1"></i>Excel' }
        ]
    });
});

let currentPoId = null;

function terimaBarang(poId, noPoStr) {
    currentPoId = poId;
    PF.loading('Memuat data PO...');

    fetch(`/purchases/${poId}/items`, {
        headers: { 'Accept': 'application/json' }
    })
    .then(r => r.json())
    .then(items => {
        PF.closeLoading();
        let html = '<div class="table-responsive"><table class="table table-sm"><thead><tr><th>Item</th><th>Dipesan</th><th>Sudah Terima</th><th>Terima Sekarang</th></tr></thead><tbody>';
        items.forEach(item => {
            const sisa = item.qty_po - item.qty_received;
            html += `<tr>
                <td>${item.nama_item}<br><small class="text-muted font-mono">${item.satuan}</small></td>
                <td class="font-mono">${item.qty_po}</td>
                <td class="font-mono">${item.qty_received}</td>
                <td><input type="number" class="form-control form-control-sm font-mono terima-qty"
                    data-item-id="${item.id}" value="${sisa}" min="0" max="${sisa}" step="0.01"></td>
            </tr>`;
        });
        html += '</tbody></table></div>';
        document.getElementById('terimaItemsBody').innerHTML = html;
        new bootstrap.Modal(document.getElementById('modalTerima')).show();
    })
    .catch(() => { PF.closeLoading(); PF.error('Gagal memuat data'); });
}

function submitTerima() {
    const items = [];
    document.querySelectorAll('.terima-qty').forEach(el => {
        if (parseFloat(el.value) > 0) {
            items.push({ item_id: el.dataset.itemId, qty: el.value });
        }
    });

    if (!items.length) { PF.error('Tidak ada item yang diterima'); return; }

    PF.loading('Menyimpan penerimaan...');
    fetch(`/purchases/${currentPoId}/receive`, {
        method: 'POST',
        headers: { 'Content-Type': 'application/json', 'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content },
        body: JSON.stringify({
            items,
            tgl_terima: document.getElementById('terimaTgl').value,
            no_sj: document.getElementById('terimaSJ').value,
            catatan: document.getElementById('terimaCatatan').value
        })
    })
    .then(r => r.json())
    .then(d => {
        PF.closeLoading();
        if (d.success) {
            bootstrap.Modal.getInstance(document.getElementById('modalTerima')).hide();
            PF.success('Barang berhasil diterima. Stok telah diperbarui.');
            setTimeout(() => location.reload(), 1200);
        } else { PF.error(d.message || 'Gagal'); }
    })
    .catch(() => { PF.closeLoading(); PF.error('Koneksi gagal'); });
}
</script>
@endpush