@extends('layouts.app')

@push('css')
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.css">
    <script src="https://kit.fontawesome.com/4b42f03c47.js" crossorigin="anonymous"></script>
    <style>
        .qr-img{
            border: 10px solid #003399;
            border-radius: 5px;
            padding: 15px;
            width: 200px;
        }
        .info-card{
            margin-top: 10px;
            background-color: #003399;
            border-top-left-radius: 50px;
            border-bottom-left-radius: 50px;
            border-top-right-radius: 50px;
            border-bottom-right-radius: 50px;
            width: 200px;
            height: 50px;
            display: flex;
            flex-direction: row;
            text-align: left;
            margin-bottom: 50px;
        }
        .icono-info{
            margin-left: 8px;
            margin-right: 20px;
            align-self: center;
            align-items: center;
            text-align: center;
            font-size: 24px;
            color: #003399;
            background-color: #ffffff;
            border-radius: 50%;
            width: 35px;
            height: 35px;
        }
        .info-name{
            font-size: 14px;
            color: #ffffff;
            align-self: center;
            text-transform: capitalize;
            white-space: normal;
            width: 70%;
        }
        .card{
            width: 395px;
            margin: 10px;
            align-self: center;
            border: 3px dashed #e0e0e0;
        }
        .btn-descargar{
            text-decoration: none;
            position: absolute;
            bottom: 0;
            left: 0;
        }
        .info-case{
            display: flex;
            flex-direction: row;
        }
        .iconos-info{
            margin-right: 5px;
        }
        .col-bottom{
            display: flex;
            flex-direction: column;
        }
        .name{
            font-size: 40px;
        }
        .info{
            font-size: 18px;
        }
        #frame{
            margin-bottom: 10%;
            width: 200px;
            margin: 0 auto;
        }
    </style>
@endpush

