<html>
    <head>
        <meta charset="utf-8">
        <title>Print Preview</title>
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/3.0.3/normalize.min.css">
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">
        <style>
            body{line-height: 1; background-color: rgba(72, 72, 72, 0.63);}
            .container {min-width: 8.0in;}
            section {
                clear: both;
            }
            div.horizaontal-divider {
                border-bottom: 1px solid #e5e5e5;
                clear: both;
                display: block;
                width: 100%;
                margin: 8px 0px;
            }
            .sticker{
                width: 3.8in;
                height: 2.3in;
                padding: 0.02in;
                background-color: #ffffff;
                margin: 0 auto;
                position: relative;
                /*border: 1px solid #000000;*/
            }
            .sticker>div{
                width: 100%;
            }
            .sticker>div>div:first-child{
                width: 0.6in;
            }
            .sticker>div>div:nth-child(2n+1){
                font-weight: bolder;
            }
            .sticker>div>div{
                float: left;
                vertical-align: bottom;
            }
            table{width: 100%;}
            tr>td:nth-child(2n+1){
                font-weight: bold;
            }
        </style>
    </head>
    <body>
        <div class="container">
            <div class="modal fade bs-example-modal-lg"
                 id="sticker-panel"
                 tabindex="-1"
                 role="dialog"
                 aria-labelledby="myModalLabel"
                 aria-hidden="true">
                <div class="modal-dialog">
                    <div class="modal-content" >
                        <div class="modal-header">
                            {#<button type="button" class="close" data-dismiss="modal">
                                <span aria-hidden="true">&times;</span>
                                <span class="sr-only">Cancel</span>
                            </button>#}
                            <a href="#" onclick="return xepOnline.Formatter.Format('print-area',
                            {render: 'download', pageWidth:'3.9in', pageHeight:'2.4in', pageMargin: '0.05in'});"
                               class="btn btn-primary btn-lg pull-right">
                                <span class="glyphicon glyphicon-print"></span>
                            </a>
                            <h4 class="modal-title">Success!!!</h4>
                        </div>
                        <div class="modal-body">
                            <div class="sticker" id="print-area">
                                {% if wflag %}
                                    <table>
                                        <tbody>
                                        <tr>
                                            <td colspan="2">
                                                <img id="as-logo" class="img" width="150px"/>
                                            </td>
                                            <td colspan="2">
                                                <table>
                                                    <tbody>
                                                    <tr>
                                                        <td>Created:</td>
                                                        <td>{{ entity.createdat ? entity.createdat|date("m/d/Y") : '- - -' }}</td>
                                                    </tr>
                                                    <tr>
                                                        <td>Sup:</td>
                                                        <td style="font-size: 12px;">{{ entity.supervisor ? entity.supervisor : '- - -' }}</td>
                                                    </tr>
                                                    </tbody>
                                                </table>
                                            </td>
                                        </tr>
                                        <tr>
                                            <td>WO:</td>
                                            <td style="font-size: 25px; font-weight: bolder;">{{ entity.number ? entity.number : '- - -' }}</td>
                                            <td colspan="2">
                                                <img id="barcode" class="img" width="150px" height="80px"/>
                                            </td>
                                        </tr>
                                        <tr>
                                            <td>Model:</td>
                                            <td colspan="3" style="font-size: 12px;">- - -</td>
                                        </tr>
                                        <tr>
                                            <td>Dest:</td>
                                            <td>{{ entity.saletype ? entity.saletype.saletype : '- - -' }}</td>
                                            <td>Cond:</td>
                                            <td>{{ entity.worktype ? entity.worktype.worktype : '- - -' }}</td>
                                        </tr>
                                        <tr>
                                            <td>Client:</td>
                                            <td style="font-size: 12px;">{{ entity.client ?  entity.client : '- - -'}}</td>
                                            <td>Delivery:</td>
                                            <td>{{ entity.deliverydate ? entity.deliverydate|date('m/d/Y') : '- - -' }}</td>
                                        </tr>
                                        </tbody>
                                    </table>
                                {% else %}
                                    <table>
                                        <tbody>
                                            <tr>
                                                <td colspan="2">
                                                    <img id="as-logo" class="img" width="150px"/>
                                                </td>
                                                <td colspan="2">
                                                    <table>
                                                        <tbody>
                                                            <tr>
                                                                <td>Created:</td>
                                                                <td>{{ entity.workorder.createdat ? entity.workorder.createdat|date("m/d/Y") : '- - -' }}</td>
                                                            </tr>
                                                            <tr>
                                                                <td>Sup:</td>
                                                                <td style="font-size: 12px;">{{ entity.workorder.supervisor ? entity.workorder.supervisor : '- - -' }}</td>
                                                            </tr>
                                                        </tbody>
                                                    </table>
                                                </td>
                                            </tr>
                                            <tr>
                                                <td colspan="2">
                                                    <table>
                                                        <tbody>
                                                            <tr>
                                                                <td>WO:</td>
                                                                <td style="font-size: 25px; font-weight: bolder;">{{ entity.workorder ? entity.workorder.number : '- - -' }}-{{ entity.asnumber }}</td>
                                                            </tr>
                                                            <tr>
                                                                <td>Stock:</td>
                                                                <td style="font-size: 25px; font-weight: bolder;">{{ entity.stock ? entity.stock.code : '- - -' }}</td>
                                                            </tr>
                                                        </tbody>
                                                    </table>
                                                </td>
                                                <td colspan="2">
                                                    <img id="barcode" class="img" width="150px" height="80px"/>
                                                </td>
                                            </tr>
                                            <tr>
                                                <td>Model:</td>
                                                <td colspan="3" style="font-size: 12px;">{{ entity.stock.model ? entity.stock.model : '- - -' }}</td>
                                            </tr>
                                            <tr>
                                                <td>Dest:</td>
                                                <td>{{ entity.saletype ? entity.saletype.saletype : '- - -' }}</td>
                                                <td>Cond:</td>
                                                <td>{{ entity.worktype ? entity.worktype.worktype : '- - -' }}</td>
                                            </tr>
                                            <tr>
                                                <td>Client:</td>
                                                <td style="font-size: 12px;">{{ entity.client ? entity.client : '- - -' }}</td>
                                                <td>Delivery:</td>
                                                <td>{{ entity.deliverydate ? entity.deliverydate|date('m/d/Y') : '- - -' }}</td>
                                            </tr>
                                        </tbody>
                                    </table>
                                {% endif %}
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
        <script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
        <script type="text/javascript" src="{{ asset('bundles/vgmwo/js/tools/xepOnline.jqPlugin.js') }}"></script>
        <script type="text/javascript">
            function convertImgToBase64(url, callback, outputFormat){
                var img = new Image();
                img.crossOrigin = 'Anonymous';
                img.onload = function(){
                    var canvas = document.createElement('CANVAS');
                    var ctx = canvas.getContext('2d');
                    canvas.height = this.height;
                    canvas.width = this.width;
                    ctx.drawImage(this,0,0);
                    var dataURL = canvas.toDataURL(outputFormat || 'image/jpg');
                    callback(dataURL);
                    canvas = null;
                };
                img.src = url;
            };
            $(document).ready(function(){
                $('#sticker-panel').modal('show');
                convertImgToBase64("{{ asset('bundles/vgmwo/images/barcode.png') }}", function(base64Img){
                    $('img#barcode').attr('src', base64Img);
                });
                convertImgToBase64("{{ asset('bundles/vgmwo/images/logo/as-logo-horizontal-black.png') }}", function(base64Img){
                    $('img#as-logo').attr('src', base64Img);
                });
            });
            /*function print(){
                    return xepOnline.Formatter.Format('workorder-area', {pageWidth:'3.9in', pageHeight:'2.4in', pageMarginTop: '0.2in', pageMarginRight: '0.2in', pageMarginBottom: '0.2in', pageMarginLeft: '0.2in'});
                    //return xepOnline.Formatter.Format("workorder-area",{pageWidth:"3.9in",pageHeight:"2.4in"});
            }*/
        </script>
    </body>
</html>