ΤΙΜΟΛΟΓΙΟ - Sales invoice

by Antonis Vlachos

HTML

<script src="http://ajax.aspnetcdn.com/ajax/knockout/knockout-3.0.0.js"></script>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<table align="center" style="width: 120%; font-size: 13px">
    <tr>
        <td style="width: 100%; padding: 30px 0px 25px 30px">
            <img data-bind="attr: { src: SellerLogoUrl }" src="#" style="max-height: 150px; max-width: 300px;"/>
            <div data-bind="text: Seller" style="padding: 10px 0px 0px 12px; font-size: 10px; font-weight: bold"></div>
            <div data-bind="foreach: SellerContactDetails" style="padding: 0px 0px 0px 12px; font-size: 10px">
                <div data-bind="text: $data" style="padding: 0px 0px 0px 12px, font-size: 10px"></div>
            </div>
        </td>
        <td style="padding: 0px 0px 0px 0px"></td>
        <td valign="bottom" style="font-size: 11px; text-align: right; white-space: nowrap; padding: 10px 30px 25px 0px">
            <div>Σειρά &amp; Αριθμός</div> <b><div style="font-size: 13px;" data-bind="text: Number"></div>
    
        <td valign="bottom" style="padding: 10px 30px 25px 0px;font-size: 11px; text-align: right; white-space: nowrap; padding-left: 50px">
            <div>Ημερομηνία</div><b>
            <div style="font-size: 13px;" data-bind="text: IssueDate">  </div></b>

        </td>
        <table align="center" style="width: 85%; border: 3px solid #ccc; margin-top: 10px">
            <tr>
                <td colspan="2" style="padding: 10px; font-size: 13px; color: #1e3a88; white-space: nowrap"><b>Είδος Παραστατικού:</b>  <span style="font-weight: bold; color: #b2001f">Τιμολόγιο Παροχής Υπηρεσιών</span>

                </td>
                <td></td>
            </tr>
            <tr>
                <td style="background-color: #d5cdcd; padding: 20px; vertical-align: top">
                    <div style="font-size: 12px; color: #666; font-weight: bold"><u>Στοιχεία Πελάτη:</u>

                    </div>
           ...

CSS

body {
    border: 1px solid
}
body {
    margin: 25px 0px 25px 0px
}

JavaScript

ko.applyBindings({
    Seller: 'Α.ΒΛΑΧΟΣ ΚΑΙ ΣΙΑ Ο.Ε.',
    SellerContactDetails: ['ΡΑΔΙΟΦΩΝΙΚΟΣ ΣΤΑΘΜΟΣ - KISS FM 100.6 ΚΕΦΑΛΟΝΙΑ','Α.ΑΜΠΑΤΙΕΛΟΥ 13 28100 ΑΡΓΟΣΤΟΛΙ - ΑΦΜ 099850148', 'ΔΟΥ ΑΡΓΟΣΤΟΛΙΟΥ- ΤΗΛ.:2671027666- info@radiokiss.gr'],
    SellerLogoUrl: 'business-logo?FileID=c6545179-0ba4-4cda-81a2-f07874f81a1e',
    DueDate: '24/07/2014',
    IssueDate: '27/06/2014',
    Number: '10021',
    Customer: 'Α. ΒΛΑΧΟΣ ΚΑΙ ΣΙΑ Ο.Ε.',
    CustomerAddressLines: ['ΡΑΔΙΟΦΩΝΙΚΟΣ ΣΤΑΘΜΟΣ', 'ΑΝΤ. ΑΜΠΤΙΕΛΟΥ 13', '28100 ΑΡΓΟΣΤΟΛΙ', 'ΚΕΦΑΛΟΝΙΑ', '26710 27666'],
    Summary: 'Επί Πιστώσει',
    Notes: ['Για την Έκδοση'],
    LineItems: [{
        Description: ['Financial planning'],
        Qty: '4',
        UnitPrice: '100.00',
        Discount: '10%',
        Tax: 'VAT 10%',
        LineTotal: '400.00'
    }, {
        Description: ['Tax consulting'],
        Qty: '2',
        UnitPrice: '120.00',
        Discount: '30%',
        Tax: 'VAT 10%',
        LineTotal: '240.00'
    }],
    LineItemsIncludeTax: true,
    Subtotal: '640.00',
    TaxComponents: [{
        Name: 'ΦΠΑ 23%',
        Amount: '64.00'
    }],
    Total: '704.00'
});