@extends('layouts.master')


@section('content')
    <style>
        @page {
            bleed: 1cm;
            size: A4 portrait;
            size: auto;
            /* auto is the initial value */
            margin-left: 0mm;
            /* this affects the margin in the printer settings */
            margin-bottom: 0mm;
            margin-top: 0mm;

            html {
                background-color: #FFFFFF;
                margin: 0px;
                /* this affects the margin on the html before sending to printer */
            }

            body {
                border: solid 1px blue;
                margin: 10mm 15mm 10mm 15mm;
                /* margin you want for the content */
            }
        }

        @media print {
            .page {
                margin: 0;
                border: initial;
                border-radius: initial;
                width: initial;
                min-height: initial;
                box-shadow: initial;
                background: initial;
                page-break-after: always;
            }
        }

        body {
            background: #eee;
            font-familly: roboto;
            -webkit-print-color-adjust: exact !important;
        }

        div.container {
            border-radius: 15px;
            background: white;
            box-shadow: 0 10px 10px rgba(0, 0, 0, 0.2);
        }

        div.invoice-letter {
            width: auto;
            position: relative;
            min-height: 150px;
            background-color: #04617B;
            margin-right: -48px;
            ;
            margin-left: -48px;
            box-shadow: 0 4px 3px rgba(0, 0, 0, 0.4);
        }

        div.letter-title {
            margin-top: 10px;
            height: 130px;
            border-right: 2px solid #eee;
        }

        div.letter-content {
            margin-top: 10px;
        }

        table.invoice thead th {
            background-color: rgba(4, 97, 123, 0.2);
            border-top: none;
        }

        table.invoice thead tr:first-child th:first-child {
            border-top-left-radius: 25px;
        }

        table.invoice thead tr:first-child th:last-child {
            border-top-right-radius: 25px;
        }

        tr.last-row {
            background-color: rgba(4, 97, 123, 0.2);

        }

        tr.last-row th {
            border-bottom-left-radius: 25px;
            width: 30px;
        }

        tr.last-row td {
            border-bottom-right-radius: 25px;
        }

        div.row div.to {
            height: 260px;
            padding-right: 25px;
            border-right: 2px solid rgba(4, 97, 123, 0.2);
        }
    </style>
<div class="container my-5 px-5 py-5">
    <div class="row">
        <div class="col-2 contact-details">
            <h5>{{ auth()->user()->fname }}</h5>
            <h6><em>{{ auth()->user()->email }} , {{ auth()->user()->mobile }}</em></h6>
            <p>{{ auth()->user()->country }}</p>
        </div>
        <div class="col-2 offset-2 logo">
            <img width="" height="85px" src="https://assistlytech.com/assets/img/logo/logo-blue.png" />
        </div>
        <div class="invoice-details col-2 offset-3 text-right">
            <h6>{{ __('translation.invoice_no') }} #1</h6>
            <h6>{{ __('translation.issued_at') }} {{ auth()->user()->plans_start_at }}</h6>
        </div>
    </div>

    <div class="container-fluid invoice-letter mt-3">
        <div class="row">
            <div class="col-3 text-white pl-5 py-2 letter-title">
                <h5>{{ __('translation.summary_notes') }}</h5>
            </div>
            <div class="col-9 text-white pr-5 py-2 letter-content">
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent consequat erat mauris, a
                    scelerisque est pellentesque vel. Proin tempus felis purus, vel molestie nisl condimentum nec. Sed
                    at lorem maximus, venenatis nulla ut, laoreet eros. Etiam et lectus sem. Aenean tempus ante nec
                    lacus aliquet consectetur. Vestibulum sem felis, tempus sit amet libero non, vehicula pellentesque
                    turpis. Suspendisse potenti. </p>
            </div>
        </div>
    </div>

    <div class="row table mt-5">
        <table class="invoice table table-hover">
            <thead class="thead">
                <tr>
                    <th scope="col">{{ __('translation.invoice_no') }}</th>
                    <th scope="col">{{ __('translation.company_name') }}</th>
                    <th scope="col">{{ __('translation.address') }}</th>
                    <th scope="col">{{ __('translation.contact_details') }}</th>
                    <th scope="col">{{ __('translation.due_date') }}</th>
                    <th scope="col">{{ __('translation.subtotal') }}</th>
                    <th scope="col">{{ __('translation.taxes') }}</th>
                    <th scope="col">{{ __('translation.discounts') }}</th>
                    <th scope="col">{{ __('translation.shipping') }}</th>
                    <th scope="col">{{ __('translation.total') }}</th>
                    <th scope="col">{{ __('translation.currency') }}</th>
                    <th scope="col">{{ __('translation.taxes_note') }}</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>1</td>
                    <td class="item">What about if we have a long-item title</td>
                    <td>1</td>
                    <td>25 <span class="currency">&euro;</span></td>
                    <td>5 %</td>
                    <td>28,75 <span class="currency">&euro;</span></td>
                </tr>
                <tr>
                    <td>2</td>
                    <td class="item">What about if we have a really, really, really long item title</td>
                    <td>1</td>
                    <td>25 <span class="currency">&euro;</span></td>
                    <td></td>
                    <td>28,75 <span class="currency">&euro;</span></td>
                </tr>
                <tr>
                    <td>3</td>
                    <td class="item">Bootstrap will just take care of this long title. Lorem ipsum dolor sit amet,
                        consectetur adipiscing elit. Ut sit amet tellus lectus. Quisque tincidunt lacus sed turpis
                        blandit rutrum.</td>
                    <td>1</td>
                    <td>25 <span class="currency">&euro;</span></td>
                    <td>13 %</td>
                    <td>28,75 <span class="currency">&euro;</span></td>
                </tr>
            </tbody>
        </table>
    </div>

    <div class="row">
        <!-- invoiced to details -->
        <div class=" offset-2 col-4">
            <div class="to text-right">
                <h5 class="effect-color pt-4">{{ __('translation.invoice_to') }}</h5>
                <h4 class="theme-color"><strong>{{ __('translation.company_name') }}</strong></h4>
                <h6>{{ __('translation.address') }}</h6>
                <p>{{ __('translation.contact_details') }}</p>
                <h5>{{ __('translation.due_date') }} 02/02/2020</h5>
            </div>
        </div>
        <!-- Invoice assets and total -->
        <div class="col-6 pr-5">
            <table class="table table-borderless text-right">
                <tbody>
                    <tr>
                        <th scope="row">{{ __('translation.subtotal') }}</th>
                        <td>75 <span class="currency">&euro;</span></td>
                    </tr>
                    <tr>
                        <th scope="row">{{ __('translation.taxes') }}</th>
                        <td>11,25 <span class="currency">&euro;</span></td>
                    </tr>
                    <tr>
                        <th scope="row">{{ __('translation.discounts') }}</th>
                        <td>7,5 <span class="currency">&euro;</span></td>
                    </tr>
                    <tr>
                        <th scope="row">{{ __('translation.shipping') }}</th>
                        <td><span class="currency">&euro;</span> 10,25</td>
                    </tr>
                    <tr class="last-row">
                        <th scope="row">
                            <h4>{{ __('translation.total') }}</h4>
                        </th>
                        <td>
                            <h4><span class="currency">&euro;</span> 90,25</h4>
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
    <p class="text-center mt-3"><em>{{ __('translation.taxes_note') }}</em></p>
</div>
@endsection