<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Invoice #<?php echo e($order->order_number); ?></title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        @font-face {
            font-family: 'AbrilFatface';
            font-style: normal;
            font-weight: 400;
            src: url('<?php echo e(storage_path("fonts/AbrilFatface-Regular.ttf")); ?>') format('truetype');
        }


        @font-face {
            font-family: 'Montserrat';
            font-style: normal;
            font-weight: 400;
            src: url('<?php echo e(storage_path("fonts/Montserrat-Regular.ttf")); ?>') format('truetype');
        }

        @font-face {
            font-family: 'Montserrat';
            /* font-style: normal; */
            font-weight: 700;
            src: url('<?php echo e(storage_path("fonts/Montserrat-Bold.ttf")); ?>') format('truetype');
        }


        body {
            font-family: Montserrat;
            font-style: normal;
            font-weight: 400;
            line-height: 1.6;
            background: white;
        }

        .invoice-container {
            max-width: 800px;
            margin: 0 auto;
            padding: 40px;
            background: white;
        }

        .invoice-header {
            display: flex;
            justify-content: space-between;
            align-items: flex-start;
            margin-bottom: 8px;
            border-bottom: 1px solid #1a1a1a;
            padding-bottom: 20px;
            gap: 40px;
        }

        .company-info {
            flex: 1;
        }

        .company-info h1 {
            font-family: AbrilFatface, Georgia, serif;
            font-weight: normal;
            font-size: 36px;
            margin-bottom: 5px;
        }

        .company-details h2 {
            font-family: AbrilFatface;
            font-weight: normal;
            font-size: 20px;
            /* margin-bottom: 10px; */
        }

        .company-details {
            font-size: 10px;
            line-height: 1.2;
        }

        .invoice-details h2 {
            font-family: AbrilFatface;
            font-weight: normal;
            font-size: 20px;
            /* margin-bottom: 10px; */
        }

        .invoice-details {
            text-align: right;
            flex-shrink: 0;
        }

        .detail-row {
            display: flex;
            justify-content: flex-end;
            font-size: 10px;
        }

        .detail-row strong {
            margin-right: 20px;
            width: 120px;
        }

        .detail-row span {
            width: 150px;
        }

        .customer-info h3 {
            font-family: AbrilFatface, Georgia, serif;
            font-weight: normal;
            font-size: 20px;
            /* text-transform: uppercase; */
            /* letter-spacing: 0.5px; */
        }

        .customer-info {
            display: flex;
            font-size: 12px;
        }

        .customer-info div {
            flex: 1;
        }



        .customer-info p {
            line-height: 1.2;
        }

        .section-title {
            font-family: AbrilFatface, Georgia, serif;
            font-weight: normal;
            font-size: 20px;
            /* margin-top: 20px; */
            padding-bottom: 12px;
        }

        table {
            width: 100%;
            border-collapse: collapse;
            margin-bottom: 20px;
        }

        thead {
            background-color: #f5f3f0;
        }

        th {
            font-size: 12px;
            text-transform: uppercase;
            letter-spacing: 0.5px;
            padding: 2px 16px;
            text-align: left;
        }

        td {
            padding: 0px 10px;
            font-size: 13px;
        }

        tr:nth-child(even) {
            background-color: #f5f3f0;
        }

        .item-name {
            font-family: AbrilFatface, Georgia, serif;
            font-weight: normal;
            padding: 0px 10px;
        }

        .item-label {
            font-size: 11px;
            text-transform: uppercase;
            letter-spacing: 0.5px;
            padding: 0px 20px;
            
        }

        .qty {
            text-align: center;
        }

        .price {
            text-align: right;
        }

        .totals-section {
            /* margin-bottom: 40px; */
            background-color: #e8dcd8;
            padding: 8px;
            border-radius: 20px;
        }

        .totals-box {
            margin-left: auto;
            width: 350px;
            padding: 0px 16px;
        }

        .total-row {
            display: flex;
            font-size: 13px;
            padding: 0px 16px;
        }

        .total-row.grand-total {
            font-family: AbrilFatface, Georgia, serif;
            font-size: 30px;
            padding: 0px 16px;
        }


        .footer-section {
            margin-top: 60px;
            /* padding-top: 30px; */
            /* border-top: 1px solid #e0e0e0; */
            font-size: 12px;
            text-align: center;
        }

        .thank-you {
            margin-bottom: 20px;
        }

        .page-break {
            page-break-after: always;
        }
    </style>
</head>

