<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Kwitansi Pembayaran #<?php echo e($receivable->receivable_number); ?></title>
    <script src="https://cdn.tailwindcss.com"></script>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        
        body {
            font-family: 'Arial', sans-serif;
            font-size: 12px;
            line-height: 1.4;
            color: #000;
            background: #f5f5f5;
            margin: 0;
            padding: 20px;
            min-height: 100vh;
        }
        
        .content-container {
            max-width: 180mm;
            margin: 0 auto;
            padding: 20px;
            background: #fff;
        }
        
        .header {
            text-align: center;
            border-bottom: 3px solid #000;
            padding-bottom: 15px;
            margin-bottom: 20px;
        }
        
        .company-name {
            font-size: 24px;
            font-weight: bold;
            margin-bottom: 5px;
        }
        
        .company-address {
            font-size: 11px;
            color: #666;
            margin-bottom: 3px;
        }
        
        .receipt-title {
            font-size: 20px;
            font-weight: bold;
            margin: 15px 0 10px 0;
            color: #e74c3c;
        }
        
        .receipt-info {
            display: flex;
            justify-content: space-between;
            margin-bottom: 20px;
        }
        
        .receipt-info-left, .receipt-info-right {
            width: 48%;
        }
        
        .info-row {
            display: flex;
            margin-bottom: 5px;
        }
        
        .info-label {
            font-weight: bold;
            width: 120px;
        }
        
        .info-value {
            flex: 1;
        }
        
        .payment-section {
            margin: 20px 0;
            padding: 15px;
            background-color: #f8f9fa;
            border: 2px solid #e74c3c;
            border-radius: 5px;
        }
        
        .payment-title {
            font-size: 16px;
            font-weight: bold;
            color: #e74c3c;
            margin-bottom: 10px;
            text-align: center;
        }
        
        .payment-details {
            display: flex;
            justify-content: space-between;
            margin-bottom: 15px;
        }
        
        .payment-left, .payment-right {
            width: 48%;
        }
        
        .amount-row {
            display: flex;
            justify-content: space-between;
            margin-bottom: 8px;
            padding: 5px 0;
        }
        
        .amount-label {
            font-weight: bold;
        }
        
        .amount-value {
            text-align: right;
            font-weight: bold;
        }
        
        .total-amount {
            border-top: 2px solid #e74c3c;
            padding-top: 10px;
            font-size: 14px;
            font-weight: bold;
            color: #e74c3c;
        }
        
        .remaining-amount {
            background-color: #fff3cd;
            border: 1px solid #ffeaa7;
            padding: 10px;
            margin-top: 10px;
            border-radius: 3px;
        }
        
        .product-info {
            margin: 20px 0;
            padding: 10px;
            background-color: #f9f9f9;
            border: 1px solid #ddd;
        }
        
        .product-title {
            font-weight: bold;
            margin-bottom: 5px;
        }
        
        .terms {
            margin-top: 30px;
            font-size: 10px;
            color: #666;
        }
        
        .signature-section {
            margin-top: 40px;
            display: flex;
            justify-content: space-between;
        }
        
        .signature-box {
            text-align: center;
            width: 200px;
        }
        
        .signature-line {
            border-bottom: 1px solid #000;
            height: 40px;
            margin-bottom: 5px;
        }
        
        .footer {
            margin-top: 30px;
            text-align: center;
            font-size: 10px;
            color: #666;
            border-top: 1px solid #ccc;
            padding-top: 10px;
        }
        
        
        @media print {
            body {
                margin: 0;
                padding: 10mm;
                font-size: 11px;
            }
            
            .content-container {
                max-width: 100%;
                margin: 0 auto;
                background: #fff;
                padding: 0;
                position: static;
                left: auto;
                transform: none;
            }
            
            body {
                background: #fff;
                padding: 10mm;
            }
            
            .header {
                margin-bottom: 15px;
                padding-bottom: 10px;
            }
            
            .company-name {
                font-size: 20px;
            }
            
            .company-address {
                font-size: 10px;
            }
            
            .receipt-title {
                font-size: 16px;
                margin: 10px 0 8px 0;
            }
            
            .receipt-info {
                margin-bottom: 15px;
            }
            
            .info-row {
                margin-bottom: 3px;
            }
            
            .product-info {
                margin: 15px 0;
                padding: 8px;
            }
            
            .payment-section {
                margin: 15px 0;
                padding: 10px;
            }
            
            .payment-title {
                font-size: 14px;
            }
            
            .terms {
                margin-top: 20px;
                font-size: 9px;
            }
            
            .signature-section {
                margin-top: 30px;
            }
            
            .footer {
                margin-top: 20px;
                font-size: 9px;
            }
            
            .no-print, .print-actions {
                display: none !important;
            }
            
            /* Memastikan alignment konsisten saat print */
            .receipt-info-left, .receipt-info-right {
                width: 48%;
            }
            
            .info-label {
                width: 120px;
                font-weight: bold;
            }
            
            .info-value {
                flex: 1;
            }
            
            /* Memastikan payment section rapi */
            .payment-details {
                display: flex;
                justify-content: space-between;
            }
            
            .payment-left, .payment-right {
                width: 48%;
            }
            
            .amount-row {
                display: flex;
                justify-content: space-between;
                margin-bottom: 5px;
            }
            
            .amount-label {
                font-weight: bold;
            }
            
            .amount-value {
                text-align: right;
                font-weight: bold;
            }
        }
    </style>
