{{-- --------------------------   NEW APP HEAD  ------------------------------- }}
  ? @app:       Assign Work App
 |* @create:    04.12.2024
 |* @author:    Stanislaw Lederhos - mail@codelederhos.de
 |* @description:
        
{{ -------------------------------------------------------------------------- --}}

<div class="row d-flex" data-path="app/exit/index">
    <section id="app-head" class="col-11 p-0 ps-5 position-relative py-2">
        @includeIf('layouts.components.container_header', [
			'title_primary' 	=> 'Arbeit zuordnen',
            // 'class'             => 'gradient-text-okis',
            'title_secondary'   => 'Heute noch ::num_packages:: Pakete',
		])
    </section>

    <section id="card-scanner" class="col-10 p-0 card card-glass position-relative mx-auto border-0" data-step="1">
        @includeIf('layouts.components.card_header', [
            'title' => 'Auftrag QR Code scannen',
        ])
        <div class="card-body mb-2">
            <div class="row mt-3 px-0 mx-auto">
                <div style="width: 250px; margin: 10px auto; padding: 0;" id="order_id_scanner"></div>
            </div>
        </div>
    </section>

    <section id="card-shipping-carrier" class="col-10 p-0 card card-glass position-relative mx-auto border-0" data-step="2">
        @includeIf('layouts.components.card_header', [
            'title' => 'Paket Nr.: ::package_id::',
            'label_pill_bracke' => true,
            'label_pills' => [['title' => '::package_shipping_type::', 'attr' => 'id="pill-package-type"'], 
                              ['title' => '::package_date::',          'attr' => 'id="pill-package-date"']],
        ])
        <div class="card-body mb-2">
            <div class="row mt-3 px-0 mx-auto">
                <form action="{{ route('app.validate_jobs_to_order_check') }}" method="POST">
                    @csrf

                    <div class="row mx-0 px-0">
                        <div class="col-12">
                            <ul id="job-list-ul" class="list-group">
                                @inputField([
                                    'input_type'  	=> 'ui_check_list',
                                    'input_id'    	=> "id-placeholder",
                                    'inputLabel' 	=> "label-placeholder",
                                    'btnClass' 		=> 'py-3',
                                    'listItemClass' => 'job-list-item d-none',
                                    'checkOn'       => 'scan',
                                ])
                            </ul>
                        </div>
                    </div>
                    <div class="row mt-2 mx-0 px-0">
                        <div class="col-12">
                            @includeIf('layouts.components.card_header', [
                                'title'          => 'Bemerkungen zum Paket',
                                'collapse_id'    => 'package_comment',
                            ])
                            <div class="collapse" id="package_comment">
                                @inputField([
                                    'input_type'  => 'textarea',
                                    'input_id'    => "comment",
                                    'input_class' => 'text-danger',
                                    'input_attr'  => 'rows=3 min=5',
                                    'text_editor' => false,
                                    'placeholder' => 'gib hier bitte eine Bemerkungen zum Paket ein.',
                                ])
                            </div>
                        </div>
                    </div>
                    <div id="customer-pickup-fields" class="row mx-0 px-0 d-none">
                        <div class="col-12 d-grid mt-3">
                            @inputField([
                                'input_type'  => 'text',
                                'input_id'    => "customer-pickup-name",
                                'label'       => "Name des Abholers:",
                                'input_class' => '',
                                'input_attr'  => 'min=2',
                                'placeholder' => 'Bitte hier Vor und Nachname eintragen.',
                            ])
                        </div>
                    </div>

                    <div class="row mx-0 px-0">

                        <div class="col d-grid mt-3">
                            <button id="btn-scan-new-order-id" type="button" class="btn btn-secondary py-3 my-1">
                                nächster Auftrag
                            </button>
                        </div>

                        {{-- Normale Lieeferung --}}
                            <div class="col d-grid mt-3 d-none">
                                <button id="start-job-btn" type="button" class="btn btn-success py-3 my-1">
                                    Aufträge einlegen starten
                                </button>
                            </div>

                        {{-- Kunde holt das Paket selbst ab --}}
                            <div class="col d-grid mt-3 d-none">
                                <button id="btn-finish-package-pickup" type="button" class="btn btn-success py-3 my-1 disabled">
                                    Paket wurde abgeholt
                                </button>
                            </div>
                    </div>
                    
                </form>
            </div>
        </div>

        
    </section>

    
    <section id="card-package-scanner" class="col-10 p-0 card card-glass position-relative mx-auto border-0" data-step="3">
        @includeIf('layouts.components.card_header', [
            'title' => '<b>Arbeit in Paket <span class="text-okis fs-3">::packageId::</span> einlegen </b><br> -> dann Paket QR Code scannen.',
        ])
        <div class="card-body mb-2">
            <div class="row mt-3 px-0 mx-auto">
                <div style="width: 250px; margin: 10px auto; padding: 0;" id="order_id_scanner"></div>
                <input type="hidden" name="order_id_scanner" value="">
            </div>
            <div class="row mt-3">
                <div type="button" class="btn btn-success btn-start-scan mx-auto col-xl-3 col-8">
                    jetzt Paket scannen
                </div>
            </div>
            <div class="row mx-0 px-0">
                <div class="col d-grid mt-3 d-none">
                    <button id="btn-scan-next-order" type="button" class="btn btn-secondary py-3 my-1">
                        mit nächstem Auftrag fortfahren
                    </button>
                </div>
            </div>
        </div>
    </section>

    <section id="card-final-compare-scanner" class="col-10 p-0 card card-glass position-relative mx-auto border-0" data-step="4">
        @includeIf('layouts.components.card_header', [
            'title' => 'Zuerst Paket QR Code scannen',
        ])
        <div class="card-body mb-2">
            <div class="row mt-3 px-0 mx-auto">
                <div style="width: 250px; margin: 10px auto; padding: 0;" id="final_compare_scanner"></div>
                <input type="hidden" name="final_compare_scanner" value="">
            </div>
            <div class="row mt-3">
                <div type="button" class="btn btn-secondary btn-cancel-scan mx-auto col-xl-3 col-8">
                    Scan pausieren
                </div>
            </div>
        </div>
    </section>