@section('content')
<div class="container ml-0 mr-0 pl-0 pr-0 row">
    <div class="animate__animated animate__fadeInUp container tarjetas tarjeta-gris p-3 p-sm-2 p-md-3 p-lg-5 p-xl-5 col-12">
        <div class="row row-bottom">
            <div class="col-12 col-sm-12 col-md-6 col-lg-6 col-xl-6">
                <h3 class="texto-obscuro">Detalle del QR</h3>
                <nav class="breadcrumb"><a class="breadcrumb-item" href="{{ url('qr_list') }}">QR's</a><span class="breadcrumb-item active">Detalle del QR</span></nav>
            </div>
        </div>
        <div class="empty-space-10"></div>
        <div class="row">
            <div class="col-12 row row-centrado m-0 p-0">
                <div class="col-12 col-sm-12 col-md-6 col-lg-6 col-xl-6 tarjeta-blanca pl-5 pr-5 pt-2 pb-2 h-100">
                    <div class="empty-space-20"></div>

                    <div id="frame">
                        <img class="qr-img" src="data:image/png;base64,{!! base64_encode(
                            QrCode::format('png')
                            ->color(0, 51, 153)
                            ->size(500)
                            ->generate(asset('qr/'.$qr->id))
                            ) !!}" alt="">
                        <div class="info-card">
                            <div class="icono-info">
                                <img src="{{asset('imagenes/logoSKF.png')}}" style="width:30px;margin-top:-5px;" alt="" />
                            </div>
                            <div class="titulo info-name">
                                {{ $qr->name.' '.$qr->a_paterno.' '.$qr->a_materno }}
                            </div>
                        </div>
                    </div>
                    <a id="download" class="btn btn-principal btn-descargar text-white width-200">
                        <span>
                            <svg version="1.1" id="Capa_1" height="12" width="12" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
                                viewBox="0 0 477.9 477.9" style="enable-background:new 0 0 477.9 477.9;" xml:space="preserve">
                                <style type="text/css">
                                    .st0{fill:#ffffff;}
                                </style>
                                <g>
                                    <g>
                                        <path class="st0" d="M460.7,306.8c-9.5,0-17.1,7.7-17.1,17.1v102.9c0,9.5-7.7,17.1-17.1,17.1h-375c-9.5,0-17.1-7.7-17.1-17.1V324
                                            c0-9.5-7.7-17.1-17.1-17.1S0,314.5,0,324v102.9c0,28.4,23,51.4,51.4,51.4h375c28.4,0,51.4-23,51.4-51.4V324
                                            C477.9,314.5,470.2,306.8,460.7,306.8z"/>
                                    </g>
                                </g>
                                <g>
                                    <g>
                                        <path class="st0" d="M335.9,192.3c-6.6-6.4-17.1-6.4-23.7,0L256,248.5V20c0-9.4-7.6-17.1-17.1-17.1s-17.1,7.6-17.1,17.1v228.5
                                            l-56.2-56.2c-6.8-6.5-17.6-6.4-24.1,0.4c-6.4,6.6-6.4,17.1,0,23.7l85.3,85.3c6.7,6.7,17.5,6.7,24.1,0l0,0l85.3-85.3
                                            C342.9,209.6,342.7,198.8,335.9,192.3z"/>
                                    </g>
                                </g>
                            </svg>
                        </span>  Descargar</a>
                </div>
                <div class="col-12 col-sm-12 col-md-6 col-lg-6 col-xl-6 tarjeta-gris pl-5 pr-5 pt-2 pb-2 h-100" style="background: #dfdfdf">
                    <div class="empty-space-20"></div>
                    <h4 class="texto-azul name">{{ $qr->name.' '.$qr->a_paterno.' '.$qr->a_materno }}</h4>
                    <div class="empty-space-30"></div>
                    <div class="row">
                        <div class="col-12">
                            @if ($qr->telefono != null)
                            <div class="col-bottom"><h6 class="texto-azul">Teléfono</h6><p class="text-uppercase info">{{ $qr->telefono }}</p></div>
                            @endif
                            @if ($qr->email != null)
                            <div class="col-bottom"><h6 class="texto-azul">Email</h6><p class="text-lowercase info">{{ $qr->email }}</p></div>
                            @endif
                        </div>
                        <div class="empty-space-10"></div>
                        <div class="col-12">
                            @if ($qr->empresa != null)
                            <div class="col-bottom"><h6 class="texto-azul">Empresa</h6><p class="text-uppercase info">{{ $qr->empresa }}</p></div>
                            @endif
                            @if ($qr->direccion != null)
                            <div class="col-bottom"><h6 class="texto-azul">Dirección</h6><p class="text-capitalize info">{{ $qr->direccion }}</p></div>
                            @endif
                        </div>
                        <div class="col-12">
                            <div class="empty-space-10"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="empty-space-50"></div>
        <div class="row botonera-inferior">
            <div class="col-12 p-0 m-0 text-right botonera-formulario">
                <a href="{{ url('qr_list') }}" class="btn btn-secundario text-white width-250">Regresar <span><-</span></a>
            </div>
        </div>
        <div class="empty-space-50"></div>
    </div>
</div>
@endsection

@push('scripts')
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.3.2/html2canvas.min.js"></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.3.2/html2canvas.esm.js"></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.3.2/html2canvas.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script type="text/javascript">
        var dir = '_';
        jQuery(document).ready(function(){
            jQuery("#download").click(function(){
                screenshot();
            });
        });

        function screenshot(){
            html2canvas(document.getElementById("frame")).then(function(canvas){
                downloadImage(canvas.toDataURL(),"qr"+dir+".png");
            });
        }

        function downloadImage(uri, filename){
            var link = document.createElement('a');
            if(typeof link.download !== 'string'){
                window.open(uri);
            }
            else{
                link.href = uri;
                link.download = filename;
                accountForFirefox(clickLink, link);
            }
        }

        function clickLink(link){
            link.click();
        }

        function accountForFirefox(click){
            var link = arguments[1];
            document.body.appendChild(link);
            click(link);
            document.body.removeChild(link);
        }
    </script>
@endpush