<body>
    <div class="invoice-container">
        <!-- Header -->
        <div class="invoice-header">
            <div class="company-info">

                <h1>Invoice</h1>
                <div class="company-details">
                    <h2>Additional Design</h2>
                    <p>registered trading name of</p>
                    <p>TWO TALES & CO. (PTY) LTD</p>
                    <p>REG: 2014/260746/07</p>
                    <p>VAT: NA</p>
                    <p>info@additional.co.za</p>
                    <p>additional.co.za</p>
                </div>
            </div>
            <div class="invoice-details">
                <h2>#<?php echo e($order->order_number); ?></h2>
                <div class="detail-row">
                    <strong>Date:</strong>
                    <span><?php echo e($order->created_at->format('d M Y')); ?></span>
                </div>
                <div class="detail-row">
                    <strong>Invoice Date:</strong>
                    <span><?php echo e(now()->format('d M Y')); ?></span>
                </div>
                <div class="detail-row">
                    <strong>Order Status:</strong>
                    <span style="text-transform: capitalize;"><?php echo e($order->status); ?></span>
                </div>
            </div>
        </div>

        <!-- Customer Info -->
        <div class="customer-info">
            <div>
                <h3>Customer Info:</h3>
                <p><?php echo e($order->customer_name); ?></p>
                <p><?php echo e($order->customer_email); ?></p>
                <p><?php echo e($order->customer_phone); ?></p>
                <p><?php echo e($order->shipping_address); ?></p>
            </div>
        </div>

        <!-- Items Table -->
        <div class="section-title">Order Items:</div>
        <table>
            <thead>
                <tr>
                    <th>Description</th>
                    <th class="qty">Quantity</th>
                    <th class="price">Unit Price</th>
                    <th class="price">Total</th>
                </tr>
            </thead>
            <tbody>
                <?php if(\Livewire\Mechanisms\ExtendBlade\ExtendBlade::isRenderingLivewireComponent()): ?><!--[if BLOCK]><![endif]--><?php endif; ?><?php $__currentLoopData = $order->items; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $item): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                <tr>
                    <td>
                        <div class="item-name"><?php echo e($item->product->name); ?></div>
                        <?php if(\Livewire\Mechanisms\ExtendBlade\ExtendBlade::isRenderingLivewireComponent()): ?><!--[if BLOCK]><![endif]--><?php endif; ?><?php if($item->type === 'wallpaper' && $item->length): ?>
                        <div class="item-label"><?php echo e($item->length); ?>m length</div>
                        <?php elseif($item->type === 'mural' && $item->width && $item->height): ?>
                        <div class="item-label"><?php echo e($item->width); ?>m × <?php echo e($item->height); ?>m (<?php echo e($item->width * $item->height); ?>m²)</div>
                        <?php endif; ?><?php if(\Livewire\Mechanisms\ExtendBlade\ExtendBlade::isRenderingLivewireComponent()): ?><!--[if ENDBLOCK]><![endif]--><?php endif; ?>
                        <?php if(\Livewire\Mechanisms\ExtendBlade\ExtendBlade::isRenderingLivewireComponent()): ?><!--[if BLOCK]><![endif]--><?php endif; ?><?php if($item->is_sample): ?>
                        <div class="item-label">Sample</div>
                        <?php endif; ?><?php if(\Livewire\Mechanisms\ExtendBlade\ExtendBlade::isRenderingLivewireComponent()): ?><!--[if ENDBLOCK]><![endif]--><?php endif; ?>
                        <?php if(\Livewire\Mechanisms\ExtendBlade\ExtendBlade::isRenderingLivewireComponent()): ?><!--[if BLOCK]><![endif]--><?php endif; ?><?php if($item->specification): ?>
                        <div class="item-label">Specification: <?php echo e($item->specification); ?></div>
                        <?php endif; ?><?php if(\Livewire\Mechanisms\ExtendBlade\ExtendBlade::isRenderingLivewireComponent()): ?><!--[if ENDBLOCK]><![endif]--><?php endif; ?>
                    </td>
                    <td class="qty"><?php echo e($item->quantity); ?></td>
                    <td class="price">R <?php echo e(number_format($item->price, 2)); ?></td>
                    <td class="price">R <?php echo e(number_format($item->quantity * $item->price, 2)); ?></td>
                </tr>
                <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?><?php if(\Livewire\Mechanisms\ExtendBlade\ExtendBlade::isRenderingLivewireComponent()): ?><!--[if ENDBLOCK]><![endif]--><?php endif; ?>
            </tbody>
        </table>

        <!-- Totals -->
        <div class="totals-section" style="text-align: right;">
            <div class="totals-box">
                <div class="total-row subtotal">
                    <strong>Subtotal</strong>
                    <span>R <?php echo e(number_format($order->items->sum(fn($item) => $item->quantity * $item->price), 2)); ?></span>
                </div>
                <?php if(\Livewire\Mechanisms\ExtendBlade\ExtendBlade::isRenderingLivewireComponent()): ?><!--[if BLOCK]><![endif]--><?php endif; ?><?php if($order->shipping_fee): ?>
                <div class="total-row shipping">
                    <strong>Shipping</strong>
                    <span>R <?php echo e(number_format($order->shipping_fee, 2)); ?></span>
                </div>
                <?php endif; ?><?php if(\Livewire\Mechanisms\ExtendBlade\ExtendBlade::isRenderingLivewireComponent()): ?><!--[if ENDBLOCK]><![endif]--><?php endif; ?>
                <div class="total-row grand-total">
                    Total
                    <span>R <?php echo e(number_format($order->total, 2)); ?></span>
                </div>
            </div>

        </div>
        <div style="text-align: center; background-color: #000; color:#fff; border-radius: 60px; font-size: 20px; margin-top: 20px; padding-bottom: 10px; width: 200px; margin-left: auto; margin-right: auto;">
            <strong>PAID VIA YOCO</strong>
        </div>

        <!-- Footer -->
        <div class="footer-section">
            <div class="thank-you">
                <p>ADDITIONAL DESIGN is a registered trading name of TWO TALES & CO. (PTY) LTD</p>
            </div>
            <!-- <p>This is an automatically generated invoice. No signature is required.</p> -->
            <!-- <p style="margin-top: 10px; color: #ccc;">Generated on <?php echo e(now()->format('d M Y H:i')); ?></p> -->
        </div>
    </div>
</body>

</html><?php /**PATH /var/www/additional_design/resources/views/invoices/order-invoice.blade.php ENDPATH**/ ?>