invoice template.html

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

<head>
    <meta charset="UTF-8">
    <title>Invoice Template Form</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" crossorigin="anonymous">
    <!--<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" crossorigin="anonymous">-->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/mustache.js/2.2.1/mustache.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.10.6/moment.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.37/js/bootstrap-datetimepicker.min.js"></script>
    <script src="logic.js"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.37/css/bootstrap-datetimepicker.css">
    <link rel="stylesheet" href="css/pdf_styles.css">
    <link rel="stylesheet" href="css/pdf_preview_styles.css">
    <link rel="stylesheet" href="css/modal.css">
</head>

<body>

<div class="container">

    <!-- Buttons -->

    <div id="buttons" class="text-center">
        <p><h1>TutorCruncher Invoice Template</h1></p>
        <button id="button-trigger" type="button" class="btn btn-default btn-lg" data-toggle="modal" data-target="#myModal">
            Edit
        </button>
        <button type="button" class="btn btn-primary btn-lg" onclick="savePDF()">
            Save and Generate Invoice
        </button>
    </div>

    <!-- Form -->

    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
        <div class="modal-dialog modal-lg" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    <h3 class="modal-title" id="myModalLabel">Invoice Template</h3>
                </div>
                <div class="modal-body">
                    <form>

                        <h3>General Information</h3>

                        <div class="row">

                            <div class="form-group col-md-4">
                                <label for="invoice_label">Invoice ID</label>
                                <input type="number" class="form-control" placeholder="ID" name="invoice_label" id="invoice_label">
                            </div>
                            <div class="form-group col-md-4">
                                <label for="date_sent">Date</label>
                                <div class='input-group date' id='date_sent_group'>
                                    <input type='text' class="form-control" name="date_sent" placeholder="Date" id="date_sent"/>
                                    <span class="input-group-addon">
                                    <span class="glyphicon glyphicon-calendar"></span>
                                    </span>
                                </div>
                            </div>
                            <div class="form-group col-md-4">
                                <label for="logo" class="control-label">Logo</label>
                                <input type="file" class="form-control" id="logo" name="logo" onchange="loadImage()">
                            </div>

                        </div>

                        <h3>Client Details</h3>

                        <div class="row">

                            <div class="form-group col-md-6">
                                <label for="client_first_name" class="control-label">First Name</label>
                                <input type="text" class="form-control" name="client_first_name" id="client_first_name" placeholder="First Name">
                            </div>
                            <div class="form-group col-md-6">
                                <label for="client_last_name" class="control-label">Last Name</label>
                                <input type="text" class="form-control" name="client_last_name" id="client_last_name" placeholder="Last Name">
                            </div>

                        </div>

                        <label for="client_first_line" class="control-label">Address</label>
                        <div class="form-group">
                            <input type="text" class="form-control" placeholder="First Line" name="client_first_line" id="client_first_line">
                        </div>
                        <div class="form-group">
                            <input type="text" class="form-control" placeholder="Second Line" name="client_second_line" id="client_second_line">
                        </div>

                        <div class="row">
                            <div class="form-group col-md-4">
                                <input type="text" class="form-control" placeholder="Town" name="client_town" id="client_town">
                            </div>
                            <div class="form-group col-md-4">
                                <input type="text" class="form-control" placeholder="Country" name="client_country" id="client_country">
                            </div>
                            <div class="form-group col-md-4">
                                <input type="text" class="form-control" placeholder="Postcode" name="client_postcode" id="client_postcode">
                            </div>
                        </div>

                        <h3>Branch Details</h3>

                        <label for="branch_name" class="control-label">Name</label>
                        <div class="form-group">
                            <input type="text" class="form-control" name="branch_name" id="branch_name" placeholder="Branch Name">
                        </div>
                        <label for="branch_first_line" class="control-label">Address</label>
                        <div class="form-group">
                            <input type="text" class="form-control" placeholder="First Line" name="branch_first_line" id="branch_first_line">
                        </div>
                        <div class="form-group">
                            <input type="text" class="form-control" placeholder="Second Line" name="branch_second_line" id="branch_second_line">
                        </div>

                        <div class="row">
                            <div class="form-group col-md-4">
                                <input type="text" class="form-control" placeholder="Town" name="branch_town" id="branch_town">
                            </div>
                            <div class="form-group col-md-4">
                                <input type="text" class="form-control" placeholder="Country" name="branch_country" id="branch_country">
                            </div>
                            <div class="form-group col-md-4">
                                <input type="text" class="form-control" placeholder="Postcode" name="branch_postcode" id="branch_postcode">
                            </div>
                        </div>

                        <h3>Payment Details</h3>

                        <div class="row">
                            <div class="form-group col-md-6">
                                <label for="account_number" class="control-label">Account Number</label>
                                <input type="text" class="form-control" placeholder="Account Number" name="account_number" id="account_number">
                            </div>
                            <div class="form-group col-md-6">
                                <label for="sort_code" class="control-label">Sort Code</label>
                                <input type="text" class="form-control" placeholder="Sort Code" name="sort_code" id="sort_code">
                            </div>
                        </div>

                        <div class="row">
                            <div class="form-group col-md-6">
                                <label for="iban" class="control-label">IBAN</label>
                                <input type="text" class="form-control" placeholder="IBAN" name="iban" id="iban">
                            </div>
                            <div class="form-group col-md-6">
                                <label for="vat_rate" class="control-label">VAT rate</label>
                                <input type="number" class="form-control" placeholder="VAT Rate (%)" name="vat_rate" id="vat_rate">
                            </div>
                        </div>

                        <div class="form-group">
                            <input type="text" class="form-control" placeholder="Bank Address" name="bank_address" id="bank_address">
                        </div>
                        <div class="form-group">
                            <textarea class="form-control" placeholder="Custom Message" name="custom_message" id="custom_message"></textarea>
                        </div>

                        <div id="items">
                            <div id="item_1">
                                <h3>Item 1</h3>
                                <div class="form-group">
                                    <label for="description_1" class="control-label">Description</label>
                                    <input type="text" class="form-control" placeholder="Description" name="description_1" id="description_1">
                                </div>

                                <div class="row">
                                    <div class="form-group col-md-6">
                                        <label for="date__1" class="control-label">Date</label>
                                        <div class='input-group date' id='date_group_1'>
                                            <input type='text' class="form-control" name="date__1" id="date__1" placeholder="Date"/>
                                            <span class="input-group-addon">
                                            <span class="glyphicon glyphicon-calendar"></span>
                                            </span>
                                        </div>
                                    </div>
                                    <div class="form-group col-md-6">
                                        <label for="units_1" class="control-label">Duration</label>
                                        <input type="text" class="form-control" placeholder="Duration" name="units_1" id="units_1">
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="form-group col-md-6">
                                        <label for="contractor_1" class="control-label">Contractor</label>
                                        <input type="text" class="form-control" id="contractor_1" name="contractor_1" placeholder="Contractor Name">
                                    </div>
                                    <div class="form-group col-md-6">
                                        <label for="amount_1" class="control-label">Cost</label>
                                        <input type="number" class="form-control" placeholder="Cost (£)" name="amount_1" id="amount_1">
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="modal-footer">
                            <button type="button" class="btn btn-default" onclick="addItem();">Add Item</button>
                            <button type="button" id="remove_button" class="btn btn-default" onclick="removeItem();">Remove Item</button>
                        </div>

                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-primary" data-dismiss="modal">OK</button>
                </div>
            </div>
        </div>
    </div>

    <!-- Invoice -->

    <div id="invoice">

        <page size="A4" class="container" style="margin-top: 30px">
            <div class="row">
                <div class="col-xs-5">
                    <h1 style="margin-bottom: 5px">
                        Summary
                    </h1>
                    <h3>
                        <small>Invoice ID: {{ invoice_label }}</small> <br>
                        <small>{{ date_sent }}</small>
                    </h3>
                </div>
                <div class="col-xs-7">
                    <img class="logo" src="" alt="your logo">
                </div>
            </div>

            <div class="row addresses">
                <div class="col-xs-5">
                    <strong>{{ client_first_name }} {{ client_last_name }}</strong><br>
                    {{ client_first_line }}<br>
                    {{ client_second_line }}<br>
                    {{ client_town }}<br>
                    {{ client_country }}<br>
                    {{ client_postcode }}<br>
                </div>
                <div class="col-xs-5 col-xs-offset-2 text-right">
                    <strong>{{ branch_name }}</strong><br>
                    {{ branch_first_line }}<br>
                    {{ branch_second_line }}<br>
                    {{ branch_town }}<br>
                    {{ branch_country }}<br>
                    {{ branch_postcode }}<br>
                </div>
            </div>

            <div class="row" style="margin-top: 10px;">
                <div class="col-xs-12">
                    <strong>Summary of invoices payable for the period</strong>
                </div>
            </div>

            <table class="table table-bordered">
                <thead>
                <tr>
                    <th>
                    </th>
                    <th class="text-right">
                        Total
                    </th>
                </tr>
                </thead>
                <tbody>
                <tr>
                    <td><strong>TOTAL DUE FOR PAYMENT</strong></td>
                    <td class="text-right"><strong>£{{ invoice_amount }}</strong></td>
                </tr>
                </tbody>
            </table>

            <div class="row" style="margin-top: 5px">
                <p class="col-xs-12">
                    {{ custom_message }}
                </p>
            </div>
            <div class="row text-right" style="padding-top: 20px;">
                <div class="col-xs-12">
                    <h4>{{ please_quote }}</h4>

                    <div class="small-para-gap">
                        {{ company_name }}<br/>
                        Account Number - {{ account_number }}<br/>
                        Sort Code - {{ sort_code }}<br/>
                        IBAN - {{ iban }}<br/>
                        {{ bank_address }}<br/>
                        {{ bank_city }}<br/>
                        {{ bank_postcode }}<br/>
                    </div>
                </div>
            </div>
        </page>

        <!--After the cover sheet there's one page for contractor and potentially the agency-->
        <page size="A4" class="container">
            <div class="row">
                <div class="col-xs-6">
                    <h1 style="margin-bottom: 5px">
                        Invoice
                    </h1>

                    <h3 style="margin-top: 5px">
                        <br>
                        <small>{{{ date_sent }}}</small>
                    </h3>
                </div>
                <div class="col-xs-6">
                    <img class="logo" align="right" src="" alt="your logo">
                </div>
            </div>

            <div class="row addresses">
                <div class="col-xs-5">
                    <strong>{{ client_first_name }} {{ client_last_name }}</strong><br>
                    {{ client_first_line }}<br>
                    {{ client_town }}<br>
                    {{ client_country }}<br>
                    {{ client_postcode }}<br>
                    {{ client_phone }}
                </div>
                <div class="col-xs-5 col-xs-offset-2 text-right">
                    <strong>{{ payee_name }}</strong><br> {{ payee_street }}<br> {{ payee_town }}<br> {{ payee_country }}<br> {{ payee_postcode }}
                    <br> {{ payee_website }}<br> {{ payee_email }}
                </div>
            </div>

            <table class="table table-bordered">
                <thead>
                <tr>
                    <th>
                        Date
                    </th>
                    <th>
                        Item Description
                    </th>
                    <th class="text-right">
                        Duration
                    </th>
                    <th class="text-right">
                        Amount
                    </th>
                </tr>
                </thead>
                <tbody>
                <!--{{#items}}-->
                <tr>
                    <td class="narrow">{{ date }}</td>
                    <td>{{ description }} <br>
                        Contractor: {{ contractor }}<br>
                    </td>
                    <td class="text-right narrow">{{ units }}</td>
                    <td class="text-right narrow">£{{ amount }}</td>
                </tr>
                <!--{{/items}}-->
                </tbody>
            </table>

            <div class="row text-right invoice-totals">

                <div class="col-xs-2 col-xs-offset-8">
                    <p>Sub Total:</p>
                    <p>V.A.T @ {{ vat_rate }}%:</p>
                    <p>Total:</p>
                </div>

                <div class="col-xs-2">
                    <strong>
                        <p>£{{ net_amount }}</p>
                        <p>£{{ tax_amount }}</p>
                        <p>£{{ gross_amount }}</p>
                    </strong>
                </div>
            </div>
        </page>
    </div>
</div>
</body>

</html>