<!DOCTYPE html>
<html lang="en">
<head>
    <title>Document</title>
    <style>
        body {
            font-family: sun-extA;
        }
       img.logo {
            top: 10px;
       }
       img {
           height: 7em;
           width: 18%;
       }
       
       .title {
           font-size: 2em;
           font-weight: 1200;
       }
       .details {
            display: inline-block;
            position: relative;
            
       }
       .sub-title {
           font-size: 1.3em;
           font-weight: bold;
       }
       .label {
           font-size: 1.1em;
           font-weight: bold;
       }
       .bill-to {
           margin-top: 30px;
       }
       table {
            width: 100%;
            vertical-align: top;
        }
        th {
            border-bottom: 1px solid black;
        }
        td {
            padding: 0.4em;
            text-align: center;
        }
        td.description, th.description {
            text-align: justify;
            max-width: 40em;    
        }
        td.stock-code, th.stock-code {
            text-align: center;
        }
        th {
            vertical-align: middle;
        }

        td, th {
            margin-top: 0.6em;
            margin-right: 0.6em;
        }
        .subtotal td {
            border-top: 1px solid black;
        }
        .total {
            border-top: 1px solid black;
            border-bottom: 3px double black;
            font-weight: bolder;
        }
        .address {
        } */
        td.header-logo {
            text-align: left;
            width: fit-content;
        }
        td.header-cief-address {
            text-align: left;
        }
        td.header-details {
            text-align: left;
            vertical-align: top;
        }
        td.bill-to {
            text-align: left;
        }
        td.address {
            text-align: left;
        }
        .right {
            text-align: right;
        }

    </style>
</head>
<body>
    <table>
        <tr>
            <td class="header-logo">
            <img src="https://firebasestorage.googleapis.com/v0/b/edmondtm-1d8ed.appspot.com/o/logo.png?alt=media&token=e8458dc5-b9cd-4db4-b2c9-b953c0b9d09e" alt="logo" id="logo" class="">
            </td>
            <td class="header-cief-address">
                <span class="company-name">
                    <strong>
                        CIEF WORLDWIDE SDN BHD    
                    </strong>
                </span> 
                <span class="company-reg">(1134596-M)</span><br>
                Malaysian Global Innovation &amp; Creativity Center <br>
                Level 1 CWS, Block 3730, Persiaran APEC, <br>
                63000 Cyberjaya, Malaysian. <br>
                Tel: 018-2909252
            </td>
            <td class="header-details">
                <div class="title">
                    <strong>
                        {{$title}}
                    </strong>
                </div>
                @if($detail['ei'])
                    <div class="number">EI#: {{$detail['ei']}}</div>
                @endif
                @if($detail['edo'])
                    <div class="number">EDO#: {{$detail['edo']}}</div>
                @endif
                <div class="ref">Ref#: {{$detail['ref']}}</div>
                <div class="date">Date: {{$detail['date']}}</div>
                <div>&nbsp;</div>
            </div>
        </td>
        <tr>
            <td colspan="3" class="bill-to">
                <span class="sub-title">
                    Bill To
                </span>        
            </td>
        </tr>
        <tr>
            <td colspan="3" class="address">
                <div class="label">
                    {{$billto['buyer_company']}}
                </div>
                <div class="address">
                    {{$billto['address']}}
                </div>
                <div>
                    Phone: {{$billto['phone']}}
                </div>
            </td>
        </tr>
    </table>
    
    
    <br>
    <br>
    <table style="overflow: wrap" autosize="1">
        <thead>
            <tr>
                <th width="5%">No</th>
                <th class="stock-code" width="10%">Stock Code</th>
                <th class="description">Description</th>
                <th width="10%">Quantity</th>
                <th width="12%">Unit Price (RM)</th>
                <th width="10%">Total Amount<br>(RM)</th>
            </tr>
        </thead>
        <tbody>
            @foreach ($lines as $line)
            <tr>
                <td width="5%">{{$line->order}}</td>
                <td class="stock-code" width="10%">{{$line->stock_code}}</td>
                <td class="description" >{{$line->description}}</td>
                <td width="10%">{{$line->quantity}}</td>
                <td width="12%">{{number_format($line->unit_price_rm, 2)}}</td>
                <td width="20%" class="right">{{number_format($line->total, 2)}}</td>
            </tr>
            @endforeach
        </tbody>
        <tfoot>
            <tr class="subtotal">
                <td colspan="4"></td>
                <td class="right">Subtotal</td>
                <td class="right">{{ number_format($subtotal, 2) }}</td>
            </tr>
            @if($adjustment)
            <tr class="adjustment">
                <td colspan="3"></td>
                <td colspan="2" class="right">Adjustment</td>
                <td class="right">{{ number_format($adjustment, 2) }}</td>
            </tr>
            @endif
            @if($billingcharges)
            <tr class="billingcharges">
                <td colspan="4"></td>
                <td class="right">Billing Charges</td>
                <td class="right">{{ number_format($billingcharges, 2) }}</td>
            </tr>
            @endif
            <tr>
                <td colspan="4"></td>
                <td class="right">Total</td>
                <td class="total right">{{ number_format($total, 2) }}</td>
            </tr>
        </tfoot>
    </table>


</body>
</html>