</div>


<script>
$(document).ready(function(){
    // ---- DEV ----
    const INITIALSTEP = 1;
    const PACKAGETYPE = "";
    const PACKAGEDELEVERYDATE = "";
    // -------------

    const config 				= { fps: 2, qrbox: { width: 250, height: 250 } };
    const sightSec 	   			= 10;
    let html5QrcodeScanner 	    = null;
    
    let packagesCountSelector 	= "#app-head [data-title-section='secondary']";
    let packageCountPlaceholder = "::num_packages::";
    let formularStartTime 		= new Date().getTime();
    let packageId 				= 0;
    let orderId 		        = 0;
    let packageContents 		= null;
    let packageContentsAwait    = null;
    let checkPaketTrackingAwait = null;

    let packageShippingType     = null;
    let packageShippingDate     = null;
    let trackingCode            = null;
    let scannedPackageCheck     = null;
    let checkPaketTracking      = null;
    let numPackages             = "::num_packages::";

    GDApp.initializeStep(INITIALSTEP ?? 1);

    async function updatePackagesCount() {
        $(packagesCountSelector).hide();
        $(packagesCountSelector).html($(packagesCountSelector).html().replace(numPackages, packageCountPlaceholder));

        numPackages = await GDApp.ajaxToOkisApi("getPaketeTodo");
        if ($(packagesCountSelector).length > 0) {
            $(packagesCountSelector).html($(packagesCountSelector).html().replace(packageCountPlaceholder, numPackages));
        }

        $(packagesCountSelector).show();
    }

    GDApp.onCardSwitched = async function(step) {
        updatePackagesCount();

        console.log(`Step ${step} erfolgreich gewechselt.`);
        switch (step) {
            case 1:
                packageContents    = null;

                // load Scanner
                html5QrcodeScanner = GDApp.initializeNewScannerV2(
                    'order_id_scanner',              // Element-ID
                    'off',                           // Initialzustand
                    'Qr-code jetzt scannen',         // Start-Text
                    'Scan pausieren',                // Pause-Text
                    onScanOrderSuccess               // Callback Function für erfolgreiche Scans
                );
                break;

            case 2:

                if (!packageContents) {
                    const getContensResult = await getPackageContents();
                    if (getContensResult) {
                        clog.destroy();
                        clog.success({message: `Paket >> ${packageId} << erfolgreich geladen.`});
                    } else {
                        clog.error({ title: "Paketinhalt nicht verfügbar", message: `` });
                    }
                } 

                const card = $(`section[data-step="2"]`);
                card.hide();

                setTimeout(async function () {

                    // $('#start-job-btn').parent().addClass('d-none');
                    // $('#btn-scan-new-order-id').parent() .removeClass('d-none');

                    if (packageContents) {
                        const replaceResult = await replacePackageCardPlaceholders();
                        if( replaceResult ) {
                            packageContentsAwait = null;
                            card.hide().slideDown(700);
                        } else {
                            clog.destroy();
                            clog.error({ title: "Platzhalter ersetzen nicht möglich!", message: `` });
                        }

                        // Initial reset for final compare scanner
                        $('#card-final-compare-scanner').find('.card-header.card-title').html('Zuerst Paket QR Code scannen');

                        // CHECK Scanned Orders in Package:
                        let allChecked = true; // Variable zum Überprüfen, ob alle Elemente aktiv sind
                        let anyChecked = false; // Variable zum Überprüfen, ob mindestens eines der Elemente aktiv ist

                    
                        $('#job-list-ul li:not(.d-none) input.btn-check').each(async function () {
                            // Überprüfe, ob das aktuelle Element aktiv ist
                            if ($(this).val() === '1') {
                                anyChecked = true; // Mindestens eines der Elemente ist aktiv
                            } else {
                                allChecked = false; // Nicht alle Elemente sind aktiv
                            }
                        });

                        if (allChecked) {
                            // Alle Elemente sind aktiv ------------------------------------------------------- Alle Elemente sind aktiv -------------------------
                            
                            // $('#btn-scan-new-order-id-with-safe').parent('.col').addClass('d-none');

                            console.log('packageShippingType', packageShippingType);
                            

                            if (packageShippingType === 'Abholung') {
                                clog.destroy();
                                clog.info({ message: `Bitte den Namen des Abholers für das Paket ${packageId} eintragen.` });
                                $('#customer-pickup-fields').removeClass('d-none');
                                $('#btn-finish-package-pickup').parent().removeClass('d-none');

                                $('#btn-finish-package-pickup').parent().off('click').on('click', async function() {
                                    let customerName = $('#customer-pickup-name').val().trim(); 

                                    if( customerName.length > 3 ) {

                                        console.log('name valide');
                                        const resultPickup = await customerPickedUpPackage(customerName);

                                        if (resultPickup) {
                                            clog.destroy();
                                            clog.success({ message: `Paket ${packageId} erfolgreich als abgeholt markiert.` });

                                            setTimeout(function () {
                                                GDApp.switchToCard(1);
                                            }, 700);
                                        } else {
                                            clog.destroy();
                                            clog.error({ title: 'Fehler beim verarbeiteen des Pakets', message: `Paket ${packageId} konnte nicht abgeschlossen werden, versuche es erneut oder notiere dir den Namen des Abholers und melde dich bitte an die IT.` });
                                        }
                                        
                                    } else {
                                        clog.info({ message: `Bitte einen gültigen Namen von mindestens 4 Zeichen eintragen.` });
                                    }

                                });

                                $('#customer-pickup-fields').off('input', '#customer-pickup-name').on('input', '#customer-pickup-name', function() {
                                    let customerName = $(this).val().trim(); 

                                    if( customerName.length > 3 ) {
                                        console.log('Eingegebener Kundenname:', customerName);
                                        $('#btn-finish-package-pickup').removeClass('disabled');
                                        console.log('remove class');    
                                    } else {
                                        $('#btn-finish-package-pickup').addClass('disabled');
                                    }

                                });
                                
                            }
                            else if ( packageShippingType === 'Fahrer' ) { 
                                if( GDApp.userHaveRole('Fahrer') ) {
                                    const pickupResult = await driverPickedUpPackage();
                                    if ( pickupResult ) {
                                        clog.destroy();
                                        clog.success({ message: `Paket ${packageId} erfolgreich als eingeladen markiert.` });

                                        GDApp.switchToCard(1);
                                    } else {
                                        clog.destroy();
                                        clog.error({ title: 'Fehler beim verarbeiteen des Pakets', message: `Paket ${packageId} konnte nicht abgeschlossen werden, versuche es erneut oder melde dich bitte an die IT.` });
                                    }
                                }
                                else {
                                    clog.destroy();
                                    clog.error({ title: 'Nicht genug Rechte', message: 'Um das Paket als Fahrer einzulegen, benötigst du den Zugriff auf die Fahrerrolle.' });
                                }
                            } 
                            
                        } else {
                            if (anyChecked) {
                                // Mindestens eines der Elemente ist aktiv  ----------------------------------------------- Mindestens eines der Elemente ist aktiv ------------
                                $('#start-job-btn').html('nächsten Auftrag einlegen')
                                                   .parent().removeClass('d-none');
                                $('#btn-scan-new-order-id-with-safe').parent().removeClass('d-none');

                                $("#okis-app-content").off("click", "#btn-scan-new-order-id-with-safe").on("click", "#btn-scan-new-order-id-with-safe", function () {

                                    if ($(this).hasClass("text-muted")) {
                                        clog.warning({ title: 'Funktion in Entwicklung', message: 'Diese Funktion ist derzeit in Entwicklung und nicht verfügbar.' });
                                        return;
                                    }

                                    let comment = $('#package_comment').find('textarea').val().trim();

                                    if (comment.length >= 5) {

                                        setTimeout(function () {
                                            clog.success({ title: `Paket ${packageId} erfolgreich zwischengespeichert` });
                                        }, 1000);

                                        packageContents = null;
                                        GDApp.switchToCard(1);
                                    } else {
                                        clog.warning({ title: 'Paket unvollständig!', message: 'Bitte geben Sie eine Bemerkung von mindestens 5 Zeichen ein um den Stand des Paketes zu speichern.' })
                                    }

                                })
                            } else {
                                // Keines der Elemente ist aktiv  --------------------------------------------------------- Keines der Elemente ist aktiv  -----------------------
                                $('#start-job-btn').html('Aufträge einlegen starten');
                                $('#start-job-btn').parent().removeClass('d-none');
                            }

                            $("#okis-app-content").off("click", "#start-job-btn").on("click", "#start-job-btn", function () {
                                GDApp.switchToCard(3);
                            })

                        }
                        $("#okis-app-content").off("click", "#btn-scan-new-order-id").on("click", "#btn-scan-new-order-id", function () {
                            GDApp.switchToCard(1);
                        })

                        toggleCollapse('#package_comment');
                    }

                }, 500);

                break;

            case 3:
                // clear Tracking state
                trackingCode                    = null;
                scannedPackageCheck             = null;
                responseCheckPaketTracking      = null;

                if ( !packageContents ) {
                    console.log('no packageContents -> new initialize');
                    await getPackageContents();
                }

                $('#card-package-scanner .btn-cancel-scan')
                    .removeClass('btn-cancel-scan btn-secondary')
                    .addClass('btn-start-scan btn-success')
                    .html('Jetzt Paket scannen')
                    .parent()
                        .removeClass('d-none');

                $('#btn-scan-next-order').parent().addClass('d-none');
                    
                const cardTitle = $('#card-package-scanner').find('.card-title');
                cardTitle.html( cardTitle.html().replace('::packageId::', `${packageId}`) );

                // load Scanner
                setTimeout(function() {
                    html5QrcodeScanner = GDApp.initializeNewScanner();
                    // html5QrcodeScanner.start({ facingMode: "environment" }, config, onScanPackageSuccess);
                }, 1000);

                $('#card-package-scanner').off('click', '.btn-cancel-scan').on('click', '.btn-cancel-scan', function() {
                    html5QrcodeScanner.stop();
                    $(this) .removeClass('btn-cancel-scan btn-secondary')
                            .addClass('btn-start-scan btn-success')
                            .html('jetzt Paket scannen');
                });

                $('#card-package-scanner').off('click', '.btn-start-scan').on('click', '.btn-start-scan', function() {
                    html5QrcodeScanner.start({ facingMode: "environment" }, config, onScanPackageSuccess);
                    $(this) .removeClass('btn-start-scan btn-success')
                            .addClass('btn-cancel-scan btn-secondary')
                            .html('Scan pausieren');
                });
                break;


            // FINAL Check Tracking code with Package ID
            case 4:
                // load Scanner
                setTimeout(function() {
                    html5QrcodeScanner = GDApp.initializeNewScanner();
                    html5QrcodeScanner.start({ facingMode: "environment" }, config, onScanLabelSuccess);
                    clog.success({title: `Gut gemacht! Bitte Scanne nun den QR-Code vom Paket ${packageId}`,message: `Im Anschluss den Trackingnbarcode um das Paket abzuschließen.`});
                }, 1000);

                $('#card-final-compare-scanner').off('click', '.btn-cancel-scan').on('click', '.btn-cancel-scan', function() {
                    GDApp.switchToCard(1);
                });
                break;

            default:
                console.log("Kein spezifisches Verhalten für diesen Schritt definiert.");

        }
    }

    /**
     * Function to handle successful QR code scans.
     * @param {string} decodedText   - The decoded text from the QR code.
     * @param {Object} decodedResult - The decoded result object from the QR code.
     */
    async function onScanPackageSuccess(decodedText, decodedResult) {
        let scannedPackageId    = decodedText;

        if (Date.now() - GDApp.lastWarningTime >= 3000) {
            GDApp.lastWarningTime = Date.now();

            if( packageId != scannedPackageId ){
                console.log('packageId', packageId);
                console.log('scannedPackageId', scannedPackageId);
                
                clog.destroy();
                clog.warning({ title: `Bitte Auftrag in Paket >>${packageId}<< einlegen!`, message: 'Der gescannte Paket- QR-Code stimmt nicht mit der Auftrags zuordnung überein.' });
            }
            else {
                
                // Auftrag digital einlegen
                const responseAPIcheckOrder = await GDApp.ajaxToOkisApi("checkPaket", { paket: packageId, auid: orderId, kuid: "", mitarbeiterid: GDApp.mitarbeiterid }); 
                console.log('responseAPIcheckOrder = ', responseAPIcheckOrder);

                // Einlegen geegenprüfen und Anzahl noch einzulegenden Aufträge prüfen.
                if (responseAPIcheckOrder == "done") {
                    GDApp.closeAllScanners();

                    await getPackageContents(packageId);

                     // Filtern der Aufträge, die noch nicht zugeordnet sind (zugeordnet == '0')
                        const unassignedOrders         = packageContents[0].filter(content => content.zugeordnet == '0');

                    // Anzahl der nicht zugeordneten Aufträge ermitteln
                        const numberOfUnassignedOrders = unassignedOrders.length;

                    if (numberOfUnassignedOrders > 0) {
                        // Es gibt mindestens einen Auftrag, der noch nicht zugeordnet ist
                        if (numberOfUnassignedOrders == 1) {
                            clog.warning({ title: `Hier kommt noch >>${numberOfUnassignedOrders}<< Auftrag rein.`, message: "Du kannst nun mit dem Einlegen fortfahren." });
                        }
                        else {
                            clog.warning({ title: `Hier kommen noch >>${numberOfUnassignedOrders}<< Aufträge rein.`, message: "Du kannst nun mit dem Einlegen fortfahren." });
                        }



                    } else {
                        // Alle Aufträge sind bereits zugeordnet
                        clog.success({ title: "Großartig! Paket fertig befüllt!", message: `Das Paket wird ${packageShippingDate} ausgeliefert.` });

                        GDApp.switchToCard(2);
                    }

                    // btn anzeigen -> nächsten Auftrag einlegen 
                    $('#btn-scan-next-order').parent().removeClass('d-none');
                    $('#card-package-scanner .btn-cancel-scan').parent().addClass('d-none');

                    $('#btn-scan-next-order').off('click').on('click', function() {
                        GDApp.switchToCard(1);
                    });
                }
                else {
                    clog.destroy();
                    clog.error({ title: 'Fehler beim verarbeiten des Pakets', message: 'Paket konnte nicht abgeschlossen werden, versuche es erneut oder wende dich bitte an die IT.' });
                }

            }

        }

    }

    async function onScanOrderSuccess(decodedText, decodedResult) {
        let scannedOrderId    = decodedText;
        
        if (Date.now() - GDApp.lastWarningTime >= 3000) {
            GDApp.lastWarningTime = Date.now();
            const responseCheckOrder = await GDApp.ajaxToOkisApi("checkForPaket2", { auid: scannedOrderId, mitarbeiterid: GDApp.mitarbeiterid }); 

            if (responseCheckOrder) {

                if ( responseCheckOrder.vorbereitet == 0 ) {
                    packageId    = responseCheckOrder.pid;
                    orderId      = scannedOrderId;

                    GDApp.closeAllScanners();

                    await getPackageContents(packageId);

                    setTimeout( async function() {
                        clog.destroy();
                        clog.success({ title: `Auftrag bitte nun in das Paket: >>${packageId}<< einlegen.` });
                    }, 500);
                    
                    GDApp.switchToCard(3);

                } else {
                    clog.warning({ title: "Paket bereits vorbereitet", message: `Paket >>${responseCheckOrder.pid}<< ist bereits als vorbereitet markiert.` });
                }

            }
            else {
                log.error('responseCheckOrder leer');
            }

        }

    }

    // Scan for Tracking Code
    async function onScanLabelSuccess(decodedText, decodedResult) {
        let scannedCode    = decodedText;

        // First Scan and Check Package ID, Then the scound code. beacouse API dont send back the trackingcode.
        // checkPaketTracking Funktion Check the Tracking Code To Package ID. Validation is Check with this function.
        if (!scannedPackageCheck && scannedCode == packageId) { 
            scannedPackageCheck = packageId;
            clog.success({title: `Super!`, message:`Bitte prüfe nun den Tracking Code vom Paket.`});
        } else if (!scannedPackageCheck && scannedCode !== packageId) { 
            if (Date.now() - GDApp.lastWarningTime >= 5000) {
                clog.warning({title: `Unerwartete Paket Nr.`, message:`Bitte prüfe den QR Code vom zuvor eingelegten Paket.`});
                GDApp.lastWarningTime = Date.now();
            }
        } else if (scannedPackageCheck) { 

            $('#card-final-compare-scanner').find('.card-header.card-title').html('Nun Tracking Barcode scannen');

            if (!responseCheckPaketTracking && scannedCode !== packageId) {
                clog.info({title: `Trackingnummer: ${scannedCode} wird überprüft.`, message: `Bitte warte...` });
                    checkPaketTrackingAwait     = true;
                    // prüfe ob Paket und Traking zusammenpasst. kein DB Abschluss!
                    responseCheckPaketTracking  = await GDApp.ajaxToOkisApi("checkPaketTracking", {paket: scannedPackageCheck, tracking: scannedCode, check: true});
                    checkPaketTrackingAwait     = null;
                clog.destroy();
                if (responseCheckPaketTracking == "done") {
                    GDApp.closeAllScanners();
                    packageContents     = null;

                    setTimeout(function() {
                        clog.success({title: `Gut gemacht!`,message: `Paket ${packageId} erfolgreich abgeschlossen.`});
                    }, 1000);

                    GDApp.switchToCard(1);

                } else if (responseCheckPaketTracking == "error") {
                    if (Date.now() - GDApp.lastWarningTime >= 3000) {
                        clog.warning({ title: "Tracking Nr. überprüfung fehlgeschlagen!", message: `Der gescannte Tracking Code stimmt nicht mit dem hinterlegten überein. Versuche es erneut oder wende dich an die IT` });
                        GDApp.lastWarningTime = Date.now();
                    }
                } else {

                    GDApp.closeAllScanners();

                    setTimeout(function() {
                        clog.error({title: `Ein unbekannter Fehler ist aufgetreten. Bitte versuche die Prüfung es erneut.`})
                    }, 1000);

                    GDApp.switchToCard(2);

                } 
            }

        }
    }

    function checkOrderItem(orderID) {
        const inputElement = $(`#${orderID}-check`);
        if ( inputElement.hasClass('checked') ) {
            // inputElement.removeClass('checked')
            //             .val('0');
            // inputElement.closest('[data-input-type="ui_check_list"]')
            //             .removeClass('checked')
            //             .find('label')
            //                 .removeClass('btn-danger-success')
            //                 .removeClass('btn-success')
            //                 .removeClass('checked')
            //                 .addClass('btn-danger');
            // clog.warning({message: `Auftrag: ${orderID} erfolgreich aus dem Paket entfernt.`});
            // clog.warning({message: `Auftrag: ${orderID} wurde schon erfolgreich eingelegt.`});
        } else {
            inputElement.addClass('checked')
                        .val('1');        
            inputElement.closest('[data-input-type="ui_check_list"]')
                        .addClass('checked')
                        .find('label')
                            .removeClass('btn-danger-success')
                            .removeClass('btn-danger')
                            .addClass('btn-success')
                            .addClass('checked');
            clog.success({title: `Gut gemacht! Auftrag: ${orderID} erfolgreich eingelegt.`});
        }
    }

    function populateJobList(packageContents) {
        // console.log('packageContents from populateJobList', packageContents);
        
        const template    = $('#job-list-ul .job-list-item.d-none').first();
        const list        = $('#job-list-ul');
        list.empty();
        list.append(template);
        packageContents[0].forEach(content => {
            let newItem    = template.clone();
                newItem.removeClass('d-none');
                newItem.html(newItem.html().replace(/id-placeholder/g, content.auid));
                newItem.html(newItem.html().replace(/label-placeholder/g, `AuNr.: ${content.auid}`));

                if (content.zugeordnet == '1') {
                    newItem.find(`#${content.auid}-check`)
                            .addClass('checked')
                            .val('1')
                            .closest('[data-input-type="ui_check_list"]')
                            .addClass('checked')
                            .find('label')
                                .removeClass('btn-danger-success')
                                .removeClass('btn-danger')
                                .addClass('btn-success')
                                .addClass('checked');
                }

            list.append(newItem);
        });
    }

    async function getPackageContents( getPackageId = '98388' ) {
        if ( !packageContentsAwait ) {
            packageContentsAwait = true;

            packageContents = await GDApp.ajaxToOkisApi("getPaketInhalt", {paket: getPackageId});

            packageContentsAwait = false;

            if (!packageContents) {
                clog.destroy();
                clog.warning({ title: "Ungültige Package-ID", message: `Package-ID: ${getPackageId}` });
                return null;
            } 
            
            packageId               = getPackageId;
            packageShippingType     = PACKAGETYPE.length > 0 ? PACKAGETYPE : ((packageContents[3] == "default" || packageContents[3] == 'Fixes Paket')
                                        ? 'Standardversand'
                                        : packageContents[3].charAt(0).toUpperCase() + packageContents[3].slice(1));   // Fahrer / Abholung
            packageShippingDate     = PACKAGEDELEVERYDATE.length > 0 ? PACKAGEDELEVERYDATE : packageContents[4];
            return packageContents;
        }
    }
    async function replacePackageCardPlaceholders() {
        if (packageContents) {
            let cardContainer 			    = $('#card-shipping-carrier');
            let packageIdPlaceholder        = "::package_id::";

            cardContainer.html( cardContainer.html().replace(packageIdPlaceholder, packageId) );


            let packageShippingTypePill     = $('#pill-package-type');
            let packageShippingDatePill     = $('#pill-package-date');

            console.log('packageShippingTypePill', packageShippingTypePill);
            console.log('packageShippingDatePill', packageShippingDatePill);
            
            const packageShippingDateColor  = packageShippingDate == 'heute'? 'text-bg-success' : 'text-bg-danger';

            packageShippingTypePill.html(packageShippingType);
            console.log('Updated packageShippingTypePill:', packageShippingTypePill.html());
            console.log('packageShippingType', packageShippingType);
            
            packageShippingDatePill.html(`Versanddatum: ${packageShippingDate}`)
                                .removeClass('text-bg-secondary')
                                .addClass(packageShippingDateColor);

            populateJobList(packageContents);

            if (packageShippingDate == 'heute') {
                // action wenn das Paket heute raus geht
                console.log('packageShippingDate', packageShippingDate);
                
                $('#start-job-btn').html('Label drucken')
                                    .parent().removeClass('d-none');
                
                console.log('deliver package();', $('#start-job-btn'));
                deliverPackage();
            } else if (packageShippingType == 'Standardversand') {
                // TODO: info, wann das Paket raus geht und btn weiter.
                clog.destroy();
                clog.warning({message: `Das Paket wird am ${packageShippingDate} versendet.`});

            }

            return true;
        } 

        return false;
    }

    async function deliverPackage() {
        $("#okis-app-content").off("click", "#start-job-btn").on("click", "#start-job-btn", async function () {

            if (!packageContents) {
                console.log("packageContents ist nicht deklariert!");
            } else {
                // Wie viele Aufträge gehören ins Paket?
                let numOrders        = packageContents[0].length;

                // 1. Zähle alle gecheckten Aufträge
                let countCheckedOrders = $('.job-list-item.checked').length;

                // 1.1 TODO: Prüfe ob alle Aufträge auch in der DB gecheckt wurden?

                // 2. Ist ein Kommentar von mindestens 5 Zeichen eingetragen?
                let comment          = $('#package_comment').find('textarea').val().trim();
                let commentLength    = comment.length;

                // 3. Wenn gecheckte Aufträge gleich Anzahl der Aufträge ins Paket ist, oder mindestens ein gecheckter Auftrag + min. 5 Zeichen Kommentar dann führe den Prozess fort.
                if ( countCheckedOrders === numOrders || (comment.length >= 5 && countCheckedOrders > 0) ) {
                    // PRINT NEW LABEL
                    const responsePrintLabel   = await GDApp.ajaxToOkisApi("printLast", { paket: packageId, mitarbeiterid:  GDApp.mitarbeiterid });
                    // Nach printLast ist das Paket und dessen Inhalt als abgeschlossen gekennzeichnet. Ohne das finale gegenchecken von Tracking und Label!

                    // clear Tracking state
                    scannedPackageCheck        = null;
                    responseCheckPaketTracking = null;

                    setTimeout(function () {
                        if (responsePrintLabel == "done") {
                            GDApp.switchToCard(4);
                        } else {
                            clog.error({ title: 'Fehler beim Drucken des Labels' });
                        }
                    }, 1000);
                } else {
                    clog.error({ title: 'Nicht alle Aufträge zu Paket hinzugefügt!' });
                }
            }

        })
    }

    async function driverPickedUpPackage() { 
        const responseFinishPickup   = await GDApp.ajaxToOkisApi("finishAbholungFahrer", { paket: packageId, tracking:  GDApp.mitarbeiterid });

        if(responseFinishPickup === "done") {
            return true;
        }
        return false;
    }

    async function customerPickedUpPackage(customerName) { 
        const responseFinishPickup   = await GDApp.ajaxToOkisApi("saveDestinationReceiverForPaket", { paket: packageId, receiver: customerName, mitarbeiterid: GDApp.mitarbeiterid });

        if(responseFinishPickup === "Empfänger aktualisiert!") {
            return true;
        }
        return false;
    }

    function toggleCollapse(targetSelector) {
        const target     = $('[href="'+targetSelector+'"]');
        let   isExpanded = $(target).attr('aria-expanded') === 'true';
        let   _comment    = $(targetSelector+' textarea').val().trim();

        console.log('toggleCollapse colled');

        if (_comment && !isExpanded) {
            console.log('initial check _expand');
            
            $(target).attr('aria-expanded', true);
            _expand();
        } else if (!_comment && isExpanded) {
            console.log('initial check _collapse');
            
            $(target).attr('aria-expanded', false);
            _collapse();
        }

        $('#okis-app-content').off('click', '[href="'+targetSelector+'"]').on('click', '[href="'+targetSelector+'"]', function(e) 
        {
            isExpanded = $(target).attr('aria-expanded') === 'true';
            _comment   = $(targetSelector+' textarea').val().trim();

            console.log('toggleCollapse click event');
            e.preventDefault();

            if (_comment && isExpanded) {
                clog.warning({ title: `Bemerkungen können nur zugeklappt werden, wenn diese leer sind!` });
                return;
            }

            if (!isExpanded) {
                _expand();
            } else {
                _collapse();
            }

            // Toggle aria-expanded attribute
            $(this).attr('aria-expanded', !isExpanded);
        }); 

        function _collapse() {
            // Collapse
            console.log('function _collapse()');
            
            const currentHeight = $(targetSelector).height();

            $(targetSelector).height(currentHeight).removeClass('collapse').addClass('collapsing');

            setTimeout(() => {
                $(targetSelector).css('height', '0px');
            }, 0);

            $(targetSelector).one('transitionend', () => {
                $(targetSelector).removeClass('collapsing').addClass('collapse').css('height', '');
            });
        }

        function _expand() {
            // Expand
            console.log('function _expand()');

            $(targetSelector).css('height', '0px').removeClass('collapse').addClass('collapsing');

            const targetHeight = $(targetSelector).get(0).scrollHeight + "px";

            // Force reflow for transition to take effect
            $(targetSelector).height(); 

            $(targetSelector).css('height', targetHeight).one('transitionend', () => {
                $(targetSelector).removeClass('collapsing').addClass('collapsed').css('height', '');
            });
        }
    }
}); 
</script>