@extends('pdf.quote_web')

@section('css')
    <style type="text/css">

        @page {
            margin: 0;
            padding: 0;
        }

        html body {
            font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, Sans-serif;
            background: white;
            width: 100%;
            max-width: 820px;

            margin: 105px auto 30px auto;

            -moz-box-shadow: 0px 0px 20px rgba(80, 80, 80, 0.7);
            -webkit-box-shadow: 0px 0px 20px rgb(80 80 80 / 70%);
            box-shadow: 0px 0px 20px rgb(80 80 80 / 70%);
        }

        .quote {
            width: 100%;

            min-height: 1120px;

            font: normal 13px/1.4em 'Open Sans', Sans-serif;
            margin: 0 auto;
            background: #F7EDEB url('{{ asset('images/invoice/bg.png') }}') 0 0 no-repeat;
            background-size: 100% auto;
            color: #5B6165;
            position: relative;
        }

        #memo {
            padding-top: 50px;
            margin: 0 110px 0 60px;
            border-bottom: 1px solid #ddd;
            height: 115px;
        }

        #memo .logo {
            float: left;
            margin-right: 20px;
        }

        #memo .logo img {
            width: 300px;
        }

        #memo .company-info {
            float: right;
            text-align: right;
        }

        #memo .company-info > div:first-child {
            line-height: 1em;
            font-weight: bold;
            font-size: 22px;
            color: #B32C39;
        }

        #memo .company-info span {
            font-size: 11px;
            display: inline-block;
            min-width: 20px;
        }

        #memo:after {
            content: '';
            display: block;
            clear: both;
        }

        #invoice-title-number {
            font-weight: bold;
            margin: 30px 0;
        }

        #invoice-title-number span {
            line-height: 0.88em;
            display: inline-block;
            min-width: 20px;
        }

        #invoice-title-number #title {
            text-transform: uppercase;
            padding: 0px 2px 0px 60px;
            font-size: 50px;
            background: #F4846F;
            color: white;
        }

        #invoice-title-number #number {
            margin-left: 10px;
            font-size: 35px;
            position: relative;
            top: -5px;
        }

        #client-info {
            float: left;
            margin-left: 60px;
            min-width: 220px;
            margin-bottom: 30px;
        }

        #client-info > div {
            margin-bottom: 3px;
            min-width: 20px;
        }

        #client-info span {
            display: block;
            min-width: 20px;
        }

        #client-info > span {
            font-size: 1.35em;
            text-transform: uppercase;
            margin-bottom: 5px;
            text-decoration: underline;
        }

        b, strong, .bold {
            font-weight: bold;
        }

        table {
            table-layout: fixed;
        }

        table th, table td {
            vertical-align: top;
            word-break: keep-all;
            word-wrap: break-word;
        }

        #items {
            margin: 35px 30px 0 30px;
            min-height: 460px;
        }

        #items .first-cell, #items table th:first-child, #items table td:first-child {
            width: 40px !important;
            padding-left: 0 !important;
            padding-right: 0 !important;
            text-align: right;
        }

        #items table {
            border-collapse: separate;
            width: 100%;
        }

        #items table th {
            font-weight: bold;
            padding: 5px 8px;
            text-align: right;
            background: #B32C39;
            color: white;
            text-transform: uppercase;
        }

        #items table th:nth-child(2) {
            width: 30%;
            text-align: left;
        }

        #items table th:last-child {
            text-align: right;
        }

        #items table td {
            padding: 9px 8px;
            text-align: right;
            border-bottom: 1px solid #ddd;
        }

        #items table td:nth-child(2) {
            text-align: left;
        }

        .item-column {
            display: flex;
            flex-direction: column;
        }

        #sums {
            margin: 25px 30px 0 0;
            display: flow-root;
            background: url({{ asset('images/invoice/total-stripe-firebrick.png') }}) right bottom no-repeat;
        }

        #sums table {
            float: right;
        }

        #sums table tr th, #sums table tr td {
            min-width: 100px;
            padding: 9px 8px;
            text-align: right;
        }

        #sums table tr th {
            font-weight: bold;
            text-align: left;
            padding-right: 35px;
        }

        #sums table tr td.last {
            min-width: 0 !important;
            max-width: 0 !important;
            width: 0 !important;
            padding: 0 !important;
            border: none !important;
        }

        #sums table tr.amount-total th {
            text-transform: uppercase;
        }

        #sums table tr.amount-total th, #sums table tr.amount-total td {
            font-size: 15px;
            font-weight: bold;
        }

        #sums table tr:last-child th {
            text-transform: uppercase;
        }

        #sums table tr:last-child th, #sums table tr:last-child td {
            font-size: 15px;
            font-weight: bold;
            color: white;
        }

        #tva {
            margin: 5px 30px 0 5px;
            display: flex;
            flex-direction: row;
        }

        #tva div {
            display: flex;
            flex-direction: column;
            width: 100%;
        }

        #tva div ul {
            list-style-type: square;
            margin: 5px 0 0 0;
            padding-inline-start: 25px;
        }

        #tva .art {
            text-align: right;
            margin-right: 10px;
            width: 100%;
        }

        #invoice-info {
            float: left;
            margin: 20px 40px 0 30px;
        }

        #invoice-info > div > span {
            display: inline-block;
            min-width: 20px;
            min-height: 18px;
            margin-bottom: 3px;
        }

        #invoice-info > div > span:first-child {
            color: black;
        }

        #invoice-info > div > span:last-child {
            color: #aaa;
        }

        #invoice-info:after {
            content: '';
            display: block;
            clear: both;
        }

        #terms {
            float: left;
            margin-top: 50px;
        }

        #terms .notes {
            min-height: 30px;
            min-width: 50px;
            font-weight: bold;
        }

        #terms .payment-info {
            margin-bottom: 3px;
            min-width: 20px;
            display: block;
            width: 350px;
            height: 130px;
            box-shadow: 0px 0px 20px rgb(80 80 80 / 70%);
            background: #f1f1f1;
            border-radius: 10px;
            padding: 10px 20px;
        }

        #terms .payment-info .top {
            height: 115px;
        }

        /**
        * If the printed invoice is not looking as expected you may tune up
        * the print styles (you can use !important to override styles)
        */
        @media print {
            /* Here goes your print styles */
            .quote {


            }

            html body {
                -webkit-print-color-adjust: exact !important;
                margin: 0;
            }

        }

    </style>
