<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Material Request - <?php echo $mr['MRNo']; ?></title>
    <style>
        /* =========================
           PRINT STYLES
        ========================= */
        @media print {
            body {
                margin: 0;
                padding: 0;
                font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
                font-size: 12px;
                color: #000;
                background: #fff;
            }
            
            .no-print {
                display: none !important;
            }
            
            .print-header {
                display: block !important;
            }
            
            table {
                page-break-inside: auto;
            }
            tr {
                page-break-inside: avoid;
                page-break-after: auto;
            }
            thead {
                display: table-header-group;
            }
            tfoot {
                display: table-footer-group;
            }
        }

        /* =========================
           GENERAL STYLES
        ========================= */
        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            font-size: 12px;
            line-height: 1.4;
            color: #333;
            margin: 20px;
            background: #f5f5f5;
        }

        .print-container {
            max-width: 210mm;
            min-height: 297mm;
            margin: 0 auto;
            background: white;
            padding: 15mm;
            box-shadow: 0 0 10px rgba(0,0,0,0.1);
            position: relative;
        }

        /* =========================
           HEADER SECTION
        ========================= */
        .header-section {
            display: flex;
            justify-content: space-between;
            align-items: flex-start;
            margin-bottom: 25px;
            padding-bottom: 15px;
            border-bottom: 2px solid #2c3e50;
        }

        .company-info {
            flex: 1;
        }

        .company-info h2 {
            color: #2c3e50;
            margin: 0 0 5px 0;
            font-size: 22px;
        }

        .company-info p {
            margin: 2px 0;
            color: #555;
        }

        .document-info {
            text-align: right;
        }

        .document-title {
            font-size: 24px;
            font-weight: bold;
            color: #2980b9;
            margin: 0 0 10px 0;
        }

        .document-meta {
            font-size: 11px;
            color: #666;
        }

        /* =========================
           VENDOR & MR INFO
        ========================= */
        .info-section {
            display: flex;
            justify-content: space-between;
            margin-bottom: 20px;
        }

        .vendor-info, .mr-info {
            width: 48%;
        }

        .info-box {
            background: #f8f9fa;
            border: 1px solid #dee2e6;
            border-radius: 5px;
            padding: 15px;
        }

        .info-box h3 {
            color: #2c3e50;
            margin-top: 0;
            padding-bottom: 8px;
            border-bottom: 1px solid #dee2e6;
            font-size: 14px;
        }

        .info-row {
            display: flex;
            margin-bottom: 8px;
        }

        .info-label {
            font-weight: 600;
            min-width: 120px;
            color: #555;
        }

        .info-value {
            color: #000;
            flex: 1;
        }

        /* =========================
           ITEMS TABLE
        ========================= */
        .items-table {
            width: 100%;
            border-collapse: collapse;
            margin-bottom: 20px;
        }

        .items-table th {
            background: #2c3e50;
            color: white;
            text-align: center;
            padding: 8px 5px;
            font-weight: 600;
            border: 1px solid #1a252f;
        }

        .items-table td {
            padding: 6px 5px;
            border: 1px solid #dee2e6;
            vertical-align: middle;
        }

        /* Column width adjustments */
        .items-table th:nth-child(1) { width: 5%; }    /* # */
        .items-table th:nth-child(2) { width: 30%; }   /* Item Code/Description */
        .items-table th:nth-child(3) { width: 8%; }    /* Unit */
        .items-table th:nth-child(4) { width: 10%; }   /* Quantity */
        .items-table th:nth-child(5) { width: 12%; }   /* Unit Price */
        .items-table th:nth-child(6) { width: 15%; }   /* Amount */
        .items-table th:nth-child(7) { width: 10%; }   /* VAT Amount */
        .items-table th:nth-child(8) { width: 10%; }   /* Net Amount */

        .items-table tbody tr:nth-child(even) {
            background-color: #f8f9fa;
        }

        .text-right {
            text-align: right;
        }

        .text-center {
            text-align: center;
        }

        .text-left {
            text-align: left;
        }

        /* =========================
           TOTALS SECTION
        ========================= */
        .totals-section {
            margin-top: 20px;
            margin-left: auto;
            width: 300px;
        }

        .total-row {
            display: flex;
            justify-content: space-between;
            padding: 6px 0;
            border-bottom: 1px solid #dee2e6;
        }

        .total-label {
            font-weight: 600;
            color: #555;
        }

        .total-value {
            font-weight: 600;
            color: #000;
        }

        .grand-total {
            background: #e3f2fd;
            padding: 8px;
            border: 1px solid #2196f3;
            margin-top: 5px;
        }

        /* =========================
           TERMS & FOOTER
        ========================= */
        .terms-section {
            margin-top: 30px;
            padding-top: 15px;
            border-top: 2px solid #2c3e50;
        }

        .terms-row {
            display: flex;
            gap: 30px;
            margin-bottom: 15px;
        }

        .terms-box {
            flex: 1;
        }

        .terms-box h4 {
            color: #2c3e50;
            margin-top: 0;
            margin-bottom: 8px;
            font-size: 13px;
        }

        .terms-content {
            background: #f8f9fa;
            border: 1px solid #dee2e6;
            border-radius: 4px;
            padding: 10px;
            min-height: 60px;
            font-size: 11px;
            white-space: pre-line;
        }

        .footer {
            margin-top: 40px;
            padding-top: 15px;
            border-top: 1px solid #dee2e6;
            text-align: center;
            color: #666;
            font-size: 10px;
        }

        /* Signatures - For 2 boxes */
        .signatures {
            display: flex;
            justify-content: space-between;
            margin-top: 40px;
            padding-top: 15px;
            border-top: 1px solid #ccc;
        }

        .signature-box {
            text-align: center;
            width: 45%;
        }

        .signature-line {
            margin-top: 40px;
            border-top: 1px solid #000;
            width: 100%;
        }

        .signature-label {
            margin-top: 5px;
            font-size: 11px;
            font-weight: 600;
        }

        /* =========================
           PRINT BUTTONS
        ========================= */
        .print-actions {
            text-align: center;
            margin: 20px 0;
            padding: 15px;
            background: #f8f9fa;
            border-radius: 5px;
        }

        .print-btn {
            background: #28a745;
            color: white;
            border: none;
            padding: 10px 20px;
            border-radius: 4px;
            cursor: pointer;
            font-size: 14px;
            margin: 0 5px;
            transition: background 0.3s;
        }

        .print-btn:hover {
            background: #218838;
        }

        .back-btn {
            background: #6c757d;
            color: white;
            border: none;
            padding: 10px 20px;
            border-radius: 4px;
            cursor: pointer;
            font-size: 14px;
            text-decoration: none;
            display: inline-block;
        }

        .back-btn:hover {
            background: #5a6268;
        }

        .close-btn {
            background: #dc3545;
        }

        .close-btn:hover {
            background: #c82333;
        }

        /* Mechanic textarea style for print */
        .mechanic-print {
            border: none;
            background: transparent;
            padding: 0;
            margin: 0;
            font-size: 12px;
            line-height: 1.4;
            color: #000;
            width: 100%;
            resize: none;
            overflow: hidden;
            font-family: inherit;
        }
    </style>
