<table>
    <link href="{{ asset('fontawesome-free/css/all.min.css?v2') }}" rel="stylesheet">
    <link href="{{ asset('css/sb-admin-personalizado.css?v2') }}" rel="stylesheet">
    <link href="{{ asset('css/jquery.dataTables.min.css?v2') }}" rel="stylesheet">
    <link href="{{ asset('css/toastr.min.css?v2') }}" rel="stylesheet">
    <link href="{{ asset('css/select2.css?v2') }}" rel="stylesheet">
    <link href="{{ asset('css/home.css?v2') }}" rel="stylesheet">
    <link href="{{ asset('css/daterangepicker.css?v2') }}" rel="stylesheet">
    <link href="{{ asset('jquery-ui/jquery-ui.css?v2') }}" rel="stylesheet">
    <head>
        <title>Informe analitos</title>
    </head>
    <style>
        @page {
            size: A4 !important;
            margin: 1.5cm !important;
        }

        @media print {
            html,
            body {
                width: 210mm !important;
                height: 297mm !important;
            }

            body {
                -webkit-print-color-adjust: exact !important;
                -moz-print-color-adjust: exact !important;
                -ms-print-color-adjust: exact !important;
                print-color-adjust: exact !important;
            }
            *{
                page-break-inside: avoid;
            }
            table{
                width: 100%;
            }
        }
    </style>
    <thead>
                <tr>
                    <th>
                        <div style="width: 100%; display: flex; flex-direction: column; align-items: center;">
                            <div class="text-center"
                                 style="display: flex; flex-direction: row; justify-content: space-between; align-items: center; width: 100%">
                                @if(Auth::user()->rol_id_rol != 5)
                                    <img width="18%" src="{{$cliente->imagen_cliente}}" alt="imagen_cliente">
                                @else
                                    <img width="18%" src="{{asset('/img/v2m.jpg')}}" alt="imagen_cliente">
                                @endif
                                <div style="display: flex; justify-content: center; flex-direction: column; align-items: center;
                                padding-top: 1rem; padding-bottom: 2rem; font-size: 1.4em;">
                                    <span style="color: #184a9c">Quik SAS. www.quik.com.co</span>
                                    <span style="color: #184a9c">V2M. V.1.0.</span>
                                    <span style="color: #184a9c">Lista de analitos</span>
                                </div>
                                <img width="18%" src="{{asset('/img/logo-quik.png')}}" alt="imagen_cliente">
                            </div>
                        </div>
                    </th>
                </tr>
                </thead>
    <tbody>
    <tr>
        <td>
            <table style="display: flex; flex-direction: column">
                <tbody>
                <tr>
                    <td>
                        <table class="table table-striped table-sm text-center" style="width: 150%">
                            <thead>
                            <tr>
                                <th scope="col"></th>
                                <th scope="col" class="py-3">Area laboratorio</th>
                                <th scope="col" class="py-3">Nombre</th>
                                <th scope="col" class="py-3">Límite APS</th>
                            </tr>
                            </thead>
                            <tbody>
                            @foreach($analitos as $analito )
                                <tr>
                                    <td class="py-2">{{ $loop->iteration }}</td>
                                    <td>{{ $analito->nom_area }}</td>
                                    <td>{{ $analito->nom_analito }}</td>
                                    <td>{{ $analito->valor_aps }}</td>
                                </tr>
                            @endforeach
                            </tbody>
                        </table>

                    </td>
                </tr>
                </tbody>
            </table>
        </td>
    </tr>
    </tbody>
</table>
<script type="text/javascript">
    window.onafterprint = function () {
        window.close()
    }
    window.onload = function () {
        setTimeout(() => {
            window.focus();
            window.print();
        }, 300)
        window.onfocus = function () {
            window.close();
        }
    };
</script>
