{% extends 'VGMWOBundle::layout.html.twig' %}
{% block stylesheets %}{{ parent() }}<link href="{{ asset('bundles/vgmwo/css/bootstrap-datetimepicker.css') }}" rel="stylesheet" media="screen">
<style>
    table.totals>tbody>tr>td:nth-child(2n+1){font-size: 17px;}
    table.totals>tbody>tr>td:nth-last-child(2n+1){font-size: 14px;vertical-align: middle;text-align: right;}
</style>
{% endblock %}
{% block content %}
    <div class="container">
        <div class="form-group container-fluid" data-bind="with: invoice">
            <section id="header-area" class="row">
                <div id="logo" class="col-xs-12 col-sm-8" style="vertical-align: bottom; display: table; position: relative;">
                    <div style="float: left">
                        <img id="logo-img" src="{{ asset('bundles/vgmwo/images/logo/Navy Blue/Navy Blue Aeroservicios-400.png') }}"
                             width="auto" height="80px"/>
                    </div>
                    <div style="float: left">
                        <strong style="font-size: 17px;">Aeroservicios USA, Inc.</strong>
                        <p>3750 NW 49 Street Miami, FL 33142</p>
                        <p>305-637-3040</p>
                    </div>
                </div>
                <div class="col-xs-12 col-sm-4">
                    <div class="col-xs-6 col-sm-6">
                        <label form="qb-date" style="margin-bottom: 0px;">QB date</label>
                        <input tabindex="1" id="qb-date"
                               required="required"
                               data-date =""
                               data-date-format="mm/dd/yyyy"
                               data-link-field="qb-date"
                               data-link-format="mm/dd/yyyy"
                               class="form-control datepicker">
                    </div>
                    <div class="col-xs-6 col-sm-6">
                        <label form="invoice-number" style="margin-bottom: 0px;">Invoice #</label>
                        <input tabindex="2" id="invoice-number" type="tel" class="form-control" placeholder="Invoice #"
                               maxlength="10" required="required">
                    </div>
                </div>
                <div class="horizaontal-divider" style="clear: both"></div>
            </section>
            <section id="general-info" class="row">
                <div class="col-xs-12 col-sm-6">
                    <label for="wo-condition" style="margin-bottom: 0px;">Bill to:</label>
                    <select tabindex="3" id="client" required="required" class="form-control"
                            data-bind="options: $root.clients,optionsCaption: '',optionsText: 'name',value: bill_to"></select>
                    <textarea class="form-control" rows="4" data-bind="textInput: bill_to_info" tabindex="4"></textarea>
                </div>
                <div class="col-xs-12 col-sm-6">
                    <label for="wo-condition" style="margin-bottom: 0px;">Ship to:</label>
                    <select tabindex="5" id="client" required="required" class="form-control"
                            data-bind="options: $root.clients,optionsCaption: '',optionsText: 'name',value: ship_to"></select>
                    <textarea class="form-control" rows="4" data-bind="textInput: ship_to_info" tabindex="6"></textarea>
                </div>
                <div class="col-xs-12 col-sm-6">
                    <table class="table table-responsive">
                        <thead>
                            <tr>
                                <th class="col-xs-3 col-sm-3">P.O.#</th>
                                <th class="col-xs-3 col-sm-3">Terms</th>
                                <th class="col-xs-3 col-sm-3">Due date</th>
                                <th class="col-xs-3 col-sm-3">Rep</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td><input id="po-number" tabindex="7" maxlength="10" data-bind="" class="form-control"></td>
                                <td>
                                    <div class="input-group">
                                        <select id="terms" tabindex="8" class="form-control"
                                                data-bind="options: $root.terms,optionsText: 'name',
                                                           optionsCaption: '',value: terms"></select>
                                        <div class="input-group-addon" style="padding: 2px 4px;"
                                             data-bind="click: $root.add_terms">
                                            <a href="#"><span class="glyphicon glyphicon-plus"></span></a>
                                        </div>
                                    </div>
                                </td>
                                <td><input id="due-date" tabindex="9"
                                           data-date =""
                                           data-date-format="mm/dd/yyyy"
                                           data-link-field="due-date"
                                           data-link-format="mm/dd/yyyy"
                                           class="form-control datepicker"></td>
                                <td><select id="rep" tabindex="10" class="form-control"
                                            data-bind="options: $root.countries,optionsCaption: '',
                                                       value: rep"></select></td>
                            </tr>
                        </tbody>
                    </table>
                </div>
                <div class="col-xs-12 col-sm-6">
                    <table class="table table-responsive">
                        <thead>
                        <tr>
                            <th class="col-xs-3 col-sm-3">Ship date</th>
                            <th class="col-xs-3 col-sm-3">Via</th>
                            <th class="col-xs-3 col-sm-3">EXW</th>
                            <th class="col-xs-3 col-sm-3">IN #</th>
                        </tr>
                        </thead>
                        <tbody>
                        <tr>
                            <td><input id="ship-date" tabindex="11"
                                       data-date =""
                                       data-date-format="mm/dd/yyyy"
                                       data-link-field="ship-date"
                                       data-link-format="mm/dd/yyyy"
                                       class="form-control datepicker"></td>
                            <td>
                                <div class="input-group">
                                    <select id="vias" tabindex="12" class="form-control"
                                            data-bind="options: $root.vias,optionsText: 'name',
                                                       optionsCaption: '',value: via"></select>
                                    <div class="input-group-addon" style="padding: 2px 4px;"
                                         data-bind="click: $root.add_via">
                                        <a href="#"><span class="glyphicon glyphicon-plus"></span></a>
                                    </div>
                                </div>
                            <td><input id="exw" tabindex="13" maxlength="10" data-bind="" class="form-control"></td>
                            <td><input id="in-number" tabindex="14" maxlength="10" data-bind="" class="form-control"></td>
                        </tr>
                        </tbody>
                    </table>
                </div>
                <div class="horizaontal-divider" style="clear: both"></div>
            </section>
            <section id="items-area" class="row" style="min-height: 200px;">
                <div class="col-xs-12 col-sm-12">
                    <table class="table table-responsive" style="margin-bottom: 5px;">
                        <thead>
                        <tr>
                            <th class="col-xs-1 col-sm-1">Quantity</th>
                            <th class="col-xs-1 col-sm-2" style="white-space: nowrap;">Item code</th>
                            <th class="col-xs-1 col-sm-1">Account</th>
                            <th class="col-xs-4 col-sm-6">Description</th>
                            <th class="col-xs-1 col-sm-1" style="white-space: nowrap;">Unit price</th>
                            <th class="col-xs-2 col-sm-1" style="white-space: nowrap;">Ext. price</th>
                        </tr>
                        </thead>
                        <tbody data-bind="foreach: items">
                        <tr>
                            <td>
                                <div class="input-group">
                                    <div class="input-group-addon" style="padding: 2px 4px;"
                                         data-bind="click: dec_cant">
                                        <a href="#"><span class="glyphicon glyphicon-minus"></span></a>
                                    </div>
                                    <input type="tel" class="form-control"
                                           data-bind="textInput: cant">
                                    <div class="input-group-addon" style="padding: 2px 4px;"
                                         data-bind="click: inc_cant">
                                        <a href="#"><span class="glyphicon glyphicon-plus"></span></a>
                                    </div>
                                </div>
                            </td>
                            <td>
                                <div class="input-group">
                                    <select class="form-control"
                                            data-bind="options: $root.item_templates,optionsText: 'code',
                                                       optionsCaption: '',value: item_temp"></select>
                                    <div class="input-group-addon" style="padding: 2px 4px;"
                                         data-bind="click: add_item_template">
                                        <a href="#"><span class="glyphicon glyphicon-plus"></span></a>
                                    </div>
                                </div>
                            </td>
                            <td><select class="form-control"
                                        data-bind="options: $root.accounts,optionsCaption: '',
                                                       value: account"></select>
                            </td>
                            <td>
                                <input data-bind="textInput: description" class="form-control">
                            </td>
                            <td>
                                <div class="input-group">
                                    <div class="input-group-addon" style="padding: 2px 4px;">$</div>
                                    <input data-bind="value: unit_price" class="form-control">
                                </div>
                            </td>
                            <td>
                                <div class="input-group">
                                    <div class="input-group-addon" style="padding: 2px 4px;">$</div>
                                    <input data-bind="textInput: extended_price" class="form-control">
                                </div>
                            </td>
                        </tr>
                        </tbody>
                    </table>
                    <div>
                        <a class="btn btn-primary pull-right" data-bind="click: add_item">
                            Add Item <span class="glyphicon glyphicon-plus"></span>
                        </a>
                    </div>
                </div>
            </section>
            <section id="invoice-footer-area" class="row">
                <div class="col-xs-12 col-sm-12 text-right" style="bottom: 0;">
                    <div class="col-xs-12 col-sm-2 input-group pull-right" style="padding-bottom: 4px;">
                        <div class="input-group-addon" style="padding: 2px 4px;">
                            Tax rate %
                        </div>
                        <input id="tax" tabindex="12" class="form-control"
                                data-bind="value: tax_percentage"></select>
                        {#<div class="input-group-addon" style="padding: 2px 4px;"
                             data-bind="click: $root.add_via">
                            <a href="#"><span class="glyphicon glyphicon-plus"></span></a>
                        </div>#}
                    </div>
                </div>
                <div class="horizaontal-divider" style="clear: both"></div>
                <div class="col-xs-12 col-sm-9">
                    <textarea class="form-control" rows="2" data-bind="textInput: via.info"></textarea>
                </div>
                <div class="col-xs-4 col-sm-3">
                    <table class="table table-responsive totals">
                        <tbody>
                            <tr>
                                <td><strong>Subtotal</strong></td>
                                <td><span class="glyphicon glyphicon-usd"></span>10000</td>
                            </tr>
                            <tr>
                                <td><strong>Sales Tax</strong></td>
                                <td><span class="glyphicon glyphicon-usd"></span>10000</td>
                            </tr>
                            <tr>
                                <td><strong>Total</strong></td>
                                <td><span class="glyphicon glyphicon-usd"></span>10000</td>
                            </tr>
                            <tr>
                                <td><strong>Payments/Credits</strong></td>
                                <td><span class="glyphicon glyphicon-usd"></span>10000</td>
                            </tr>
                            <tr>
                                <td><strong>Balance Due</strong></td>
                                <td><span class="glyphicon glyphicon-usd"></span>10000</td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </section>
        </div>
        <footer style="clear: both; text-align: right;">
            <a class="btn btn-primary" href="#"
               data-bind="click: ''">
                Update
            </a>
            <a class="btn btn-warning" href="{{ path('invoices') }}">
                Cancel
            </a>
        </footer>
    </div>
    {% block message %}{% include "VGMWOBundle:Menssage:message.html.twig" %}{% endblock message %}
    {% block temp_item_template %}{% include "VGMWOBundle:Invoicing/Modal_panels:temp_item_template.html.twig" %}{% endblock temp_item_template %}
    {% block temp_term %}{% include "VGMWOBundle:Invoicing/Modal_panels:temp_term.html.twig" %}{% endblock temp_term %}
    {% block temp_via %}{% include "VGMWOBundle:Invoicing/Modal_panels:temp_via.html.twig" %}{% endblock temp_via %}
{% endblock %}

{% block javascripts %}
    {{ parent() }}
    <script type="text/javascript" src="{{ asset('bundles/vgmwo/js/bootstrap-datetimepicker.js') }}"></script>
    <script type="text/javascript" src="{{ asset('bundles/vgmwo/js/jquery/jquery.inputmask.js') }}"></script>
    <script type="text/javascript" src="{{ asset('bundles/vgmwo/js/customized/utils/knockout.plugins.js') }}"></script>
    <script type="text/javascript" src="{{ asset('bundles/vgmwo/js/customized/utils/message.modal.js') }}"></script>
    <script type="text/javascript" src="{{ asset('bundles/vgmwo/js/customized/utils/util.lists.js') }}"></script>
    <script type="text/javascript" src="{{ asset('bundles/vgmwo/js/customized/Invoices/invoice.manager.js') }}"></script>
    <script type="text/javascript" HIDDEN="hidden">
        $(document).ready(function() {
            loadPageFeatures();
            $('#search-add-stock').on('hidden.bs.modal', function (e) {
                $( "#stock-number-4-search" ).focus();
            });
        });
        function go_home_list(){window.location.href="{{path('invoices')}}";}
        function get_saving_invoice_term_url(){return "{{ path('save_invoice_term') }}";}
        function get_saving_invoice_via_url(){return "{{ path('save_invoice_via') }}";}
        function get_saving_invoice_item_template_url(){return "{{ path('save_invoice_item_template') }}";}

        function get_workorder_support_id_url(){return "{{ path('get_wo_support_by_id') }}";}
        function get_search_4_stock_url(){return "{{ path('find_stocks4workorder') }}";}
        function get_workorder_check_existence_url(){return "{{ path('check_creating_exist') }}";}
        function get_workorder_create_url(){return "{{ path('create_workorder') }}";}
        function get_workorder_update_url(){return "{{ path('update_workorder') }}";}
        function get_save_stock_url(){return "{{ path('save_stock') }}";}
        function get_workorder_obs_url(){return "{{ path('workorder_get_my_obs') }}";}
        function get_workorder_tasks_url(){return "{{ path('workorder_get_my_tasks') }}";}
        function get_workorder_stocks_url(){return "{{ path('workorder_get_my_stocks') }}";}
        function blankStockModal(holder){resetStockModal(holder, '{{ asset("bundles/vgmwo/images/logo/Navy Blue/Navy Blue Aeroservicios-300.png") }}');}

        viewModel.LoadData = ko.dependentObservable(function() {
            viewModel.invoice(new invoice(null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,
                    null,null,null,null,null));
            viewModel.countries = countries;

            {% if clients %}var tclients=[];{% for client in clients %}tclients.push({id:"{{ client.id }}",name:"{{ client }}",bill_to:"{{ client.billinfo }}",ship_to:"{{ client.shipinfo }}"});{% endfor %}viewModel.clients(tclients);{% endif %}
            {% if terms %}var tterms=[];{% for term in terms %}tterms.push({id:"{{ term.id }}",name:"{{ term }}"});{% endfor %}viewModel.terms(tterms);{% endif %}
            {% if vias %}var tvias=[];{% for via in vias %}tvias.push({id:"{{ via.id }}",name:"{{ via }}",via_info:"{{ via.description }}"});{% endfor %}viewModel.vias(tvias);{% endif %}
            {% if item_templates %}var titem_templates=[];{% for item_template in item_templates %}titem_templates.push({id:"{{ item_template.id }}",code:"{{ item_template.code }}",rate:"{{ item_template.rate }}",description:"{{ item_template.description }}"});{% endfor %}viewModel.item_templates(titem_templates);{% endif %}
            {% if accounts %}var taccounts=[];{% for account in accounts %}taccounts.push({id:"{{ account.id }}",name:"{{ account.name }}",code:"{{ account.code }}"});{% endfor %}viewModel.accounts(taccounts);{% endif %}
            //alert("X");
        }, viewModel);
        ko.applyBindings(viewModel, document.getElementById("content-body"));
    </script>
{% endblock %}