</head>
<body>
    <!-- Print Action Buttons -->
    <div class="no-print print-actions">
        <button onclick="window.print()" class="print-btn">
            🖨️ Print
        </button>
        <a href="<?php echo base_url('MaterialRequestWorkShop/MaterialRequest'); ?>" class="back-btn">
            ↩ Back to List
        </a>
        <button onclick="window.close()" class="print-btn close-btn">
            ✖ Close
        </button>
    </div>

    <!-- Print Document -->
    <div class="print-container">
        <!-- Header Section -->
        <div class="header-section">
            <div class="company-info">
                <h2><?php echo htmlspecialchars($companyName); ?></h2>
                <p><?php echo htmlspecialchars($companyAddress); ?></p>
                <p>📞 <?php echo htmlspecialchars($companyPhone); ?> | ✉ <?php echo htmlspecialchars($companyEmail); ?></p>
            </div>
            <div class="document-info">
                <h1 class="document-title">MATERIAL REQUEST WORK SHOP</h1>
            </div>
        </div>

        <!-- Vendor & MR Info -->
        <div class="info-section">
            <!-- Job Order Information -->
            <div class="vendor-info">
                <div class="info-box">
                    <h3>JOBORDER INFORMATION</h3>
                    <div class="info-row">
                        <span class="info-label">JobOrder No:</span>
                        <span class="info-value"><?php echo htmlspecialchars((string)($mr['jobCardNo'] ?? 'N/A')); ?></span>
                    </div>
                    <div class="info-row">
                        <span class="info-label">JobOrder Date:</span>
                        <span class="info-value">
                            <?php echo !empty($mr['assignDate']) ? date('d-m-Y', strtotime($mr['assignDate'])) : 'N/A'; ?>
                        </span>
                    </div>
                    <div class="info-row">
                        <span class="info-label">Mechanic(s):</span>
                        <span class="info-value">
                            <?php 
                            if (!empty($mr['all_mechanics'])) {
                                $mechanics = explode(', ', $mr['all_mechanics']);
                                foreach ($mechanics as $index => $mech) {
                                    echo htmlspecialchars(trim($mech));
                                    if ($index < count($mechanics) - 1) {
                                        echo '<br>';
                                    }
                                }
                            } else {
                                echo 'N/A';
                            }
                            ?>
                        </span>
                    </div>
                    <div class="info-row">
                        <span class="info-label">Vehicle No:</span>
                        <span class="info-value"><?php echo htmlspecialchars((string)($mr['vehicleNo'] ?? 'N/A')); ?></span>
                    </div>
                </div>
            </div>

            <!-- MR Information -->
            <div class="mr-info">
                <div class="info-box">
                    <h3>REQUEST INFORMATION</h3>
                    <div class="info-row">
                        <span class="info-label">MR Number:</span>
                        <span class="info-value"><strong><?php echo htmlspecialchars($mr['MRNo']); ?></strong></span>
                    </div>
                    <div class="info-row">
                        <span class="info-label">Date:</span>
                        <span class="info-value"><?php echo date('d-M-Y', strtotime($mr['MRDate'] ?? date('Y-m-d'))); ?></span>
                    </div>
                    <div class="info-row">
                        <span class="info-label">Currency:</span>
                        <span class="info-value"><?php echo htmlspecialchars($mr['currency'] ?? 'N/A'); ?></span>
                    </div>
                </div>
            </div>
        </div>

        <!-- Items Table -->
        <h3 style="color: #2c3e50; margin-bottom: 10px;">REQUESTED ITEMS</h3>
        <table class="items-table">
            <thead>
                <tr>
                    <th width="5%">#</th>
                    <th width="30%">Item Code/Description</th>
                    <th width="10%">Quantity</th>
                    <th width="8%">Unit</th>
                    <th width="12%">Unit Price</th>
                    <th width="15%">Amount</th>
                    <th width="10%">VAT Amount</th>
                    <th width="10%">Net Amount</th>
                </tr>
            </thead>
            <tbody>
                <?php 
                $i = 1;
                $totalQty = 0;
                $totalAmount = 0;
                $totalVat = 0;
                $totalNet = 0;
                
                if (!empty($items)) {
                    foreach ($items as $item): 
                        $quantity = $item['quantity'] ?? 0;
                        $amount = $item['amount'] ?? 0;
                        $vatAmount = $item['vatAmount'] ?? 0;
                        $amountWithVat = $item['amountWithVat'] ?? 0;
                        
                        $totalQty += $quantity;
                        $totalAmount += $amount;
                        $totalVat += $vatAmount;
                        $totalNet += $amountWithVat;
                ?>
                <tr>
                    <td class="text-center"><?php echo $i++; ?></td>
                    <td class="text-left">
                        <?php 
                        $itemCode = $item['itemCode'] ?? '';
                        $itemName = $item['itemName'] ?? '';
                        if (!empty($itemCode) || !empty($itemName)) {
                            echo htmlspecialchars($itemCode) . ' / ' . htmlspecialchars($itemName);
                        }
                        
                        if (!empty($item['itemDescription'])) { ?>
                            <br>
                            <span style="font-size: 10px; color: #666; font-style: italic;">
                                <?php echo htmlspecialchars($item['itemDescription']); ?>
                            </span>
                        <?php } ?>
                    </td>
                    <td class="text-center"><?php echo number_format($quantity, 2); ?></td>
                    <td class="text-center"><?php echo htmlspecialchars($item['unitName'] ?? 'N/A'); ?></td>
                    <td class="text-right"><?php echo number_format($item['unitPrice'] ?? 0, 2); ?></td>
                    <td class="text-right"><?php echo number_format($amount, 2); ?></td>
                    <td class="text-right"><?php echo number_format($vatAmount, 2); ?></td>
                    <td class="text-right"><?php echo number_format($amountWithVat, 2); ?></td>
                </tr>
                <?php 
                    endforeach; 
                } else {
                ?>
                <tr>
                    <td colspan="8" class="text-center" style="padding: 20px;">
                        No items found
                    </td>
                </tr>
                <?php } ?>
            </tbody>
        </table>

        <!-- Totals Section -->
        <div class="totals-section">
            <div class="total-row">
                <span class="total-label">Sub Total:</span>
                <span class="total-value"><?php echo number_format($totalAmount, 2); ?></span>
            </div>
            <div class="total-row">
                <span class="total-label">Total VAT:</span>
                <span class="total-value"><?php echo number_format($totalVat, 2); ?></span>
            </div>
            <div class="grand-total">
                <div class="total-row">
                    <span class="total-label" style="font-size: 14px;">GRAND TOTAL:</span>
                    <span class="total-value" style="font-size: 16px; color: #2c3e50;">
                        <?php echo number_format($totalNet, 2); ?>
                    </span>
                </div>
            </div>
        </div>

        <!-- Terms Section -->
        <div class="terms-section">
            <div class="terms-row">
                <div class="terms-box">
                    <h4>Payment Terms</h4>
                    <div class="terms-content">
                        <?php 
                        $paymentTerms = $mr['paymentTerms'] ?? 'Not specified';
                        $paymentTerms = strip_tags($paymentTerms);
                        $paymentTerms = html_entity_decode($paymentTerms, ENT_QUOTES | ENT_HTML5, 'UTF-8');
                        $paymentTerms = str_replace(['&nbsp;', ' ', chr(0xC2).chr(0xA0)], ' ', $paymentTerms);
                        $paymentTerms = preg_replace('/\s+/', ' ', $paymentTerms);
                        $paymentTerms = trim($paymentTerms);
                        if (empty($paymentTerms) || $paymentTerms === ' ') {
                            $paymentTerms = 'Not specified';
                        }
                        echo htmlspecialchars($paymentTerms); 
                        ?>
                    </div>
                </div>
                <div class="terms-box">
                    <h4>Delivery Terms</h4>
                    <div class="terms-content">
                        <?php 
                        $deliveryTerms = $mr['deliveryTerms'] ?? 'Not specified';
                        $deliveryTerms = strip_tags($deliveryTerms);
                        $deliveryTerms = html_entity_decode($deliveryTerms, ENT_QUOTES | ENT_HTML5, 'UTF-8');
                        $deliveryTerms = str_replace(['&nbsp;', ' ', chr(0xC2).chr(0xA0)], ' ', $deliveryTerms);
                        $deliveryTerms = preg_replace('/\s+/', ' ', $deliveryTerms);
                        $deliveryTerms = trim($deliveryTerms);
                        if (empty($deliveryTerms) || $deliveryTerms === ' ') {
                            $deliveryTerms = 'Not specified';
                        }
                        echo htmlspecialchars($deliveryTerms); 
                        ?>
                    </div>
                </div>
            </div>
        </div>

        <!-- Signatures -->
        <div class="signatures">
            <div class="signature-box">
                <div class="signature-line"></div>
                <div class="signature-label">Prepared By</div>
            </div>
            <div class="signature-box">
                <div class="signature-line"></div>
                <div class="signature-label">Approved By</div>
            </div>
        </div>

        <!-- Footer -->
        <div class="footer">
            <p>This is a computer generated document. No signature required for validation.</p>
            <p>Document ID: <?php echo htmlspecialchars($mr['MRNo']); ?> | Printed on: <?php echo htmlspecialchars($printDate); ?></p>
        </div>
    </div>

    <script>
        window.onload = function() {
            // Auto-expand mechanic textarea if needed
            var mechanicTextarea = document.getElementById('mechanicPrint');
            if (mechanicTextarea) {
                mechanicTextarea.style.height = 'auto';
                mechanicTextarea.style.height = mechanicTextarea.scrollHeight + 'px';
            }
        };
    </script>
</body>
</html>