<?= $this->extend('layouts/owner') ?>

<?= $this->section('content') ?>

<style>
    /* Styling khusus untuk cetak halaman (Print-friendly) */
    @media print {
        body * {
            visibility: hidden;
        }
        #printable-invoice, #printable-invoice * {
            visibility: visible;
        }
        #printable-invoice {
            position: absolute;
            left: 0;
            top: 0;
            width: 100%;
        }
        .no-print {
            display: none !important;
        }
        .card {
            border: none !important;
            box-shadow: none !important;
        }
    }
    
    /* Soft badge styling */
    .bg-success-soft {
        background-color: rgba(40, 167, 69, 0.1) !important;
        color: #28a745 !important;
    }
    .text-xs {
        font-size: 0.75rem;
    }
</style>

<div class="container-fluid py-4">
    <!-- Header Page dengan Tombol Aksi -->
    <div class="d-flex justify-content-between align-items-center mb-4 no-print">
        <div>
            <h4 class="mb-0 fw-bold text-dark"><?= esc($title ?? 'Detail Pembelian') ?></h4>
            <nav aria-label="breadcrumb">
                <ol class="breadcrumb mb-0">
                    <li class="breadcrumb-item"><a href="<?= base_url('owner/material') ?>" class="text-muted text-decoration-none">Material</a></li>
                    <li class="breadcrumb-item active text-primary" aria-current="page">Detail PO</li>
                </ol>
            </nav>
        </div>
        <div class="d-flex gap-2">
            <a href="<?= base_url('owner/material') ?>" class="btn btn-light border d-flex align-items-center gap-2">
                <i class="fas fa-arrow-left"></i> Kembali
            </a>
            <button onclick="window.print()" class="btn btn-primary d-flex align-items-center gap-2">
                <i class="fas fa-print"></i> Cetak PO
            </button>
        </div>
    </div>

    <!-- Invoice Card Container -->
    <div class="card border-0 shadow-sm rounded-3 overflow-hidden" id="printable-invoice">
        <div class="card-body p-4 p-md-5">
            
            <!-- Metadata Row -->
            <div class="row pb-4 mb-4 border-bottom">
                <div class="col-md-6 mb-3 mb-md-0">
                    <span class="text-uppercase text-xs text-muted fw-bold d-block mb-2">Informasi Supplier</span>
                    <h5 class="fw-bold text-primary mb-1"><?= esc($purchase['nama_supplier'] ?? '-') ?></h5>
                    <p class="text-muted mb-0 fs-6">
                        <i class="fas fa-map-marker-alt text-danger me-1"></i> <?= esc($purchase['alamat'] ?? '-') ?>
                    </p>
                </div>
                <div class="col-md-6 text-md-end">
                    <span class="badge bg-success-soft px-3 py-2 rounded-pill fw-semibold mb-2">Approved Purchase</span>
                    <h5 class="fw-bold mb-1">No. PO: <span class="text-dark"><?= esc($purchase['nomor_purchase'] ?? '-') ?></span></h5>
                    <p class="text-muted mb-0">Tanggal: <?= isset($purchase['tanggal_beli']) ? date('d M Y', strtotime($purchase['tanggal_beli'])) : '-' ?></p>
                </div>
            </div>

            <!-- Table Section -->
            <div class="table-responsive">
                <table class="table table-hover align-middle">
                    <thead class="table-light">
                        <tr>
                            <th class="py-3 px-4" style="width: 50%;">Nama Item / Produk</th>
                            <th class="py-3 text-center" style="width: 10%;">Qty</th>
                            <th class="py-3 text-end" style="width: 20%;">Harga Satuan</th>
                            <th class="py-3 text-end" style="width: 20%;">Total</th>
                        </tr>
                    </thead>
                    <tbody>
                        <?php 
                        $grand_total = 0;
                        if (!empty($items) && is_array($items)):
                            foreach($items as $i): 
                                $qty = floatval($i['qty'] ?? 0);
                                $harga = floatval($i['harga_beli'] ?? 0);
                                $subtotal = $qty * $harga;
                                $grand_total += $subtotal;
                        ?>
                        <tr>
                            <td class="py-3 px-4">
                                <div class="fw-semibold text-dark"><?= esc($i['nama_product'] ?? '-') ?></div>
                            </td>
                            <td class="py-3 text-center"><?= esc($qty) ?></td>
                            <td class="py-3 text-end">Rp <?= number_format($harga, 0, ',', '.') ?></td>
                            <td class="py-3 text-end fw-semibold text-dark">Rp <?= number_format($subtotal, 0, ',', '.') ?></td>
                        </tr>
                        <?php 
                            endforeach; 
                        else:
                        ?>
                        <tr>
                            <td colspan="4" class="text-center py-4 text-muted">Tidak ada data item ditemukan.</td>
                        </tr>
                        <?php endif; ?>
                    </tbody>
                    
                    <tfoot class="table-light border-top">
                        <tr>
                            <td colspan="3" class="text-end fw-bold py-3 text-uppercase">Grand Total :</td>
                            <td class="text-end fw-bold py-3 text-primary fs-5">
                                Rp <?= number_format($grand_total, 0, ',', '.') ?>
                            </td>
                        </tr>
                    </tfoot>
                </table>
            </div>

            <!-- Footer Notes -->
            <div class="mt-5 pt-4 border-top text-muted small">
                <div class="row">
                    <div class="col-md-8">
                        <p class="mb-1"><strong>Catatan Internal:</strong> Pastikan fisik barang yang diterima sesuai dengan jumlah Qty di atas sebelum mengonfirmasi penyimpanan gudang.</p>
                        <p class="text-xs mb-0">Invoice ini digenerate otomatis oleh sistem dan berlaku sebagai dokumen bukti resmi transaksi.</p>
                    </div>
                    <div class="col-md-4 text-end d-none d-print-block">
                        <div class="mt-4">
                            <p class="mb-5">Disetujui Oleh,</p>
                            <p class="fw-bold text-dark border-top pt-2 d-inline-block px-4">Owner / Management</p>
                        </div>
                    </div>
                </div>
            </div>
            
        </div>
    </div>
</div>

<?= $this->endSection() ?>