www-data@blackforestbytes:~/plantmytree$
www-data@blackforestbytes:~/plantmytree$ cat resources/views/control/show.blade.php
<x-app-layout>
    <x-slot name="header">
        <h2 class="font-semibold text-xl text-gray-800 leading-tight">
            {{ __('Flächen-Kontrollprotokoll') }}
        </h2>
    </x-slot>

    <div class="py-12">
        <div class="max-w-7xl mx-auto sm:px-6 lg:px-8">
            <div class="bg-white overflow-hidden shadow-sm sm:rounded-lg">
                <div class="p-6 bg-white border-b border-gray-200">
                    Neues Kontroll Protokoll anlegen
                </div>
            </div>
        </div>

        <div class="max-w-7xl mx-auto sm:px-6 lg:px-8 mt-6">
            <div class="bg-white p-6">

                <div class="mb-3">
                    <x-alert-wrapper></x-alert-wrapper>
                </div>

                <form class="" action="{{ route('protocol.control.store') }}" method="POST">
                    @csrf
                    <div class="space-y-8 divide-y divide-gray-200">

                        <div class="">
                            <div>
                                <h3 class="text-lg leading-6 font-medium text-gray-900">
                                    Daten
                                </h3>
                            </div>
                            <div class="mt-6 grid grid-cols-1 gap-y-6 gap-x-4 sm:grid-cols-6">
                                <div class="sm:col-span-12">
                                    <x-label for="jsDataSearch">Suche Fläche</x-label>
                                    <select id="jsDataSearch" class="w-96"></select>
                                </div>

                                <div class="sm:col-span-3">
                                    <x-label for="area">
                                        Fläche
                                    </x-label>
                                    <div class="mt-1">
                                        <x-input type="text" name="area" id="area" required />
                                    </div>
                                </div>

                                <div class="sm:col-span-3">
                                    <x-label for="articleNumber">
                                        Artikel-Nummer
                                    </x-label>
                                    <div class="mt-1">
                                        <x-input type="text" name="article_number" id="articleNumber" required />
                                    </div>
                                </div>

                                <div class="sm:col-span-12">
                                    <x-label for="controller">
                                        Kontrolleur
                                    </x-label>
                                    <div class="mt-1">
                                        <x-input id="controller" name="controller" type="text" required />
                                    </div>
                                    <div class="mt-1">
                                        <x-checkbox id="controller_external" name="controller_external" autocomplete="off">Extern</x-checkbox>
                                    </div>
                                </div>

                                <div class="sm:col-span-12 mt-1">
                                    <x-textarea id="deficit" name="deficit">Festgestellte Mängel/Beschädigungen/nicht angewachsene Setzlinge</x-textarea>
                                </div>

                                <div class="sm:col-span-12">
                                    <div class="">
                                        <x-checkbox id="replacementNecessary" name="replacement_necessary" autocomplete="off">Ersatzpflanzung erforderlich</x-checkbox>
                                    </div>
                                </div>

                                <div id="replacementWrapper" class="grid grid-cols-12 sm:col-span-12 gap-x-4" style="display:none;">
                                    <div class="sm:col-span-5">
                                        <x-label for="reason">
                                            Begründung
                                        </x-label>
                                        <div class="mt-1">
                                            <x-input type="text" name="reason" id="reason" />
                                        </div>
                                    </div>

                                    <div class="sm:col-span-12 md:col-span-2">
                                        <x-label>Datum der Pflanzung</x-label>
                                        <div class="relative">
                                            <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
                                                <svg class="w-5 h-5 text-gray-500" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M6 2a1 1 0 00-1 1v1H4a2 2 0 00-2 2v10a2 2 0 002 2h12a2 2 0 002-2V6a2 2 0 00-2-2h-1V3a1 1 0 10-2 0v1H7V3a1 1 0 00-1-1zm0 5a1 1 0 000 2h8a1 1 0 100-2H6z" clip-rule="evenodd"></path></svg>
                                            </div>
                                            <input id="datepicker" datepicker name="date_of_plantation" type="text" class="bg-gray-50 border border-gray-300 text-gray-900 sm:text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full pl-10 p-2.5" placeholder="Select date" value="{{ now()->format('d.m.Y') }}">
                                        </div>
                                    </div>

                                    <div class="sm:col-span-5">
                                        <x-label for="through">
                                            Durch
                                        </x-label>
                                        <div class="mt-1">
                                            <x-input type="text" name="through" id="through" />
                                        </div>
                                        <div class="mt-1">
                                            <x-checkbox id="through_external" name="through_external" autocomplete="off">Extern</x-checkbox>
                                        </div>
                                    </div>
                                </div>

                                <div class="grid grid-cols-12 sm:col-span-12">
                                    <div class="sm:col-span-12 md:col-span-2">
                                        <x-label>Datum</x-label>
                                        <div class="relative">
                                            <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
                                                <svg class="w-5 h-5 text-gray-500" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M6 2a1 1 0 00-1 1v1H4a2 2 0 00-2 2v10a2 2 0 002 2h12a2 2 0 002-2V6a2 2 0 00-2-2h-1V3a1 1 0 10-2 0v1H7V3a1 1 0 00-1-1zm0 5a1 1 0 000 2h8a1 1 0 100-2H6z" clip-rule="evenodd"></path></svg>
                                            </div>
                                            <input id="datepicker" datepicker name="date" required type="text" class="bg-gray-50 border border-gray-300 text-gray-900 sm:text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full pl-10 p-2.5" placeholder="Select date" value="{{ now()->format('d.m.Y') }}">
                                        </div>
                                    </div>
                                </div>

                                <div class="sm:col-span-12">
                                    <label for="signature">Unterschrift</label>
                                    <div class="h-20 my-2 w-20">
                                        <img src="data:," alt="" id="signature_signature_img" style="height: inherit; width: auto" class="">
                                        <input type="hidden" name="signature" id="signature_signature">
                                    </div>
                                    <div class="">
                                        <x-button type="button" class="add-signature" data-type="signature">Unterschrift hinzufügen</x-button>
                                        <x-button type="button" class="remove-signature" data-type="signature">Unterschrift entfernen</x-button>
                                    </div>
                                </div>


                            </div>
                        </div>

                    </div>

                    <div class="pt-5">
                        <div class="flex justify-end">
                            <button type="button" class="bg-white py-2 px-4 border border-gray-300 rounded-md shadow-sm text-sm font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
                                Cancel
                            </button>
                            <button type="submit" class="ml-3 inline-flex justify-center py-2 px-4 border border-transparent shadow-sm text-sm font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
                                Save
                            </button>
                        </div>
                    </div>
                </form>


            </div>

        </div>
    </div>

    <div id="signatureWrapper" class="signature-wrapper" style="display: none">
        <div id="signature-pad" class="signature-pad">
            <div class="signature-pad--body">
                <canvas id="signaturePad"></canvas>
            </div>
            <div class="signature-pad--footer">
                <div class="description">Sign above</div>

                <div class="signature-pad--actions">
                    <div>
                        <x-button type="button" data-action="close" size="small">
                            <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
                            </svg>
                        </x-button>
                        <x-button type="button" data-action="clear" size="small">
                            <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width={2} d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
                            </svg>
                        </x-button>
                        <button type="button" class="btn btn-sm btn-outline-dark px-3" data-action="undo" title="Rückgängig machen"><i class="fas fa-undo"></i></button>
                    </div>
                    <div>
                        <x-button type="button" data-action="add-signature" class="bg-indigo-600" size="small">
                            <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4" />
                            </svg>
                        </x-button>
                    </div>
                </div>
            </div>
        </div>
    </div>


    <x-slot name="afterStyles">
        <style>

            .signature-wrapper{
                position: fixed;
                top: 0;
                left: 0;
                right: 0;
                bottom: 0;
                z-index: 2000;
                display: flex;
                align-items: center;
                justify-content: center;
                background-color: rgba(0,0,0,0.5);
            }
            .signature-pad {
                position: relative;
                display: -webkit-box;
                display: -ms-flexbox;
                display: flex;
                -webkit-box-orient: vertical;
                -webkit-box-direction: normal;
                -ms-flex-direction: column;
                flex-direction: column;
                font-size: 10px;
                width: 100%;
                height: 100%;
                max-width: 700px;
                max-height: 300px;
                border: 1px solid #e8e8e8;
                background-color: #E6E6E6;
                box-shadow: 0 1px 4px rgba(0, 0, 0, 0.27), 0 0 40px rgba(0, 0, 0, 0.08) inset;
                border-radius: 4px;
                padding: 16px;
            }

            .signature-pad::before,
            .signature-pad::after {
                position: absolute;
                z-index: -1;
                content: "";
                width: 40%;
                height: 10px;
                bottom: 10px;
                background: transparent;
                box-shadow: 0 8px 12px rgba(0, 0, 0, 0.4);
            }

            .signature-pad::before {
                left: 20px;
                -webkit-transform: skew(-3deg) rotate(-3deg);
                transform: skew(-3deg) rotate(-3deg);
            }

            .signature-pad::after {
                right: 20px;
                -webkit-transform: skew(3deg) rotate(3deg);
                transform: skew(3deg) rotate(3deg);
            }

            .signature-pad--body {
                position: relative;
                -webkit-box-flex: 1;
                -ms-flex: 1;
                flex: 1;
                border: 1px solid #f4f4f4;
            }

            .signature-pad--body canvas {
                position: absolute;
                left: 0;
                top: 0;
                width: 100%;
                height: 100%;
                border-radius: 4px;
                box-shadow: 0 0 5px rgba(0, 0, 0, 0.02) inset;
            }

            .signature-pad--footer {
                color: #5B5B5B;
                text-align: center;
                font-size: 1.2em;
                margin-top: 8px;
            }

            .signature-pad--actions {
                display: -webkit-box;
                display: -ms-flexbox;
                display: flex;
                -webkit-box-pack: justify;
                -ms-flex-pack: justify;
                justify-content: space-between;
                margin-top: 8px;
            }
        </style>
        <link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
    </x-slot>

    <x-slot name="afterScripts">
        <script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
        <script src="https://cdn.jsdelivr.net/npm/signature_pad@2.3.2/dist/signature_pad.min.js"></script>
        <script>
            $(document).ready(function (){

                $('#replacementNecessary').change(function (){
                    $('#replacementWrapper').fadeToggle();
                })

                fetchData();

                let data = [];

                function fetchData(){

                     $.ajax({
                        url: '{{ route('articles.search') }}',
                    })
                        .done(function( response ) {
                            data = response.data.map((element) => {
                                return {
                                    id: element.id,
                                    text: element.name,
                                    articleNumber: element.articleNumber,
                                    customAttributes: element.customAttributes,
                                }
                            })

                            $('#jsDataSearch').select2({
                                data: data,
                            });
                        })
                        .fail(function (error){
                            alert('Konnte article nicht laden');
                        })
                    ;

                }

                $('#jsDataSearch').on('select2:select', function (e){
                    const data = e.params.data;
                    console.log(data)

                    $('#articleNumber').val(data.id);

                    data.customAttributes.forEach((item) => {
                        if(item.labelText == 'Ort'){
                            $('#area').val(item.value);
                        }
                    })
                });


                var signatureType;
                $('.add-signature').click(function (){
                    signatureType = $(this).data('type');
                    $('#signatureWrapper').fadeIn();

                    resizeCanvas();
                });

                $('[data-action=close]').click(function (){
                    closeSignaturePad();
                });

                $('.remove-signature').click(function (){
                    let type = $(this).data('type');
                    $('#signature_'+type+'_img').attr('src', '');
                    $('#signature_'+type).val('');
                    $('#remove_'+type+'_signature').fadeOut(0);
                });

                var wrapper = document.getElementById("signature-pad");
                var clearButton = wrapper.querySelector("[data-action=clear]");
                var undoButton = wrapper.querySelector("[data-action=undo]");
                var addSignatureButton = wrapper.querySelector("[data-action=add-signature]");
                var canvas = wrapper.querySelector("canvas");
                var signaturePad = new SignaturePad(canvas, {
                    backgroundColor: 'rgb(255, 255, 255)'
                });

                function resizeCanvas() {
                    var ratio =  Math.max(window.devicePixelRatio || 1, 1);

                    canvas.width = canvas.offsetWidth * ratio;
                    canvas.height = canvas.offsetHeight * ratio;
                    canvas.getContext("2d").scale(ratio, ratio);

                    signaturePad.clear();
                }

                window.onresize = resizeCanvas;
                resizeCanvas();

                function dataURLToBlob(dataURL) {
                    // Code taken from https://github.com/ebidel/filer.js
                    var parts = dataURL.split(';base64,');
                    var contentType = parts[0].split(":")[1];
                    var raw = window.atob(parts[1]);
                    var rawLength = raw.length;
                    var uInt8Array = new Uint8Array(rawLength);

                    for (var i = 0; i < rawLength; ++i) {
                        uInt8Array[i] = raw.charCodeAt(i);
                    }

                    return new Blob([uInt8Array], { type: contentType });
                }

                clearButton.addEventListener("click", function (event) {
                    signaturePad.clear();
                });

                undoButton.addEventListener("click", function (event) {
                    var data = signaturePad.toData();

                    if (data) {
                        data.pop(); // remove the last dot or line
                        signaturePad.fromData(data);
                    }
                });

                function closeSignaturePad(){
                    signaturePad.clear();
                    $('#signatureWrapper').fadeOut();
                }

                addSignatureButton.addEventListener("click", function (event) {
                    if (signaturePad.isEmpty()) {
                        alert("Please provide a signature first.");
                    } else {
                        var dataURL = signaturePad.toDataURL();
                        console.log(dataURL);
                        $('#signature_'+signatureType+'_img').attr('src', dataURL);
                        $('#signature_'+signatureType).val(dataURL);
                        $('#remove_'+signatureType+'_signature').fadeIn();
                        closeSignaturePad();
                    }
                });
            });
        </script>
    </x-slot>

</x-app-layout>

www-data@blackforestbytes:~/plantmytree$