@extends('layouts.invoice.master')

@section('title', 'Invoice2')


@section('style')
<style type="text/css">
    body {
        font-family: Rubik, sans-serif;
        display: block;
        color: #000248;
    }
</style>
@endsection

@section('main_content')
<table style="width:1160px;margin:0 auto;">
    <tbody>
        <tr>
            <td>
                <table style="width: 100%;">
                    <tbody>
                        <tr>
                            <td><img src="{{ asset('assets/images/logo/logo.png') }}" alt="logo">
                                <address style=" margin-top: 10px; font-style:normal;">
                                    <span style="font-size: 18px; line-height: 1.5; font-weight: 700;">
                                        Onyx Aluguel de Aparelhos E Desenvolvimento de Software Ltda
                                    </span>
                                    <br>
                                    <span>
                                        Rua Jose Ferreira de Lima, 289 - Galpao114
                                        Jardim Veneza - 58.084-102
                                        <br>
                                        JOAO PESSOA - PB</span>
                                </address>
                            </td>
                            <td style="text-align:end;"><span
                                    style="display:block; line-height: 1.5; font-size:18px; font-weight:500;"></span><span
                                    style="display:block; line-height: 1.5; font-size:18px; font-weight:500;"></span><span
                                    style="display:block; font-size: 18px; line-height: 1.5; font-weight: 700;">Contato
                                    : (83)
                                    9906-5558</span></td>
                        </tr>
                    </tbody>
                </table>
            </td>
        </tr>
        <tr>
            <td>
                <table style="width:100%;">
                    <tbody>
                        <tr style="display:flex;justify-content:space-between;border-top: 1px solid rgba(82, 82, 108, 0.3);border-bottom: 1px solid rgba(82, 82, 108, 0.3);padding: 25px 0;">
                            <td style="display:flex;align-items:center; gap: 6px;">
                                <span style=" font-size: 18px; font-weight: 400;">Pedido
                                    No.</span>
                                <h4 style="margin:0;font-weight:600; font-size: 18px;">{{$pedidos->id}}</h4>
                            </td>
                            <td style="display:flex;align-items:center; gap: 6px;"> <span
                                    style="font-size: 18px; font-weight: 400;">Data:
                                </span>
                                <h4 style="margin:0;font-weight:600; font-size: 18px;">{{$pedidos->ped_dt_entrada}}</h4>
                            </td>
                            <td style="display:flex;align-items:center; gap: 6px;">
                                <span style=" font-size: 18px; font-weight: 400;">Tipo Pedido:</span>
                                <h4 style="margin:0; font-size: 18px;padding:6px 0px; font-weight: 600;">
                                    {{$pedidos->tipo_pedidos_desc}}
                                </h4>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </td>
        </tr>
        <tr>
            <td>
                <table style="width: 100%;">
                    <tbody>
                        <tr style="padding: 28px 0; display:block;">
                            <td Style="width:63%;"><span
                                    style=" font-size: 16px; font-weight: 500;"></span>
                                <h4 style="font-weight:700; margin: 12px 0 6px 0; font-size: 18px;"> {{$pedidos->nome_cli}}</h4>
                                <span style="display:block; line-height: 1.5; font-size: 18px; font-weight: 400;">
                                    Cep: {{$pedidos->cep}}<br>Endereço: {{$pedidos->rua}} - {{$pedidos->num}} / {{$pedidos->bairro}} <br> {{$pedidos->cidade}} - {{$pedidos->uf}}</span><span
                                    style="line-height:2.6; font-size: 18px; font-weight: 400;"></span>
                            </td>

                        </tr>
                    </tbody>
                </table>
            </td>
        </tr>
        <tr>
            <td>
                <table
                    style="width: 100%;border-collapse: separate;border-spacing: 0;border: 1px solid rgba(82, 82, 108, 0.1)">
                    <thead>
                        <tr
                            style="background: #7366FF;border-radius: 8px;overflow: hidden;box-shadow: 0px 10.9412px 10.9412px rgba(82, 77, 141, 0.04), 0px 9.51387px 7.6111px rgba(82, 77, 141, 0.06), 0px 5.05275px 4.0422px rgba(82, 77, 141, 0.0484671);border-radius: 5.47059px;">
                            <th style="padding: 18px 15px;text-align: left"><span
                                    style="color: #fff; font-size: 18px;">Id</span></th>
                            <th style="padding: 18px 15px;text-align: left"><span
                                    style="color: #fff; font-size: 18px;">Produto</span></th>
                            <th style="padding: 18px 15px;text-align: left"><span
                                    style="color: #fff; font-size: 18px;">Quant</span>
                            </th>
                            <th style="padding: 18px 15px;text-align: left"><span
                                    style="color: #fff; font-size: 18px;">Un</span>
                            </th>
                            <th style="padding: 18px 15px;text-align: left"><span
                                    style="color: #fff; font-size: 18px;">Valor Unitário</span>
                            </th>
                            <th style="padding: 18px 15px;text-align: left"><span
                                    style="color: #fff; font-size: 18px;">Total</span>
                            </th>
                        </tr>
                    </thead>

                    <tbody>
                        @foreach ($pedidos_os as $p_os )
                        <tr
                            style="background-color: rgba(245, 246, 249, 1);box-shadow: 0px 1px 0px 0px rgba(82, 82, 108, 0.15);">
                            <td style="padding: 18px 15px;display:flex;align-items: center;gap: 10px;">{{$p_os->id_prod}}
                                <!--<span style="width: 54px; height: 51px; background-color:#F5F6F9; display: flex; justify-content: center;align-items: center; border-radius: 5px;">
                                    <img src="{{ asset('assets/images/dashboard-8/product-categories/laptop.png') }}" alt="laptop" style="height:29px;">
                                </span>
                                <ul style="padding: 0;margin: 0;list-style: none;">
                                    <li>
                                        <h4 style="font-weight:400; margin:4px 0px; font-size: 18px;">Apple Desktop</h4>
                                        <span style="color: #52526C;opacity: 0.8; font-size: 14px;">#XDG-6437</span>
                                    </li>
                                </ul>-->
                            </td>
                            <td style="padding: 18px 15px;"><span style="font-size: 18px;">{{$p_os->prod_nome}}</span></td>
                            <td style="padding: 18px 15px; width: 12%;"> <span style="font-size: 18px;">{{$p_os->det_quantidade}}</span></td>
                            <td style="padding: 18px 15px; width: 12%;"> <span style="font-size: 18px;">{{$p_os->unidade_sigla}}</span>
                            </td>
                            <td style="padding: 18px 15px; width: 10%;"> <span style="font-size: 18px;">{{$p_os->det_valor_uni}}</span></td>
                            <td style="padding: 18px 15px;"><span style="font-size: 18px;"></span></td>
                        </tr>

                        @endforeach
                    </tbody>
                </table>
            </td>
        </tr>
        <tr>
            <td>
                <table style="float: right;">
                    <tfoot>
                        <tr>
                            <td style="padding: 5px 24px 5px 0; padding-top: 15px; text-align: end;"> <span
                                    style=" font-size: 18px; font-weight: 400;">Subtotal </span><span
                                    style="margin-left: 8px; font-size: 18px;">:</span></td>
                            <td style="padding: 5px 0;text-align: left;padding-top: 15px;"><span
                                    style="font-size: 18px;"></span></td>
                        </tr>
                        <tr>
                            <td style="padding: 5px 24px 5px 0; text-align: end;"> <span
                                    style="font-size: 18px; font-weight: 400;">Descontos</span><span
                                    style="margin-left: 8px; font-size: 18px;">:</span></td>
                            <td style="padding: 5px 0;text-align: left;padding-top: 0;"><span
                                    style="font-size: 18px;"></span>
                            </td>
                        </tr>
                        <tr>
                            <td style="padding: 5px 24px 5px 0; text-align: end;"> <span
                                    style="font-size: 18px; font-weight: 400;">Frete
                                </span><span style="margin-left: 8px; font-size: 18px;">:</span></td>
                            <td style="padding: 5px 0;text-align: left;padding-top: 0;"><span
                                    style="font-size: 18px;"></span>
                            </td>
                        </tr>
                        <tr>
                            <td style="padding: 5px 24px 5px 0; text-align: end;"> <span
                                    style=" font-size: 18px; font-weight: 400;">Impostos
                                </span><span style="margin-left: 8px; font-size: 18px;">:</span></td>
                            <td style="padding: 5px 0;text-align: left;padding-top: 0;"><span
                                    style="font-size: 18px;"></span>
                            </td>
                        </tr>
                        <tr>
                            <td style="padding: 12px 24px 22px 0;"> <span
                                    style="font-weight: 600; font-size: 20px; color: rgba(0, 2, 72, 1);">Total
                                </span><span style="margin-left: 8px;">:</span></td>
                            <td style="padding: 12px 24px 22px 0;;text-align: right"><span
                                    style="font-weight: 500; font-size: 20px; color: rgba(115, 102, 255, 1);"></span>
                            </td>
                        </tr>
                    </tfoot>
                </table>
            </td>
        </tr>
        <tr>
            <td>
                <table style="width: 100%;">
                    <tbody>
                        <tr style="padding: 28px 0; display:block;">
                            <td Style="width:63%;">
                                <span style=" font-size: 16px; font-weight: 500;"></span>
                                <h4 style="font-weight:700; margin: 12px 0 6px 0; font-size: 18px;">Observação: <br> {{$pedidos->ped_observacoes}}</h4>

                            </td>

                        </tr>
                    </tbody>
                </table>
            </td>
        </tr>
        <tr>
            <td> <span
                    style="display:block;background: rgba(82, 82, 108, 0.3);height: 1px;width: 100%;margin-bottom:24px;"></span>
            </td>
        </tr>
        <tr>
            <td> <span style="display: flex; justify-content: end; gap: 15px;"><a
                        style="background: rgba(115, 102, 255, 1); color:rgba(255, 255, 255, 1);border-radius: 10px;padding: 18px 27px;font-size: 16px;font-weight: 600;outline: 0;border: 0; text-decoration: none;"
                        href="#!" onclick="window.print();">Print Invoice<i class="icon-arrow-right"
                            style="font-size:13px;font-weight:bold; margin-left: 10px;"></i></a><a
                        style="background: rgba(115, 102, 255, 0.1);color: rgba(115, 102, 255, 1);border-radius: 10px;padding: 18px 27px;font-size: 16px;font-weight: 600;outline: 0;border: 0; text-decoration: none;"
                        href="" download="">Download<i class="icon-arrow-right"
                            style="font-size:13px;font-weight:bold; margin-left: 10px;"> </i></a></span></td>
        </tr>
    </tbody>
</table>
@endsection