@extends('layouts.login.master')
@section('title')
    {{__('labels.Sign_in')}}
@endsection
@section('content')

    @foreach (LaravelLocalization::getSupportedLocales() as $localeCode => $properties)
        @if($properties['native'] != LaravelLocalization::getCurrentLocaleNative() )
            <a style="position: absolute;padding: 10px;" rel="alternate" hreflang="{{ $localeCode }}" href="{{ LaravelLocalization::getLocalizedURL($localeCode, null, [], true) }}">
                {{ $properties['native'] }}
            </a>
        @endif
    @endforeach
    <div class="section-authentication-signin d-flex align-items-center justify-content-center my-5 my-lg-0">
        <div class="container-fluid">
            <div class="row">
                <div class="col mx-auto">
                    <div class="mb-4 text-center">
                        <img src="{{asset(websiteInfo_hlp('logo'))}}" width="180"  alt="" />
                    </div>

                    @include('message')

                    @if (session()->has('disable'))
                        <div class="alert alert-danger border-0 bg-danger alert-dismissible fade show py-2">
                            <div class="d-flex align-items-center">
                                <div class="font-35 text-white"><i class='bx bxs-message-square-x'></i>
                                </div>
                                <div class="ms-3">
                                    <div class="text-white">{{ __('messages.Your account is disabled')}}</div>
                                </div>
                            </div>
                            <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
                        </div>
                    @endif



                    <div class="row">
                        <div class="col-xl-4 mx-auto">
                            <h6 class="mb-0 text-uppercase">{{$title}}</h6>
                            <hr/>
                            <div class="card">
                                <div class="card-body">
                                    <div class="d-flex flex-column align-items-center text-center">
                                        <div class="mt-3" style="font-size: 12pt">
                                            <div id="captureMe" class="center" style="padding: 15px">

                                                @if ($invitation->user_image != null)
                                                    <img src="{{asset('storage/users/'.$invitation->user_image )}}" alt="Admin" class="rounded-circle p-1 bg-primary" width="110">
                                                @else
                                                    <img src="{{asset('default/logo.png')}}" alt="Admin" class="rounded-circle p-1 bg-primary" width="110">
                                                @endif
                                                <p class="text-secondary mb-1"><span style="color: #0bb2d3"> {{trans('guest/guests.name')}}</span> <span>{{ $invitation->visitor_name }}</span></p>
                                                <p class="text-secondary mb-1"><span style="color: #0bb2d3"> {{trans('guest/guests.visitor_id')}}</span> <span>{{ $invitation->user_code }}</span></p>
                                                <p class="text-secondary mb-1"><span style="color: #0bb2d3">{{trans('guest/guests.invitation_name')}}</span> <span>{{ json_decode($invitation->event_name,true)[app()->getLocale()] }}</span></p>
                                                <p class="text-secondary mb-1"><span style="color: #0bb2d3">{{trans('guest/guests.start_date')}} </span> <span>{{ $invitation->accStartTime }}</span></p>
                                                <p class="text-secondary mb-1"><span style="color: #0bb2d3">{{trans('guest/guests.end_date')}}</span> <span>{{ $invitation->accEndTime }}</span></p>

                                                <p class="text-secondary mb-1 mt-1">
                                                    {!! QrCode::size(100)->gradient (150, 85, 155, 55, 10, 150,'vertical')->generate($invitation->cardNo); !!}
                                                </p>
                                                <br>
                                                <div style="text-align: center;">
                                                    <input type="text" style="display: none" id="txt" />
                                                </div>
                                            </div>

                                            <div style="text-align: center;">
                                                <button class="btn btn-primary" onclick="convertToImage()" style="background-color: #0bb2d3">
                                                    {{__('labels.print')}}
                                                </button>
                                            </div>

                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!--end row-->
        </div>
    </div>
    </div>
@endsection
@push('js')
    <script>
        $(document).ready(function () {
            $("#show_hide_password a").on('click', function (event) {
                event.preventDefault();
                if ($('#show_hide_password input').attr("type") == "text") {
                    $('#show_hide_password input').attr('type', 'password');
                    $('#show_hide_password i').addClass("bx-hide");
                    $('#show_hide_password i').removeClass("bx-show");
                } else if ($('#show_hide_password input').attr("type") == "password") {
                    $('#show_hide_password input').attr('type', 'text');
                    $('#show_hide_password i').removeClass("bx-hide");
                    $('#show_hide_password i').addClass("bx-show");
                }
            });
        });
    </script>


@endpush

@push('js')
    <script>
        $("document").ready(function(){
            setTimeout(function(){
                $("div.alert").fadeIn();
            } ); // 5 secs

        });
    </script>
    <script src="https://cdn.jsdelivr.net/npm/html2canvas@1.4.1/dist/html2canvas.min.js"></script>
    <script src="{{ asset('admin/assets/plugins/print-tool/require.js') }}" ></script>
    <script src="{{ asset('admin/assets/plugins/print-tool/socketsender.js') }}" ></script>



    <script>
        function convertToImage() {
            // Define the desired width and height for the image
            var desiredWidth = 500; // A4 width in pixels at 96dpi
            var desiredHeight = 700; // A4 height in pixels at 96dpi
            var scale = 1.5; // Scale factor for capturing the content

            // Create a new canvas element with the desired size
            var canvas = document.createElement('canvas');
            canvas.width = desiredWidth * scale;
            canvas.height = desiredHeight * scale;
            var context = canvas.getContext('2d');
            context.scale(scale, scale); // Scale the context for higher resolution

            // Use html2canvas to render the HTML element onto the canvas
            html2canvas(document.querySelector("#captureMe"), { canvas: canvas, scale: scale }).then(canvas => {
                canvas.toBlob(function(blob) {
                    var reader = new FileReader();
                    reader.readAsDataURL(blob);
                    reader.onloadend = function() {
                        var str = reader.result.split(',')[1]; // Extract base64 data
                        console.log(str);
                        document.getElementById('txt').value = str;
                        sendany()
                    }
                }, 'image/jpeg'); // Specify JPEG format and quality
            });
        }


    </script>




@endpush