<!DOCTYPE html>
<html lang="es">
    <body>
        <section class="container">
            <!-- Header component -->
            <report-header :locale="ticket.locale"></report-header>
            <!-- End header component -->
            <section class="main">
                <section class="columns">
                    <section class="size50">
                        <section class="size75">
                            <h1 class="title uppercase">{{$t('title')}}</h1>
                            <table class="row-oriented">
                                <tbody>
                                    <tr>
                                        <td class="font gray uppercase">{{$t('clientId')}}</td>
                                        <th>{{client.id}}</th>
                                    </tr>
                                    <tr>
                                        <td class="font gray uppercase">{{$t('ticketId')}}</td>
                                        <th>{{ticket.id}}</th>
                                    </tr>
                                    <tr>
                                        <td class="font gray uppercase">{{$t('date')}}</td>
                                        <th>{{shipped}}</th>
                                    </tr>
                                </tbody>
                            </table>
                        </section>
                    </section>
                    <section class="size50">
                        <section class="panel">
                            <section class="header">{{$t('deliveryAddress')}}</section>
                            <section class="body">
                                <h3 class="uppercase">{{address.nickname}}</h3>
                                <section>
                                    {{address.street}}
                                </section>
                                <section>
                                    {{address.postalCode}}, {{address.city}} ({{address.province}})
                                </section>
                            </section>
                        </section>

                        <section class="panel">
                            <section class="header">{{$t('fiscalData')}}</section>
                            <section class="body">
                                <section>
                                    {{client.socialName}}
                                </section>
                                <section>
                                    {{client.street}}
                                </section>
                                <section>
                                    {{client.fi}}
                                </section>
                            </section>
                        </section>
                    </section>
                </section>

                <!-- Sales block -->
                <h3>{{$t('saleLines')}}</h3>
                <table class="column-oriented">
                    <thead>
                        <tr>
                            <td>{{$t('reference')}}</td>
                            <td class="number">{{$t('quantity')}}</td>
                            <td>{{$t('concept')}}</td>
                            <td class="number">{{$t('price')}}</td>
                            <td class="centered">{{$t('discount')}}</td>
                            <td class="centered">{{$t('vat')}}</td>
                            <td class="number">{{$t('amount')}}</td>
                        </tr>
                    </thead>
                    <tbody>
                        <template v-for="sale in sales">
                            <tr class="font bold" :key="sale.id">
                                <td>{{sale.itemFk}}</td>
                                <td class="number">{{sale.quantity}}</td>
                                <td>{{sale.concept}}</td>
                                <td class="number">{{sale.price | currency('EUR')}}</td>
                                <td class="centered">{{sale.discount | percent}}</td>
                                <td class="centered">{{sale.vatType}}</td>
                                <td class="number">{{sale.price * sale.quantity * (1 - sale.discount / 100) | currency('EUR')}}</td>
                            </tr>
                            <tr class="description">
                                <td colspan="2" class="centered">
                                    <strong class="font gray" v-if="sale.val1">{{sale.tag1}}</strong> 
                                    <span>{{sale.val1}}</span>
                                </td>
                                <td colspan="3" class="centered">
                                    <strong class="font gray" v-if="sale.val2">{{sale.tag2}}</strong> 
                                    <span>{{sale.val2}}</span>
                                </td>
                                <td colspan="2" class="centered">
                                    <strong class="font gray" v-if="sale.val3">{{sale.tag3}}</strong>
                                    <span>{{sale.val3}}</span>
                                </td>
                            </tr>
                            <tr class="description phytosanitary" v-if="sale.passportNumber">
                                <td colspan="7">
                                    {{sale.ediBotanic}} {{sale.denomination}} {{sale.countryCode}}-{{sale.passportNumber}} 
                                    <span v-if="sale.isProtectedZone">ZP</span>
                                </td>
                            </tr>
                        </template>
                        <!-- FIXME - APPLY CSS POST-RENDER -->
                        <tr >
                            <td colspan="7"></td>
                        </tr>
                    </tbody>
                    <tfoot>
                        <tr>
                            <td colspan="6">
                                <span class="pull-right">{{$t('subtotal')}}</span>
                            </td>
                            <td class="number">{{getSubTotal() | currency('EUR')}}</td>
                        </tr>
                    </tfoot>
                </table>
                <!-- End of sales block -->

                <section class="columns">
                    <!-- Services block-->
                    <section class="size100" v-if="services.length > 0">
                        <h3>{{$t('services')}}</h3>
                        <table class="column-oriented">
                            <thead>
                                <tr>
                                    <td>{{$t('concept')}}</td>
                                    <td class="number">{{$t('quantity')}}</td>
                                    <td>{{$t('vatType')}}</td>
                                    <td class="number">{{$t('amount')}}</td>
                                </tr>
                            </thead>
                            <tbody>
                                <tr v-for="service in services">
                                    <td>{{service.description}}</td>
                                    <td class="number">{{service.quantity}}</td>
                                    <td>{{service.taxDescription}}</td>
                                    <td class="number">{{service.price | currency('EUR')}}</td>
                                </tr>
                            </tbody>
                            <tfoot>
                                <tr>
                                    <td colspan="3"></td>
                                    <td class="number">{{$t('total')}} {{serviceTotal | currency('EUR')}}</td>
                                </tr>
                            </tfoot>
                        </table>
                    </section>
                    <!-- End of services block -->

                    <!-- Taxes block -->
                    <section id="taxes" class="size50 pull-right" v-if="taxes">
                        <h3>{{$t('taxBreakdown')}}</h3>
                        <table class="column-oriented">
                            <thead>
                                <tr>
                                    <td>{{$t('type')}}</td>
                                    <td class="number">{{$t('taxBase')}}</td>
                                    <td>{{$t('tax')}}</td>
                                    <td class="number">{{$t('fee')}}</td>
                                </tr>
                            </thead>
                            <tbody>
                                <tr v-for="tax in taxes">
                                    <td>{{tax.name}}</td>
                                    <td class="number">{{tax.Base | currency('EUR')}}</td>
                                    <td>{{tax.vatPercent | percent}}</td>
                                    <td class="number">{{tax.tax | currency('EUR')}}</td>
                                </tr>
                            </tbody>
                            <tfoot>
                                <tr class="font bold">
                                    <td>{{$t('subtotal')}}</td>
                                    <td class="number">{{getTotalBase() | currency('EUR')}}</td>
                                    <td></td>
                                    <td class="number">{{getTotalTax()| currency('EUR')}}</td>
                                </tr>
                                <tr class="font bold">
                                    <td colspan="2">{{$t('total')}}</td>
                                    <td colspan="2" class="number">{{getTotal() | currency('EUR')}}</td>
                                </tr>
                            </tfoot>
                        </table>
                    </section>
                    <!-- End of taxes block -->

                    <!-- Packages block -->
                    <section id="packagings" class="size100" v-if="packagings.length > 0">
                        <h3>{{$t('packagings')}}</h3>
                        <table class="column-oriented">
                            <thead>
                                <tr>
                                    <td>Id</td>
                                    <td>{{$t('concept')}}</td>
                                    <td class="number">{{$t('quantity')}}</td>
                                </tr>
                            </thead>
                            <tbody>
                                <tr v-for="packaging in packagings">
                                    <td>{{packaging.itemFk}}</td>
                                    <td>{{packaging.name}}</td>
                                    <td class="number">{{packaging.quantity}}</td>
                                </tr>
                            </tbody>
                        </table>
                    </section>
                    <!-- End of packages block -->

                    <!-- Signature block -->
                    <section class="size50 pull-left">
                        <section id="signature" class="panel" v-if="signature && signature.id">
                            <section class="header">{{$t('digitalSignature')}}</section>
                            <section class="body centered">
                                <img v-bind:src="dmsPath"/>
                                <section>{{signature.created | date}}</section>
                            </section>
                        </section>
                    </section>
                    <!-- End of signature block -->
                </section>
            </section>
            <!-- Footer component -->     
            <report-footer id="pageFooter"
                :left-text="$t('ticket', [ticket.id])"
                :center-text="client.socialName"
                :locale="client.locale">
            </report-footer>
            <!-- End footer component -->
        </section>
    </body>
</html>