@php
    $title = $ensemble->name;
@endphp
@extends('layouts.app')
@section('title', $title)
@section('content')
    <x-page-header>
        <x-slot name="left">
            <x-breadcrumbs :items="[
                ['label' => __('sidebar.dashboard'), 'url' => route('home.dashboard')],
                ['label' => __('ensemble.index'), 'url' => route('ensembles.index')],
                ['label' => $title, 'url' => '']
            ]" />
        </x-slot>

        <x-slot name="right">
            @include('shared.button', ['type' => 'edit', 'url' => route('ensembles.edit', $ensemble)])
            @include('shared.button', ['type' => 'delete', 'url' => route('ensembles.destroy', $ensemble)])
        </x-slot>
    </x-page-header>

    <x-hr/>

    <ul class="space-y-5">
        <li>
            {{ __('table.name') . ' : ' . $ensemble->name }}
        </li>
        <li>
            {{ __('forms.protection') }} : {{ $ensemble->GetProtection() }}
        </li>
        <li>
            {{ __('forms.CreatedAt') . ' : ' . CheckDateTime($ensemble->created_at, 'show', 'FullDateTime') }}
        </li>
        <li>
            {{ __('forms.UpdatedAt') . ' : ' . CheckDateTime($ensemble->updated_at, 'show', 'FullDateTime') }}
        </li>
        <li>
            <span class="font-semibold text-xl">
                {{ __('forms.QRCode') }}
            </span>
            <div id="qrcode" class="my-2 p-2 bg-white w-max"></div>
            <div>
                <span>
                    {{ __('forms.ScanToGetDataOr') }}
                </span>
                <button type="button" id="copy" class="hover:underline hover:text-blue-500">
                    {{ __('forms.ClickHereToCopyImage') }}
                </button>
            </div>
        </li>
    </ul>

    <script>
        window.addEventListener('load', function () {
            $(document).ready(function () {
                const url = "{{ route('ensembles.GetData', $ensemble) }}";
                new QRCode(document.getElementById("qrcode"), {
                    text: url,
                    width: 150,
                    height: 150,
                });

                $('#copy').on('click', function () {
                    const imgSrc = $('#qrcode').find('img').attr('src');
                    fetch(imgSrc)
                        .then(response => response.blob())
                        .then(blob => {
                            const item = new ClipboardItem({'image/png': blob});
                            navigator.clipboard.write([item]).then(() => {
                                alert('Image copied to clipboard');
                            }).catch(err => {
                                console.log('Could not copy image: ', err);
                                alert('Could not copy image, please contact support.');
                            });
                        })
                        .catch(err => {
                            console.log('Error fetching image: ', err);
                            alert('Error fetching image, please contact support.');
                        });
                });
            });
        });
    </script>
@endsection