</head>
<body>
    <!-- Tombol Aksi -->
    <div class="fixed top-5 right-5 z-50 flex gap-3 print:hidden">
        <button onclick="window.print()" class="inline-flex items-center gap-2 px-4 py-2 bg-gradient-to-r from-blue-600 to-blue-700 hover:from-blue-700 hover:to-blue-800 text-white font-medium text-sm rounded-lg shadow-lg hover:shadow-xl transition-all duration-300 transform hover:-translate-y-0.5">
            <svg class="w-4 h-4" viewBox="0 0 24 24" fill="currentColor">
                <path d="M19 8H5c-1.66 0-3 1.34-3 3v6h4v4h12v-4h4v-6c0-1.66-1.34-3-3-3zm-3 11H8v-5h8v5zm3-7c-.55 0-1-.45-1-1s.45-1 1-1 1 .45 1 1-.45 1-1 1zm-1-9H6v4h12V3z"/>
            </svg>
            Print
        </button>
        <a href="<?php echo e(route('admin.print.receivable.receipt.download', $receivable)); ?>" class="inline-flex items-center gap-2 px-4 py-2 bg-gradient-to-r from-red-600 to-red-700 hover:from-red-700 hover:to-red-800 text-white font-medium text-sm rounded-lg shadow-lg hover:shadow-xl transition-all duration-300 transform hover:-translate-y-0.5">
            <svg class="w-4 h-4" viewBox="0 0 24 24" fill="currentColor">
                <path d="M14,2H6A2,2 0 0,0 4,4V20A2,2 0 0,0 6,22H18A2,2 0 0,0 20,20V8L14,2M18,20H6V4H13V9H18V20Z"/>
                <path d="M12,11L15,14H13V18H11V14H9L12,11Z"/>
            </svg>
            Download PDF
        </a>
    </div>
    
    <div class="content-container">
        <!-- Header Perusahaan -->
        <div class="header">
            <div class="company-name">POLJAM TECHNO WORKSHOP</div>
            <div class="company-address">Jl. Workshop No. 123, Jakarta</div>
            <div class="company-address">Telp: (021) 123-4567 | Email: info@poljamtechno.com</div>
        </div>
        
        <!-- Judul Kwitansi -->
        <div class="receipt-title">KWITANSI PEMBAYARAN</div>
        
        <!-- Informasi Kwitansi -->
        <div class="receipt-info">
            <div class="receipt-info-left">
                <div class="info-row">
                    <div class="info-label">No. Kwitansi:</div>
                    <div class="info-value"><?php echo e($receivable->receivable_number); ?></div>
                </div>
                <div class="info-row">
                    <div class="info-label">Tanggal:</div>
                    <div class="info-value"><?php echo e($receivable->created_at->format('d M Y')); ?></div>
                </div>
                <div class="info-row">
                    <div class="info-label">Customer:</div>
                    <div class="info-value"><?php echo e($receivable->order->customer_name); ?></div>
                </div>
                <div class="info-row">
                    <div class="info-label">Email:</div>
                    <div class="info-value"><?php echo e($receivable->order->customer_email); ?></div>
                </div>
                <div class="info-row">
                    <div class="info-label">Telepon:</div>
                    <div class="info-value"><?php echo e($receivable->order->phone_number); ?></div>
                </div>
            </div>
            <div class="receipt-info-right">
                <div class="info-row">
                    <div class="info-label">Order ID:</div>
                    <div class="info-value">#<?php echo e($receivable->order->id); ?></div>
                </div>
                <div class="info-row">
                    <div class="info-label">Status:</div>
                    <div class="info-value"><?php echo e($receivable->payment_status_label); ?></div>
                </div>
                <div class="info-row">
                    <div class="info-label">Jatuh Tempo:</div>
                    <div class="info-value"><?php echo e($receivable->due_date ? $receivable->due_date->format('d M Y') : '-'); ?></div>
                </div>
            </div>
        </div>
    
    <!-- Detail Produk -->
    <div class="product-info">
        <div class="product-title">Produk yang Dipesan:</div>
        <div><?php echo e($receivable->order->product->product_title ?? 'N/A'); ?></div>
        <div>Quantity: <?php echo e($receivable->order->quantity); ?> unit</div>
    </div>
    
    <!-- Detail Pembayaran -->
    <div class="payment-section">
        <div class="payment-title">RINCIAN PEMBAYARAN</div>
        <div class="payment-details">
            <div class="payment-left">
                <div class="amount-row">
                    <div class="amount-label">Total Harga:</div>
                    <div class="amount-value">Rp <?php echo e(number_format($receivable->total_amount, 0, ',', '.')); ?></div>
                </div>
                <div class="amount-row">
                    <div class="amount-label">Sudah Dibayar:</div>
                    <div class="amount-value">Rp <?php echo e(number_format($receivable->paid_amount, 0, ',', '.')); ?></div>
                </div>
            </div>
            <div class="payment-right">
                <div class="amount-row">
                    <div class="amount-label">Sisa Bayar:</div>
                    <div class="amount-value">Rp <?php echo e(number_format($receivable->remaining_amount, 0, ',', '.')); ?></div>
                </div>
                <div class="amount-row">
                    <div class="amount-label">Status:</div>
                    <div class="amount-value"><?php echo e($receivable->payment_status_label); ?></div>
                </div>
            </div>
        </div>
        
        <?php if($receivable->remaining_amount > 0): ?>
        <div class="remaining-amount">
            <strong>⚠️ PERHATIAN:</strong><br>
            Masih ada sisa pembayaran sebesar <strong>Rp <?php echo e(number_format($receivable->remaining_amount, 0, ',', '.')); ?></strong><br>
            Sisa pembayaran harus dilunasi saat mesin selesai atau dalam proses finishing.
        </div>
        <?php endif; ?>
    </div>
    
    <!-- Catatan -->
    <?php if($receivable->notes): ?>
    <div class="terms">
        <strong>Catatan:</strong><br>
        <?php echo e($receivable->notes); ?>

    </div>
    <?php endif; ?>
    
    <!-- Syarat & Ketentuan -->
    <div class="terms">
        <strong>Syarat & Ketentuan:</strong><br>
        1. Kwitansi ini sebagai bukti pembayaran DP yang sah<br>
        2. Sisa pembayaran harus dilunasi sebelum pengiriman<br>
        3. Estimasi pengerjaan: 30 hari kerja<br>
        4. Garansi 1 tahun untuk mesin yang diproduksi<br>
        5. Perubahan spesifikasi setelah produksi dimulai dikenakan biaya tambahan
    </div>
    
    <!-- Tanda Tangan -->
    <div class="signature-section">
        <div class="signature-box">
            <div>Customer</div>
            <div class="signature-line"></div>
            <div>(<?php echo e($receivable->order->customer_name); ?>)</div>
        </div>
        <div class="signature-box">
            <div>Admin Workshop</div>
            <div class="signature-line"></div>
            <div>(________________)</div>
        </div>
    </div>
    
        <!-- Footer -->
        <div class="footer">
            Terima kasih atas kepercayaan Anda kepada POLJAM TECHNO WORKSHOP<br>
            Kwitansi ini dicetak pada <?php echo e(now()->format('d M Y H:i')); ?>

        </div>
    </div>
</body>
</html>
<?php /**PATH /home/mikr8192/public_html/poljamtech.mikromart.org/poljamtech/resources/views/admin/print/receivable-receipt.blade.php ENDPATH**/ ?>