{{-- --------------------------   NEW APP HEAD  ------------------------------- }}
  ? @app:       EXIT APP
 |* @create:    18.03.2024
 |* @author:    Stanislaw Lederhos - mail@codelederhos.de
 |* @description:
        This app is designed for the final packaging of orders with their assigned tasks. The tasks, once completed, are tagged with a QR code. 
        Similarly, the order's box is labeled with an external QR code, facilitating swift identification.
        The app allows users to allocate tasks to a previously scanned order scheduled for shipment today, 
        placing them into a packaging specifically prepared for this order.
        Upon either complete or incomplete but authorized and documented loading, a shipping label for the order is printed. 
        This label comes from a pre-declared shipping service provider. 
        The declaration and authorization for today's shipment occur within the Package Manager.
{{ -------------------------------------------------------------------------- --}}

<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' 	=> 'Paket Ausgang',
            // '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' => '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="package_id_scanner"></div>
                <input type="hidden" name="package_id_scanner" value="">
            </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ächstes Paket
                            </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-order-scanner" class="col-10 p-0 card card-glass position-relative mx-auto border-0" data-step="3">
        @includeIf('layouts.components.card_header', [
            'title' => 'Auftrags 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-secondary btn-cancel-scan mx-auto col-xl-3 col-8">
                    Scan pausieren
                </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>


{{-- collapsed Handling --}}
{{-- <script>
    $(document).ready(function() {
        $('#okis-app-content').on('click', '[href="#package_comment"]', function(e) 
        {
                e.preventDefault();

                const target     = $($(this).attr('href'));
                const isExpanded = $(this).attr('aria-expanded') === 'true';
                const comment    = $('#package_comment textarea').val().trim();

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

                if (!isExpanded) {
                    // Expand
                    target.css('height', '0px').removeClass('collapse').addClass('collapsing');

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

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

                    target.css('height', targetHeight)
                        .one('transitionend', () => {
                            target.removeClass('collapsing').addClass('collapsed').css('height', '');
                        });
                } else {
                    // Collapse
                    const currentHeight = target.height();

                    target.height(currentHeight).removeClass('collapse').addClass('collapsing');

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

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

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

                // Rotate chevron
                $(this).find('.chevron-icon').toggleClass('rotate', !isExpanded);
        });

        
    });
</script> --}}
<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 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:
                // clear Tracking state
                trackingCode                    = null;
                scannedPackageCheck             = null;
                responseCheckPaketTracking      = null;
                packageContents                 = null;
                
                // load Scanner
                html5QrcodeScanner = GDApp.initializeNewScannerV2(
                    'package_id_scanner',            // Element-ID
                    'off',                           // Initialzustand
                    'Qr-code jetzt scannen',         // Start-Text
                    'Scan pausieren',                // Pause-Text
                    onScanPackageSuccess             // Callback Function für erfolgreiche Scans
                );

                // console.info('API URL:', GDApp.GDAppApiUrl);
                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.` });
    
                                        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 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:
                // load Scanner
                setTimeout(function() {
                    html5QrcodeScanner = GDApp.initializeNewScanner();
                    html5QrcodeScanner.start({ facingMode: "environment" }, config, onScanOrderSuccess);
                }, 1000);

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

            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(2);
                    
                });
                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 ( getPackageContents(scannedPackageId) ) {

            GDApp.closeAllScanners();

            GDApp.switchToCard(2);
        }
    }

    async function onScanOrderSuccess(decodedText, decodedResult) {
        let scannedOrderId    = decodedText;
        
        // Validate the scanned package ID
        if (!packageContents) {
            clog.warning({ title: "Keine Paketinhalte verfügbar", message: `Keine Auftragsinformationen vorhanden.` });
            return;
        }

        // Check if scanned order ID is part of package contents
        let isOrderInPackage     = packageContents[0].some(item => item.auid === scannedOrderId);

        if (Date.now() - GDApp.lastWarningTime >= 3000) {
            const responseCheckPaket = await GDApp.ajaxToOkisApi("checkPaket", { paket: packageId, auid: scannedOrderId, kuid: "", mitarbeiterid: GDApp.mitarbeiterid }); 
            GDApp.lastWarningTime = Date.now();
            console.log('responseCheckPaket = ', responseCheckPaket);
            
            if (responseCheckPaket == "done") {
                const responseGetContens = await GDApp.ajaxToOkisApi("getPaketInhalt", {paket: packageId});
                packageContents = responseGetContens;
            }
        }
        //done or empty

        if (!isOrderInPackage && responseCheckPaket != "done" && !responseGetContens) {
            if (Date.now() - GDApp.lastWarningTime >= 3000) {
                clog.warning({ title: "Auftrag gehört nicht in das Paket!", message: `gescannte Auftrags Nr: ${scannedOrderId}` });
                GDApp.lastWarningTime = Date.now();
            }
        } else {
            GDApp.closeAllScanners();

            setTimeout(function() {
                clog.destroy();
                checkOrderItem(scannedOrderId);
            }, 500);
            
            GDApp.switchToCard(2);

        }
    }

    // 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;

            if ( !packageContents ) {
                clog.info({title: `Paket: ${getPackageId} wird überprüft.`, message: `Bitte warte.` });
            }

            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 false;
            } 
            
            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 true;
        }
    }
    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' && packageShippingType == 'Standardversand') {
                // action wenn das Paket heute raus geht
                console.log('packageShippingDate', packageShippingDate);
                
                $('#start-job-btn').html('Label drucken')
                                    .parent().removeClass('d-none');
                
                deliverPackage();
            } else if (packageShippingType == 'Standardversand') {
                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>