@extends('layouts.default')
@section('title', 'Sua Carteirinha')

@section('content')
<link rel="stylesheet" href="{{ asset('css/style_colors.css?v=2') }}">
<style>
	.carteirinha {
		width: 50%;
		border: 1px solid;
		border-radius: 5px;
		padding: 10px;
		background-image: linear-gradient(to right, var(--corPrincipal), var(--corTerciaria));
	}
	.img {
		width: 100%;
		margin: 5%;
		padding: 5%;
		border: 1px solid #ccc;
		border-radius: 9px;
		background: #fff;
	}
	.qr-code {
		padding-right: 20px;
	}

	.carteirinha-texto {
		font-size: 1.0vw;
	    color: #fff;
	    font-weight: bold;
	}


	@media print {
	  	body * {
	   		visibility: hidden;
	  	}
	  	#section-to-print, #section-to-print * {
		    visibility: visible;
	  	}
	  	#section-to-print {
	    	position: absolute;
	    	left: 0;
	    	top: 0;
	  	}
	}
</style>

<div class="card">
    <div class="card-header d-flex justify-content-between align-items-end">
		<h3>Sua Carteirinha</h3>
    </div>

    <div class="card-body">

    	<div class="row carteirinha" id='section-to-print'>
    		<div class="col-md-3 align-self-center">
    			<img class='img' src="{{$imagem}}">
    		</div>
    		<div class="col-md-5 col align-self-center carteirinha-texto">
    			<div>
    				<ul>
    					<li><strong>Nome: </strong> {{$associado->nomeCompleto}}</li>
                        <li><strong>CPF: </strong> {{$associado->cpf}}</li>
                        <li><strong>Tipo Sanguineo: </strong> {{$associado->tipo_sanguineo}}</li>

    				</ul>
    			</div>
    		</div>
    		<div class="col-md-4 ml-md-auto align-self-center">
		    	<div class="visible-print text-center qr-code">
		    		<img class='img' src="/associados/qrcode-v2/{{\Crypt::encrypt($associado->id)}}">
                    @if (env('APP_NAME') == 'ASSUMA')
		    		<img src="https://www.une.org.br/assets/images/logo-une-descricao.svg" style="width: 121px;">
		    		@endif
		    	</div>
    		</div>
    	</div>

    </div>
</div>
@stop

@section('table-delete')
"rotas"
@stop