@endsection


@section('content')
    <section class="quote">

        <section id="memo">
            <div class="logo">
                <img src="{{ asset('images/groupez.png') }}"/>
            </div>

            <div class="company-info">
                <div>GroupeZ</div>

                <br/>

                <span>******</span>
                <span>*************</span>

                <br/>

                <span>* |</span>***************
                <span> https://groupez.xyz | contact@groupez.dev</span>
            </div>

        </section>

        <section id="invoice-title-number">

            <span id="title">DEVIS</span>
            <span id="number">#{{ sprintf("%'.05d\n", $quote->id) }}</span>

        </section>

        <section id="client-info">
            <span>FACTURE POUR:</span>
            <div>
                <span class="bold">{{ $customer->getFullName() }}</span>
            </div>

            <div>
                <span>{{ $customer->address }}</span>
            </div>

            <div>
                <span>{{ $customer->postal_code }} {{ $customer->city }} - {{ $customer->country }}</span>
            </div>

            <div>
                <span>{{ $customer->phone }}</span>
            </div>

            <div>
                <span>{{ $user->email }}</span>
            </div>
        </section>

        <section id="items">

            <table cellpadding="0" cellspacing="0">

                <tr>
                    <th style="width: 10px;"></th> <!-- Dummy cell for the row number and row commands -->
                    <th>Article</th>
                    <th style="width: 20px;">Heure</th>
                    <th style="width: 50px;">Taux Horaire</th>
                    <th style="width: 20px;">total</th>
                </tr>

                @foreach($quote->contents as $content)
                    <tr data-iterate="item">
                        <td>{{ $content->id }}</td>
                        <td class="item-column">
                            <span>{{ $content->title }}</span>
                            <small>{{ $content->description }}</small>
                        </td>
                        <td>{{ $content->hour }}</td>
                        <td>{{ $content->rate }}€</td>
                        <td>{{ $content->price }}€</td>
                    </tr>
                @endforeach

            </table>

        </section>

        <section id="sums">

            <table cellpadding="0" cellspacing="0">

                <tr class="amount-total">
                    <th>total:</th>
                    <td>{{ $quote->getPrice() }}€</td>
                </tr>

                <tr>
                    <th>montant dû:</th>
                    <td>{{ $quote->getPrice() }}€</td>
                </tr>

            </table>

            <div class="clearfix"></div>

        </section>

        <section id="tva">
            <span class="art">TVA non applicable, art, 293B du CGI</span>
        </section>

        <section id="invoice-info">
            <div>
                <span>Date de création:</span> <span>{{ format_date($quote->created_at, true, 'fr_FR') }}</span>
            </div>
            <div>
                <span>Valable jusqu'au:</span>
                <span>{{ format_date(new \Carbon\Carbon($quote->delivery_at), true, 'fr_FR') }}</span>
            </div>

            <div>
                <span>Monnaie:</span> <span>EUR</span>
            </div>
            <div>
                <span>IBAN:</span> <span>FR76 1020 6082 0198 7619 7716 443</span>
            </div>
        </section>

        <section id="terms">

            <div class="notes">Pour le client</div>
            <div class="payment-info">
                <div class="top">
                    Mention "Bon pour accord", date et signature
                </div>
                <div class="bottom">
                    ..... / ..... / ..........
                </div>
            </div>

        </section>

    </section>
@endsection